Foundations
Motion
모션은 상태가 바뀌었다는 사실을 알리는 데만 씁니다. 지속 시간 5단과 이징 커브, 그리고 움직임을 줄이는 설정 대응을 정리했습니다.
전환은 대부분 색·테두리·배경에 걸립니다. 요소가 실제로 이동하는 경우는 오버레이가 열리고 닫힐 때뿐이고, 그때도 이동 거리는 짧게 둡니다.
지속 시간
instant 50ms
fast 100ms
normal 150ms
slow 200ms
slower 300ms
- instant 50ms — 눌림 피드백처럼 즉각 반응해야 하는 변화
- fast 100ms — hover 색 변화
- normal 150ms — 대부분의 상태 전환
- slow 200ms — 오버레이 열기, 표면 전환
- slower 300ms — 큰 패널이 밀려 나오는 전환
이징
| token | value |
|---|---|
| default | ease |
| in | ease-in |
| out | ease-out |
| in-out | ease-in-out |
| in-strong | cubic-bezier(0.895, 0.03, 0.685, 0.22) |
| out-strong | cubic-bezier(0.165, 0.84, 0.44, 1) |
| out-cubic | cubic-bezier(0.215, 0.61, 0.355, 1) |
| out-quint | cubic-bezier(0.16, 1, 0.3, 1) |
| in-out-strong | cubic-bezier(0.77, 0, 0.175, 1) |
등장과 퇴장에는 out-strong 또는 out-quint를 씁니다. 빠르게 시작해
천천히 멈추는 커브라 요소가 제자리에 안착한 느낌을 줍니다.
움직임 줄이기
prefers-reduced-motion: reduce에서 이동과 확대는 0이 되고, 색·투명도 변화만
남습니다. 유리 표면은 prefers-reduced-transparency에서 흐림이 사라지고 불투명
배경으로 바뀝니다.