by
Jan 19. 2021
로티(lottie): 애니메이션을 코드로 만들자(1)
디자인 공부하기
지난 여름, 1개월간의 해커톤을 하면서 gif가 굉장히 오래된 압축 방식이기 때문에 여러가지 문제를 야기할 수도 있다는 것을 알게 되었다. (이를 테면 용량이 크다던가.. 해상도가 낮다던가..) 그래서 'lottie'를 처음으로 사용하게 되었다. 아예 처음 들어보는 라이브러리였기 때문에 이에 대한 스터디가 필요했다. 이 글은 아예 모르는 사람들을 위해 작성하는 글이다.
공식 홈페이지: https://lottiefiles.com/
GIF의 단점
이미지를 표현하는 방식은 두 가지이다. 비트맵과 벡터. png,jpg, gif는 비트맵 방식으로 이뤄져 있다. 사각형의 픽셀이 모여서 만들어진 이미지이기 대문에 확대 시 계단현상과 깨짐현상이 나타난다. 픽셀 하나 당 모두 색상 설정이 되어 있어서 사이즈가 커질수록 용량도 무거워진다. gif는 이런 픽셀 이미지가 연속적으로 배치되어 있기 때문에 용량이 더욱 무거워질 수밖에 없다.
Lottie란?
Lottie는 에어비엔비에서 개발한 오픈소스 모바일 라이브러리이다. JSON 기반 애니메이션 파일 형식실시간으로 애니메이션을 랜더링한다. Lottie는 벡터 기반의 애니메이션이다. 벡터는 점과 점을 잇는 선분과 면으로 이루어져 있기 때문에 아무리 확대해도 깨지지 않는다.
png / gif / lottie의 크기 차이벡터 기반이라 용량이 적고 해상도 저하기 없다.
(개발에서) 적용이 간단하다.
웹, IOS, Android, Window 및 기타 플랫폼을 위한 오픈소스 및 무료 플레이어가 있어서 변환 없이 사용이 가능하다.
사용자와 상호 소통이 가능한 애니메이션을 만들 수 있다.
설치 방법
1) lottie 시작 방법 페이지에서 운영체제에 맞는 Anastasiy's Extension Manager 다운로드
2) zxp 파일을 열어 설치 완료
https://aescripts.com/learn/zxp-installer/ 에서 zxp 인스톨러를 설치한 후 파일을 열 수 있다.
종종 나오는 오류
(만약 우측 이미지처럼 Permission Error가 뜬다면, 써 있는대로 Prefrences-scripting & Expressing에서 'Allow Scripts to Write Files and Acess Network'를 체크한 후 재시작)
사용방법
Lottie를 사용하는 법은 간단하다. 두 가지 방법으로 파일 생성이 가능하다.
[Bodymovin 사용]
- 에펙파일에서 Window-Extensions-Bodymovin
- 컴포지션 선택 후, 파일 위치 설정
- 'Render' 버튼을 눌러 json파일 생성
[LottieFiles 사용]
- 에펙파일에서 Window-Extensions-LottieFiles
- 로그인 후, 컴포지션의 화살표 아이콘을 눌러 랜더링
- save to pc를 누르고 json이나 lottie로 저장
