24장 motion은 공간과 인과를 설명할 때만 쓴다

AI가 만든 화면은 scroll reveal, floating shape, parallax, cursor effect를 쉽게 쌓는다. Motion은 개성을 더하는 무료 장식이 아니다. 주의를 빼앗고 멀미를 유발하며 main thread를 점유한다.

Onda에는 두 종류만 허용한다.

• button과 link의 짧은 상태 전환: 입력을 인식했다는 feedback
• dialog의 제한된 등장: 현재 작업 맥락이 바뀌었다는 설명

duration은 브랜드 감정만으로 정하지 않는다. 반복 횟수와 작업 속도를 고려한다. 자주 누르는 control은 더 짧고, layout을 이해시키는 드문 전환만 조금 길 수 있다. transform과 opacity를 우선하고 큰 blur·filter·layout property animation을 피한다.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

Reduced motion은 모든 피드백을 없애라는 뜻이 아니다. 위치 이동 대신 즉시 색·경계·text 상태로 바꿔 인과는 남긴다. Autoplay video를 쓴다면 pause control, muted 정책, poster, data 비용, 대체 content를 함께 설계한다.

리뷰에서 “부드럽다”를 다음 evidence로 바꾼다.

사용자 행동 없이 반복되는 motion: 0개
primary task를 지연하는 entrance: 0개
reduced-motion에서 task 손실: 0개
animation 중 layout shift: 0개
keyboard focus와 hover feedback의 의미 차이: 없음