작업 과정: 어도비 애프터 이펙트(AE)로 모션 작업 → bodymovin 플러그인을 통해 컴포지션을 json으로 변환합니다.

‘로티(lottie)’는 주로 웹 프론트로 모션 이펙트를 주고 싶을 때 사용할 수 있는 라이브러리입니다.

로티를 이용하면 모션을 json으로 변환시킨 파일을 해석하여 웹페이지 등에서 움직이는 효과를 줄 수 있습니다.

일단 모션을 json으로 변환하는 방법에 대해 알아봅시다!

1. AE 설정

After Effects > 환경 설정 (Preference) > 스크립팅 및 표현식 (Scripting and Expressions)으로 들어가

‘스크립트를 통한 파일 쓰기 및 네트워크 엑세스 허용(allow scripts to write files and access network)’ 을 체크합니다.

2. bodymovin 설정

이미지를 사용한 로티의 경우 이미지 파일을 임베딩해야합니다.

창(Window) > 확장명(Plugin) > bodymovin을 선택해 bodymovin을 엽니다.

json으로 변환하고자 하는 컴포지션 이름 옆에 톱니바퀴 모양 설정을 들어가 다음 그림과 같이 ‘Include in json’을 체크합니다.