Lottie vs GIF vs 동영상 — UI 모션 포맷, 뭘 써야 할까
온보딩 일러스트, 로딩 인디케이터, 성공 체크 애니메이션. 같은 모션이라도 어떤 포맷으로 넣느냐에 따라 앱 용량과 화질, 유지보수 난이도가 완전히 달라집니다. 실제 프로젝트에서 세 포맷을 모두 써 본 경험을 기준으로 비교합니다.
세 포맷의 본질적인 차이
비교에 앞서 각 포맷이 데이터를 저장하는 방식부터 이해해야 합니다.
- GIF — 프레임마다 픽셀을 통째로 저장하는 래스터 포맷. 256색 제한, 알파는 1비트(반투명 불가).
- 동영상(MP4/WebM) — 프레임 간 차이를 압축하는 코덱 기반. 화질 대비 용량 효율은 좋지만 여전히 픽셀 데이터.
- Lottie — "무엇을 그릴지"에 대한 벡터 명령과 키프레임만 저장. 렌더링은 재생 시점에 기기가 수행.
실측 비교 — 같은 모션, 세 포맷
320×240 크기의 캐릭터 온보딩 애니메이션(4초, 30fps)을 세 포맷으로 만들었을 때의 전형적인 결과입니다.
| Lottie (.json) | GIF | MP4 (H.264) | |
|---|---|---|---|
| 용량 | 약 45KB | 약 1.8MB | 약 320KB |
| 2배 해상도 대응 | 동일 파일 | 용량 약 4배 | 용량 약 3배 |
| 투명 배경 | 완벽 지원 | 1비트(가장자리 계단) | H.264 불가, WebM/HEVC 필요 |
| 색상 | 제한 없음 | 256색 | 제한 없음 |
| 재생 제어 | 속도·구간·진행률·색상까지 | 불가 | 재생/정지 수준 |
| 제작 파이프라인 | AE + 플러그인 필요 | 어디서든 | 어디서든 |
| 런타임 의존성 | 라이브러리 필요(수백 KB) | 없음 | 없음(네이티브 플레이어) |
주의: Lottie 런타임 라이브러리 자체의 크기(웹 기준 lottie-web 약 250KB, 경량 dotlottie-web 약 60KB)도 총비용에 포함해야 공정한 비교입니다. 모션이 1~2개뿐이라면 동영상이 더 가벼울 수도 있습니다.
상황별 선택 기준
Lottie를 선택해야 할 때
- 아이콘 모션, 로딩 인디케이터, 빈 화면 등 UI에 통합되는 벡터 모션
- 다크모드 대응 등 런타임에 색상을 바꿔야 할 때
- 스크롤·제스처에 진행률을 바인딩하는 인터랙션
- 여러 해상도의 기기를 하나의 에셋으로 커버해야 할 때
동영상이 나은 경우
- 사진·실사 합성이 포함된 리치 모션 (벡터로 표현 불가)
- 파티클·블러 등 Lottie가 지원하지 않는 AE 이펙트가 필수일 때
- 모션 수가 적어 런타임 라이브러리를 넣는 것이 오히려 손해일 때
GIF는 언제?
솔직히 말해 프로덕션 UI에서는 쓸 이유가 거의 없습니다. 용량은 크고 화질은 나쁩니다. 다만 이메일, 마크다운 README, 채팅 미리보기처럼 재생 환경을 통제할 수 없는 곳에서는 여전히 가장 확실한 선택입니다.
결정 전에 검수부터
Lottie로 결정했다면, 받은 에셋이 실제로 벡터로만 구성됐는지 확인하세요. AE에서 래스터 이미지를 품은 채 내보내면 JSON 안에 base64가 인라인되어 GIF보다 무거워지는 사고가 흔합니다. Lottie Inspector에 폴더째 넣고 파일 크기순으로 정렬하면 이런 파일이 바로 드러납니다.