Lottie란 무엇인가

Prologue
기획자로부터 요청이 왔다. 버튼안에 있는 문구에 에니메이션을 넣을 수 있냐고...
가이드를 보고 열심히 css animation으로 개발해보았다.
그래서 초안을 공유해드렸더니, 갑자기 모션 디자이너로부터 연락이 왔다.
디자이너님께서 lottie.json 파일로 적용시키면 된다고 한다 (오잉???)
lottie가 무엇이고, 어떻게 적용하는지 알아보자

개념
After Effects로 만들어진 고퀄리티 Animation을 web, app에서 쉽게 구현해주는 library입니다.
Animation을 json 파일로 export 시켜 개발자에게 공유하여, 개발자들은 이 파일로 에니메이션을 추가합니다.

Lottie는 개발자, 디자이너에게 엄청나게 유용합니다.
디자이너가 만든 에니메이션을 개발자가 다시 만들 필요가 없으므로 시간이 절약되고 Design QA 기간도 줄어듭니다.
또한, Lottie를 이용하면 gif로 rendering 할 필요도 없습니다.
gif는 이미지 끝 부분에 미세하게 지저분하게 보일 수 있어, best-practice는 아닙니다.

AirBnb에서 만들었으니 믿고 사용할만 하죠? ㅎㅎ

적용 방법
json 파일을 lottie 확장자로 변경합니다. Convert Lottie JSON to dotLottie
해당 파일을 cdn에 올립니다. (optional)
lottie player를 이용하여 animation을 보여준다. player-component

마치며
Lottie를 적용하기전 몇가지 고민해볼만한 사항들이 있다. Lottie 파일이 얼마나 큰지 봐야하고, 간단한건 css로 하는게 어떤지..
FE 성능 최적화와 유저UX를 같이 고민해보면 좋을거 같다.

참고
official lottie