테마 사용

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

테마 미리 보기

1. 테마가 들어 있는 애니메이션을 엽니다.

2. Default 대신 이름이 있는 테마를 선택합니다.

3. 전체 애니메이션을 재생하고 바뀐 색상을 모두 확인합니다.

게시되는 동작 이해

• 네이티브 Webflow Lottie - 선택한 테마가 삽입 시점의 JSON에 적용됩니다. 런타임에서 전환할 수 있는 테마가 아니라 고정된 시각적 결과가 됩니다.

• 고급 dotLottie 플레이어 - 삽입한 웹 컴포넌트가 테마 ID와 선택적인 라이트 및 다크 테마 ID를 유지할 수 있습니다. 페이지 런타임은 브라우저의 라이트 또는 다크 색상 환경설정에 반응할 수 있습니다.

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

게시되는 모든 상태 테스트

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

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

관련 문서

• 미리 보기 및 커스터마이즈

• 플레이어 설정