---
{"id":"motion","title":"모션·로딩 표현","category":"기초","order":14,"summary":"움직임은 변화의 원인을 설명하고, 사용자 작업을 방해하지 않습니다.","status":"문서 기준 · UI 미검증","references":["elements/motion/overview","patterns/loading-pattern/index"]}
---

# 모션·로딩 표현

## 목적과 기준

- MOT-01 SHOULD: 상태 변화·위치 이동·작업 진행을 이해시키는 모션만 사용합니다.
- MOT-02 MUST: prefers-reduced-motion에서 장식·시차·반복 움직임을 줄이거나 제거하고 의미는 텍스트로 유지합니다.
- MOT-03 MUST: 애니메이션 종료를 업무 요청 성공으로 취급하지 않습니다.
- MOT-04 SHOULD: 컴포넌트별 다른 easing을 늘리기 전에 제품의 기존 모션 토큰을 확인합니다.
- MOT-05 MUST: 초당 세 번을 넘는 번쩍임 등 광과민 위험을 만들지 않습니다.
- MOT-06 SHOULD: 이미 읽고 있는 내용의 재조회에 전체 페이지 skeleton을 다시 표시하지 않습니다.

## 현재 값

Blesta 토큰에는 fast 150ms, base 300ms, slow 600ms와 cubic-bezier(.22, 1, .36, 1)이 있습니다. VPS 사이드바 선언은 transform 180ms ease입니다. 제품 전체 모션 감사 결과나 운영 계산값은 아닙니다.

## 적용 예

좋음: 메뉴의 열림 상태는 aria-expanded와 위치로 전달하고, 모션 감소 환경에서는 즉시 전환합니다.

피함: 대시보드 전체를 등장 애니메이션 뒤에 숨기거나 API 응답 없이 진행률을 매초 10%씩 증가시키기.

## 확인

모션 감소, 느린 네트워크, 요청 실패, 탭을 숨겼다 돌아옴, 중단 후 재시도에서 같은 결과를 이해할 수 있어야 합니다. [대기·빈 상태·실패](states.md)를 함께 적용합니다.