테마 사용

dotLottie 테마를 적용하고 라이트 및 다크 변형을 Framer 색상 모드에 연결하세요.

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

테마 미리 보기

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

  2. 테마 컨트롤에서 Default 대신 이름이 있는 테마를 선택합니다.

  3. 애니메이션을 재생하고 첫 프레임이 아니라 전체 결과를 확인합니다.

Framer 라이트 및 다크 모드 설정

Configure themes에서 파일 테마 하나를 Framer 라이트 모드에, 다른 하나를 다크 모드에 연결합니다. 삽입한 컴포넌트는 이 테마 ID를 저장하고 사이트 색상 모드에 맞춰 반응합니다.

Framer에서 애니메이션 테마 구성
Framer에서 애니메이션 테마 구성

렌더러 요구 사항

테마를 적용한 dotLottie 재생에는 ThorVG Player 또는 Automatic을 사용하세요. SVG Player는 전체 테마 동작을 유지하지 못하며 호환성 경고가 표시될 수 있습니다.

게시되는 모든 상태 테스트

  • 플러그인에서 기본, 라이트, 다크 변형을 미리 봅니다.

  • 게시하기 전에 Framer의 두 가지 색상 모드를 테스트합니다.

  • 실제 사이트를 열고 운영체제 또는 사이트 색상 모드를 전환합니다.

  • 모든 브레이크포인트에서 대비와 브랜드 색상을 확인합니다.

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

관련 문서

마지막 업데이트: 2026년 9월 11일 오후 12:08Common.editThisPage