motion choice
트랜지션과 애니메이션 선택표
두 상태 사이의 짧은 변화는 transition, 여러 장면이나 반복 움직임은 animation으로 나눈다. 먼저 변화 원인, 단계 수, 반복 여부를 확인하면 선택이 흔들리지 않는다.
01
원인
사용자 hover, focus, class 변화라면 전환 후보로 본다.
02
단계
시작과 끝만 있으면 transition, 중간 장면이 많으면 animation.
03
반복
스피너처럼 자동 반복되면 keyframes가 더 명확하다.
04
의미
움직임이 상태 변화의 의미를 설명하지 못하면 줄인다.
| 상황 | 적합한 기법 | 핵심 속성 | 예시 |
|---|---|---|---|
| 상태 전환 | Transition | property, duration, timing | 버튼 hover, 메뉴 열림 |
| 다단계 움직임 | Animation | keyframes, iteration, delay | 스피너, 슬라이드 인 |
| 정적 정보 | 움직임 최소화 | 명확한 상태 표시 | 오류 메시지, 긴 설명 |
짧은 피드백
상호작용 피드백은 빠르게 끝나야 조작감을 해치지 않는다.
반복 제한
무한 반복은 로딩처럼 계속 상태가 변하는 경우에만 둔다.
접근성
과한 움직임은 reduced motion 환경에서 줄일 수 있어야 한다.