[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 패널에 잘 들어감






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


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

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

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

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








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






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

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

........


여러 시도를 해봤는데

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

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


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



-- 

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

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

그냥 create outline 이 답인듯 

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

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




[HCI] Radical Atoms : hiroshi ishii, MIT MEDIA LAB

올해 오스트리아에서 열리는 Art Electronica 에서 실시간 라이브로 MIT media lab의  Hiroshi ishii 교수님의 세미나를 보여줘서 잠시 한던 일을 멈추고 구경중

요즘 Tangible 쪽 논문을 많이 보고있는데 이미 이 랩에서는 이 토픽도 옛날 과거가 되어버렸다. 

GUI > TUI > RADICAL ATOMS의 Evolution에서  아직 Radical Atoms라는 단어가 아무리 자꾸 봐도 확 와닿지 않는 이유는 내가 이제 겨우 GUI에서 TUI로 넘어가 공부하고 있는 단계이기 때문이겄지.. 어서 공부해서 담 계단을 올라가야지

강연에서는 이미 논문과 영상으로 본적있는 프로젝트들을 소개하고 있긴하지만, 큰 컨텍스트 안에서 흐름을 볼수있어서 좋았음 

페스티벌 현장에서는 20주년 기념으로 옛날 대표 프로젝트 몇개들을 스페셜 에디션으로 다시 만들어서 전시도 하고 새로운 컨셉들도 선보이고 있는듯..

언제쯤 직접 가볼수있을까...

http://www.aec.at/radicalatoms/en/live/ 






[논문요약] Tiled-display 환경에서 시나리오 기반의 상호작용 : 스마트폰 인터페이스를 활용한 상호작용 디자인


Tiled-display 환경에서 시나리오 기반의 상호작용 : 스마트폰 인터페이스를 활용한 상호작용 디자인 

정승효, 2012

석사학위논문

[링크] 






타일드 디스플레이(Tiled-display)


여러 대의 디스플레이를 통합하여 하나의 큰 디스플레이로 사용하는 방법으로 단일 디스플레이에서 표현할 수 없는 초 고해상도 이미지를 표현할 수 있는 플랫폼

초 고해상도 이미지를 만들어내는 대용량 데이터들을 유기적으로 동기화하는 미들웨어가 필요함


연구 목적


스마트 디바이스를 가진 사용자가 타일드 디스플레이가 어떻게 상호작용하는지 방법 제안

1. 기존 타일드 디스플레이 시스템의 발전, 제안된 상호작용 방법들과 기존 공공 디스플레이와 인간의 상호작용 연구들의 장단점을 분석하여 시스템 설계 위한 기본적인 조건 도출

2. 적용 예상 분야 전문가와 인터뷰

3. 인터뷰 기반으로 사용시나리오아 인터랙션 디자인 도출

4. 시스템 구현과 사용자 테스트를 통해 시스템의 유효성 검증


연구 문제 정의

1. 공공 상황 활용 시나리오 : 인터뷰 통한 페르소나 및 시나리오

2. 사용자와 디스플레이 거리 상관없이 상호작용가능하도록

3. 단점인 베젤을 상호작용하는 정보 구분 단위로 사용

4. 다수의 사용자 상황에서 전체 상황(Context)를 볼 수 있으면서 개개인이 좀더 집중하고 있는 곳 (Focus)를  함께 다룸


전문가 인터뷰


1. 의료환경 : 여러가지 데이터를 다수의 참여자가 각각 컨트롤 할수있는 환경

2. 스마트 교육 환경 : 협동, 태블릿 PC 매칭

3. 전시 환경 : 작가와 관객이 동시에 참여, 드로잉 및 꼴라쥬



타일드 디스플레이에 필요한 상호작용 방식


1. Upload : 특정 타일에 특정 콘텐츠를 업로드 할 수 있다

2. Delete : 지울 수 있다

3. Move : 타일 단위로 컨텐츠 이

4. Pick & Switching : 타일 선택, 선택한 타일의 컨텐츠를 다른 타일로 옮길 수 잇다

5. Sizing up & Down : 한 타일에 있는 이미지를 전체 타일 크기로 바꾸거나 전체 타일 크기의 이미지를 하나의 타일 크기로 줄일 수 있다

6. Drawing : 특정 타일 또는 전체 디스플레이를 하나의 캔버스로 그림 그리기 


시스템 구현






  1. 컴퓨터 : 서버 컴퓨터는 스마트폰에서 들어오는 상호작용 정보를 해당 클라이언트에게 전달하는 역할을 한다. 클라이언트 컴퓨터들은 각각에 해당하는 정보가 들어왔을 때 해당 디스플레이에 상호작용 결과를 출력한다.
  2. 무선 네트워크 : IEEE 802.11n 규격은 이론적으로 최대 300Mbps 를 지원한다. 무선통신 속도를 최대한으로 사용하기 위해 무선공유기(ipTIME N608)를 직접 서버 컴퓨터에 연결하여 스마트폰과 서버의 원활한 통신환경을 구축하였다.
  3. 시스템 소프트웨어 : 서버와 클라이언트는 프로세싱으로 개발
  4. 서버 프로그램 : SAGE처럼 클라이언트들로부터 리소스를 제공받은 상태에서 서버에서 모든 계산이 이루어지고 픽셀 단위로 이미지를 분배시키는 방식과 CGLX나 MPE와 같이 시간과 공간적인 위치만 동기화 시켜주는 두 가지 방식 중 후자. 서버에서는 두 가지 통신 라이브러리를 사용하는데 하나는 프로세싱에서 기본적으로 제공해주는 net 라이브러리로 서버와 클라이언트간 통신을 지원한다. 다른 하나는 oscP5 라이브러리로 서버와 스마트폰간 통신을 지원한다. 서버는 매 프래임마다 정보를 모니터링하고 스마트폰으로부터 정보가 들어왔을 때 그것을 클라이언트에게 전달해주는 역할을 한다
  5. 클라이언트 프로그램 : 클라이언트 프로그램은 서버로부터 전달받은 정보를 처리해 디스플레이에 표시하는 역할을 한다. 6 대의 클라이언트 컴퓨터에서 실행되는 프로그램은 동일하며 위치좌표 영역을 처리하는 부분만 다르다. 각 클라이언트들은 해당되는 영역에 대한 위치좌표를 가지고 있으며 입력 받은 위치정보가 그 좌표범위 내로 인식되었을 때만 작업을 처리하여 디스플레이 상에 결과를 표시해주고 해당 범위를 넘어가는 위치정보는 처리하지 않고 무시한다.
  6. 스마트폰 어플리케이션 


실험 및 분석


1. 과업 1 이미지 퍼즐 맞추기 : 시각적인 가이드 라인을 주는 것이 Pick & Switching 상호작용을 하는데 도움이 되는지를 알아보기 위한 것이다. NASA-TLX 이외에도 수행시간과 과업을 완료하기 위한 시도 횟수 등의 데이터를 추가로 수집해 정량적 평가에 사용

2. 과업 2  그림 그리기 : Focus+Context 시각화 방법을 사용해 그것이 Drawing 상호작용을 하는데 도움이 되는지를 알아보기 위한 것이다. 인터페이스와 스크린의 해상도 차이에서 올 수 있는 문제점을 해결할 수 있는지 알아보는 것이 목적이고 수행시간과 정확도 데이터를 수집하여 정량적 평가에 사용



앞으로의 연구 과제 및 방향


원격 상황에서의 제어

NUI 등 다양한 인터페이스 설계

3차원 그래픽 표현

다양한 활용 시나리오 제시 






기존 연구 현황


(1) 타일드 디스플레이 시스템 


다수의 디스플레이를 하나의 시스템으로 연동. 이미지 생성, 인터랙티브 그래픽 및 영상 랜더링 이슈 : 

일리노이 대학 EVL (electronic visualization laboratory) : SAGE,Lambda vision, Lambda table, Geo Well

L. Renambot, A. Rao, R. Singh, B. Jeong, N. Krishnaprasad, V. Vishwanath, et al., "Sage: the scalable adaptive graphics environment," in Proceedings of WACE, 2004, pp. 2004-09.

L. Renambot, A. Johnson, and J. Leigh, "Lambdavision: Building a 100 megapixel display," in NSF CISE/CNS Infrastructure Experience Workshop, Champaign, IL, 2005.

C. Krumbholz, J. Leigh, A. Johnson, L. Renambot, and R. Kooima, "Lambda table: high resolution tiled display table for interacting with large visualizations," in Proceedings of 5th Workshop on Advanced Collaborative Environments, Redmond, Washington, 2005

A. Johnson, J. Leigh, P. Morin, and P. Van Keken, "Geowall: Stereoscopic visualization for geoscience research and education," Computer Graphics and Applications, IEEE, vol. 26, pp. 10-14, 2006.


 

상호작용 이슈 : Ball North  사람의 물리적인 움직임으로 디스플레이 위의 다수의 컨텐츠와 상호작용, 

R. Ball and C. North, "Effects of tiled high-resolution display on basic visualization and navigation tasks," in CHI'05 extended abstracts on Human factors in computing systems, 2005, pp. 1196-1199.

R. Ball, C. North, and D. A. Bowman, "Move to improve: promoting physical navigation to increase user performance with large displays," in Proceedings of the SIGCHI conference on Human factors in computing systems, 2007, pp. 191-200.

D. Lee, S. A. Munson, B. Congleton, M. W. Newman, M. S. Ackerman, E. C. Hofer, et al., “Montage: a platform for physically navigating multiple pages of web content," in Proceedings of the 27th international conference extended abstracts on Human factors in computing systems, 2009, pp. 4477- 4482.


스마트폰 인터페이스 사용 : 다수의 사용자와 상호작용 장치. 유기적인 협업 

M. Beaudouin-Lafon, S. Huot, M. Nancel, W. Mackay, E. Pietriga, R. Primet, et al., “Multisurface Interaction in the WILD Room," Computer, vol. 45, pp. 48-56, 2012.

K. Ponto, K. Doerr, T. Wypych, J. Kooker, and F. Kuester, "CGLXTouch: A multi-user multi-touch approach for ultra-high-resolution collaborative workspaces," Future Generation Computer Systems, vol. 27, pp. 649-656, 2011.



(2) 퍼블릭 디스플레이 시스템


분류


Public Information Display (공공장소에서 대중 상대로 정보 제공 / Collaborative Display (공공장소에서 아이디어 발표 분석 및 교환) 


시스템과 사용자간 상호작용




사용자와 디스플레이 사이의 거리에 따른 상호작용 : Hallo Wall  (RFID 기술, Ambient Zone, Notification Zone, Cell Interaction Zone) -> 이후 Proximity라는 개념 사용

모바일 인터페이스를 활용한 디스플레이 제어 : 내장된 카메라 위치 추적하여 변화값으로 제어하는 방식, 가속도 센서 변화로 특정행위 인식하는 방식. 다수의 포인터가 혼재됨, 

        실시간 비디오를 이용하는 상호작용 방식

S. Boring, S. Gehring, A. Wiethoff, A. M. Blöckner, J. Schöning, and A. Butz, "Multi-user interaction on media facades through live video on mobile devices," in Proceedings of the 2011 annual conference on Human factors in computing systems, 2011, pp. 2721-2724.

>   주변의 대형 디스플레이를 하나의 마커로 사용하고 스마트폰 카메라로 실시간 인식후 그 디스플레이 안에 그림을 그림

S. Boring, D. Baur, A. Butz, S. Gustafson, and P. Baudisch, "Touch projector: mobile interaction through video," in Proceedings of the 28th international conference on Human factors in computing systems, 2010, pp. 2287-2296.

> 콘텐츠 선택 및 이동