좋은 모션은 배려에서 시작됩니다

블로그 구성을 보여주는 예제 글입니다.

움직임은 사용자의 시선을 안내하고, 화면의 상태 변화를 이해하도록 도와줍니다. 하지만 같은 효과가 누군가에게는 불편할 수도 있습니다. 모션을 설계할 때는 무엇을 움직일지만큼 언제 멈출 수 있는지도 생각해야 합니다.

사용자의 설정을 존중하기

운영체제의 모션 감소 설정은 웹에서도 확인할 수 있습니다. CSS의 prefers-reduced-motion 미디어 쿼리로 불필요한 전환을 줄일 수 있습니다.

.card {
  transition: transform 180ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

설정을 감지하는 것에서 끝나지 않고, 기본 화면이 정지된 상태에서도 충분히 이해되는지 확인하는 것이 중요합니다. 색, 텍스트, 배치도 상태를 전달할 수 있습니다.

자동 재생 대신 선택권

짧은 데모라도 재생 버튼을 제공하면 사용자가 준비된 순간에 움직임을 살펴볼 수 있습니다. 처음 방문하자마자 화면 전체가 움직일 필요는 없습니다.

이 사이트의 모션 데모도 자동 재생하지 않습니다. 모션 감소 설정이 켜져 있다면 그 사실을 안내하고, 사용자가 재생을 누를 때만 선택한 움직임을 보여줍니다.

초기화는 진행 중인 동작도 멈추기

Web Animations API로 생성한 애니메이션은 참조를 보관해 취소할 수 있습니다. 초기화할 때는 진행 중인 애니메이션을 취소하고 시작 상태로 돌립니다.

const animation = element.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(160px)' }],
  { duration: 800, easing: 'ease-out', fill: 'forwards' },
);

// 초기화하거나 화면을 떠날 때
animation.cancel();

확인할 세 가지

1. 움직임 없이도 화면의 내용을 이해할 수 있는가?
2. 사용자가 직접 시작하고 초기화할 수 있는가?
3. 키보드만으로도 모든 컨트롤에 접근할 수 있는가?

편안한 인터페이스는 아주 작은 선택에서 만들어집니다. Lab의 모션 데모에서 재생 시간과 이징을 바꾸며 차이를 느껴보세요.