Preferreds-reducedmotion: 때로는 적은 움직임이 더 효과적일 수 있습니다.

prefers-reduced-motion 미디어 쿼리는 사용자가 운영체제에 사용하는 애니메이션이나 동작의 양을 최소화하도록 요청했는지 감지합니다.

Thomas Steiner

장식용 애니메이션이나 전환을 좋아하는 사람은 많지 않으며, 일부 사용자는 시차 스크롤, 확대/축소 효과 등을 접할 때 멀미를 경험하기도 합니다. 사용자 환경설정 미디어 쿼리 prefers-reduced-motion를 사용하면 이 환경설정을 표현한 사용자를 위해 사이트의 동작이 줄어든 변형을 설계할 수 있습니다.

실생활 및 웹에서 너무 많은 움직임

며칠 전 아이들과 아이스 스케이팅을 했습니다. 날씨는 좋았고 햇빛도 쨍쨍했으며 아이스링크는 사람들로 가득했습니다 ⛸. 하지만 저는 군중을 잘 견디지 못합니다. 움직이는 목표가 너무 많아서 아무 데도 집중할 수 없고, 결국 길을 잃고 시각적 과부하가 완전히 걸린 느낌이 듭니다. 마치 개미집을 쳐다보는 것 같습니다 🐜.

웹에서도 마찬가지입니다. 깜박이는 광고, 멋진 시차 효과, 놀라운 공개 애니메이션, 자동 재생 동영상 등으로 웹이 때로는 압도적으로 느껴질 수 있습니다. 다행히 실제와 달리 이 문제를 해결할 수 있습니다. CSS 미디어 쿼리 prefers-reduced-motion를 사용하면 개발자가 동작을 줄이는 것을 선호하는 사용자를 위한 페이지 변형을 만들 수 있습니다. 여기에는 자동 재생 동영상을 사용하지 않는 것부터 순전히 장식적인 효과를 사용 중지하는 것, 특정 사용자를 위해 페이지를 완전히 재설계하는 것까지 모든 것이 포함될 수 있습니다.

기능을 살펴보기 전에 한 단계 뒤로 물러나 웹에서 애니메이션이 사용되는 용도를 생각해 보겠습니다. 원하는 경우 배경 정보를 건너뛰고 기술 세부정보로 바로 이동할 수도 있습니다.

웹의 애니메이션

애니메이션은 사용자에게 피드백을 제공하는 데 자주 사용됩니다. 예를 들어 작업이 수신되어 처리되고 있음을 알리는 데 사용됩니다. 예를 들어 쇼핑 웹사이트에서 제품이 사이트 오른쪽 상단에 아이콘으로 표시된 가상 장바구니로 '날아가는' 애니메이션을 적용할 수 있습니다.

또 다른 사용 사례는 스켈레톤 화면, 컨텍스트 메타데이터, 낮은 품질의 이미지 미리보기를 혼합하여 사용자의 시간을 많이 차지하고 전체 환경이 더 빠르게 느껴지도록 하여 동작을 사용하여 사용자 인식에 영향을 주는 것입니다. 이 아이디어는 사용자에게 앞으로 나올 내용을 맥락에 맞게 제공하고 그동안 최대한 빨리 항목을 로드하는 것입니다.

마지막으로 애니메이션 그라데이션, 시차 스크롤, 배경 동영상 등 장식 효과가 있습니다. 많은 사용자가 이러한 애니메이션을 즐기지만 일부 사용자는 애니메이션으로 인해 집중력이 흐트러지거나 속도가 느려진다고 생각하여 싫어합니다. 최악의 경우 사용자는 실제 경험인 것처럼 멀미를 겪을 수도 있으므로 이러한 사용자에게는 애니메이션을 줄이는 것이 의학적 필요성입니다.

동작으로 유발되는 전정 스펙트럼 장애

일부 사용자는 애니메이션 콘텐츠로 인해 산만해지거나 메스꺼움을 느낍니다. 예를 들어 스크롤 애니메이션은 스크롤과 관련된 기본 요소가 아닌 요소가 많이 움직일 때 전정 기관 장애를 일으킬 수 있습니다. 예를 들어 패럴랙스 스크롤 애니메이션은 배경 요소가 전경 요소와 다른 속도로 움직이기 때문에 전정 기관 장애를 유발할 수 있습니다. 전정 기관 (내이) 장애 반응에는 어지럼증, 메스꺼움, 편두통이 포함되며, 회복을 위해 때로는 침대에 누워 휴식을 취해야 합니다.

운영체제에서 움직임 삭제

많은 운영체제에는 오랫동안 동작 감소를 선호하는 설정을 지정하는 접근성 설정이 있었습니다. 다음 스크린샷은 macOS Mojave의 동작 줄이기 환경설정과 Android Pie의 애니메이션 삭제 환경설정을 보여줍니다. 이 옵션을 선택하면 운영체제에서 앱 실행 애니메이션과 같은 장식 효과를 사용하지 않습니다. 애플리케이션 자체도 이 설정을 준수하고 불필요한 애니메이션을 모두 삭제해야 합니다.

웹에서 모션 삭제하기

미디어 쿼리 수준 5는 동작 감소 사용자 환경설정을 웹에도 적용합니다. 미디어 쿼리를 사용하면 작성자가 렌더링되는 문서와 독립적으로 사용자 에이전트 또는 디스플레이 기기의 값이나 기능을 테스트하고 쿼리할 수 있습니다. prefers-reduced-motion 미디어 쿼리는 사용자가 운영체제 환경설정을 설정하여 사용하는 애니메이션이나 동작의 양을 최소화했는지 감지하는 데 사용됩니다. 다음 두 가지 값을 사용할 수 있습니다.

• no-preference: 사용자가 기본 운영체제에서 선호도를 지정하지 않았음을 나타냅니다. 이 키워드 값은 불리언 컨텍스트에서 false로 평가됩니다.
• reduce: 인터페이스에서 움직임이나 애니메이션을 최소화해야 한다는 운영체제 환경설정을 사용자가 설정했음을 나타냅니다. 모든 불필요한 움직임이 삭제되는 것이 좋습니다.

CSS 및 JavaScript 컨텍스트에서 미디어 쿼리 사용

모든 미디어 쿼리와 마찬가지로 prefers-reduced-motion는 CSS 컨텍스트와 JavaScript 컨텍스트에서 확인할 수 있습니다.

두 가지를 모두 설명하기 위해 사용자가 클릭해야 하는 중요한 가입 버튼이 있다고 가정해 보겠습니다. 눈길을 사로잡는 '진동' 애니메이션을 정의할 수 있지만, 좋은 웹 시민으로서 애니메이션에 명시적으로 동의한 사용자에게만 애니메이션을 재생하고, 애니메이션을 선택 해제한 사용자나 미디어 쿼리를 이해하지 못하는 브라우저의 사용자 등 다른 사용자에게는 재생하지 않습니다.

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

JavaScript로 prefers-reduced-motion를 사용하는 방법을 설명하기 위해 Web Animations API로 복잡한 애니메이션을 정의했다고 가정해 보겠습니다. CSS 규칙은 사용자 환경설정이 변경될 때 브라우저에 의해 동적으로 트리거되지만 JavaScript 애니메이션의 경우 변경사항을 직접 수신 대기한 다음 진행 중인 애니메이션을 수동으로 중지하거나 사용자가 허용하는 경우 다시 시작해야 합니다.

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

실제 미디어 쿼리를 둘러싼 괄호는 필수입니다.

window.matchMedia('prefers-reduced-motion: reduce');

window.matchMedia('(prefers-reduced-motion: reduce)');

<picture> 컨텍스트에서 미디어 쿼리 작업

흥미로운 사용 사례는 애니메이션 AVIF, WebP 또는 GIF 재생을 media 속성에 종속시키는 것입니다. (prefers-reduced-motion: no-preference)이 true로 평가되면 애니메이션 버전을 표시해도 안전합니다. 그렇지 않으면 정적 버전을 표시합니다.

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

다음 예시를 참고하세요. 기기의 동작 환경설정을 전환하여 차이를 확인해 보세요.

요청 시 사용자의 환경설정 확인

Sec-CH-Prefers-Reduced-Motion 클라이언트 힌트 헤더를 사용하면 사이트에서 요청 시 사용자의 동작 환경설정을 선택적으로 가져올 수 있으므로 서버에서 성능상의 이유로 올바른 CSS를 인라인할 수 있습니다.

데모

Rogério Vicente의 멋진 🐈 HTTP 상태 고양이를 기반으로 작은 데모를 만들었습니다. 먼저 농담을 감상하세요. 정말 웃기니까 기다리겠습니다. 이제 돌아오셨으니 데모를 소개해 드리겠습니다. 스크롤하면 각 HTTP 상태 고양이가 오른쪽 또는 왼쪽에서 번갈아 표시됩니다. 60FPS의 부드러운 애니메이션이지만 앞에서 설명한 것처럼 일부 사용자는 이를 싫어하거나 모션 병을 느낄 수도 있으므로 데모는 prefers-reduced-motion를 따르도록 프로그래밍되어 있습니다. 이 기능은 동적으로 작동하므로 사용자는 새로고침 없이 즉시 환경설정을 변경할 수 있습니다. 사용자가 모션 감소를 선호하는 경우 불필요한 표시 애니메이션이 사라지고 일반 스크롤 모션만 남습니다. 다음 스크린캐스트는 데모가 작동하는 모습을 보여줍니다.

결론

사용자 환경설정을 존중하는 것은 최신 웹사이트의 핵심이며, 브라우저는 웹 개발자가 이를 수행할 수 있도록 점점 더 많은 기능을 노출하고 있습니다. 출시된 또 다른 예는 사용자가 밝은 색상 구성표를 선호하는지 어두운 색상 구성표를 선호하는지 감지하는 prefers-color-scheme입니다. prefers-color-scheme에 관한 모든 내용은 내 도움말 어둠아, 오랜만이야 🌒에서 확인할 수 있습니다.

CSS 작업 그룹은 prefers-reduced-transparency(사용자가 투명도 감소를 선호하는지 감지), prefers-contrast (사용자가 인접한 색상 간의 대비를 늘리거나 줄이도록 시스템에 요청했는지 감지), inverted-colors (사용자가 색상 반전을 선호하는지 감지)과 같은 더 많은 사용자 환경설정 미디어 쿼리를 표준화하고 있습니다.

(보너스) 모든 웹사이트에서 모션 감소 강제 적용

모든 사이트에서 prefers-reduced-motion를 사용하는 것은 아니며, 사용하더라도 원하는 만큼은 아닐 수 있습니다. 어떤 이유로든 모든 웹사이트에서 모션을 중지하고 싶다면 실제로 그렇게 할 수 있습니다. 이를 수행하는 한 가지 방법은 방문하는 모든 웹페이지에 다음 CSS가 포함된 스타일 시트를 삽입하는 것입니다. 이 기능을 지원하는 브라우저 확장 프로그램이 여러 개 있습니다 (사용 시 주의).

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

이 방법은 이전 CSS가 모든 애니메이션과 전환의 지속 시간을 더 이상 눈에 띄지 않을 정도로 짧은 시간으로 재정의하는 방식으로 작동합니다. 일부 웹사이트는 올바르게 작동하기 위해 애니메이션이 실행되어야 하므로 (예: 특정 단계가 animationend 이벤트의 실행에 따라 달라짐) 더 급진적인 animation: none !important; 접근 방식은 작동하지 않습니다. 이전의 해결 방법조차 모든 웹사이트에서 성공한다고 보장할 수는 없습니다 (예를 들어 Web Animations API를 사용하여 시작된 동작을 중지할 수 없음). 따라서 중단이 발생하면 비활성화해야 합니다.

리소스

• 미디어 쿼리 레벨 5 사양의 최신 편집자 초안입니다.
• prefers-reduced-motion에서 확인할 수 있습니다.
• prefers-reduced-motion Chromium 버그.
• 구현 의도 게시

감사의 말씀

Chrome에서 prefers-reduced-motion를 구현하고 Rob Dodson과 함께 이 문서를 검토한 Stephen McGruer에게 감사의 말씀을 전합니다.