# Interaction & motion tokens

> State feedback, micro-interactions, duration, easing, and reduced motion

- Canonical: https://learning.reopt.ai/en/courses/design-systems/lessons/ds-l3-interaction
- Language: en
- HTML: https://learning.reopt.ai/en/courses/design-systems/lessons/ds-l3-interaction

---

[Design systems in the AI era](/en/courses/design-systems) 3. Consistency & interaction 8 / 15

# Interaction & motion tokens

State feedback, micro-interactions, duration, easing, and reduced motion
Concept 30 XP 6 min

사용자 경험의 품질은 인터랙션 디테일에서 갈립니다. 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 | 자연스러운 동작 |

prefers-reduced-motion 모션 민감 사용자를 위해 useReducedMotion 훅과 CSS 미디어 쿼리로 애니메이션을 축소/비활성화합니다. 접근성 필수 항목입니다.
핵심 정리

- 모든 상태(default~error)를 스타일 토큰으로 정의하고 상태 전이를 명시한다
- 마이크로인터랙션은 scale·duration·easing 값으로 토큰화한다
- Duration은 instant(50ms)~slowest(500ms), easing은 easeOut/easeIn/easeInOut/spring으로 표준화한다
- prefers-reduced-motion을 훅과 CSS로 받아 접근성을 챙긴다

[Previous](/en/courses/design-systems/lessons/ds-l3-consistency) Got it · Continue

---

Site guide for agents: https://learning.reopt.ai/llms.txt · Sitemap: https://learning.reopt.ai/sitemap.xml · Contact: https://learning.reopt.ai/contact