Lottie 파일 용량 줄이는 7가지 방법 (실측 포함)

PERFORMANCE

디자이너에게 받은 온보딩 애니메이션이 312KB였습니다. 최종 배포본은 44KB(.json), dotLottie로 포장하면 12KB. 이 글은 그 과정을 그대로 따라가며 각 단계에서 얼마나 줄었는지 기록한 것입니다.

0단계 — 진단: 어디가 무거운지부터

무작정 줄이기 전에 원인을 봐야 합니다. JSON을 열어 구조를 훑거나, 에셋 폴더를 Lottie Inspector에 넣고 파일 크기순 정렬 + 레이어 수를 보면 어떤 파일이 왜 무거운지 감이 옵니다. 무거운 원인은 거의 셋 중 하나입니다.

• ① base64로 인라인된 래스터 이미지
• ② 과도하게 복잡한 벡터 패스
• ③ 사용하지 않는 에셋·숨김 레이어 잔재

1. 래스터 이미지 제거 (312KB → 118KB)

JSON에서 "p":"data:image/png;base64,..."가 보이면 이미지가 통째로 들어 있는 것입니다. 제 경우 캐릭터의 그림자 텍스처 하나가 190KB를 차지하고 있었습니다. 디자이너에게 요청해 그림자를 반투명 벡터 셰이프로 다시 그렸습니다. 가장 효과가 큰 단계이며, 대부분 여기서 절반 이상 줄어듭니다.

2. 사용하지 않는 에셋 정리 (118KB → 96KB)

AE 컴포지션에서 삭제했지만 assets 배열에 남아 있는 유령 데이터가 흔합니다. 내보내기 전에 AE에서 File → Dependencies → Remove Unused Footage를 실행하고, 숨겨 둔(guide/hidden) 레이어를 정리하세요.

3. 패스 단순화 (96KB → 64KB)

일러스트레이터에서 가져온 아트웍은 포인트가 수백 개인 경우가 많습니다. AE의 패스 스무딩이나 일러스트레이터의 Object → Path → Simplify로 시각적 차이 없이 포인트를 크게 줄일 수 있습니다. 곡선이 많은 캐릭터 일러스트에서 특히 효과적입니다.

4. 키프레임 다이어트 (64KB → 55KB)

• 모든 프레임에 키를 박는 "베이크된" 애니메이션은 용량 폭탄입니다. 이징 곡선으로 표현 가능한 구간은 키 2개면 충분합니다.
• 표현식(expression)을 그대로 두면 런타임 호환성 문제도 생기므로, 필요한 경우 키프레임으로 변환하되 프레임 수를 확인하세요.

5. 소수점 정밀도 제한 (55KB → 48KB)

좌표값이 123.456789012처럼 저장되는 경우가 있습니다. 시각적으로 소수점 2~3자리면 충분합니다. lottie 커뮤니티의 최적화 도구들이 이 작업을 자동으로 해 주며, 직접 한다면 다음과 같은 스크립트로도 가능합니다.

// Node.js — 소수점 3자리로 반올림
const data = JSON.parse(fs.readFileSync("in.json"));
const round = (o) => {
  for (const k in o) {
    if (typeof o[k] === "number") o[k] = Math.round(o[k] * 1000) / 1000;
    else if (typeof o[k] === "object" && o[k]) round(o[k]);
  }
};
round(data);
fs.writeFileSync("out.json", JSON.stringify(data));

6. 프레임레이트 재고 (48KB → 44KB)

60fps로 내보낸 파일이 많지만, UI 모션 대부분은 30fps로도 충분히 부드럽습니다. 프레임레이트를 낮추면 키프레임 수가 줄어 용량과 렌더링 비용이 함께 내려갑니다. 단, 빠른 스냅 모션은 60fps가 필요할 수 있으니 눈으로 확인하세요.

7. dotLottie로 포장 (44KB → 12KB 전송)

마지막으로 .lottie로 묶으면 Deflate 압축이 적용됩니다. 앱 번들 크기와 CDN 전송량이 다시 한 번 크게 줄어듭니다. 자세한 내용은 dotLottie 정리 글을 참고하세요.

결과 요약