사용자의 모션 선호도 존중

웹에서 모션으로 작업할 때 모든 사람이 동일한 방식으로 모션을 경험하는 것은 아니라는 점을 고려하는 것이 중요합니다. 어떤 사람들에게는 부드럽고 매끄럽게 느껴질 수 있는 것이 다른 사람들에게는 성가시거나 주의를 산만하게 할 수 있으며, 더 심하게는 질병을 유발하거나 발작을 일으킬 수도 있습니다. 움직임이 많은 웹 사이트는 모바일 장치의 배터리 수명에 더 큰 영향을 미치거나 더 많은 데이터를 사용할 수 있습니다(예: 동영상 자동 재생은 정적 이미지보다 사용자 데이터가 더 많이 필요함). 이는 움직임이 많은 사이트가 모든 사람에게 바람직하지 않은 이유 중 일부일 뿐입니다.

대부분의 새로운 운영 체제에서는 사용자가 시스템 수준 설정에서 모션 기본 설정을 지정할 수 있습니다. prefers-reduced-motion 미디어 쿼리(레벨 5 미디어 쿼리 사양의 일부)를 사용하면 사용자의 시스템 수준 모션 기본 설정을 감지하고 이를 존중하는 CSS 스타일을 적용할 수 있습니다.

Preferences prefers-reduced-motion 에 대한 두 가지 옵션은 reduce 또는 no-preference 입니다. 사용자가 모션 감소에 대한 기본 설정을 명시적으로 설정한 경우 CSS에서 다음과 같은 방식으로 이를 사용하여 요소의 애니메이션을 끌 수 있습니다.

 .some-element { animation: bounce 1200ms; } @media (prefers-reduced-motion: reduce) { .some-element { animation: none; } }

반대로 사용자에게 모션 기본 설정이 없는 경우 에만 애니메이션을 설정할 수 있습니다. 이것은 작성해야 하는 코드의 양을 줄이는 이점이 있으며 사용자의 모션 기본 설정을 제공하는 것을 잊어버릴 가능성이 적다는 것을 의미합니다.

 @media (prefers-reduced-motion: no-preference) { .some-element { animation: bounce 1200ms; } }

추가 이점은 prefers-reduced-motion 지원하지 않는 이전 브라우저가 규칙을 무시하고 원래의 동작 없는 요소만 표시한다는 것입니다.

어떤 규칙?

다소 확립된 합의가 모바일 우선인 min-width 및 max-width 미디어 쿼리와 달리(따라서 min-width 선호), 축소 모션 스타일을 작성 하는 단일 "올바른" 방법은 없습니다 . 나는 위에 나열된 이유로 두 번째 예를 prefers-reduced-motion: no-preference 하는 경향이 있습니다. Tatiana Mac은 개발자가 고려할 수 있는 몇 가지 접근 방식과 웹에서 모션을 사용하여 디자인할 때 묻는 주요 질문을 포함하여 다른 많은 훌륭한 요점을 다루는 이 훌륭한 기사를 작성했습니다.

항상 그렇듯이 팀 커뮤니케이션 과 일관된 전략 은 웹 접근성과 관련하여 모든 기반이 포함되도록 하는 데 중요합니다.

실제 사용: 스크롤 동작 prefers-reduced-motion 적용

prefers-reduced-motion 에는 키프레임 애니메이션 또는 전환을 적용(또는 적용하지 않음)하는 것 외에도 많은 응용 프로그램이 있습니다. 한 가지 예는 부드러운 스크롤입니다. html 요소에 scroll-behaviour: smooth 를 설정하면 사용자가 페이지 내 앵커 링크를 클릭하면 페이지의 적절한 위치로 부드럽게 스크롤됩니다( 현재 Safari에서는 지원되지 않음 ).

 html { scroll-behavior: smooth; }

불행히도 CSS에서는 현재 그 동작을 제어할 수 없습니다. 콘텐츠 페이지가 긴 경우 페이지 스크롤 속도가 매우 빨라 움직임에 민감한 사람에게는 매우 불쾌한 경험이 될 수 있습니다. 미디어 쿼리로 래핑하여 사용자가 reduced-motion 선호하는 경우 해당 동작이 적용되는 것을 방지 할 수 있습니다.

 @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

Javascript에서 모션 기본 설정을 위한 케이터링

때로는 CSS가 아닌 JavaScript에서 모션을 적용해야 합니다. matchMedia 를 사용하여 JS로 사용자의 모션 선호도를 유사하게 감지할 수 있습니다. JS 코드에서 조건부로 부드러운 스크롤 동작을 구현하는 방법을 살펴보겠습니다.

 /* Set the media query */ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)') button.addEventListener('click', () => { /* If the media query matches, set scroll behavior variable to 'auto', otherwise set it to 'smooth' */ const behavior = prefersReducedMotion.matches ? 'auto' : 'smooth' /* When the button is clicked, the user will be scrolled to the top */ window.scrollTo({ x: 0, y: 0, behavior }) })

동일한 원칙을 사용하여 JS 라이브러리로 모션이 풍부한 UI를 구현할지 또는 라이브러리 자체를 로드할지 여부를 감지할 수 있습니다.

다음 코드 스니펫에서 사용자가 감소된 동작을 선호하는 경우 함수가 일찍 반환되어 사용자에게 성능이 좋은 큰 종속성의 불필요한 가져오기를 방지합니다. 모션 기본 설정이 없으면 Greensock 애니메이션 라이브러리를 동적으로 가져와 애니메이션을 초기화할 수 있습니다.

 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)') const loadGSAPAndInitAnimations = () => { /* If user prefers reduced motion, do nothing */ if (prefersReducedMotion.matches) return /* Otherwise, import the GSAP module and initialize animations */ import('gsap').then((object) => { const gsap = object.default /* Initialize animations with GSAP here */ }) } loadGSAPAndInitAnimations()

reduced-motion 이 없다는 것을 의미하지 않습니다

감소된 모션 기본 설정을 위해 스타일을 지정할 때 작업이 발생했을 때 사용자에게 의미 있고 접근 가능한 표시기 를 제공하는 것이 중요합니다. 예를 들어, 움직임 감소를 선호하는 사용자를 위해 주의가 산만하거나 움직임이 많은 호버 상태를 끌 때 사용자가 요소를 호버링할 때 명확한 대체 스타일을 제공하도록 주의해야 합니다.

다음 데모는 모션 기본 설정이 설정되지 않은 경우 사용자가 갤러리 항목에 마우스를 올리거나 초점을 맞출 때 정교한 전환을 보여줍니다. 감소된 동작을 선호하는 경우 전환이 더 미묘하지만 여전히 호버 상태를 명확하게 나타냅니다.

모션 감소가 반드시 웹 페이지에서 모든 변형을 제거하는 것을 의미하지는 않습니다. 예를 들어, 호버에서 몇 픽셀 이동하는 작은 화살표 아이콘이 있는 버튼은 모션 감소 경험을 선호하는 사람에게 문제를 일으키지 않을 것이며 색상 단독보다 상태 변화에 대한 더 유용한 지표를 제공합니다.

나는 때때로 개발자가 다음과 같은 방식으로 감소된 모션 스타일을 적용하는 것을 봅니다. 그러면 모든 요소에서 모든 전환과 애니메이션이 제거됩니다.

 @media screen and (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

이것은 사용자의 모션 기본 설정을 무시하는 것보다 틀림없이 낫지만 필요할 때 더 미묘한 전환을 제공하기 위해 요소를 쉽게 조정할 수는 없습니다.

다음 코드 스니펫에는 hover 시 크기가 커지는 버튼이 있습니다. 색상과 크기를 전환하고 있지만 모션 감소를 선호하는 사용자는 전환이 전혀 적용되지 않습니다.

 button { background-color: hotpink; transition: color 300ms, background-color 300ms, transform 500ms cubic-bezier(.44, .23, .47, 1.27); } button:hover, button:focus { background-color: darkviolet; color: white; transform: scale(1.2); } @media screen and (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } button { /* Even though we would still like to transition the colors of our button, the following rule will have no effect */ transition: color 200ms, background-color 200ms; } button:hover, button:focus { /* Preventing the button scaling on hover */ transform: scale(1); } }

효과를 보려면 이 데모를 확인하십시오. 전환이 없는 갑작스러운 색상 전환이 수백 밀리초의 전환보다 더 거슬릴 수 있으므로 이는 이상적이지 않을 수 있습니다. 이것이 내가 일반적으로 사례별로 움직임을 줄이는 스타일을 선호하는 이유 중 하나입니다.

관심이 있는 경우 필요할 때 전환을 사용자 지정할 수 있도록 리팩토링된 동일한 데모입니다. 전환 기간 동안 사용자 정의 속성을 사용하므로 전체 선언을 다시 작성할 필요 없이 스케일 전환을 켜고 끌 수 있습니다.

애니메이션 제거가 더 나은 경우

Eric Bailey는 자신의 기사 "Revisiting prefers-reduced-motion, Reduced Motion 미디어 쿼리"에서 "웹에 액세스할 수 있는 모든 장치가 애니메이션을 렌더링하거나 부드럽게 애니메이션을 렌더링할 수 있는 것은 아닙니다"라는 점을 제기합니다. 애니메이션이 버벅거릴 수 있는 재생 빈도가 낮은 기기의 경우 실제로 애니메이션을 제거하는 것이 더 나을 수 있습니다. update 미디어 기능을 사용하여 다음을 확인할 수 있습니다.

 @media screen and (prefers-reduced-motion: reduce), (update: slow) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }

Eric은 접근성 분야에서 따를 수 있는 일류 사람이므로 그의 권장 사항에 대한 전체 기사를 읽으십시오.

모든 부품의 합계

구성 요소 수준 CSS에 집중할 때 전체 페이지 디자인을 염두에 두는 것이 중요합니다. 구성 요소 수준에서 상당히 무해해 보이는 애니메이션이 페이지 전체에서 반복될 때 훨씬 더 큰 영향을 미칠 수 있으며 많은 움직이는 부분 중 하나입니다.

Tatiana의 기사에서 그녀는 (prefers-reduced-motion: no-preference) 가 true로 평가되는 경우에만 로드할 수 있는 단일 CSS 파일에 애니메이션( prefers-reduced-motion 포함)을 구성할 것을 제안합니다. 모든 애니메이션의 합계를 확인하면 사이트 전체를 방문 하는 경험을 시각화하고 그에 따라 모션 감소 스타일을 맞춤화하는 데 도움이 되는 추가 이점이 있을 수 있습니다.

명시적 모션 토글

prefers-reduced-motion 는 유용하지만 시스템 설정의 기능을 알고 있는 사용자에게만 제공된다는 단점이 있습니다. 많은 사용자가 이 설정에 대한 지식이 부족하고 다른 사용자는 시스템 수준 설정에 액세스하지 않고 빌린 컴퓨터를 사용할 수 있습니다. 그러나 다른 사람들은 대다수의 사이트에 대한 모션에 만족할 수 있지만 모션을 많이 사용하는 사이트는 견디기 어렵습니다.

한 사이트를 방문하기 위해 시스템 기본 설정을 조정해야 하는 것은 성가신 일입니다. 이러한 이유로 경우에 따라 사이트 자체에서 동작을 켜고 끄기 위해 명시적인 제어를 제공하는 것이 더 나을 수 있습니다. 우리는 이것을 JS로 구현할 수 있습니다.

다음 데모에는 배경 주위를 떠도는 여러 원이 있습니다. 초기 애니메이션 스타일은 사용자의 시스템 기본 설정에 의해 결정되지만( prefers-reduced-motion 포함), 사용자는 버튼을 통해 모션을 켜거나 끌 수 있습니다. 이것은 우리가 선택한 기본 설정에 따라 스타일을 설정하는 데 사용할 수 있는 body 에 클래스를 추가합니다. 보너스 로 모션 기본 설정의 선택 도 로컬 저장소에 보존되므로 사용자가 다음에 방문할 때 "기억"됩니다.

사용자 정의 속성

데모의 한 가지 기능은 토글이 애니메이션을 재생하거나 일시 중지하는 데 사용할 수 있는 사용자 지정 속성 --playState 를 설정한다는 것입니다. 한 번 에 여러 애니메이션을 일시 중지하거나 재생 해야 하는 경우 특히 유용할 수 있습니다. 우선 재생 상태를 paused 로 설정합니다.

 .circle { animation-play-state: var(--playState, paused); }

사용자가 시스템 설정에서 모션 감소에 대한 기본 설정을 설정한 경우 재생 상태를 running 으로 설정할 수 있습니다.

 @media (prefers-reduced-motion: no-preference) { body { --playState: running; } }

참고: 개별 요소가 아니라 body 에 이것을 설정하면 사용자 정의 속성이 상속될 수 있음을 의미합니다.

사용자가 토글을 클릭하면 사용자 정의 속성이 body 에서 업데이트되어 사용되는 모든 인스턴스를 토글합니다.

 // This will pause all animations that use the `--playState` custom property document.body.style.setProperty('--playState', 'paused')

이것이 모든 경우에 이상적인 솔루션은 아닐 수 있지만 한 가지 장점은 사용자가 토글을 클릭할 때 애니메이션이 초기 상태로 되돌아가는 것이 아니라 단순히 일시 중지 된다는 것입니다. 이는 상당히 거슬릴 수 있습니다.

토글의 접근성을 개선하기 위한 권장 사항에 대해 Scott O'Hara에게 특별한 감사를 전합니다. 그는 일부 스크린 리더가 사용자가 버튼을 클릭할 때 변경되는 업데이트된 버튼 텍스트를 알리지 않는다는 것을 알게 했고 대신 버튼에 role="switch" 를 제안했으며 클릭 시 aria-checked 가 on 또는 off 으로 토글되었습니다.

비디오 구성요소

경우에 따라 구성 요소 수준에서 모션을 전환하는 것이 더 나은 옵션일 수 있습니다. 자동 재생 비디오 배경으로 웹 페이지를 가져옵니다. 움직임 감소를 선호하는 사용자에게는 동영상이 자동 재생되지 않도록 해야 하지만 사용자가 선택한 경우 에만 동영상을 재생할 수 있는 방법을 제공해야 합니다. (일부 사람들은 비디오가 완전히 정지되는 것을 피해야 한다고 주장할 수도 있지만, 우리가 항상 그 전투에서 이기는 것은 아닙니다!) 마찬가지로 비디오가 명시적인 선호도 없이 사용자를 위해 자동 재생되도록 설정되어 있으면 사용자가 다음을 수행할 수 있는 방법도 제공해야 합니다. 비디오를 일시 중지합니다.

이 데모는 사용자가 기본 설정에 관계없이 재생을 토글할 수 있도록 사용자 지정 재생/일시 중지 버튼을 구현하여 사용자가 지정된 모션 기본 설정이 없을 때 자동 재생 속성을 설정하는 방법을 보여줍니다.

(나는 이후에 Scott O'Hara의 이 게시물을 보게 되었고 이 정확한 사용 사례를 자세히 설명했습니다.)

<picture> 요소 사용하기

Chris Coyier는 사용자의 모션 기본 설정에 따라 다양한 미디어 소스를 로드하는 몇 가지 기술을 결합한 흥미로운 기사를 작성했습니다. 이것은 감소된 움직임을 선호하는 사용자 의 경우 훨씬 더 큰 GIF 파일도 다운로드되지 않는다는 것을 의미하기 때문에 매우 좋습니다. 내가 볼 수있는 한 단점은 파일이 다운로드되면 사용자가 모션 프리 대안으로 다시 전환 할 수있는 방법이 없다는 것입니다.

이 옵션을 추가하는 수정된 버전의 데모를 만듭니다. (시스템 환경설정에서 reduced-motion 켜서 작동하는지 확인하세요.) 불행히도 Chrome에서 애니메이션 옵션과 모션 프리 옵션 사이를 전환할 때 GIF 파일이 매번 새로 다운로드되는 것처럼 보이지만 그렇지 않습니다. 다른 브라우저:

그래도 이 기술은 GIF를 표시하는 보다 정중한 방법으로 보이며 이는 사용자에게 불만의 원인이 될 수 있습니다.

브라우저 지원 및 최종 생각

prefers-reduced-motion 은 몇 년 전으로 거슬러 올라가는 모든 최신 브라우저에서 탁월한 지원을 제공합니다. 우리가 보았듯이 감소된 모션 우선 접근 방식을 취함으로써 지원하지 않는 브라우저는 단순히 reduced-motion 폴백을 얻게 됩니다. 귀하의 사이트에 더 쉽게 액세스할 수 있도록 오늘 사용하지 않을 이유가 없습니다.

사용자 지정 토글은 확실히 자리가 있으며 이 설정이나 그 기능을 모르는 사용자 의 경험을 크게 향상시킬 수 있습니다. 사용자의 단점은 일관성이 없다는 것입니다. 모든 개발자가 자신만의 솔루션을 만들어야 하는 경우 사용자는 모든 웹사이트의 다른 위치에서 모션 토글을 찾아야 합니다.

여기에 누락된 레이어가 브라우저 인 것처럼 느껴집니다. 브라우저가 사용자가 쉽게 액세스할 수 있는 곳 reduced-motion 토글을 구현하여 사람들이 탐색 중인 사이트에 관계없이 찾을 수 있는 위치를 알 수 있기를 바랍니다. 개발자가 모션 접근성을 보장하는 데 더 많은 시간을 할애하도록 장려할 수도 있습니다.

관련 리소스

• 레벨 5 미디어 쿼리 사양, W3C(월드 와이드 웹 컨소시엄)
• prefers-reduced-motion , MDN Web Docs, Mozilla
• 모션 감도를 위한 모션 감소 디자인, Val Head, Smashing Magazine
• 애니메이션에 대한 노모션 퍼스트 접근 방식, Tatiana Mac
• 축소 영화 기법, Take 2, Chris Coyier, CSS-Tricks
• Pres prefers-reduced-motion , The Reduced Motion Media Query, Eric Bailey, CSS-Tricks 재방문
• 접근성 향상을 위한 움직임 감소, Lindsey Kopacz