| 공식 소개 영상 |
1. 개요
공식 웹사이트로티(Lottie)는 에어비앤비에서 개발한 JSON 기반의 애니메이션 포맷이다. 웹 및 모바일 환경에서 PNG나 GIF같은 비트맵 기반이 아닌, 벡터 기반으로 움직이는 애니메이션을 만들 수 있다.
로티라는 이름은 실루엣 애니메이션의 거장인 독일의 영화감독 로테 라이니거(Lotte Reiniger)의 이름에서 따왔다.
로티파일 사이트의 Discover에서 다른 사람들이 만든 많은 파일들을 볼 수 있다. 무료로 받을 수 있는 애니메이션도 많으며, 유료로 판매하는 애니메이션도 있다.
2. 특징
아무래도 벡터 기반이다 보니 다른 애니메이션 포맷들에 비해 용량이 매우 작다. LottieFiles 공식 홈페이지의 소개에서는 PNG가 공룡이라면 GIF는 코끼리이고 로티는 강아지라고 소개한다.마찬가지로 벡터 기반이기 때문에 해상도에 구애받지 않는다. 구 플래시 애니메이션을 생각하면 이해하기 쉽다. 아무리 크게 늘린들 흐릿해지지 않고 용량에 차이가 없다.
GIF와 달리 투명도가 있는 애니메이션을 만들 수 있다. 사실 GIF도 투명 자체는 있긴 하나, 중간 단계의 투명도를 표현할 수 없다. 그래서 애니메이션에 사용되는 요소가 직각만 있는 게 아닌 이상 안티에일리어싱이 불가능해, 억지로 배경을 투명하게 하면 계단 현상으로 테두리가 각져보인다. 이는 PNG로 해결할 수 있으나 앞서 말한 용량의 차이가 매우 크다.
JSON 기반이다 보니 애니메이터와 개발자 간의 협업에 용이하다.
복수의 애니메이션, 테마, 사용자 인터렉션을 위해 기능을 확장한 닷로티(DotLottie)를 공식 포맷으로 제공하고 있다.
3. 프로그램 호환
어도비 애프터 이펙트로 만든 애니메이션을 Bodymovin이라는 플러그인을 사용하여 로티파일로 바로 추출할 수 있다. 그래서 일반적으로 로티 애니메이션은 어도비 일러스트레이터로 모양을 만들고 어도비 애프터 이펙트로 애니메이션을 추출한 뒤 최종 웹·모바일 앱에 삽입하는 과정으로 만들어진다.피그마에서는 플러그인으로 사용할 수 있다. 피그마 프로젝트에서 기존 로티 애니메이션을 SVG나 GIF로 추출하여 삽입할 수 있다. SVG로 추출할 경우 움직이는 것은 볼 수 없으며, 움직이는 것을 확인하려면 GIF로 삽입해야 한다.
어도비 XD에서 2021년 10월 26일 XD45 업데이트로 사용할 수 있게 되었다. 플러그인을 설치하면 드래그 앤 드롭으로 쉽게 추가할 수 있으며, 루프 여부나 자동 재생과 같은 옵션을 설정할 수 있다.
전 플랫폼 호환 가능한 로티 애니메이션 라이브러리로서 ThorVG를 활용할 수 있다.