UI 애니메이션 duration을 정하는 기준
애니메이션이 너무 빠르면 변화를 인식하기 어렵고, 너무 느리면 UI가 답답하게 느껴집니다. 인간이 자연스럽다고 느끼는 인터랙션 피드백은 100–300ms 범위에 집중됩니다. 이동 거리가 짧고 작은 요소일수록 빠르게, 화면 전체를 덮는 대형 컴포넌트일수록 느리게 설정하는 것이 원칙입니다.
이징 커브도 중요합니다. ease-out은 처음에 빠르게 시작하다 멈추는 느낌으로, 물체가 자연스럽게 안착하는 느낌을 줍니다. 진입 애니메이션에 특히 적합합니다. ease-in은 서서히 시작해 빠르게 끝나므로 퇴장 애니메이션에 적합합니다.
접근성 고려사항
CSS 미디어 쿼리 prefers-reduced-motion: reduce를 체크하여 애니메이션을 줄이거나 비활성화해야 합니다. 전정기관 장애가 있는 사용자는 과도한 모션으로 어지러움을 느낄 수 있습니다.
자주 묻는 질문
버튼 클릭 애니메이션은 얼마나 빨라야 하나요?
100–150ms가 적당합니다. 100ms 미만은 인지되기 어렵고, 200ms 이상이면 반응이 느리게 느껴집니다.
모달 등장 애니메이션 권장 시간은?
200–300ms를 권장합니다. 진입보다 퇴장을 더 짧게(150–200ms) 하면 사용자가 불필요하게 기다리지 않습니다.
페이지 전환 애니메이션은 얼마로 설정해야 하나요?
300–400ms를 권장합니다. 500ms를 초과하면 사용자가 느리다고 인식합니다.