Airbnb의 'Lottie'를 위한 After Effects 플러그인 'Bodymovin' 사용하기

Airbnb가 얼마 전 Lottie라는 멋진 오픈소스 라이브러리를 공개했습니다. 디자이너가 After Effects로 애니메이션을 만들고 Bodymovin 플러그인으로 .json을 뽑으면, 개발자는 Lottie로 이를 웹과 모바일에서 그대로 재생할 수 있습니다.

사용법을 함께 살펴보겠습니다. After Effects로 만든 애니메이션을 GIF 없이 — Bodymovin이 뽑은 코드만으로 — 웹, iOS, Android, React Native에 적용할 수 있다는 점이 매력적입니다. SVG 기반이라 가볍기도 하고요.

무거운 애니메이션을 웹이나 모바일에 직접 구현하는 일은 복잡하고, GIF는 느린 네트워크에서 부담스럽습니다. Bodymovin을 쓰면 (Mac 전용인) Framer를 위해 CoffeeScript를 짤 필요도, "여기서 X초 동안 떨다가 N픽셀 이동…" 식으로 개발자에게 일일이 설명할 필요도 없습니다.

먼저 플러그인을 설치해야 합니다. GitHub 또는 Adobe Add-ons에서 받을 수 있습니다. 설치 후 After Effects에서 Bodymovin을 확인할 수 있습니다.

이제 After Effects에서 애니메이션을 만들어 .json으로 내보냅니다. 이 튜토리얼에서는 도형 레이어로 단순한 별 아이콘을 만들었습니다. 의도적으로 단순하게 했지만, Bodymovin은 훨씬 복잡한 컴포지션도 내보낼 수 있습니다.

작업이 끝나면 Bodymovin 탭의 Refresh 버튼을 클릭하면 컴포지션이 나타납니다. 렌더 전에 Destination과 Render Settings를 지정합니다.

애니메이션에 텍스트가 있다면 Glyphs를, 숨겨진 레이어를 내보내려면 Hidden을 체크합니다. 저는 HTML 미리보기 파일을 받기 위해 Demo도 체크했습니다. 설정을 저장한 뒤 렌더링합니다.

Brackets!

렌더가 끝나면 애니메이션이 코드로 담긴 .json 파일을 얻게 됩니다. Demo를 체크했다면 HTML 미리보기 파일도 함께 생성됩니다. 미리보기 파일을 열어 CSS를 조정해 위치와 크기를 원하는 대로 맞춥니다.

끝났습니다. LottieFiles나 Bodymovin GitHub에서 다양한 예제 파일을 볼 수 있습니다. Bodymovin을 다운로드하고, After Effects를 열어 멋진 작품을 만들고, SVG로 내보내 보세요. 읽어주셔서 감사합니다!