Lottie 파일 이란? 로티 만들기 내보내기 방법

Lottie 에펙 플러그인

Dec 11. 2024

Lottie 파일

Lottie 파일은 에어비앤비(Airbnb)에서 개발한 오픈소스 라이브러리로, JSON 기반의 애니메이션 파일 형식을 말한다. 이 파일은 벡터 기반으로 작동하며, 작은 용량과 높은 해상도를 제공해 웹과 앱 개발 환경에서 빠르고 부드럽게 애니메이션을 재생할 수 있다는 장점이 있다.

애니메이션을 JSON 형식으로 내보내기 때문에 코드와 디자인의 경계를 허물고, 개발자와 디자이너 간 협업을 대폭 간소화했다. 덕분에 GIF 같은 용량이 큰 이미지 파일 대신 Lottie가 표준으로 자리 잡아가고 있다.

왜 Lottie 라고 부를까?

로티 이름은 독일의 영화 감독이자 실루엣 애니메이션의 선구자인 로테 라이니거(Lotte Reiniger)에게서 영감을 받았다. 그녀의 대표작 The Adventures of Prince Achmed (1926)은 세계에서 가장 오래된 장편 애니메이션 영화로, 디즈니의 백설공주와 일곱 난쟁이(1937)보다 10년 이상 앞서 제작되었는데, Lottie 파일은 그녀의 이름을 따 명명되었고 이는 애니메이션의 예술성과 기술적 혁신을 기리는 의미를 담고 있다. 로테 라이니거가 애니메이션의 새로운 가능성을 열었던 것처럼, Lottie는 디지털 애니메이션의 새로운 지평을 열거라는 포부가 담겨있다고 한다.

왜 Lottie를 사용할까?

개발자와 작업하다 보면 이런 말을 자주 듣게 될 것이다. "GIF 이제 안 써요. 요즘 다 Lottie 씁니다."

그 이유는 간단하다.

작은 용량: Lottie는 JSON 기반이라 GIF보다 훨씬 가볍다.

높은 품질: 벡터 기반이라 크기를 늘려도 깨지지 않는다.

멀티플랫폼 호환: 웹, iOS, Android에서 동일하게 작동한다.

인터랙티브 애니메이션: JavaScript와의 결합으로 동적 애니메이션이 가능하다.

Lottie는 단순한 애니메이션뿐만 아니라 브랜드의 아이덴티티를 표현하는 로딩 화면, 앱 인터페이스의 미세한 움직임에도 많이 사용된다.

Lottie 만들기

Lottie 파일을 제작하는 방법은 여러 가지가 있다. 요즘은 Figma, Phase, 또는 Lottie Editor 같은 툴을 통해 직접 제작하거나 수정하기도 하지만, Adobe After Effects(에펙)를 활용하는 전통적인 방법이 여전히 가장 많이 쓰인다. 따라서 오늘은 에펙을 활용해 로티 파일을 내보내는 과정을 정리해 보았다.

1. 플러그인 설치

먼저, 에펙에서 Lottie 파일을 내보내기 위해선 Bodymovin 플러그인을 설치해야 한다. 플러그인 받는 방법도 다양하지만, AEScripts에서 Bodymovin을 다운로드하여 설치하고 진행해 보겠다. 그런데, 이거 유료 플러그인이다. 다행히 로티 파일즈에서 무료 플러그인을 확장판 버전으로도 출시했는데, LottieFiles for Adobe After Effects 이를 활용해보자.