스터디/Prototyping 2018. 7. 27. 22:39

[Framer] 스터디 시작

프로토타이핑 스터디를 위해 프로토파이와 프레이머 트라이얼 버젼을 깔아서 테스트 중이다. 


여러 블로그에 있는 글들을 둘러보고서는 프레이머도 프로토파이처럼 딱히 첫 단계부터 공부안하고 예제 바꿔가면서 바로 습득할 수 있을줄 알았는데

문법이나 다루는 방법이 익숙하지 않아서 그냥 첨부터 차근차근 하기로 맘을 바꿨다. 

프레이머 홈페이지 에 있는 튜토리얼로 시작하기로 했음



Framer > Tutorial > Intro Course

https://framer.com/getstarted/tutorials/designershow



#design


Tour the UI 06:19


Shapes and Frames  15:34


Shapes and Text 09:16  


Images and Effects 11:31


Add Code to Design 07:19


Share Your Prototype 03:23


#code 


Build Layers in Code 02:36


Layout with Loops 05:37


Arrays & Data 03:59


Events to Looped Layers 06:45


Functions & Code Reusability 05:30





Crash Course

https://framer.com/getstarted/tutorials/crashcourse



Intro and Design Tab 03:50


Layer Targeting, Layout, and Hierarchy 04:33


Features and Shortcuts 02:22


Importing Designs from Sketch 01:20


Intro to Code and Workflow 01:47


Artboards and Layers 05:15


Animation 06:54


State  07:54


Events 04:30


Draggable Layers 05:05


Pinchable Layers 03:23


Flow Component 09:30


Scroll Component 07:19


Page Component 03:18


Slider Component 02:39


Sharing 01:20


Adding Sounds   07:42


Floating Action Button 16:36









'스터디 > Prototyping' 카테고리의 다른 글

[프로토파이] 학생할인제도 문의내용  (0) 2019.04.18
스터디/Unity 2018. 6. 30. 19:20

[Ardunity] 아두유니티

아두이노 + 유니티 

비주얼 프로그래밍 할수있어서 좋은듯

애셋 설치하면 들어있는 예제 확인필!



ARDUnity Basic

https://assetstore.unity.com/packages/tools/input-management/ardunity-basic-60643


DOC


https://sites.google.com/site/ardunitydoc/


아두유니티 시작하기


http://ardunityproject.blogspot.com/2016/06/ardunity_29.html


https://www.educloud.co.kr/archives/8446


ARDUnity를 이용하여 유니티(Unity)의 Directional Light 속성에 따라 아두이노 LED 제어하기

http://pinkwink.kr/885







포트넘버 설정 꼭!

그리고 패키지 덮어쓸때 복제 노노.. 꼭 교체 할것.



인사이트/전시 2018. 1. 6. 01:50

2015년 전시 결산

전시
분류번호날짜제목장소전시 링크
전시1150108로우테크놀로지시립미술관http://sema.seoul.go.kr/korean/exhibition/exhibitionView.jsp?iPage=1&iListCont=10&sSrchType=x&sSrchValu=&iTcnt=2&iPageCont=10&iCurrPage=1&pDateGubun=PREV&seq=379&sStartDate=&sEndDate=&sSrchValuEx=%EB%A1%9C%EC%9A%B0
전시2150108아프리카 나우시립미술관http://sema.seoul.go.kr/korean/exhibition/exhibitionView.jsp?iPage=1&iListCont=10&sSrchType=x&sSrchValu=&iTcnt=2&iPageCont=10&iCurrPage=1&pDateGubun=PREV&seq=379&sStartDate=&sEndDate=&sSrchValuEx=%EB%A1%9C%EC%9A%B0
전시3150111즐거운 나의 집아르코미술관http://www.arkoartcenter.or.kr/nr3/?c=2/12
전시4150129인상파의 고향, 노르망디예술의 전당http://www.sac.or.kr/program/schedule/view.jsp?seq=18238&s_date=20141122
전시5150205무나씨 : 정말이지 너는구슬모아당구장 갤러리http://daelimmuseum.org/guseulmoa/index.do
전시6150404빠키 : 불완전한 장치구슬모아당구장 갤러리http://daelimmuseum.org/guseulmoa/index.do
전시7150508진달래, 박우혁 : 사자, 마녀, 그리고 옷장구슬모아당구장 갤러리http://daelimmuseum.org/guseulmoa/index.do
전시8150508로봇에세이, 정원원, 인터플레이 등국립현대미술관http://www.mmca.go.kr/exhibitions/exhibitionsDetail.do?menuId=1030000000&exhId=201504230000245
전시9150509루이비통 시리즈 2 광화문 D타워http://kr.louisvuitton.com/kor-kr/fashion/series-2-exhibition#/exhibition
전시10150509우주생활일민미술관http://ilmin.org/education/lecture/4180-2/
전시11150509Butterfly 2015 : Wearable Technology Art아트센터 나비http://www.nabi.or.kr/project/current_read.nab?list_num=1&idx=487&
전시12150517하나에서 만까지이응노 미술관http://ungnolee.daejeon.go.kr/
전시13150622제로랩 : 사선에 대하여구슬모아당구장 갤러리http://daelimmuseum.org/guseulmoa/index.do
뮤지엄14150624오설록 티뮤지엄제주http://www.osulloc.com/tMuseum.do?method=bbsEventList&tpUpCd=BD07
뮤지엄15150625테디베어 뮤지엄제주http://www.teddybearmuseum.com/
전시16150702페르난도 보테로 전예술의 전당http://www.sac.or.kr/bannerPage.jsp?htmlURL=/lab2015/botero/index.jsp
전시17150706ESPRIT DIOR : 디올정신DDPhttp://www.dior.com/beauty/ko_kr/dp/espritdior.html
전시18150719앤디워홀 라이브DDPhttp://www.ddp.or.kr/EP010001/getDetailPage.do
전시19150801신기계미학신세계갤러리http://department.shinsegae.com/culture/gallery/displayinfo/displayinfo_view.jsp?store_cd=D01&seq=4481
전시20150802김미수, 김영준 : 있음과 없음구슬모아당구장 갤러리http://daelimmuseum.org/guseulmoa/index.do
뮤지엄21150916지질박물관대전http://museum.kigam.re.kr/
전시22151004조규형 : 그림서체 - 키보드 장단에 변신하는 한글구슬모아당구장 갤러리http://daelimmuseum.org/guseulmoa/index.do
전시23151014에꼴 드 이응노 - 파리동양미술학교이응노 미술관http://ungnolee.daejeon.go.kr/
전시24151017아티언스대전한국표준과학연구원http://blog.naver.com/artiencelab
페스티벌, 전시25151017대전사이언스페스티벌 대전 엑스포 시민공원http://www.djsf.kr/main/main.htm
페스티벌, 전시26151126ACT FESTIVAL국립아시아문화전당http://actcenter.kr/ko/
전시27151225오민 : TRIO구슬모아당구장 갤러리http://daelimmuseum.org/guseulmoa/index.do
전시28151226타이포잔치문화역서울 284http://typojanchi.org/2015/

나름 바지런하게 대전과 서울을 오가며 전시 보러 다녔었던 2015년

오늘하루/연구토끼 2018. 1. 6. 00:35

[연구토끼] 모르가즘

내가 뭘 아는지 뭘 모르는지도 알수없는 이 순간 👄🔥




[Lottie] JSON 애니메이션 파일 공유 커뮤니티 - LottieFiles



애펙 애니메이션을 JSON으로 바꾸어 여러가지 플랫폼에 적용할 수 있게 해주는 Lottie 플러그인의 웹사이트 LottieFiles

요기 가면 애니메이션 테스트 뿐만 아니라 유저들이 올린 파일을 마음껏 다운 받을 수 있다.

실제 업무에서는 새로운 애니메이션 이펙트가 필요할 경우, 

개발자님이 이 사이트에서 대략 비슷한 느낌 혹은 그냥 본인이 자주 보기에 좋은 (맘에 드는) 이펙트를 다운받아 적용해 놓으시면

나는 그 화면 내에 적용된 더미를 보고 새로운 애니메이션 파일을 만들어 드리는 식으로 작업한다

여러모로 도움을 많이 받는 사이트라 나도 연습도 할 겸, 누군가에게 도움이 되고 싶기도 하고, 또 은근히 우리 앱 키워드를 끼워넣어서 홍보도 할겸 로티파일 커뮤니티에 파일을 올리기 시작했다. 


https://www.lottiefiles.com/

파일을 업로드하면 몇시간~ 몇일 내로 관리자의 승인이 나게 되고, 로티파일 웹사이트와 로티 앱이 애니메이션 리스트에 보이게 된다

기본적으로는 JSON 파일을 올리게 되어있고, Aep 애프터 이펙트 파일을 같이 올리면 맘껏 수정해서 쓰시오! 라는 뜻이 된다

만들기 귀찮은 자잘한 이펙트는 Aep 파일로 받아두었다가 참고해서 만들기에 좋다



일단은 UFO 모양 때문에 범용적으로 쓰이기엔 적합하지 않을 거라는건 알지만 당분간은 앱 내에서 쓰인 디자인 위주로만 업로드하고,

 일반적인 디자인들은 나중에 개인 작업으로 따로 진행할 예정 

그래도 오늘 올린 애니메이션은 애펙 파일도 같이 업로드 해보았음


아직 미개척(?) 분야의 커뮤니티여서 그런지 벌써 top contributors에 올랐다..오..


프로필에는 회사 아트웍전용 인스타 계정만 올려두었는데 프로필뷰도 조금 나오는듯 

나는 그냥 다운로드만 하고 남꺼는 잘 안열어봤는데 .. 반성중(?)

본문에 마크다운 사용 가능하다고 해서 난생처음 써보기도 하고.

한땀한땀 만든 2018 새해 맞이 애니메이션이 나름 반응이 좋아서 다행이다





[Sketch] 스케치 이미지를 일러스트로 불러오는 옵션들 테스트



일러스트레이터에서 제작한 이미지를 스케치로 불러오거나, 스케치에서 제작한 이미지를 일러스트로 불러올때

그리고 이런 이미지들을 애프터 이펙트로 다시 불러와 사용할 때 몇가지 불편한 일들이 생긴다 ㅠㅠ

매번 나를가장 번거롭게 하는게 스케치에서 만든 이미지를 다른데서 사용할때 오브젝트를 감싸는 빈 사각형이 클리핑 마스크로 씌워지면서 그 사각형들을 일일히 제거하는 것.

사각형을 걷어내다보면 오브젝트가 하나씩 떨어져나가기도 하고 내가 원하는 그룹핑이 깨지기도 한다. 

때로는 스케치 상에서 회전값을 가지고 있는 오브젝트의 경우 애펙에서 열어보면 회전값이 0으로 되어있어서 일일히 패스를 열어 다시 수정해줘야 한다.

오늘 스케치 이미지를 일러스트로 불러와서 이미지를 수정한 다음에 (스케치는 아직도 자유로운 & 미세한 작업 하기에는 넘 불편하다) 애펙으로 불러가는 프로세스를 거치면서 몇가지 테스트를 해봄


방법 1 : 원하는 오브젝트를 선택하여 EPS로 Export 

방법 2: SVG 로 Export

방법 3 : PDF로 Export

방법 4 : 스케치에서 복사하여 일러스트 새 파일에서 붙여넣기


익스포트 해보면 세 가지 방식이 캔버스 크기도 다르게 잡히는걸 알 수 있다



첫번째, EPS로

캔버스에서 원래 있던 위치는 무시하고 크기도 무시하고 클리핑마스크 사각형 있음

스케치 크기 300 300 이었을때 일러스트 400 400으로 나오고, 스케치 50 50 인데 일러스트 300 300 으로 나온다. 기준이 뭔지 모르겠음



두번째 PDF, 

오브젝트 사이즈 만큼만 캔버스 사이즈가 맞춰서 들어온다.

그런데 외곽선 모드로 들어가보면 원래 스케치 캔버스 사이즈와 위치를 가늠할수는 있게 되어있음

클리핑 마스크 사각형 있음




세번째,  SVG

딱 오브젝트만 깔끔하게 뽑아오려면 SVG로 익스포트 하는게 가장 좋은 것 같다

오브젝트 사이즈만큼만 캔버스 사이즈 리사이징 되고, 클리핑 마스크 사각형 없음



네번째, 스케치에서 복사하여 일러스트 새 파일에서 붙여넣기

의외로 급할때 가장 자주 하는 방식인데, 더럽게 사각형들이 따라온다



추가 테스트 

SVG로 스케치 캔버스 전체를 익스포트 해보니, 스케치 내에서 그룹핑한대로 그대로 export 된다

이건 나중에 애펙에서 작업할때도 꼭 남아있는게 좋다



결론 : 급하더라도 SVG로 저장한 다음 불러오는 습관을 들여야겠다








[BodyMovin] 애펙을 JSON으로 바꿔주는 플러그인 업데이트 소식


Bodymovin

New version of Bodymovin

Version 5.1.1 (January 2018)


Big performance improvement for all web renderers. Very recommended to upgrade.
Some bug fixes.
Happy New Gregorian Calendar Cycle :)

Changes in this version:

## V 5.1.1
- Text Layer keyframed fix

Upgrade instructions:

To upgrade please refer to this FAQ: How to upgrade "Name Your Own Price" products.


이메일로 Bodymovin 플러그인 업데이트 소식이 날아왔다!

Lottie 와 Bodymovin 덕에 안드로이드, iOS, 웹에 쓰이는 애니메이션과 이펙트 작업에 여러모로 많은 도움을 받는 중이다

이번에는 전반적인 웹 렌더링쪽 퍼포먼스 향상과, 텍스트 레이어 관련 버그를 수정했다고 한다

실제로 돌려봤는데 이전과 어떤 점이 다른지는 정확히 모르겠으나 그냥 감사함


https://aescripts.com/bodymovin/

애프터 이펙트 플러그인이나 스크립트를 다운받을수 있는 aescripts로 가서 

좌측에 20달러라고 적힌 곳에 원하는 금액을 넣고, (0이라고 넣어도 된다) 장바구니에 넣은 후,

결제프로세스를 거치면 된다

유료로 구매하지 않고 원하는 금액을 지불하는 방식을 "Name Your Own Price" 제품이라고 하는데,

이런 제품은 모두 업그레이드시 새로 구매를 하는 프로세스를 거치는것이 규정이다.

업그레이드시 감사의 뜻으로 후원을 더 할수도 있으니까? 0ㅁ0


다운받은 후 ZXP Installer 로 설치하고 애펙을 재실행하면

Extensions 패널에 잘 들어감






스터디/UX, HCI, Interaction 2017. 12. 19. 15:43

[Sketch] 스케치 파일의 레이어를 애프터 이펙트로 Sketch2AE


맥에서 스케치 파일의 레이어를 애프터 이펙트로 옮겨주는 플러그인 Sketch2AE

https://google.github.io/sketch2ae/

이런 훌륭한건 도대체 누가 만드나 봤더니 역시 구글이었다..

디자이너들의 암을 깨끗히 낫게 하여주시는 감사한 존재








1. 다운받아서 스케치 플러그인 설치 - 새로운 파일에 아트보드에 원하는 스케치 레이어 넣고 플러그인 메뉴에서 세이브 






2. jsx 파일을 응용프로그램 내부에 애펙 ScriptUI Panels 폴더에 넣기! - 아까 저장한 sketchae 파일 불러오기

근데 여기서 json parse 에 에러가 뜬다 

........


여러 시도를 해봤는데

안보이게 가려둔 안쓰는 레이어는 다 지우고.. 

텍스트는 왠만하면 create outline (그럼 텍스트 애니메이션은 애펙에서 못해보는건가)


레이어를 한꺼번에 다 옮기는것보다는 그룹별로 따로 옮겨서 콤포지션을 만들고 그걸 합쳐서 하나의 파일로 만드는걸 추천!



-- 

지금 가장 확실한 방법은 텍스트 레이어를 깨는건데

홈페이지 샘플 영상을 보면 텍스트가 그대로 살아있다. 폰트와 텍스트를 영어로 바꾸었는데도 효과 없음

그냥 create outline 이 답인듯 

어차피 bodymovin - lottie 로 가려면 텍스트를 깨서 하는게 낫겠다 싶기도 하다.

아래는 깃허브에 로그인데 이번 버젼에서 따옴표 안에 텍스트 에러나는거랑 빈 오브젝트 에러가 고쳐지긴 했다고 한다




오늘하루/음악 2017. 12. 14. 15:51

2017년 12월 Soundcloud

사운드 클라우드 들어가면 평상시에는 - 좋아요 누른 곡들 랜덤 재생하고, 탐색 기간에는 Discover 눌러서 내 좋아요 기반으로 추천되는 곡들 쭉쭉 넘겨 들으면서 좋아요 누르는 작업을 거쳐서 새로운 플레이 리스트를 만드는걸 좋아하는데 어느날부터 Discover에 들어갔더니 이렇게 바꼈다. 

MORE OF WHAT YOU LIKE는 뭐야 내가 좋아요 누른거가 그냥 뜨는거잖아.. 사운드 클라우드 커뮤니티에서 뜨는 곡들은 나랑 안맞는데.. 

하면서 빈정대고 있었는데 Artists you should know 틀었는데 다 맘에든다 뭐지!!!  열심히 들어댄 보람이 있구만




'오늘하루 > 음악' 카테고리의 다른 글

2017년 12월 Last FM  (0) 2017.12.10
2016년 6월 Last FM  (1) 2016.06.29
2016년 3월 Last FM  (0) 2016.03.31
2015년 12월 Last FM  (0) 2016.01.05
2015년 11월 지니뮤직  (1) 2015.11.16
오늘하루/음악 2017. 12. 10. 15:04

2017년 12월 Last FM


간만에 Last FM 캡쳐. 너무 오랜만이라 90일 기준으로 봤다

honne 의 just dance 가 높은 이유는 다름 아니라 지니뮤직에서 일단  플레이리스트를 실행하면 리스트상 젤 첫곡이 재생되고 그 다음에 내가 랜덤 플레이로 누르면 그 다음부터 랜덤 순서로 재생이 되는데 이때 매번 첫곡으로 얻어걸리는데 just dance.. 고치기 귀찮아서 40번가까이 그냥 그렇게 틀었다는거였다

첨엔 좋은지 모르고 그냥저냥했는데 매번 음악 플레이의 출발을 저곡으로 하다보면 그냥 중독됨

블로그에 방문해주신 손님이 지니뮤직 웹플레이어 재생목록을 last fm으로 scrobble할수있는 플러그인을 만들어두셨다고 알려주셔서 

여름에 두세달 가량 지니 유료 결제해서 '행복하게' 사용하다가 어느날 지니가 새로 리뉴를 하면서 플러그인이 먹통이 됐다

그래서 그달 바로 탈퇴.

다시 soundcloud로 돌아왔는데 플레이리스트 관리할 시간은 없고 그냥 그때그때 하트 누른거 랜덤으로 잘 듣고있는중

아무튼 soundcloud를 즐겨듣게 된 이후로 다양한 아마츄어 아티스트나 디제이들을 접하게되면서 아티스트 숫자가 거의 두배로 급 뛰었다




'오늘하루 > 음악' 카테고리의 다른 글

2017년 12월 Soundcloud  (0) 2017.12.14
2016년 6월 Last FM  (1) 2016.06.29
2016년 3월 Last FM  (0) 2016.03.31
2015년 12월 Last FM  (0) 2016.01.05
2015년 11월 지니뮤직  (1) 2015.11.16