사용 가이드로 건너뛰기
Color Motion작성자 iart-ai

Color Motion 스킬.

움직이는 팔레트, 지각 기반 색상 전환, 일관된 내보내기를 설계하세요.

  • 색상 시스템
  • 모션 디렉션
소스 검토 · color-motionSKILL.md
작업 움직이는 팔레트, 지각 기반 색상 전환, 일관된 내보내기를 설계하세요. 결과물 명확한 색상값과 역할이 지정된 팔레트. 시작 전 확인 소스의 플레이어 및 내보내기 안내는 설치된 소프트웨어와 실제 목표 브라우저에서 여전히 검증해야 합니다.
편집 요약 · 소스 검토일 2026-11-02 · 생성된 예제가 아닙니다

01 기능 소개

움직이는 팔레트, 지각 기반 색상 전환, 일관된 내보내기를 설계하세요

OKLCH와 Lab 보간, 움직이는 그라디언트, 그레이딩 순서, 미리보기와 내보내기 사이의 색상 변화 확인 방법을 살펴보세요.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

color-motion은 움직이는 작품 안의 색상 결정, 즉 팔레트 구성, 그라디언트 전환, 분위기 그레이딩, 렌더링 일관성을 다룹니다. 명확한 색상값을 가진 절제된 팔레트를 제안하며 보간을 설계할 때 OKLCH나 Lab 같은 지각 색 공간을 사용합니다.

웹 작업에서는 하나의 애니메이션 드라이버와 정지 프레임 확인을 갖춘 독립 HTML 결과물을 설명합니다. 영상 작업에서는 색상 관리 진단으로 연결합니다. 색이 바랜 듯한 내보내기 결과는 작품의 색을 바꾸기 전에 작업 색 공간, 내장 태그, 재생 시 해석 방식을 조사해야 합니다.

예상 산출물

  • 명확한 색상값과 역할이 지정된 팔레트.
  • 브라우저에서 볼 수 있는 예제의 그라디언트 또는 전환 코드.
  • 선택한 영상 워크플로를 위한 그레이딩 또는 색상 관리 체크리스트.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    색상 역할 지정

    브리프에 맞는 주색, 강조색, 중성색을 고릅니다. 위계와 대비 요건을 장식적 변주와 구분합니다.

  2. 02
    전환 경로 구성

    지각 색 공간에서 보간을 설계하고 애니메이션 드라이버 하나를 선택합니다. 양 끝 색상뿐 아니라 중간 지점도 확인합니다.

  3. 03
    최종 표현 확인

    대표 웹 프레임을 정지해 보거나 렌더링한 영상의 태그와 모습을 목표 재생 환경에서 비교합니다. 납품 전에 밴딩과 밝기 변화를 조사합니다.

02 활용 상황

언제 사용하면 좋을까요

소스의 플레이어 및 내보내기 안내는 설치된 소프트웨어와 실제 목표 브라우저에서 여전히 검증해야 합니다.

적합한 경우

  • 중간에서 탁해지는 그라디언트이 스킬은 양 끝 색상 견본뿐 아니라 색 사이의 경로에 집중합니다.
  • 내보내기가 미리보기와 다를 때진단 경로를 이용해 색상 처리 과정과 플레이어의 가정을 확인하세요.

확인할 한계

  • 환경마다 색상 동작이 다름소스의 플레이어 및 내보내기 안내는 설치된 소프트웨어와 실제 목표 브라우저에서 여전히 검증해야 합니다.
  • 팔레트만으로 접근성이 입증되지는 않음움직이는 배경을 포함해 텍스트와 컨트롤의 실제 렌더링 상태를 확인해야 합니다.

준비할 입력

  • 브랜드 색상승인된 값과 팔레트 제약을 제공하세요.
  • 모션 목표그라디언트, 상태 변화 또는 영상 그레이딩과 그 지속 시간을 설명하세요.
  • 납품 환경브라우저나 영상 플레이어, 내보내기 설정을 지정하고 문제 해결이라면 관찰한 불일치도 알려주세요.

03 핵심 결정

중요한 판단 기준

  1. 명시적인 보간

    색 공간을 명시하면 중간 색도 의도적으로 선택하게 됩니다.

  2. 확인 가능한 움직임

    시작, 중간, 끝 캡처로 밴딩이나 읽기 어려운 조합을 확인할 수 있습니다.

  3. 분리된 진단

    태그와 재생 검사는 렌더링 파이프라인 문제와 디자인 결정을 구분하는 데 도움이 됩니다.

04 예시 브리프

목적을 좁힌 요청으로 시작하세요

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

소스와 설정 확인

승인된 값과 팔레트 제약을 제공하세요.

업스트림 소스 파일
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/color-motion/SKILL.md

아래 참고 링크에서 원본 사용 지침을 확인할 수 있습니다. 사용 전에 리포지터리의 설정 요건을 확인하세요. 설치 명령어가 아닙니다.

결과물 하나부터 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
color-motion을 사용해 제공한 네이비와 앰버 브랜드 색상으로 절제된 움직이는 배경을 만들어주세요. 읽기 쉬운 중성색 텍스트와 느린 그라디언트 한 주기를 포함하는 독립 HTML 예제를 제공하세요. 팔레트를 hex와 OKLCH로 명시하고 전환 중간에 칙칙하거나 탁한 색이 생기는지 확인하며 정적인 모션 감소 상태를 포함하세요. 수정 후에는 같은 시작, 중간, 끝 시점을 캡처하세요. 두 번째 애니메이션 드라이버를 추가하지 마세요. 브라우저 동작이 의도한 보간과 다르면 제약을 설명하고 검사한 모든 상태에서 텍스트가 읽히도록 유지하세요.

결과 확인

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 양 끝과 중간 색, 밴딩, 텍스트 대비를 확인합니다.
  • 한 시계가 애니메이션을 제어하고 정지 프레임이 재현되는지 확인합니다.
  • 정적인 모션 감소 표현과 실제 납품 환경을 테스트합니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스와 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자
iart-ai
스킬 파일
SKILL.md
라이선스
MIT
검토한 스냅샷
2026-11-02 · 3c129f769d90
편집 소스 요약
움직이는 팔레트, 지각 기반 색상 전환, 일관된 내보내기를 설계하세요.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 궁금한 점

중간 지점이 중요한 이유는 무엇인가요?

매력적인 양 끝 색상도 사이에서 원치 않는 탁한 영역을 지나갈 수 있습니다. 이 스킬은 보간 색 공간과 중간 프레임을 디자인의 일부로 다룹니다.

웹 그라디언트에만 적용되나요?

아니요. 그레이딩 순서와 영상 색상 관리 진단도 다루며 각 작업의 별도 참고 자료가 있습니다.

색이 바랜 내보내기 결과는 바로 색을 바꿔야 하나요?

소스는 작업 색 공간, 내장 색상 태그, 재생 경로를 먼저 확인하라고 권합니다. 작품 자체에 오류가 없어도 처리 과정의 불일치로 외관이 달라질 수 있습니다.

OpenDesign

작업 요청과 디자인 결과물을 한곳에 모으세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/color-motion/SKILL.md