효과Effects / 강조·주의Emphasis / Nº 077

색 전환Color Transition

Color Transition

색 전환

다른 이름Also known as · Color-state transition · 상태 색 변화 · FadeToColor

077

렌더 추가 예정CLIP COMING색 전환Color Transition정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 077. 색 전환 · Color Transition · sine.inOut

대상의 색이 기존 색에서 다음 색으로 부드럽게 바뀌는 전환An element's color blends smoothly from its current color to the next.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

활성화, 역할 변화, 상태 전이가 일어났음을 알린다Signals activation, a role change or a state transition.

언제 쓰나Use whenUSE WHEN

버튼·노드가 대기에서 활성 상태로 바뀔 때
차트 막대가 임계값을 넘으며 경고색으로 바뀔 때

When a button or node goes from idle to active
When a chart bar crosses a threshold and turns to a warning color

과용 주의AvoidAVOID

색만으로 의미 전달 금지(아이콘·라벨 병행)
길이 0.25초 미만 금지
전후 색의 대비비 3:1 이상

분류TagsTAGS

강조·주의Emphasis 강조Emphasis 피드백Feedback 웹 UIWeb UI 설명 영상Explainer video 데이터 스토리Data story 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

막대가 0.45초 동안 청색 #2f6bff에서 노랑 #ffc83d로 바뀌고 옆 라벨도 같은 시각에 색이 바뀐다

과용 · 나쁜 사례OVERUSE

색만 바뀌고 다른 단서가 없어 색맹 시청자가 변화를 못 읽거나, 색 전환이 0.1초 미만이라 깜빡임으로 보인다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
길이	0.45s	0.3~0.8s	색 보간
이징	sine.inOut	sine~power2.inOut	부드럽게
전 색	#2f6bff	브랜드 토큰	시작
후 색	#ffc83d	브랜드 토큰	도착

GSAP

tl.to('.bar', { backgroundColor: '#ffc83d', duration: 0.45, ease: 'sine.inOut' }, 0.4)
  .to('.bar-label', { color: '#7a5a00', duration: 0.45, ease: 'sine.inOut' }, 0.4);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 막대의 색 전환을 넣어줘. 0.4초부터 0.45초 동안 backgroundColor를 #2f6bff에서 #ffc83d로 sine.inOut으로 바꾸고 같은 시각에 라벨 글자색도 #7a5a00으로 바꿔. 색만으로 의미를 전하지 않게 라벨에 상태 문구를 함께 넣어줘. paused 타임라인에 넣어.

Add a color transition to the <target> bar with GSAP. From 0.4s over 0.45s change backgroundColor from #2f6bff to #ffc83d with sine.inOut, and change the label text color to #7a5a00 at the same time. Do not rely on color alone, so include a state phrase in the label. Paused timeline.

Codex

<파일>의 <대상>에 color-transition을 적용해. backgroundColor #2f6bff→#ffc83d, 0.45s, sine.inOut, position 0.4, 라벨 color #7a5a00 동시. 0.4초·0.6초·1.0초를 캡처해 중간 색이 보간되는지, 전후 대비비가 3:1 이상인지 계산해.

Apply color-transition to <target> in <file>. backgroundColor #2f6bff to #ffc83d, 0.45s, sine.inOut, position 0.4, label color #7a5a00 in parallel. Capture at 0.4s, 0.6s and 1.0s to check the mid color interpolates and compute that before and after contrast is at least 3:1.