Lottie용 컴프 준비하기

애니메이션이 Lottie로 얼마나 깔끔하게 내보내지는지를 결정하는 After Effects 컴포지션 선택 체크리스트입니다. 렌더링 전에 5분만 확인해도 문제 해결에서 오갈 대부분의 시간을 줄일 수 있습니다.

접근 방법

이 작업은 LottieFiles 플러그인의 Export 탭에 도달하기 전, After Effects 안에서 하는 워크플로입니다.

시작하기 전에

After Effects에서 컴포지션이 열려 있습니다.
목적지 런타임이 어떤 Lottie 기능을 지원하는지 대략 알고 있습니다. 확실하지 않다면 Lottie 호환성을 참고하세요.

단계

1. 레이어 이름을 의미 있게 짓기

Lottie는 레이어 이름을 출력 JSON으로 가져갑니다. 플레이어 라이브러리와 인터랙션 도구(LottieFiles의 상태 머신, 모션 토큰 등)는 이름으로 레이어를 타깃하는 경우가 많습니다. Layer 47이나 Shape Layer 12 copy 3 같은 알 수 없는 이름은 이후 작업을 힘들게 만듭니다.

소문자와 하이픈으로 구분한 이름을 사용하세요: button-bg, icon-arrow, loading-dots.
관련 레이어는 공통 prefix 아래에 묶으세요: cta-bg, cta-label, cta-icon.
런타임이 명시적으로 지원하지 않는 한 공백, 슬래시, 비 ASCII 문자는 피하세요.

2. raster보다 셰이프 레이어 우선 사용

벡터 셰이프 레이어는 Lottie로 깔끔하게 변환되고 파일 크기도 작게 유지됩니다. Raster(이미지) 레이어는 Lottie 파일 안에 PNG로 포함되며, 파일 크기를 부풀리는 가장 큰 원인이 됩니다.

로고와 아이콘은 셰이프 레이어로 trace하세요. 미리 렌더링한 PNG 버전을 붙여넣지 마세요.
사진이나 복잡한 텍스처처럼 이미지가 꼭 필요할 때는 작게 유지하고, 런타임에서 교체할 placeholder 레이어를 사용하는 것도 고려하세요.
Adjustment 레이어, gradient fill, 많은 AE effect는 내보낼 때 벡터 친화적이지 않습니다. Lottie 호환성을 참고하세요.

3. 정리용이 아니라 재사용 그룹에 pre-compose 사용

Lottie에서 pre-comp는 중첩 컴포지션이 되고, 런타임은 이를 별도로 인스턴스화합니다. 실제로 재사용되는 그룹(세 곳에 나타나는 버튼, 반복되는 모션 패턴)일 때 사용하세요. 타임라인을 정리하려는 목적으로만 pre-compose하는 것은 피하세요. 중첩이 한 단계 늘 때마다 런타임 작업이 늘어납니다.

pre-compose를 할 때는 pre-comp 이름을 의미 있게 지정하세요. Lottie JSON에서 참조 가능한 nested comp가 됩니다.

4. 변환되지 않는 기능 피하기

일부 After Effects 기능은 조용히 빠지거나 내보내기를 깨뜨립니다. 렌더링 전에 컴프를 Lottie 호환성 기준표와 비교하세요. 가장 자주 문제가 되는 항목은 다음과 같습니다.

Expressions — 지원되지 않습니다. 내보내기 전에 키프레임으로 bake하세요(Animation > Keyframe Assistant > Convert Expression to Keyframes).
Adjustment 레이어 — 내보내지지 않습니다.
Camera and Light 레이어 — 내보내지지 않습니다. 대신 2D 카메라 움직임을 시뮬레이션하세요.
3D rotation — 부분 지원입니다. Z축 위치는 보통 작동하지만 전체 3D 회전은 잘 안 되는 경우가 많습니다.
Most AE effects — 일부만 왕복됩니다. 나머지는 누락됩니다.

5. work area와 사용하지 않는 keyframe 정리

Exporter는 work area를 따릅니다. 내보내려는 실제 범위로 설정하세요. work area 시작 전과 끝난 뒤의 불필요한 keyframe은 제거하세요. 재생에는 영향을 주지 않으면서 JSON만 커집니다.

실무 패턴: 먼저 work area를 설정한 뒤 Edit > Purge > All Memory & Disk Cache를 실행해 미리 보기와 내보내기 결과가 맞도록 합니다.

6. 알맞은 프레임 속도 선택

Lottie 재생은 제작한 프레임 속도를 따릅니다. 프레임 속도가 높을수록 모션은 부드럽지만 파일이 커지고 런타임 작업도 늘어납니다. 일반적인 범위:

24 fps — 영화 같은 모션, 가장 작은 파일.
30 fps — 대부분의 웹과 모바일 사용에 기본값.
60 fps — 더 부드럽지만 파일 크기가 약 2배. 짧고 모션이 많은 애니메이션에만 남겨두세요.

Composition > Composition Settings > 프레임 속도에서 설정합니다.

파일 크기 줄이기

Lottie의 무게는 몇 가지 컴포지션 선택이 대부분을 좌우합니다. 웹페이지나 앱 번들처럼 대상에서 파일 크기가 중요하다면 다음을 관리하세요.

Raster 이미지는 가장 큰 비용입니다. 모든 이미지 레이어는 Lottie 안에 embedded PNG로 들어갑니다. 로고와 아이콘은 셰이프 레이어로 trace하고(2단계), raster는 실제 사진에만 쓰되 작게 유지하세요.
프레임 속도는 거의 선형으로 크기를 키웁니다. 60 fps는 30 fps의 거의 두 배입니다(6단계). 보기 좋은 범위에서 가장 낮은 rate로 제작하세요.
Work area를 정리하세요. 내보낸 범위 밖의 keyframe과 프레임도 JSON을 부풀립니다(5단계).
무거운 modifier와 중첩을 제한하세요. 큰 repeater, 많은 mask, 깊은 pre-comp 중첩은 모두 무게를 더합니다. Lottie 호환성을 참고하세요.
최적화된 변형을 전달하세요. 내보낸 뒤 Optimized .lottie 다운로드는 보통 동일한 재생을 유지하면서 30-60% 더 작습니다. 다운로드를 참고하세요.

After Effects 타임라인 with redundant keyframes highlighted after the intended motion range — 내보내기 전에 불필요한 keyframe을 제거해 Lottie 파일을 가볍게 유지하세요

앞의 네 가지는 애니메이션 자체를 줄이고, 최적화는 내보낸 결과를 압축합니다. 둘 다 사용하세요.

결과 확인

렌더링 전에 빠르게 점검하세요.

레이어 패널이 정돈되어 있습니다. Shape Layer 7 copy 4 같은 이름이 없습니다.
Raster 레이어는 의도적으로 적게 사용했습니다.
Pre-comp는 정리용 폴더가 아니라 재사용 그룹입니다.
Work area가 의도한 내보내기 범위와 일치합니다.
Work area를 키보드로 scrub했을 때 모션이 의도대로 보입니다.

다섯 가지가 모두 맞다면 컴포지션을 Lottie로 내보내기로 이동하세요.