media query 알아보기 - prefers-reduced-data

prefers-reduced-data

prefers-reduced-data는 사용자가 데이터 사용량을 줄이길 원할 때 적용할 수 있는 미디어 쿼리이다

사용자가 스마트폰이나 태블릿 같은 기기에서 데이터를 절약하고 싶거나 인터넷 연결 속도가 느린 경우 등에서 유용하게 활용할 수 있는 기능이다

prefers-reduced-data두 가지 값을 가지고 있다

• no-preference: 사용자가 데이터 사용량에 대한 선호도를 설정하지 않았음을 나타낸다
• reduce : 사용자가 데이터 사용을 최소화하길 원할 때를 나타낸다

이 기능을 이용하게 되면 데이터 사용량을 줄이길 원하는 사용자에게 불필요한 이미지나 비디오를 로드하지 않도록 하거나 배경의 이미지를 로드하지 않고 색상으로 볼 수 있도록 하는 등의 간소한 레이아웃을 표시하는 등의 기능을 처리할 수 있다

기능의 목적

스마트폰을 사용하면서 모든 컨텐츠를 이용함에 있어 반드시 필요한데 데이터 사용량인데 이런 데이터 사용량에 제한을 가지고 있는 사용자들을 고려하여 만들어지게 되었다

일부 사용자는 한 달 동안 사용할 수 있는 데이터 양에 제한이 있거나 느린 인터넷 연결을 사용하고 있을 수 있다

이런 상황에서는 웹 사이트를 표시할 때 불필요한 이미지의 로딩, 높은 해상도의 미디어, 웹폰트 등을 불러와 데이터의 사용량을 최소화하려는 사용자들의 선호도를 반영하기 위해 도입이 되었다

예제

@media (prefers-reduced-data: reduce) {
  .background {
        background-image: none;
        background-color: #cccccc;
    }
}

데이터 사용에 있어서 절약을 원하지 않거나 별도의 설정을 하지 않은 사용자들에게는 적용되어 있는 배경 이미지가 표시되겠지만 이 스타일을 이용한다면 사용자가 데이터 절약을 선호할 경우에 배경색을 #cccccc로 제공을 하도록 동작한다

브라우저 호환성

https://caniuse.com/?search=prefers-reduced-data에서 현재 prefers-reduced-data의 브라우저 별 지원 상태를 볼 수 있다

 

사이트에서 확인 할 수 있듯이 prefers-reduced-data는 아직 실험적인 개발 초기 단계의 기능이기 때문에 모든 브라우저에서 지원이 가능하지 않고 Chrome, Edge와 같은 많은 사람들이 사용하는 브라우저에서도 특정 기능을 활성화해야 사용할 수 있거나 지원하지 않는다

추후 공식적으로 기능을 지원한다고 하더라도 모든 브라우저가 지원을 동시에 하지 않는 이상 웹 접근성과 여러 브라우저의 호환성을 고려해 조금 더 세심한 작업이 필요하다