Lottie로 인터렉티브한 애니메이션 구현하기

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Lottie 웹사이트

Lottie란?

2017년 2월에 Airbnb에서 Lottie라는 플러그인을 배포했다. 애프터 이펙트로 만든 애니메이션을 웹과 앱에 손쉽게 넣을 수 있다는 설명과 함께 관련 글들이 당시 페이스북에 수없이 공유됐으며 많은 디자이너에게 관심을 끌었다. 이것도 거의 2년 전 얘기다.
나도 언제 한번 사용해 봐야겠다는 결심을 했으나 막상 로티를 사용할 일이 없어서 사용 못 하다가 최근에 진행한 프로젝트에 써먹을 일이 있어서 과거에 찾아봤던 내용 따라 작업해 봤다.

로티

만족스러운 결과물

Lottie 라이브러리를 사용해서 손쉽게 애니메이션을 구현할 수 있도록 도와준다. 기존에 애니메이션을 입히려면 영상, GIF 혹은 개발자가 비스무레하게 만드는 방법이 있다. 웹은 Canvas나 Procesing을 이용해서 만들 수 있지만 네이티브 앱에는 한계가 있다. 영상과 GIF도 여러가지 단점이 있다. 용량이 무거워지며, 상황에 맞게 컨트롤이 안되기 때문에 특정 페이지 클릭시 인터렉션이 어렵다. 그러나, Lottie는 이것들을 해결해준다.

로티 사용해서 만든 작업물
Lottie.js를 사용해서 만든 실제 작업물

프로젝트 진행하며 일러스트에 애니메이션을 추가해서 웹 퍼블리셔에게 전달을 했는데, 용량 문제나 모바일 디바이스 인터렉션 문제 등 다양한 이슈로 인해 적용이 어려울 것으로 얘기를 했다. 그래서 Lottie를 활용하자고 의견을 내어 사용법과 출력한 JSON 확장자를 공유해서 빠른 시일 내에 좋은 결과물을 낼 수 있었다. 고객사 역시 매우 만족해했다.

Lottie 장점

01 가벼운 용량

JSON API를 통해 파일 사이즈가 작다. 또한 SVG 형식을 지원하여 가볍다. 모바일 사용자 수가 PC사용자 수보다 많아진 상황에서 용량은 아직까진 중요한 요소다. 앱인경우는 앱 자체가 무거워 질 수 있으며, 웹인 경우 로딩시 불러와야하는 용량이 있기때문이다.

02 원하는 방식대로 조작 가능

에프터 이펙트로 제작한 애니메이션을 JSON형식으로 뽑아준다. Solid, Shape layers, Masks, Alpha mattes, Trim paths 등 다양한 기능을 지원하고 있어 표현에 있어 자유도가 높다.

03 다양한 환경에 적용 가능

웹, 하이브리드 앱, 네이티브 앱 등 다양한 곳에 적용 가능하다. 웹에서도 반응형으로 사용 가능하다.
위 3가지는 사실 표면적인 장점이고 실제 업무에서 사용해보니 개인적으로 진짜 장점은 개발자와의 간극을 좁혀주는 것이다. 디자이너가 원하는 애니메이션을 개발자가 완벽하게 구현하려면 샘플영상 제작, 디자인에 대한 정확히 설명하는 시간과 가능여부 확인 및 테스트 등 수 많은 절차를 밟아야 된다. 그걸 한번에 없애주는 고마운 툴이다. 어떤 식으로 사용하면 되는지 쉽게 설명되어 있고 샘플 코드들이 있어서 퍼블리셔도 쉽게 적용할 수 있다.

Lottie 사용방법

로티를 적용하려면 3가지 준비물이 있다.

01 디자인 툴

우선 애니메이션을 제작할 툴이 필요하다. 벡터기반으로 제작하는게 좋으니 일러스트레이터를 추천한다. 실제 영상을 제작할 에프터이팩트가 필요하다.

02 Bodymovin 플러그인

에프터 이펙트에서 JSON 형식으로 출력해주는 플러그인으로 에펙과 개발 소스와의 징검다리 역할로 아주 중요하다.
Bodymovin 플러그인 설치 https://www.adobeexchange.com/creativecloud.details.12557.html

03 Lottie 소스

로티에서 제공하는 오픈소스를 다운 받아서 JSON 영역에 에펙에서 출력한 데이터파일을 삽입해서 테스트 해보면 작동된다. Lottie 오픈소스 설치 https://github.com/airbnb/lottie-web

Lottie를 쓰기 위해서는 디자이너도 개발 지식이 필요한가?

기존에 웹 퍼블리싱에 대한 지식이 있다면 문제없이 코드 보자마자 알아서 잘할 수 있다. 개발 지식이 아예 없어도 상관없다. 에펙에서 Bodymovin을 통해 출력하는 설정에서 Demo를 체크해서 출력하면 테스트할 수 있는 HTML 파일이 알아서 생성된다. 안드로이드, iOS에서는 사용해 보지 않아서 그 부분에 대해서는 아직 잘 모르겠지만, 관련 글들이 많아 읽어보니 저사양 기기가 아니면 문제없이 잘 작동하는 것 같다.

참조

https://airbnb.design/lottie/
https://airbnb.io/lottie/
https://academy.realm.io/kr/posts/lottie-for-android-interactive-animation/
https://brunch.co.kr/@sluggerpark/22

#Animation#Lottie