@media 쿼리 알아보기 - prefers-reduced-motion

최근에 css에 대해 조금 더 모르는 부분을 메꾸기 위한 방법으로 여러 css 관련 문서나 사이트를 찾아보던 중 처음 보는 미디어 쿼리를 보고 이게 어떤 기능인지 알아보려고 한다

여러 미디어 쿼리 중 처음보고 신기하다고 생각되는 기능들에 대해서 몇 가지 정리를 하고 하나씩 기록해 볼 예정이다

prefers-reduced-motion

prefers-reduced-motion은 사용자의 운영 체제 설정을 통해 애니메이션의 강도를 제어하는 데 사용하는 데 사용을 한다고 한다

이 미디어 쿼리는 웹 개발자가 애니메이션에 대한 사용자의 선호 설정에 따라 페이지의 요소를 변경하거나 조정할 수 있도록 한다

이 미디어 쿼리는 주로 모션에 대한 민감도가 늫은 사용자들에게 도움이 된다

이 미디어 쿼리는 사용자가 모션 감소 설정을 활성화했는지의 여부에 따라서 두 가지 값 중 하나를 가지게 된다

• no-preference : 사용자가 모션 감소 설정을 활성화하지 않았음을 나타낸다
  • 기본값으로 설정되어 있으며 이 경우에 웹사이트는 정상적으로 모든 애니메이션과 전환 효과를 표시하게 된다
• reduce : 사용자가 모션 감소 설정을 활성화했음을 나타내는 값이다
  • 개발자는 사용자의 설정을 존중하여 필요한 애니메이션과 전환 효과를 줄이거나 제거하는 CSS 스타일을 작성할 수 있다.

사용 목적

기존 모션 사용 이유

1. 시각적인 흥미와 매력 : 모션과 효과를 사용하면 웹사이트가 더 동적이고 생동감 있게 포현되어 사용자 입장에서는 흥미로운 경험을 받게 되고 사이트를 더욱 매력적으로 보이게 만들어 관심을 가지도록 하게 된다
2. 사용자 경험 개선 : 적절한 모션과 효과를 적용하면 사용자의 상호작용과 탐색을 유도하고 사용자의 경험을 개선할 수 있다
3. 사용자 상호작용 유도 : 모션과 효과는 사용자에게 사이트와 상호작용 할 수 있는 방법을 시각적으로 안내하는 데 사용될 수 있다
   1. 버튼 클릭 시 애니메이션 효과를 주거나 스크롤 애니메이션을 통해 페이지의 흐름을 자연스럽게 안내하는 등의 행동을 유도하는 것

prefers-reduced-motion의 사용 목적

1. 웹사이트에 모션이나 효과가 적용이 되어 있다면 위와 같은 여러 이유로 인해 접근성과 관심을 유도할 수 있지만 몇몇 사용자들은 움직임이 많은 웹사이트에서 불편함을 느낄 수 있다
2. vestibular disorders라는 평형 관련 어려움을 가진 사용자들이 해당되는데 이들은 과도한 모션과 애니메이션이 적용된 웹사이트에서 불편함, 심할 경우 멀미, 두통 등의 물리적 불편함을 유발할 수 있게 된다
3. 따라서 prefers-reduced-motion는 이런 어려움을 겪는 사용자들의 사용 경험을 개선하기 위한 중요한 도구로 사용된다
4. 이 미디어 쿼리를 사용하게 된다면 개발자는 움직임을 최소화하는 스타일을 적용하여 더 편안한 웹 사용 환경을 제공할 수 있게 된다

이런 접근성 측면의 개선은 웹사이트의 전반적인 사용자 경험을 향상시키며 웹사이트의 사용성을 높여주게 된다

예제

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

해당 미디어 쿼리는 prefers-reduced-motion이 reduce로 설정된 경우에만 적용이 되며 적용이 animated-element라는 클래스 명을 가지고 있는 요소는 애니메이션에 대한 부분을 거의 경험하지 않게 된다

브라우저 호환

prefers-reduced-motion 브라우저 지원

웹에서 자주 사용하는 브라우저인 Chrome이나 Edge, Firefox 등 주요 브라우저에서 모두 사용이 가능하고 심지어 모바일 브라우저에서도 모두 사용이 가능한 것을 확인할 수 있다