Lottie 미리보기 완벽 가이드
Lottie는 Airbnb에서 개발한 오픈소스 라이브러리로, Adobe After Effects에서 만든 애니메이션을 JSON 형식으로 내보내어 웹, iOS, Android 등 다양한 플랫폼에서 고품질 애니메이션을 렌더링할 수 있게 해줍니다. 기존의 GIF나 비디오 파일과 달리 Lottie 애니메이션은 벡터 기반이므로 해상도에 관계없이 선명하게 표시되며, 파일 크기도 훨씬 작습니다. 이 도구를 사용하면 별도의 개발 환경 설정 없이 브라우저에서 바로 Lottie JSON 파일을 미리보기할 수 있습니다.
Lottie 애니메이션이란?
Lottie 애니메이션은 Bodymovin이라는 After Effects 플러그인을 통해 JSON 형식으로 내보낸 벡터 애니메이션 파일입니다. 이 JSON 파일에는 애니메이션의 모든 정보(키프레임, 레이어, 도형, 색상, 변환 등)가 포함되어 있어, lottie-web 라이브러리를 통해 실시간으로 렌더링됩니다. Lottie 파일은 앱의 로딩 화면, 아이콘 애니메이션, 온보딩 화면, 마이크로 인터랙션 등 다양한 용도로 활용됩니다. 특히 모바일 앱 개발에서 디자이너와 개발자 간의 협업 도구로 널리 사용되며, LottieFiles와 같은 플랫폼에서 수천 개의 무료 애니메이션을 다운로드할 수 있습니다.
이 도구의 주요 기능
- 파일 업로드 및 JSON 붙여넣기: Lottie JSON 파일을 직접 업로드하거나 JSON 텍스트를 붙여넣기하여 바로 미리보기할 수 있습니다.
- 재생 속도 조절: 0.1배속부터 3배속까지 애니메이션 속도를 자유롭게 조절하여 세밀한 모션을 확인할 수 있습니다.
- 루프 설정: 반복 재생을 켜고 끌 수 있어 단일 재생과 무한 루프 모두 테스트 가능합니다.
- 프레임 탐색: 슬라이더로 특정 프레임으로 이동하여 애니메이션의 각 순간을 상세히 확인할 수 있습니다.
- 애니메이션 정보 확인: 프레임 레이트, 총 프레임 수, 재생 시간, 캔버스 크기, 레이어 수 등 핵심 정보를 한눈에 파악할 수 있습니다.
Lottie 파일 활용 팁
Lottie 애니메이션의 성능을 최적화하려면 레이어 수를 최소화하고, 복잡한 표현식이나 마스크 사용을 줄이는 것이 좋습니다. After Effects에서 내보내기 전에 불필요한 레이어를 정리하고, 가능하면 프리컴포지션을 활용하여 구조를 단순화하세요. JSON 파일 크기가 큰 경우 dotLottie(.lottie) 형식으로 압축하면 파일 크기를 최대 90%까지 줄일 수 있습니다.
자주 묻는 질문 (FAQ)
Q. Lottie JSON 파일은 어떻게 만드나요?
A. Adobe After Effects에서 Bodymovin 플러그인을 설치한 후, 애니메이션을 만들고 JSON 형식으로 내보내면 됩니다. 또한 LottieFiles, IconScout 등의 플랫폼에서 무료 Lottie 파일을 다운로드하여 사용할 수도 있습니다. Figma나 Haiku 같은 도구에서도 Lottie 형식으로 내보내기가 가능합니다.
Q. 업로드한 파일이 재생되지 않아요. 어떻게 하나요?
A. Lottie 미리보기 도구는 유효한 Lottie JSON 형식만 지원합니다. 파일이 올바른 JSON 형식인지 확인하고, 파일 확장자가 .json인지 확인해 주세요. After Effects의 특정 효과(3D 레이어, 블러 등)는 Lottie에서 지원하지 않을 수 있으며, 이 경우 Bodymovin 내보내기 시 경고가 표시됩니다.
Q. Lottie 애니메이션을 웹사이트에 어떻게 적용하나요?
A. lottie-web 라이브러리를 CDN이나 npm으로 설치한 후, lottie.loadAnimation() 메서드로 JSON 파일을 로드하면 됩니다. React에서는 react-lottie, lottie-react 패키지를, Vue에서는 vue-lottie 패키지를 사용하면 더 편리하게 통합할 수 있습니다. 또한 lottie-player 웹 컴포넌트를 사용하면 HTML 태그만으로도 간단히 삽입할 수 있습니다.
Q. 속도 조절은 어디에 유용한가요?
A. 속도를 낮추면 복잡한 애니메이션의 세부 모션을 프레임 단위로 확인할 수 있어 디버깅에 유용합니다. 반대로 속도를 높이면 애니메이션이 빠른 환경에서도 자연스럽게 보이는지 테스트할 수 있습니다. 앱 개발 시 다양한 속도에서의 사용자 경험을 미리 확인하는 데 큰 도움이 됩니다.