After Effects → Lottie 내보내기 체크리스트
"AE에서는 완벽했는데 앱에서 깨져요"의 대부분은 내보내기 전에 걸러낼 수 있습니다. 디자이너·개발자가 함께 쓰는 실전 체크리스트입니다.
내보내기 전 — 지원 기능 경계 확인
Lottie는 AE의 모든 기능을 지원하지 않습니다. 특히 아래는 플랫폼별로 지원이 갈리거나 아예 미지원인 대표 항목입니다.
| 기능 | 상태 | 대안 |
|---|---|---|
| 레이어 스타일 (Drop Shadow 등) | 런타임별 상이 | 셰이프로 직접 그리기 |
| 블러·글로우 등 이펙트 | 대부분 미지원 | 미리 구운(bake) 형태로 표현 |
| 표현식(Expressions) | 부분 지원, 런타임별 차이 | 키프레임으로 변환 |
| 3D 레이어·카메라 | 미지원에 가까움 | 2D로 눈속임 |
| 매트(Track Matte) | 알파 매트는 대체로 OK, 루마 매트 주의 | 알파 매트로 변환 |
| 그라디언트 | 선형·방사형 OK, 복잡한 스탑 주의 | 단순화 |
| 텍스트 레이어 | 폰트 의존, 플랫폼별 차이 | 아웃라인(셰이프) 변환 |
컴포지션 정리 체크리스트
- 컴포지션 크기가 스펙과 일치하는가 (예: 아이콘 24×24 배수)
- 불필요한 여백 없이 캔버스에 꽉 차게 구성했는가
- 사용하지 않는 레이어·푸티지를 제거했는가 (Remove Unused Footage)
- 레이어 이름을 정리했는가 — 색상 교체용 레이어는 약속된 이름으로 (예:
primary_fill) - 텍스트를 아웃라인으로 변환했는가
- 래스터 이미지가 정말 필요한가 — 벡터로 대체 불가한지 재확인
- 프레임레이트가 과하지 않은가 (UI 모션은 보통 30fps면 충분)
- 루프 모션이라면 첫/끝 프레임이 자연스럽게 이어지는가
내보내기 설정
- Glyphs — 텍스트를 쓴다면 글리프 포함 여부를 명시적으로 선택
- 이미지 에셋 — 포함 시 base64 인라인보다 별도 에셋 + dotLottie 포장이 관리에 유리
- 표현식 변환 — 가능하면 키프레임으로 굽기
- 소수점 — 2~3자리로 제한 (용량 절감)
내보낸 후 — 검수 순서
내보냈다고 끝이 아닙니다. 순서대로 확인하세요.
- ① 일괄 미리보기 — 에셋 폴더를 Lottie Inspector에 넣고 전부 재생되는지, 파일 크기가 튀는 것이 없는지 확인. 규격선으로 캔버스 경계, 배경 전환으로 라이트/다크 확인.
- ② 대상 플랫폼 확인 — 웹/AOS/iOS 런타임은 지원 경계가 서로 달라서, 최종 확인은 반드시 실제 런타임에서.
- ③ 저사양 기기 1대 — 팀에 보급형 Android 한 대를 두고 프레임 드랍을 확인하는 것을 추천합니다.
이 체크리스트가 생긴 계기
사실 이 목록은 어느 날 앉아서 정리한 것이 아니라, 앱에서 실제로 깨진 사고를 하나씩 겪으며 쌓인 결과에 가깝습니다. 기억에 남는 사건 두 개만 옮겨 보겠습니다.
루마 매트가 iOS에서만 깨진 날
측정 결과를 기다리는 동안 보여줄 로딩 애니메이션이었는데, 디자이너가 원형으로 차오르는 게이지를 루마 매트(Luma Matte)로 만들어서 넘겨줬습니다. 웹 미리보기에서 정상, Android 기기에서도 정상이라 그대로 넘어갔는데, iOS 실기기에서만 매트가 무시되면서 게이지가 처음부터 꽉 찬 상태로 렌더링됐습니다. QA 단계도 아니고 배포 직전 내부 테스트에서 발견해서 꽤 아찔했습니다.
원인은 단순했습니다. 제 프로젝트가 쓰던 lottie-ios 버전이 루마 매트를 제대로 처리하지 못했고, 웹의 lottie-web은 처리했기 때문에 미리보기에서는 아무 문제가 없어 보였던 겁니다. 매트를 알파 매트로 바꾸고 소스 레이어를 흑백 명도 대신 알파 채널 기준으로 다시 구성하니 세 플랫폼에서 동일하게 나왔습니다. 이후 "매트는 가능하면 알파로"가 팀 규칙이 됐고, 위 표의 매트 항목은 이 사건의 흔적입니다.
텍스트가 기기 폰트로 바뀌어 보인 사건
또 한 번은 온보딩 마지막 화면의 완료 애니메이션이었습니다. 디자이너 화면에서는 브랜드 폰트로 나오던 문구가 실기기에서는 시스템 기본 폰트로 렌더링돼서, 자간과 굵기가 완전히 다른 모양이 됐습니다. 텍스트 레이어를 그대로 내보내면 JSON에는 폰트 이름만 남는데, 런타임이 그 폰트를 찾지 못하면 기기 폰트로 조용히 대체해 버립니다. 에러도 없이 그냥 다르게 보이니 더 늦게 발견됩니다.
앱에 해당 폰트를 번들하는 방법도 있지만, 저희는 한 줄짜리 문구 때문에 폰트 파일을 추가하는 대신 AE에서 텍스트를 아웃라인으로 변환하는 쪽을 택했습니다. 위 체크리스트의 "텍스트를 아웃라인으로 변환했는가" 항목이 그래서 들어가 있습니다.
두 사건의 공통점은 미리보기에서는 멀쩡했다는 점입니다. 그래서 검수 순서 마지막에 "최종 확인은 반드시 실제 런타임에서"가 붙었고, 내보내기 전에 지원 경계 표를 먼저 훑는 습관이 생겼습니다. 비슷한 증상을 지금 겪고 있다면 디버깅 체크리스트부터 순서대로 확인해 보는 것을 추천합니다.