motion-craft 가이드

한 줄 결과물: 동작마다 빈도, 목적, 이징, 시간, 속성을 정하고(또는 "모션 없음"으로 끝내고) 점검표와 토큰 대응으로 남긴 결정.

언제 쓰나

모션 점검 카드: 이징 곡선, 시간 범위, 점검표, 토큰 대응

입력	값
대상	모달 열기 / 드롭다운 / 버튼 눌림
이징	등장·퇴장은 ease-out 계열, 위치 이동은 ease-in-out, UI에 ease-in은 쓰지 않는다
시간	눌림 100~160ms, 드롭다운·툴팁 150~250ms, 모달·드로어 200~300ms (이 팀의 시작점)
점검표	미달 1건: `transition: all` 사용 중
토큰 대응	`220ms ease-out` / 모달 열기 / `motion-modal-in`

토큰 이름은 모양을 보여 주는 예시다. 제품에 토큰이 있으면 토큰이 우선이다.

빈도를 정한다. 하루에 수십 번 쓰는 동작이나 키보드로 시작하는 동작에는 모션을 넣지 않는다.

motion-craft 스킬로 이 컴포넌트의 모션을 점검해 줘: <파일 경로>.
동작마다 빈도(자주/가끔/드물게)와 목적 한 줄을 먼저 적고, 목적이 없으면 모션을 빼 줘.

이징을 고른다. 등장과 퇴장은 ease-out, 위치 변경은 ease-in-out, 호버는 ease, 일정 속도는 linear. 곡선은 토큰으로 둔다.
시간을 고른다. 위 범위 안이거나 벗어난 이유를 적는다. 퇴장은 진입보다 짧거나 조용하게.
구현 방식을 고른다. 끊을 수 있는 인터랙션은 CSS transition, 단계 연출만 keyframes. 움직임은 transform과 opacity만, 시작 크기는 0이 아니라 0.95 안팎.

모션 줄이기 대체를 쓴다.

@media (prefers-reduced-motion: reduce) {
  .modal { transition: opacity 0.2s ease-out; transform: none; }
}

검색으로 확인한다. 레이아웃 속성 애니메이션과 transition: all이 0건이어야 한다.
```
grep -rnE "transition:\s*all|transition-property:\s*all" src/
```
눈으로 확인한다. 화면을 녹화하거나 애니메이션 속도를 10분의 1로 늦춰 첫 프레임, 중간, 끝 프레임에서 튀는 곳이 없는지 본다.