# 테마와 모션 토큰 사용
VS Code의 실시간 미리 보기에서 dotLottie 테마를 전환하고 모션 토큰 값을 테스트하세요.

테마와 모션 토큰을 사용하면 애니메이션 전체를 복제하지 않고도 하나의 `.lottie`에 여러 스타일을 적용할 수 있습니다. 런타임 로직을 작성하기 전에 확장 프로그램에서 각 스타일을 확인하세요.

<Image src="https://assets.docs.lottiefiles.com/static/a81ed8b14b-640.webp" alt="테마 값을 전환하고 편집할 수 있는 모션 토큰 패널과 Lottie 미리 보기" caption="실시간 애니메이션을 보며 테마를 바꾸고 토큰 값을 테스트합니다" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/a81ed8b14b-640.webp 640w, https://assets.docs.lottiefiles.com/static/a81ed8b14b-1024.webp 1024w" width="1376" height="870" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAiklEQVR4nB2NuxKCMADA+h8OCFRsKx4Mng4oIK9WT6GM+P//EQ+2ZMhF9H6h7kcaN/MYvjydp3ae0o609oO4VB2lvnLPb+yCgK54kqUZQRix5AqxVlEUE8cSk57Zh3LzlWUsEUX7xugEpRXJUWOUQcoDRhuyk0YM/kdjp+1b2YnmNVPZkdpOtG7kDzuMQhflT9KcAAAAAElFTkSuQmCC" />

## 테마와 모션 토큰의 차이

- **테마**는 dotLottie 매니페스트에 이름과 함께 저장된 슬롯 값 모음입니다.
- **모션 토큰** 또는 **슬롯**은 테마나 런타임에서 재정의할 수 있도록 특정 애니메이션 값을 외부에 노출합니다.

두 기능 모두 `.lottie`가 필요합니다. 일반 Lottie JSON에는 매니페스트 테마와 슬롯 정의가 유지되지 않습니다.

## 테마 전환

1. 테마가 포함된 `.lottie` 파일을 엽니다.
2. **Motion Tokens** 또는 **Theme**을 펼칩니다.
3. 매니페스트 테마나 프리셋을 선택합니다.
4. 애니메이션을 재생하며 영향을 받는 모든 상태를 확인합니다.

기본 테마로 돌아가려면 초기화하세요.

## 슬롯 값 편집

패널에는 다음과 같은 지원 값이 표시될 수 있습니다.

- 단색과 그레이디언트
- 스칼라와 벡터
- 텍스트와 타이포그래피 값
- 기존 키프레임에 있는 애니메이션 슬롯 값

이미지 슬롯은 읽기 전용입니다. 애니메이션 값은 기존 키프레임의 값만 변경하며 타이밍, 이징 또는 홀드 방식은 편집하지 않습니다.

## 테마 데이터 내보내기 또는 복사

일부 미리 보기에는 테마 데이터 내보내기나 런타임 `setThemeData` 예제가 표시됩니다. 현재 파일에 이 메뉴가 보일 때만 사용하세요. 표시되지 않는다면 `.lottie`를 유지하고 Code Snippet 패널에서 런타임 코드를 생성합니다.

## 테마 및 토큰 제작

VS Code에서는 테마와 토큰을 테스트하고 개발에 필요한 값을 확인할 수 있습니다. 새 슬롯 추가, 슬롯 연결 변경, 테마 제작, 애니메이션 토큰 타이밍 편집은 Lottie Creator에서 진행하세요.

## 관련 문서

- [연동 코드 생성](/ko/integrations/vscode/05_integrate/generating-integration-code)
- [출력 형식 선택](/ko/integrations/vscode/05_integrate/choosing-an-output-format)
- [Lottie Creator 문서](/en/creator)