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

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

토마스 슈타이너

모든 사용자가 장식용 애니메이션이나 전환을 좋아하는 것은 아니며 일부 사용자는 시차 스크롤, 확대/축소 효과 등에 직면했을 때 멀미를 경험합니다. 사용자 환경설정 미디어 쿼리 prefers-reduced-motion를 사용하면 이러한 환경설정을 표현한 사용자를 위해 사이트의 모션 감소 변형을 디자인할 수 있습니다.

브라우저 지원

• 74
• 79
• 63
• 10.1

소스

실제 및 웹에서 움직임이 너무 많음

지난번에는 아이들과 아이스 스케이트를 타고 있었습니다. 정말 사랑스러운 하루였고, 햇빛이 밝았고, 아이스링크는 사람으로 가득 차 있었습니다 ⛸. 그것의 유일한 문제는 인파를 잘 감당할 수 없다는 것입니다. 움직이는 표적이 너무 많아서 어떤 것에도 집중하지 못해서, 마치 개미핥기 🐜를 보는 것처럼 완전히 시각적인 과부하를 느낍니다.

실생활의 시각적 과부하

플래시 광고, 화려한 패럴랙스 효과, 놀라운 애니메이션 애니메이션, 자동재생 동영상 등 웹이 때때로 압도적일 수 있습니다. 다행히 현실과 달리 이에 대한 해결책이 있습니다. 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;
  }
}

참고: 애니메이션 관련 CSS가 많은 경우 link 요소의 media 속성을 통해서만 조건부로 로드하는 별도의 스타일시트로 모든 애니메이션 관련 CSS를 아웃소싱하면 선택 해제된 사용자가 다운로드하지 못하도록 할 수 있습니다. 😎: <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

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

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> 컨텍스트에서 미디어 쿼리 작업

흥미로운 사용 사례는 media 속성에 종속된 애니메이션 AVIF, WebP 또는 GIF를 재생하는 것입니다. (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 status 고양이를 기반으로 한 데모를 만들었습니다. 먼저 잠시 시간을 내어 농담에 대해 알아봅시다. 재미있어서 기다리겠습니다. 이제 돌아오셨으니 데모를 소개해 드리겠습니다. 아래로 스크롤하면 각 HTTP 상태 고양이가 오른쪽 또는 왼쪽에서 번갈아 표시됩니다. 부드러운 60FPS 애니메이션이지만 위에서 설명한 것처럼 일부 사용자는 마음에 들지 않거나 멀미를 느낄 수 있으므로 데모는 prefers-reduced-motion를 따르도록 프로그래밍되었습니다. 이는 동적으로 작동하므로 사용자가 새로고침 없이 환경설정을 즉시 변경할 수 있습니다. 사용자가 모션이 줄어드는 것을 선호한다면 불필요한 표시 애니메이션은 사라지고 일반 스크롤 동작만 남습니다. 아래 스크린캐스트는 데모를 보여줍니다.

prefers-reduced-motion 데모 앱 동영상

결론

최신 웹사이트에서는 사용자 환경설정을 준수하는 것이 중요하며, 브라우저는 웹 개발자가 이를 지원할 수 있도록 점점 더 많은 기능을 노출하고 있습니다. 출시된 또 다른 예로는 사용자가 밝은 색 구성표를 선호하는지 어두운 색 구성표를 선호하는지 감지하는 prefers-color-scheme가 있습니다. 제 Hello Darkness, My Old Friend 경우를 통해 prefers-color-scheme에 관한 모든 것을 읽어볼 수 있습니다.

CSS Working Group은 현재 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 사양의 최신 편집자 초안
• Chrome 플랫폼 상태의 prefers-reduced-motion
• prefers-reduced-motion Chromium 버그.
• 깜박임 게시 구현 의도.

감사의 말

Chrome에서 prefers-reduced-motion를 구현했으며 롭 도슨과 함께 스티븐 맥그루어에게 감사의 인사를 전합니다. 또한 이 문서를 검토했습니다. Hero image, Hannah Cauhepe, Unsplash