솔직히 이건 예상 밖이었습니다. 온보딩 애니메이션 하나를 MP4로 넣었다가 파일 크기가 2.4MB까지 불어났고, 로딩 지연 컴플레인이 바로 들어왔습니다. 그때 처음 Lottie로 전환했는데, 같은 애니메이션이 240KB로 줄고 로딩 시간이 1.8초에서 0.3초로 뚝 떨어졌습니다. 그 경험 이후로 저는 모바일 앱 외주에서 애니메이션을 MP4로 설계하는 선택지 자체를 지웠습니다.
After Effects에서 JSON으로 — Bodymovin 익스포트의 핵심
Lottie 워크플로우는 After Effects에서 시작합니다. 여기서 Bodymovin이라는 플러그인이 핵심 역할을 합니다. Bodymovin이란 After Effects에서 제작한 벡터 애니메이션을 JSON 파일 형식으로 변환해주는 무료 익스포트 플러그인입니다. Airbnb가 만든 것이 아니라 Hernan Torrisi라는 개발자가 별도로 제작한 도구인데, Lottie 생태계 전체가 이 플러그인 위에서 돌아간다고 봐도 무방합니다.
중요한 건 After Effects의 모든 기능이 Lottie에서 지원되지는 않는다는 점입니다. 제가 처음 익스포트할 때 드롭 섀도우 효과를 걸어뒀다가 앱에서 완전히 깨진 채로 렌더링되는 황당한 경험을 했습니다. Lottie 공식 문서에는 이렇게 명시되어 있습니다. 이펙트 메뉴에서 적용한 효과나 레이어 스타일은 전혀 지원되지 않으므로, 마치 존재하지 않는 기능처럼 취급하라고요(출처: LottieFiles 공식 문서).
트랜스폼 속성인 Position, Scale, Rotation, Opacity, Anchor Point는 거의 완벽하게 지원됩니다. 반면 3D z축 이동은 지원되지 않고, 표현식(Expression)은 웹에서만 동작하고 모바일에서는 깨집니다. 익스포트 전에 표현식을 키프레임으로 변환하는 습관을 들이는 게 좋습니다. After Effects에서 해당 속성을 우클릭한 뒤 키프레임 어시스턴트 → 표현식을 키프레임으로 변환하면 됩니다.
텍스트 레이어도 마찬가지입니다. After Effects의 텍스트 레이어를 그대로 익스포트하면 Lottie에서 제대로 렌더링되지 않는 경우가 잦습니다. 텍스트 레이어를 선택한 뒤 셰이프 레이어로 변환하면, 각 글자가 개별 벡터 레이어로 분리되어 온전하게 익스포트됩니다.
벡터 기반 구조가 왜 파일 크기를 90% 줄이는가
MP4와 Lottie의 결정적인 차이는 렌더링 방식에 있습니다. MP4는 래스터 기반 영상 포맷으로, 각 프레임을 픽셀 단위 이미지로 저장합니다. 반면 Lottie의 JSON 파일은 벡터 기반입니다. 벡터 기반이란 이미지를 픽셀 대신 수학적인 좌표와 경로 데이터로 저장하는 방식을 의미합니다. 해상도가 올라가도 파일 크기가 증가하지 않고, 어떤 화면 밀도에서도 선명하게 렌더링됩니다.
제가 직접 측정해보니 3초짜리 온보딩 애니메이션 기준으로 MP4가 2.4MB였던 것이 Lottie JSON으로 전환하자 240KB가 됐습니다. 정확히 10분의 1입니다. 이 차이는 특히 첫 진입 화면에서 결정적입니다. 앱이 콜드 스타트될 때 메인 번들이 로드되면서 동시에 애니메이션 파일도 불려야 하는데, 2MB 넘는 파일이 있으면 체감 로딩이 눈에 띄게 늘어납니다.
Lottie는 웹, Android, iOS, Flutter, React Native, Windows, Vue, Angular 등 사실상 모든 플랫폼에서 동일한 JSON 파일 하나로 동작합니다. 디자이너가 파일 하나를 넘기면 각 플랫폼 개발자가 해당 SDK를 사용해 그대로 구현합니다. 이 구조 덕분에 저는 현재 8종의 Lottie 컴포넌트 라이브러리를 유지하면서 외주 4건에 그대로 재사용하고 있습니다.
AE 익스포트 전 반드시 확인해야 할 체크리스트
익스포트 단계에서 놓치면 앱에서 애니메이션이 깨지거나 성능이 뚝 떨어지는 항목들이 있습니다. 제가 노션에 정리해두고 매번 외주마다 꺼내 쓰는 체크리스트입니다.
- 모든 텍스트 레이어를 셰이프 레이어로 변환했는가
- 이펙트 메뉴의 드롭 섀도우, 색상 오버레이 등 효과를 모두 제거했는가
- 표현식(Expression)이 남아 있다면 키프레임으로 변환했는가
- 알파 매트(Alpha Matte) 대신 마스크 패스(Mask Path)를 사용했는가
- 3D 레이어가 없는지 확인했는가
- 불필요한 히든 레이어를 삭제했는가
- PNG·JPEG 이미지 시퀀스 대신 벡터 셰이프로만 구성했는가
알파 매트란 한 레이어의 알파 채널을 다른 레이어에 적용해 마스킹하는 방식인데, 일부 플랫폼에서 지원이 제한적입니다. 특히 Android에서는 알파 매트가 의도대로 렌더링되지 않는 케이스가 있어서, 저는 아예 마스크 패스 방식으로 통일합니다. Bodymovin 설정 창에서 Glyphs 옵션을 체크하면 텍스트 글리프를 정확하게 익스포트할 수 있으니 이것도 확인 필수입니다.
한국 저사양 안드로이드 환경과 성능 임계값
Lottie를 무조건 넣으면 된다고 생각하는 분들도 있는데, 저는 그 생각이 한국 시장에서는 위험하다고 봅니다. 한국 모바일 시장은 삼성 프리미엄 라인업 외에도 갤럭시 A 시리즈, 저가형 LG 구형 기기 등 저사양 안드로이드 비중이 상당합니다. 국내 안드로이드 기기 점유율을 보면 보급형 기기가 전체의 상당 부분을 차지합니다(출처: StatCounter 글로벌 스탯).
Lottie 렌더러는 기본적으로 소프트웨어 렌더링 방식을 사용합니다. 소프트웨어 렌더링이란 GPU가 아닌 CPU에서 애니메이션 연산을 처리하는 방식인데, 저사양 기기에서는 복잡한 셰이프나 레이어가 많을수록 프레임 드롭이 발생합니다. 저는 이걸 직접 겪은 뒤로 React 훅에 렌더러 자동 분기 로직을 추가했습니다. 디바이스 성능을 감지해서 고사양이면 Canvas 렌더러, 저사양이면 SVG 렌더러로 자동 전환하는 방식입니다. 이 훅을 라이브러리에 추가한 이후로 모바일 성능 컴플레인이 0건으로 떨어졌습니다.
한국 환경에 맞는 Lottie 성능 임계값으로 제가 경험상 정리한 기준은 다음과 같습니다.
- JSON 파일 크기: 200KB 이하 권장, 500KB 초과 시 분할 검토
- 동시 재생 레이어 수: 30개 이하 (저사양 기준)
- 반복 루프 애니메이션: 12fps 이하로도 충분한 경우가 많음
- 마스크 패스 중첩: 2단계 이상 중첩 금지
일반적으로 Lottie는 파일만 넣으면 성능 걱정이 없다는 의견도 있지만, 실제로 써보니 한국 저사양 안드로이드 기기에서는 셰이프 복잡도와 레이어 수가 일정 수준을 넘으면 확실히 버벅임이 생깁니다. LottieFiles 공식 성능 가이드에서도 복잡한 패스와 레이어 중첩을 줄이는 것이 최우선 최적화 방법이라고 명시하고 있습니다.
Lottie가 단순히 애니메이션 포맷 하나를 바꾸는 도구라고만 보는 시각도 있습니다. 저는 오히려 이걸 설계 방식 자체를 바꾸는 전환점으로 봅니다. 디자이너가 After Effects 워크플로우를 조금만 바꾸면, 개발자가 각 플랫폼마다 따로 구현하던 수고를 없앨 수 있습니다. 한국 모바일 앱 외주를 계속 받고 있다면, AE 익스포트 체크리스트를 노션에 한 번 정리해두고 성능 임계값 기준도 디바이스별로 잡아두는 것을 권합니다. 처음 세팅에 하루 투자하면 이후 외주 4건 내내 재사용할 수 있습니다.