파운데이션

모션

모션은 장식이 아니라 상태 변화를 설명하는 수단입니다. 짧고 절제되게, 사용자의 조작에 즉시 반응하도록 설계합니다.

기본 지속시간: 140 – 220ms
기본 이징: Standard (0.2, 0, 0, 1)
접근성: prefers-reduced-motion 대응

지속 시간

토큰	값	용도
--duration-instant	80ms	눌림(press) · 테이블 행 hover
--duration-fast	140ms	버튼 · 입력 포커스 · 색 전환
--duration-normal	220ms	탭 인디케이터 · 스위치 · 드롭다운
--duration-slow	360ms	바텀시트 · 토스트 · 페이지 전환
--duration-chart	720ms	차트 등장 애니메이션 (D3 timer)

이징

막대를 클릭하면 같은 거리를 각 이징으로 이동합니다.

토큰	cubic-bezier	용도
--ease-standard	0.2, 0, 0, 1	대부분의 상태 전환
--ease-emphasized	0.3, 0, 0, 1	화면에 들어오는 요소 (시트 · 모달)
--ease-exit	0.4, 0, 1, 1	화면에서 나가는 요소
--ease-spring	0.34, 1.4, 0.64, 1	토스트 · 결제 완료 체크 (절제해서 사용)

모션 패턴

12,800원

결제 완료 · spring 360ms

토스트 · spring 360ms

세그먼트 · 스위치 · emphasized 220ms

로딩 · 폭을 유지한 채 스피너로 전환

사용 규칙

이렇게 하세요

피드백은 100ms 안에 시작
들어올 때는 느리게(emphasized), 나갈 때는 빠르게(exit)
결제 완료처럼 중요한 순간에만 스프링

이렇게 하지 마세요

400ms 넘는 UI 전환
무한 반복 장식 애니메이션
POS · 키오스크에서 긴 페이지 전환 (처리 속도가 느려 보임)

모션 줄이기

OS에서 ‘동작 줄이기’를 켠 사용자는 모든 트랜지션이 0.01ms로 단축되고, D3 차트는 애니메이션 없이 최종 상태로 바로 그려집니다.