Interaction & motion tokens
State feedback, micro-interactions, duration, easing, and reduced motion
사용자 경험의 품질은 인터랙션 디테일에서 갈립니다. AI가 일관된 인터랙션을 구현하려면 상태 피드백과 애니메이션을 먼저 토큰으로 정리해 둬야 합니다.
상태 피드백
버튼·입력의 모든 상태 — default·hover·focus·active·disabled·loading·error — 를 스타일 토큰으로 정의하고, 상태 전이를 다이어그램으로 명시합니다. 예: 로딩 버튼은 aria-busy=true + 스피너 + 클릭 비활성화.
마이크로인터랙션 토큰
| 효과 | 값 | duration |
|---|---|---|
| buttonPress | scale 0.98 | 100ms |
| hoverLift | translateY -2px + shadow | 200ms |
| focusRing | ring 2px + offset 2px | 150ms |
| ripple | scale 0→2, opacity 0.3→0 | 400ms |
Duration 스케일
| 토큰 | 값 | 용도 |
|---|---|---|
| instant | 50ms | 즉각 피드백 (hover, focus) |
| fast | 100ms | 빠른 전환 (색상 변경) |
| normal | 200ms | 대부분의 UI |
| slow | 300ms | 모달 열기 |
| slowest | 500ms | 페이지 전환 |
Easing 함수
| 함수 | 용도 |
|---|---|
| easeOut | 요소 진입 애니메이션 (표준 감속) |
| easeIn | 요소 퇴장 애니메이션 (표준 가속) |
| easeInOut | 상태 전환 (가감속) |
| spring | 자연스러운 동작 |