# 렌더링
**렌더링**를 클릭하기 전에, 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로 바꾸면 플러그인이 먼저 경고합니다.

<Image src="https://assets.docs.lottiefiles.com/static/1e5a27e6cc-640.webp" alt="Player settings 메뉴와 Automatic, Lottie Web, dotLottie Player renderer 옵션이 표시된 After Effects 플러그인 전체 미리 보기" caption="전체 미리 보기 메뉴의 Player settings에서 미리 보기 renderer를 선택합니다" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/1e5a27e6cc-640.webp 640w, https://assets.docs.lottiefiles.com/static/1e5a27e6cc-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/1e5a27e6cc-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAiklEQVR4nD2OwQqCQABE/YxMCWlhl9R021ZTq0vQIWQ71KG6BfYf3fvoXqDVYeANvIHx2kvHL+76+PO3vz2Za8JUM8oM5eGM0IYgNYyLph94edXQPV8s2jvW3Vi6E8I2BOV2ENSqQpUborml3h+R1RphaqZZMQiTRBOqGF8o7K4lijMCOcOXSf/hA/w+RSsAOBGtAAAAAElFTkSuQmCC" />

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

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

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

- 목적지가 **어떤 library**를 쓰는지(가장 흔하게는 `dotlottie-web` 같은 dotLottie 런타임 또는 `lottie-web` 같은 레거시 Lottie 런타임).
- 목적지에 **어떤 버전**이 설치되어 있는지. 오래된 버전은 최신 Lottie spec 기능(표현식 베이킹, 고급 텍스트 애니메이터, 상태 머신, 모션 토큰)을 지원하지 않습니다.
- 목적지 팀이 library를 **업데이트할 수 있는지**. 업데이트할 수 없다면 설치된 버전이 지원하는 기능 안으로 제한하세요.

플러그인 안의 [기능 검수](/ko/integrations/after-effects/08_feature-checker)는 Lottie 파일을 분석해 어떤 기능을 사용하는지 보고합니다. 이 결과를 런타임의 release notes와 대조하세요.

<span id="choosing-format" />

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

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

|                 | `.json`(Lottie)                | `.lottie`(dotLottie)                           |
| --------------- | ------------------------------ | ---------------------------------------------- |
| 무엇인가            | 원래 Lottie 형식인 일반 JSON          | 하나 이상의 Lottie JSON과 메타데이터를 감싼 zipped container |
| 파일 크기           | 더 큼(압축되지 않은 텍스트)               | 더 작음(gzip 압축, 에셋 중복 제거)                        |
| 상태 머신 지원        | ❌                              | ✅                                              |
| 테마 and 모션 토큰 지원 | ❌                              | ✅                                              |
| 런타임 라이브러리       | `lottie-web`, `lottie-react` 등 | `dotlottie-web`, `dotlottie-react` 등           |
| 하위 호환성          | ✅ 모든 런타임에서 널리 지원               | 🟡 dotLottie를 이해하는 런타임 필요                      |
| 선택할 때           | 최대 호환성, 테마나 상태 머신가 필요 없음       | 더 작은 파일, 테마나 상태 머신 사용, 런타임을 제어할 수 있음           |

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

{
  // TEMP_IMAGE_HIDDEN: 임시 릴리스에서는 숨김. 시각 QA 때 이 소스 위치에 이미지를 복원하세요.
  false ? (

  <Image
      src="/images/screenshots/ae-render-format-decision-tree.webp"
      alt="Decision tree for choosing between Lottie JSON and dotLottie output formats"
      caption="목적지 런타임에 맞는 출력 형식을 선택하세요"
      zoom
      variant="default"
    />
  ) : null
}

## 관련 문서

- [Lottie용 컴프 준비하기](/ko/integrations/after-effects/04_preparing-comps) — 렌더링 전 AE 쪽 컴프 준비.
- [내보내기](/ko/integrations/after-effects/06_export/exporting-compositions-as-lottie) — 실제 렌더링 실행.
- [기능 검수](/ko/integrations/after-effects/08_feature-checker) — Lottie 파일의 기능 사용을 런타임 지원과 비교해 분석합니다.
- [Lottie 호환성](/ko/integrations/after-effects/09_lottie-compatibility) — 정적 AE 기능 → Lottie 기준표입니다.