# 애니메이션 색상 변경 프리셋 또는 직접 만든 팔레트를 적용하고, 색상을 바꾼 원본을 Workspace에 저장해 Webflow에 삽입하세요. 모션은 적절하지만 아트워크가 Webflow 사이트와 어울리지 않을 때 색상 팔레트를 사용하세요. 색상 변경은 하나의 고정된 색상 조합을 새 Workspace 파일에 반영합니다. 런타임에서 테마를 전환하는 기능과는 다릅니다. ## 팔레트와 테마 중 선택하기 | 작업 | 사용할 기능 | | ----------------------------- | ------------------------------------------------------ | | 감지된 색상을 하나의 고정 팔레트로 교체 | 팔레트 컨트롤 | | 라이트 및 다크 모드를 포함해 준비된 여러 변형 전환 | [테마](/ko/integrations/webflow/04_prepare/using-themes) | | 개별 레이어, 그레이디언트, 타이밍 또는 구조 편집 | Lottie Creator | ## 팔레트 컨트롤 열기 1. **Explore** 또는 **Workspace**에서 애니메이션을 엽니다. 2. 애니메이션 전체를 재생해 모션이 적절한지 확인합니다. 3. 미리 보기 아래의 팔레트 색상 견본을 선택해 색상 컨트롤을 펼칩니다. 선택한 팔레트는 미리 보기에 바로 적용됩니다. 결과를 비교할 때는 미리 보기의 배경과 크기를 동일하게 유지하세요. ## 프리셋 팔레트 적용 **Preset palettes**에서 팔레트를 선택합니다. 앱이 감지한 편집 가능한 색상을 한꺼번에 교체하므로 결과 전체를 재생하고 타임라인을 이동하며 확인하세요. 하나의 원본 색상이 여러 레이어나 애니메이션 상태에 사용될 수 있습니다. 다른 팔레트를 시도하기 전에 **Reset**을 선택하면 원래 색상으로 돌아갈 수 있습니다. ## 나만의 팔레트 만들기 1. **Custom palettes**에서 **New palette**를 선택합니다. 2. 색상 견본을 선택하고 교체할 색상을 지정합니다. 3. 필요에 따라 색상을 추가합니다. 하나의 팔레트에는 최대 5개까지 넣을 수 있습니다. 4. 완성한 팔레트를 선택해 애니메이션에 적용합니다. 5. 실제 페이지를 대표하는 배경에서 애니메이션을 재생하고 타임라인을 이동하며 확인합니다. 필요하지 않은 개별 색상을 제거하거나 직접 만든 팔레트 전체를 삭제할 수 있습니다. 색상 팔레트를 적용하기 전과 후의 Webflow 애니메이션 ## 삽입하기 전에 변경한 원본 저장하기 팔레트를 적용하면 **Insert animation**이 **Save and insert animation**으로 바뀝니다. 색상을 바꾼 결과를 새 Workspace 파일로 저장해야 Webflow에 삽입할 수 있습니다. 1. **Save and insert animation**을 선택합니다. 2. 대화 상자가 열리면 저장할 Workspace, 프로젝트, 폴더를 선택합니다. 계정에 Workspace와 기본 프로젝트가 하나씩만 있으면 앱이 해당 위치에 바로 저장합니다. 3. 저장된 Workspace 파일이 열릴 때까지 기다립니다. 4. Webflow 페이지에서 의도한 요소나 컨테이너가 계속 선택되어 있는지 확인합니다. 5. **Insert animation**을 선택해 저장된 결과를 페이지에 추가합니다. 공개 또는 팀 관리 원본과 구분할 수 있는 이름으로 파일을 저장하세요. 이후 업데이트에서는 색상을 바꿔 저장한 파일을 프로덕션 원본으로 사용합니다. ## 멀티 애니메이션 파일 색상 변경 팔레트는 현재 선택한 하위 애니메이션에 적용됩니다. 다른 하위 애니메이션으로 전환하면 적용 중인 팔레트가 초기화됩니다. 저장할 때는 선택한 하위 애니메이션의 색상을 바꿔 dotLottie 파일을 다시 만들고, 번들의 나머지 애니메이션은 유지합니다. 삽입하기 전에 저장된 파일을 다시 열어 활성 하위 애니메이션, ID, 전체 번들을 확인하세요. ## 변경되는 고급 기능 확인 팔레트 교체와 런타임 테마는 서로 다른 준비 과정입니다. 팔레트를 적용하면 선택한 테마가 **Default**로 돌아갑니다. 상태 머신이 활성화되어 있다면 색상을 바꾸기 전에 일반 재생으로 돌아가세요. 앱은 변경한 JSON을 일반 애니메이션 데이터로 준비하는 동안 상태 머신 미리 보기를 비활성화합니다. 게시된 플레이어에서 여러 변형을 전환해야 한다면 팔레트 대신 테마를 사용하세요. 삽입하기 전에 저장된 파일을 다시 열어 고급 기능이 유지되는지 확인합니다. 원본 구조를 편집하면서 고급 dotLottie 기능도 유지해야 한다면 Lottie Creator를 사용하세요. ## 제한 사항 - 팔레트 교체는 감지된 편집 가능한 벡터 색상을 바꿉니다. 포함된 래스터 이미지의 색상은 바꾸지 않습니다. - 일부 그레이디언트와 복잡한 색상 효과는 팔레트에 정확히 매핑되지 않을 수 있습니다. - 재사용된 원본 색상은 여러 레이어나 상태에서 한꺼번에 바뀔 수 있습니다. - 고정된 색상을 반영한 원본은 Workspace 테마와 실시간으로 연결되지 않습니다. - 레이어별 색상, 그레이디언트 또는 애니메이션 구조를 바꾸려면 Lottie Creator를 사용하세요. ## 관련 문서 - [미리 보기 및 커스터마이즈](/ko/integrations/webflow/04_prepare/previewing-and-customizing) - [Workspace 애니메이션 삽입](/ko/integrations/webflow/03_workspace/inserting-workspace-animations) - [Webflow에 삽입](/ko/integrations/webflow/05_insert-and-publish/inserting-into-webflow)