렌더링

렌더링를 클릭하기 전에, Lottie가 어떻게 보이고 대상 플랫폼에서 어떻게 동작할지를 좌우하는 몇 가지 결정이 있습니다. 이 장은 그 결정들을 다룹니다. 플러그인이 어떤 미리 보기 renderer를 쓰는지, 어떤 플레이어 library 버전을 목표로 해야 하는지, .json(Lottie)과 .lottie(dotLottie) 중 무엇을 전달할지입니다. 가벼운 내보내기라면 필수 읽기는 아니지만, 프로덕션 작업에서는 건너뛰었을 때 문제가 생기기 쉬운 지점입니다.

애니메이션 미리 보기 — 어떤 renderer인가

플러그인은 렌더링 전에 애니메이션을 미리 보여줍니다. 이 미리 보기는 최종 사용자가 보게 될 엔진과 반드시 같지는 않습니다. 전체 미리 보기의 더보기 메뉴에서 Player settings를 열어 다음 중 하나를 선택합니다.

• Automatic (Recommended) — 현재 애니메이션에 권장되는 renderer를 사용합니다.

• Lottie Web (SVG) — lottie-web 계열의 기본 웹 renderer입니다.

• dotLottie Player (ThorVG) — 공식 dotLottie Player가 사용하는 ThorVG renderer로, 테마와 State Machine을 올바르게 미리 보는 데 필요합니다.

Player settings는 Explore, Import, Workspace의 전체 미리 보기와 완료된 Export 렌더링에서 사용할 수 있습니다. 테마나 State Machine이 포함된 애니메이션에서 dotLottie Player가 아닌 renderer로 바꾸면 플러그인이 먼저 경고합니다.

Library 버전 — 최종 사용자가 설치한 것

Lottie에는 런타임 라이브러리(lottie-web, lottie-react, dotlottie-web, lottie-android, lottie-ios 등)가 있고 각 라이브러리에는 버전이 있습니다. 오늘 After Effects에서 만든 기능이 지난달 출시된 런타임 라이브러리 버전을 필요로 할 수 있습니다. 최종 사용자의 사이트나 앱이 오래된 버전을 포함하고 있다면 그 기능은 렌더링되지 않습니다.

내보내기 전에 확인하세요.

• 목적지가 어떤 library를 쓰는지(가장 흔하게는 dotlottie-web 같은 dotLottie 런타임 또는 lottie-web 같은 레거시 Lottie 런타임).

• 목적지에 어떤 버전이 설치되어 있는지. 오래된 버전은 최신 Lottie spec 기능(표현식 베이킹, 고급 텍스트 애니메이터, 상태 머신, 모션 토큰)을 지원하지 않습니다.

• 목적지 팀이 library를 업데이트할 수 있는지. 업데이트할 수 없다면 설치된 버전이 지원하는 기능 안으로 제한하세요.

플러그인 안의 기능 검수는 Lottie 파일을 분석해 어떤 기능을 사용하는지 보고합니다. 이 결과를 런타임의 release notes와 대조하세요.

형식 선택 — .json(Lottie) vs .lottie(dotLottie)

플러그인은 두 가지 형식을 만들 수 있습니다. 배포 맥락이 다릅니다.

목적지가 이미 lottie-web을 쓰고 배포 팀이 런타임을 바꿀 수 없다면 .json을 전달하세요. 새로 시작하거나 목적지가 .lottie를 지원한다면 .lottie를 전달해 작은 파일과 선택적 테마/상태 머신 지원을 얻으세요.

관련 문서

• Lottie용 컴프 준비하기 — 렌더링 전 AE 쪽 컴프 준비.

• 내보내기 — 실제 렌더링 실행.

• 기능 검수 — Lottie 파일의 기능 사용을 런타임 지원과 비교해 분석합니다.

• Lottie 호환성 — 정적 AE 기능 → Lottie 기준표입니다.