Lottie 기반 애니메이션 Json Export
AirBnb가 사용했던 Lottie 라이브러리 / 웹 애니메이션 기술
네이버 데뷰 2018 영상 중 발췌
Cake 앱 / Java Script 기반 / React Native로 웹개발자가 - 한달만에 만들어낸 앱 (iOS / 안드)
https://tv.naver.com/v/4578325
NAVER Engineering | React Native: 웹 개발자가 한 달 만에 앱 출시하기
tv.naver.com
전체 플레이타임 : 44:24 / 그중 35분 정도에 나오는 내용
모바일에서 웹에 올릴 애니메이션을 미리 검사할 수 있는 Lottie 서비스. json이나 html5로 익스포트된 결과물을 테스트할 수 있다고 고한다. 네이버 케이크 개발팀도 요걸 사용했다.
https://www.lottiefiles.com/
애니메이션 After Effect 파일 -> HTML5 익스포트 관련 기술문서. 2018년 6월자 문서다.
네이버 케이크 팀은 에펙 파일을 Json으로 뺐다고 하니, 분명 관련 해외 관련 문서도 있을것같다.
https://www.creativebloq.com/how-to/export-after-effects-animations-to-html5
좀 더 찾아보니 Airbnb에서 이 기술을 사용했다고한다. 리액트 프레임워크에 Lottie 서비스를 추가했고. json 기반의 에펙파일을 뽑아다가 연결했다고한다.
https://github.com/airbnb/lottie-web
소개페이지에 가보면 네이버에서 발표한 자료의 영상과 동일한 애니메이션이 나온다. 네이버 케이크 앱 쪽에서 동일 라이브러리를 사용했단 이야기.
웹쪽 애니메이션 하고싶어하는 사람들은 이제 살판났네. 애펙으로 루핑만 잘해줘도 왠만한 건 다 사용할 수 있단 이야기니까. 자세한 라이브러리 스펙은 확인을 해봐야겠지만. React가 이런 기능 지원이되는데, 경쟁상대인 Vue나 Angular가 이걸 넋놓고 보고있을리가 없다. 분명 이건 공통 필수사항이 될 가능성이 높아보인다.
웹 기술 선도중인 Airbnb 쪽에서 썼다고하니. 관련 자료를 좀 더 찾아봐야겠다.앞으로 UI디자이너들은 당장에 웹 기술 기반만 되면 UI 모션쪽을 사용할 수 있는 환경이 만들어졌다는 이야기니까.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
