Lottie 애니메이션 완벽 가이드
Lottie가 무엇인지부터 검수 워크플로, 파일 최적화까지 — 디자이너와 개발자 모두를 위한 실무 중심 정리.
Lottie란 무엇인가
Lottie는 After Effects에서 만든 벡터 애니메이션을 JSON 데이터로 내보내 웹·iOS·Android 어디서든 재생할 수 있게 해 주는 애니메이션 포맷이자 런타임입니다. Airbnb가 2017년 오픈소스로 공개한 이후, 앱 온보딩·로딩 인디케이터·아이콘 모션·빈 화면(empty state) 등 UI 모션의 사실상 표준이 되었습니다.
GIF나 동영상과 비교했을 때 Lottie의 장점은 뚜렷합니다.
- 용량 — 같은 모션을 GIF 대비 수십 분의 일 크기로 표현합니다. 데이터가 픽셀이 아니라 벡터 좌표와 키프레임이기 때문입니다.
- 해상도 독립 — 벡터 기반이라 어떤 배율로 키워도 깨지지 않습니다. 하나의 파일로 모든 디바이스 밀도를 커버합니다.
- 런타임 제어 — 재생 속도, 구간 반복, 색상 교체, 진행률 바인딩(스크롤 연동 등)을 코드로 제어할 수 있습니다.
- 투명 배경 — 알파 채널을 자연스럽게 지원하므로 어떤 배경 위에도 얹을 수 있습니다.
.json과 .lottie, 무엇이 다른가
실무에서 만나는 Lottie 파일은 두 가지 확장자입니다.
| .json | .lottie (dotLottie) | |
|---|---|---|
| 구조 | 애니메이션 데이터 원본 그대로의 텍스트 파일 | JSON + 이미지 에셋 + 매니페스트를 ZIP으로 묶은 컨테이너 |
| 용량 | 기준 | 압축 덕분에 보통 50~80% 작음 |
| 복수 애니메이션 | 파일당 1개 | 한 파일에 여러 애니메이션 포함 가능 |
| 이미지 포함 | base64로 인라인 (용량 급증) | 별도 에셋으로 깔끔하게 포함 |
| 호환성 | 모든 Lottie 런타임 | dotLottie 지원 런타임 필요 (최신 lottie-web, dotlottie-player 등) |
배포 용량이 중요한 프로덕션에서는 .lottie를, 데이터를 직접 열어보거나 수정해야 할 때는 .json을 쓰는 것이 일반적입니다. Lottie Inspector는 두 포맷을 모두 읽습니다 — .lottie는 브라우저 안에서 압축을 풀어 내부 애니메이션을 전부 보여줍니다.
Lottie Inspector 사용법
1. 파일 열기
메인 화면에 폴더째 끌어다 놓거나, 상단의 폴더 열기 / 파일 버튼으로 선택합니다. 하위 폴더까지 재귀적으로 탐색해 폴더별로 묶어 보여주므로, 디자인 시스템의 모션 에셋 전체를 한 번에 검수할 수 있습니다.
2. 배경과 여백 확인
애니메이션이 실제 서비스 배경 위에서 어떻게 보일지 확인하는 것이 검수의 핵심입니다. 투명(체커보드) / 흰색 / 어두움 / 커스텀 배경을 전환하고, 스포이드로 화면의 아무 색이나 추출해 브랜드 배경색 위에서 바로 확인해 보세요. 여백 슬라이더로 애니메이션 주변 공간도 조절할 수 있습니다.
3. 규격선과 중심선
규격선은 캔버스의 실제 경계를 표시합니다. 캔버스보다 그림이 작게 그려져 불필요한 패딩이 포함됐는지, 반대로 그림이 캔버스를 벗어나 잘리는지 즉시 드러납니다. 중심선은 수직·수평 중앙 정렬 여부를 확인할 때 사용합니다.
4. 재생 제어
전체 일시정지/재생, 처음부터 다시 재생, 0.25×~2× 속도 조절을 지원합니다. 느리게 재생하면 이징(easing)이나 프레임 단위 결함을 찾기 쉽습니다.
5. 정렬과 검색
파일이 많을 때는 이름·파일 크기·재생 시간·가로 크기·레이어 수로 정렬하고, 파일명으로 검색해 좁혀 보세요. 특히 파일 크기 정렬은 최적화 대상을 찾는 가장 빠른 방법입니다.
디자이너 → 개발자 핸드오프 검수 체크리스트
- 캔버스 규격 — 개발 스펙과 일치하는가? (예: 아이콘 24×24, 히어로 375×240)
- 불필요한 패딩 — 캔버스 대비 그림이 지나치게 작지 않은가?
- 배경 의존성 — 어두운 배경·밝은 배경 모두에서 뭉개지는 요소가 없는가?
- 파일 크기 — UI 모션 기준 수십 KB 내외가 적정. 수백 KB라면 원인을 확인할 것.
- 레이어 수 — 레이어가 수백 개면 저사양 기기에서 프레임 드랍이 발생할 수 있음.
- 루프 자연스러움 — 반복 재생 시 첫 프레임과 끝 프레임이 매끄럽게 이어지는가?
- 재생 시간 — 인터랙션을 막을 만큼 길지 않은가?
파일 최적화 팁
- 래스터 이미지 제거 — JSON 안에 base64 이미지가 들어가면 용량이 폭증하고 벡터의 장점이 사라집니다. 가능하면 순수 벡터로 다시 그리세요.
- 패스 단순화 — 일러스트레이터에서 가져온 복잡한 패스는 포인트를 줄이는 것만으로 크게 가벼워집니다.
- 사용하지 않는 에셋 정리 — 컴포지션에서 지웠지만 에셋 목록에 남은 레이어가 흔한 용량 누수원입니다.
- 소수점 정밀도 — 내보내기 시 좌표 소수점 자릿수를 2~3자리로 제한하면 안전하게 용량이 줄어듭니다.
- dotLottie 포장 — 마지막으로
.lottie로 묶으면 전송 용량이 절반 이하로 떨어집니다.
제작 도구 생태계
Lottie 에셋은 보통 이런 경로로 만들어집니다.
- After Effects + Bodymovin(현 Lottie) 플러그인 — 가장 보편적인 제작 경로. 표현식·마스크 등 일부 기능은 런타임 지원 여부를 확인해야 합니다.
- LottieFiles — 에셋 마켓플레이스와 웹 에디터. 프로토타이핑과 에셋 탐색에 유용합니다.
- Figma 플러그인 — 간단한 모션은 Figma에서 바로 내보내는 워크플로도 늘고 있습니다.
어떤 도구로 만들었든, 배포 전 마지막 단계는 같습니다 — Lottie Inspector에 폴더째 넣고 규격·배경·용량을 한눈에 확인하세요.