에펙에서 작업한 애니메이션 로티 lottie 적용하기 (맥)

 

웹이나 앱에서 애니메이션을 적용하는 방법은

GIF, MP4 등 여러가지 포맷이 있는데

오늘은 개발자님께서 JSON 파일로 바꿔주는 로티 Lottie 라는 라이브러리를 사용해보자고 권유하셔서

적용을 해보았다.

 

여러가지 버전의 로티에 대한 튜토리얼들이 있는데

그간 로티가 발전을 해왔는지

2021년 9월 현재 버전에서는 복잡할 것 없이 플러그인 2개만 설치하면 된다.

 

 

 

---

로티 Lottie란?

에어비앤비 Airbnb에서 자체 개발한 라이브러리

에펙에서 작업한 애니메이션 파일을 웹/앱에서 가볍게 띄울 수 있는

JSON 파일로 변환해준다.

---

1. Adobe CC > 마켓플레이스에 접속하여

Bodymovin, LottieFiles for After Effects 를 설치한다.

(설치 순서는 상관 없음)

(에펙은 꺼놓은 상태에서 설치)

 

 

2. 에펙을 켜고, 작업한 애니메이션 파일을 열고,

Window (창) > Extensions (확장명) > Bodymovin 을 선택한다.

 

 

 

3. Bodymovin 세팅 창에서 Render 누르면 끝!

 

 

HTML에 임베드된 미리보기를 확인하려면

Setting을 누르고 하단의 Demo를 체크하면, Html파일이 같이 생성된다.

 

 

---

와 - 이제 나도 할 줄 안다!