dotLottie(.lottie) 완벽 정리 — JSON을 언제 갈아탈까

FORMAT

디자이너에게 받은 파일 확장자가 어느 날 .json에서 .lottie로 바뀌었다면, 이 글이 그 파일의 정체를 설명해 줍니다. dotLottie는 단순한 리네이밍이 아니라 구조가 다른 포맷입니다.

dotLottie는 ZIP이다

확장자를 .zip으로 바꿔 압축을 풀어 보면 정체가 바로 드러납니다.

my-animation.lottie
├── manifest.json        ← 포함된 애니메이션 목록과 메타데이터
├── animations/
│   ├── loading.json     ← 실제 Lottie 데이터 (Deflate 압축됨)
│   └── success.json
└── images/
    └── img_0.png        ← 래스터 에셋 (있는 경우)

핵심은 세 가지입니다.

• 압축 — JSON은 텍스트라 압축이 매우 잘 됩니다. 실무 파일 기준 50~80% 감소가 일반적입니다.
• 멀티 애니메이션 — 한 파일에 여러 애니메이션을 담고 manifest.json으로 선택 재생할 수 있습니다. 테마별(라이트/다크) 변형을 하나로 배포할 때 유용합니다.
• 에셋 분리 — 이미지가 base64 인라인 대신 별도 파일로 들어가 관리가 깔끔해집니다.

압축률 실측

실제 프로젝트의 에셋 폴더를 변환했을 때의 전형적인 수치입니다.

런타임 지원 현황

정리하면 2024년 이후의 메이저 런타임은 모두 지원합니다. 문제는 사내에 남아 있는 구버전 런타임입니다. 마이그레이션 전에 각 앱의 Lottie 라이브러리 버전부터 확인하세요.

마이그레이션 체크리스트

• 각 플랫폼 런타임 버전이 dotLottie를 지원하는가?
• CDN·캐시 설정에서 .lottie 확장자의 MIME 타입(application/zip 계열) 처리가 올바른가?
• 빌드 파이프라인(번들러)의 에셋 로더가 확장자를 인식하는가?
• 변환 후 렌더링 결과가 동일한가? — 변환 도구가 오래된 스펙으로 재작성하며 미묘하게 달라지는 경우가 있습니다.

마지막 항목이 가장 중요합니다. 변환한 파일과 원본을 Lottie Inspector에 나란히 넣고 배경·규격·재생을 비교하면 차이를 눈으로 확인할 수 있습니다. .lottie를 넣으면 내부의 모든 애니메이션이 각각 펼쳐집니다.

마이그레이션 실전기 — 에셋 수십 개를 옮기며 배운 것

제가 담당하는 iOS 앱에는 로딩 스피너부터 온보딩 일러스트까지 Lottie 에셋이 수십 개 쌓여 있었습니다. 한 번에 전부 .lottie로 바꾸는 대신 아래 순서로 진행했고, 결과적으로 이 순서 덕분에 사고를 피했습니다.

• 1단계: 런타임 버전 확인 — 배포 중인 앱의 lottie-ios가 dotLottie를 지원하지 않는 구버전이었습니다. 라이브러리 업데이트를 먼저 배포하고, 그 버전이 사용자에게 충분히 퍼진 다음에야 에셋을 교체했습니다. 순서를 바꾸면 구버전 사용자에게 빈 화면이 나갑니다.
• 2단계: 일괄 변환 — 변환 스크립트를 만들어 폴더째 처리했습니다. 수작업으로 하나씩 변환하면 반드시 누락이 생기고, 나중에 어떤 파일이 언제 변환됐는지 추적할 수 없게 됩니다.
• 3단계: 렌더 비교 — 변환 전후 파일을 나란히 재생하며 눈으로 확인했습니다. 제 경우 그라디언트가 들어간 파일 하나가 미묘하게 달라져 있었는데, 변환 도구가 일부 속성을 재작성하면서 생긴 문제였습니다. 해당 파일만 원본 JSON을 유지하는 것으로 정리했습니다.
• 4단계: 롤백 계획 — 원본 .json을 저장소에서 지우지 않고 같은 경로에 남겨 두었습니다. 문제가 생기면 로드 경로만 되돌리면 되도록 해 둔 것인데, 실제로 한 번 그 덕을 봤습니다.

정리하면 변환 자체보다 변환 전후의 검증과 되돌릴 수 있는 구조가 마이그레이션의 본체였습니다. 에셋 개수가 많을수록 이 차이가 커집니다. 비교 검증에는 Lottie Inspector처럼 두 파일을 나란히 재생할 수 있는 도구를 쓰면 시간이 크게 줄어듭니다.

CDN에서 MIME 타입을 놓치면 생기는 일

가장 오래 헤맨 문제는 코드가 아니라 인프라였습니다. 로컬에서는 잘 재생되던 .lottie가 배포 후 웹에서만 로드에 실패했는데, 원인은 CDN이 .lottie 확장자를 몰라 Content-Type을 엉뚱한 값으로 내려보낸 것이었습니다. 더 골치 아픈 점은 그 잘못된 응답이 엣지 캐시에 그대로 저장된다는 것입니다. 서버 설정을 고친 뒤에도 캐시를 퍼지하기 전까지는 일부 지역에서 실패가 계속 재현되어, 원인을 찾고도 한참을 더 헤맸습니다. .lottie는 실체가 ZIP이므로 application/zip 계열로 매핑해 두고, 배포 전에 실제 응답 헤더를 curl -I로 한 번 확인하는 편이 안전합니다.