Airbnb Lottie — 기초 세팅
Lottie 를 사용하기 위해서는 우선적으로 bodymovin을 설치해야 합니다. bodymovin는 애니메이션 값들을 JSON 형식으로 빼주는 역할을 담당합니다.
디자이너들이 작업하는 환경이 그래픽 위주라면, 개발자들이 디자이너들이 원하는 결과를 적용하기 위해선 그래픽이 아닌 수치값등의 실질적인 코드가 필요한데, 그래픽환경에서 제작된 결과물을 코드화 시켜주는 번역기 정도로 보시면 좋을것 같습니다.
bodymovin 설치하기
Lottie 공식홈페이지에 들어가셔서 Get Stated 버튼을 누르거나, 스크롤을 내리다보면 BodyMovin 이라는 플러그인 링크가 있습니다. 링크를 눌러줍니다.
링크를 누르면 GitHub 프로젝트 페이지에 접속됩니다. 파일 목록중에서 bulid를 눌러 들어갑니다.
bodymovin(root) > bulid > extension 으로 가시면, bodymovin.zxp 라는 확장자의 파일이 있습니다. 해당 파일에 들어가신 후 Download를 눌러 다운로드 합니다.
다시 BodyMovin GitHub 프로젝트 페이지 메인으로 가신 후 스크롤을 내리시다 보면, 위와 같은 내용을 찾을 수 있습니다. ZXP installer 다운로드 버튼을 누릅니다.
BodyMovin과 ZXP Installer 모두 다운로드 하셨다면, 다운로드한 디렉터리로 돌아와 ZXP Installer을 실행해줍니다.
나타는 화면에서 File > OPEN을 들어갑니다.
나타나는 경로에서 아까 우리가 다운받은 BodyMovin.zxp를 선택합니다.
설치 타입은 기본값인 ‘Install For All Users’에 두고, OK를 눌러 진행 후 설치를 완료합니다.
AfterEffect을 실행하신 뒤, Window > Extensions 에 들어가셔서 BodyMovin이 나와있는지 확인 한 후, 클릭해 활성화 해줍니다.
우측 패널창에 BodyMovin이 나타나면, Lottie를 사용하기 위한 기본적인 세팅이 모두 끝났습니다.
