Lottie는 에어비앤비에서 모바일 프로덕트를 위해 개발한 오픈소스 라이브러리입니다. Lottie는 벡터 데이터를 json 형식의 데이터로 만드는 파일이기 때문에 픽셀의 정보를 가지는 이미지나 동영상 파일에 비해 용량이 굉장히 적습니다. 벡터 기반이기 때문에 해상도에 구애받지 않으며, 또 개발 친화적이기에 IOS, AOS, web 어떤 환경에서도 수정하지 않고 사용할 수 있습니다. 또한 애니메이션 요소들을 상호작용 하도록 수정하기도 용이합니다. 그래서 모바일 프로덕트에 동적 디자인 요소를 추가하기 위해 Lottie를 많이 사용합니다.
Lottie는 주로 After Effects에서 디자인을 제작해 json 파일로 추출합니다. After Effects에서 만든 디자인을 Lottie로 제작하는 방법을 설명해 보도록 하겠습니다.
After Effect 기능들 중 Lottie로 만들 때 구현이 안 되는 것들이 있습니다. 그래서 모션그래픽 작업과 다르게 디자이너의 의도와 다른 결과물이 나올 때가 많습니다. Lottie가 지원하는 After Effects 기능들은 아래 사이트에서 확인하고 작업하면 수정을 거쳐야 하는 수고를 덜 수 있습니다.
https://airbnb.io/lottie/#/supported-features
Lottie Docs
airbnb.io
Bodymovin 설치하기
먼저 bodymovin을 설치해야 합니다. 아래 페이지에서 zxp installer를 설치한 후,
ZXPInstaller
It will not Manage or uninstall your extensions
zxpinstaller.com
아래 github에서 bodymovin.zxp를 설치하면 After Effects 창 메뉴 - 확장명(Extensions)에 Bodymovin이 생성됩니다.
https://github.com/airbnb/lottie-web/tree/master/build/extension
편집 - 환경설정 - 스크립팅 및 표현식에서 "스크립트를 통한 파일 쓰기 및 네트워크 액세스 허용"을 체크해, bodymovin이 파일을 쓸 수 있도록 해줍시다.
2023.11 현재 bodymovin 5.12.0버전이 제대로 작동하지 않는 버그가 있는 것으로 확인됩니다. Creative Cloud - 마켓플레이스에서 bodymovin 5.9.0 버전을 받아서 사용하는 것을 추천드립니다.
작업한 파일을 Lottie로 만들기
작업한 디자인 파일을 열고 Bodymovin을 실행합니다. 창이 열리고, 목록에 컴포지션과 프리컴포지션 목록이 보입니다.
- 렌더 실행할 컴포지선 선택
- Lottie 파일 세팅
- 저장 위치
- 렌더 버튼(저장 위치를 설정하면 활성화)
세팅을 열고 몇 가지 사항을 체크해봅니다.
- 이미지가 있을 경우 압축할 정도를 설정합니다.
- 디자인한 파일에 이미지 푸티지가 포함되어 있을 경우 체크합니다.
- json파일 외에 html 미리 보기 파일을 생성합니다. 브라우저로 결과물을 확인할 수 있습니다.
아래와 같은 화면이 나오면 렌더링이 성공한 것입니다.
이제 완성된 json 파일을 개발자에게 전달해 주면 됩니다. 완성된 json 파일을 보면 gif나 영상으로 만들었을 때보다 훨씬 용량이 적은 것을 알 수 있습니다.
'모바일 앱에 애니메이션 올리기' 카테고리의 다른 글
| Cinema 4D로 Lottie 애니메이션 제작하기 (2) | 2023.11.20 |
|---|
