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

Preferreds-Reduced-motion 미디어 쿼리는 사용자가 요청했는지 여부를 감지합니다. 운영체제에서 사용하는 애니메이션이나 모션의 양을 최소화합니다.

Thomas Steiner

모든 사람이 장식용 애니메이션이나 전환을 좋아하는 것은 아니며, 일부 사용자는 완전히 모션을 경험합니다. 패럴랙스 스크롤, 확대/축소 효과 등과 직면했을 때의 병을 일으킬 수 있습니다. 사용자 환경설정 미디어 prefers-reduced-motion 쿼리를 사용하면 이 선호를 표시함

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

얼마 전 아이들과 함께 아이스 스케이팅을 했습니다. 날씨가 좋았고, 햇살이 비추고, 얼음이 좋았어요 링크에는 사람들로 가득했습니다 ⛸. 그것에 관한 유일한 문제는 나는 인파를 감당할 수 없다는 것입니다. 이렇게 움직이는 과녁이 너무 많아서 무엇에 집중하지 못하다가 결국 온전히 온전한 기분을 느끼게 되죠. 개미핥기를 쳐다보는 것과 비슷한 시각적 과부하 🐜.

</ph>

웹에서도 가끔씩 같은 일이 일어날 수 있습니다. 깜박이는 광고, 화려한 시차 효과, 놀라운 애니메이션, 자동재생 동영상 등은 때때로 웹이 굉장히 어려울 수 있습니다... 다행히 현실에서는 달리 해결책이 있습니다. 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를 사용하는 방법을 설명하기 위해 은 웹 애니메이션 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 상태 고양이 먼저, 농담을 감상하는 시간을 가져보세요. 웃기고 기다릴게. 다시 돌아오셨으니 이제 demo 스크롤할 때 각 HTTP 상태 cat 오른쪽 또는 왼쪽에서 번갈아 나타납니다. 60fps의 매우 부드러운 화면입니다. 하지만 앞서 설명한 것처럼 일부 사용자는 이를 싫어하거나 심지어 모션이 멀어질 수 있으므로 데모는 prefers-reduced-motion를 준수하도록 프로그래밍되었습니다. 이는 동적으로 작동하므로 사용자는 환경설정을 즉시 변경할 수 있으며, 새로고침할 필요가 없습니다. 사용자가 낮은 모션을 선호하는 경우 불필요한 표시 애니메이션이 사라지고 일반적인 스크롤 모션만 남습니다. 이 다음 스크린캐스트는 실제 데모를 보여줍니다.

결론

현대 웹사이트에서는 사용자 선호도를 존중하는 것이 핵심이며, 브라우저는 점점 더 기능을 제공합니다. 실행되는 또 다른 예는 prefers-color-scheme 사용자가 밝은 색 구성표와 어두운 색 구성표를 선호하는지 감지합니다. 여러분은 내 기사 Hello Darkness, My Old Friend에서 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 사용 Chrome 플랫폼 상태.
• prefers-reduced-motion Chromium 버그를 참조하세요.
• 깜박임 게시 구현 의도.

감사의 말씀

Google의 책임감 있는 AI를 구현한 스티븐 맥그루어에게 prefers-reduced-motion과 함께 롭 도슨 씨도 이 문서를 검토했습니다. 히어로 이미지: 한나 카우헤프(Unsplash)