Motion
애니메이션은 기능적으로만 사용해요. 상태 변환 확인과 주의 안내가 목적이며 지연·장식은 피해요. 인터랙티브 요소는 fast(150ms)로 즉시감을, 오버레이는 slow(350ms)로 안정감을 줘요. prefers-reduced-motion: reduce 설정 시 모든 transform 애니메이션을 disable하고 opacity 전환만 유지해요.
원칙
생산성 도구에서 과도한 애니메이션은 인지 부하를 만들어요. 모든 인터랙티브 전환은 즉시감을 위해 fast(150ms)에 맞추고, 모달·토스트 같은 오버레이는 차분한 안정감을 위해 slow(350ms)를 써요. 페이지 전환은 지연 없이 즉시 렌더링해요.
Duration tokens
| Token | 값 | 사용 예시 |
|---|---|---|
| duration-instant | 100ms | Hover, focus 피드백 |
| duration-fast | 150ms | 버튼 상태 전환, 색상 변화 |
| duration-normal | 250ms | 드롭다운 열림/닫힘, 툴팁 등장 |
| duration-slow | 350ms | 모달 진입, 토스트 슬라이드 |
Easing tokens
| Token | curve | 사용 예시 | |
|---|---|---|---|
| ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | 기본 전환 | |
| ease-out | cubic-bezier(0, 0, 0.2, 1) | 등장 애니메이션 | |
| ease-in | cubic-bezier(0.4, 0, 1, 1) | 퇴장 애니메이션 |
Animation Patterns
| Component | Transition | Notes |
|---|---|---|
| Modal | Enter · opacity 0→1 + translateY(8px→0), slow, ease-out Exit · opacity 1→0 + translateY(0→8px), normal, ease-in | Overlay 동시 fade |
| Dropdown | Enter · opacity 0→1 + scaleY(0.96→1), normal, ease-out Exit · opacity 1→0, fast, ease-in | transform-origin: 트리거 방향 |
| Toast | Enter · opacity 0→1 + translateY(-12px→0), slow, ease-out Exit · opacity 1→0, normal | Auto-dismiss 3초 |
| Tooltip | Enter · opacity 0→1, normal, ease-out Exit · opacity 1→0, fast | 200ms delay 후 표시 |
| Button states | Enter · background-color, fast, ease-in-out Exit · — | border-color, box-shadow 포함 |
| Page transition | Enter · 없음 (즉시 렌더링) Exit · — | 생산성 도구에서 지연 방지 |
Reduced Motion
| Token | 동작 | 효과 |
|---|---|---|
| Duration | 모든 duration을 0ms로 강제 | 즉시 상태 전환 |
| Transform | translateY, scaleY 등 제거 | slide-scale 모션 비활성화 |
| Opacity | 전환만 유지 | fade in/out 그대로 작동 |
| Auto-dismiss | 타이머 유지, 애니메이션 없이 제거 | 토스트 3초 후 즉시 사라짐 |