LottieFiles

1. 개요[편집]

---

공식 웹사이트

에어비앤비에서 개발한 JSON 기반의 애니메이션 라이브러리이다. 웹 및 모바일 환경에서 PNG나 GIF같은 비트맵 기반이 아닌, 벡터 기반으로 움직이는 애니메이션을 만들 수 있다. 웹에서 SVG로 출력된다.

로티(Lottie)라는 이름은 실루엣 애니메이션의 거장인 독일의 영화 감독 로테 라이니거(Lotte Reiniger)의 이름에서 따왔다.

로티파일 사이트의 Discover에서 다른 사람들이 만든 많은 파일들을 볼 수 있다. 무료로 받을 수 있는 애니메이션도 많으며, 유료로 판매하는 애니메이션도 있다.

2. 특징[편집]

---

아무래도 벡터 기반이다 보니 다른 애니메이션 포맷들에 비해 용량이 매우 작다. LottieFiles 공식 홈페이지의 소개에서는 PNG가 공룡이라면 GIF는 코끼리이고 로티는 강아지라고 소개한다.

마찬가지로 벡터 기반이기 때문에 해상도에 구애받지 않는다. 구 플래시 애니메이션을 생각하면 이해하기 쉽다. 아무리 크게 늘린들 흐릿해지지 않고 용량에 차이가 없다.

GIF와 달리 투명도가 있는 애니메이션을 만들 수 있다. 사실 GIF도 투명 자체는 있긴 하나, 중간 단계의 투명도를 표현할 수 없다. 그래서 애니메이션에 사용되는 요소가 직각만 있는 게 아닌 이상 안티에일리어싱이 불가능해, 억지로 배경을 투명하게 하면 계단 현상으로 테두리가 각져보인다. 이는 PNG로 해결할 수 있으나 앞서 말한 용량의 차이가 매우 크다.

JSON 기반이다 보니 애니메이터와 개발자 간의 협업에 용이하다.

3. 프로그램 호환[편집]

---

어도비 애프터 이펙트로 만든 애니메이션을 Bodymovin이라는 플러그인을 사용하여 로티파일로 바로 추출할 수 있다. 그래서 일반적으로 로티 애니메이션은 어도비 일러스트레이터로 모양을 만들고 어도비 애프터 이펙트로 애니메이션을 추출한 뒤 최종 웹·모바일 앱에 삽입하는 과정으로 만들어진다.

피그마에서는 플러그인으로 사용할 수 있다. 피그마 프로젝트에서 기존 로티 애니메이션을 SVG나 GIF로 추출하여 삽입할 수 있다. SVG로 추출할 경우 움직이는 것은 볼 수 없으며, 움직이는 것을 확인하려면 GIF로 삽입해야 한다.

어도비 XD에서 2021년 10월 26일 XD45 업데이트로 사용할 수 있게 되었다. 플러그인을 설치하면 드래그 앤 드롭으로 쉽게 추가할 수 있으며, 루프 여부나 자동 재생과 같은 옵션을 설정할 수 있다.