# 테마 사용
Webflow에 삽입하기 전에 dotLottie 테마를 적용하세요.

테마를 사용하면 애니메이션 원본을 따로 내보내지 않고 하나의 dotLottie 파일에서 이름이 있는 시각적 변형을 제공할 수 있습니다. 선택한 파일에 호환되는 테마 데이터가 있을 때만 테마 컨트롤이 표시됩니다.

## 테마 미리 보기

1. 테마가 들어 있는 애니메이션을 엽니다.
2. **Default** 대신 이름이 있는 테마를 선택합니다.
3. 전체 애니메이션을 재생하고 바뀐 색상을 모두 확인합니다.

<Image src="https://assets.docs.lottiefiles.com/static/b939a96cb6-640.webp" alt="Default, Light, Dark 테마 설정이 보이는 Webflow 테마 미리 보기" caption="테마를 미리 보고 Light 및 Dark 변형을 설정합니다" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/b939a96cb6-640.webp 640w, https://assets.docs.lottiefiles.com/static/b939a96cb6-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/b939a96cb6-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlElEQVR4nB3DWwqCQABA0dlCaAVjQoFS6aSmffjKFCcyUbCgn/a/jOIGHTjich2odM+5vZPVNzLdkaQZSh1o+udXSCkxjBnSkuTHkOVizlAGNHlCoUeEZduYcxN74zB2E2t7RRiFeL6i7iaE4zoo5REEiv3eJYoC4uiAt3Np+wciyWtORU160f9x2eI3L7blRDW8Pz9GSD/4tZE0HgAAAABJRU5ErkJggg==" />

## 게시되는 동작 이해

- **네이티브 Webflow Lottie** - 선택한 테마가 삽입 시점의 JSON에 적용됩니다. 런타임에서 전환할 수 있는 테마가 아니라 고정된 시각적 결과가 됩니다.
- **고급 dotLottie 플레이어** - 삽입한 웹 컴포넌트가 테마 ID와 선택적인 라이트 및 다크 테마 ID를 유지할 수 있습니다. 페이지 런타임은 브라우저의 라이트 또는 다크 색상 환경설정에 반응할 수 있습니다.

런타임 전환이 필요할 때만 고급 방식을 사용하세요. 사이트에서 제어하는 테마 토글과 브라우저의 `prefers-color-scheme` 설정은 자동으로 같은 조건이 되지 않습니다.

## 게시되는 모든 상태 테스트

앱, Webflow Preview, 스테이징 URL에서 선택한 테마를 미리 봅니다. 런타임 라이트 및 다크 테마를 사용한다면 브라우저의 두 색상 환경설정을 모두 테스트하고 모든 브레이크포인트에서 대비를 확인하세요.

파일에 쓸 만한 테마가 없다면 Lottie Creator에서 테마를 편집하거나 만든 뒤 Workspace에 다시 저장하세요.

## 관련 문서

- [미리 보기 및 커스터마이즈](/ko/integrations/webflow/04_prepare/previewing-and-customizing)
- [플레이어 설정](/ko/integrations/webflow/05_insert-and-publish/configuring-the-player)