미래의 CSS - 시스템 환경에 반응하는 미디어 쿼리 소개

미래의 CSS - 시스템 환경에 반응하는 미디어 쿼리 소개

안녕하세요. 엔비전스입니다.

CSS는 지루하고 딱딱한 웹사이트를 아름답고 부드럽게 만들어주는 역할을 수행하는 스타일링 언어입니다.

우리는 색을 칠하고, 건물 단면도를 그리듯 레이아웃을 만들고, 가구와 소품을 배치하듯 원하는 요소를 배치하는 일에 CSS를 사용합니다.

CSS는 단순히 웹을 꾸미는 용도로 사용되는 것에 그치지 않고, 웹 제작에 일조하는 많은 사람의 아이디어에 의해 꾸미는 용도 외의 접근성을 개선하는 용도로도 사용하기 시작했습니다.

가장 와 닿는 예를 들자면 CSS의 IR(Image Replacement) 기법이 있습니다. 스크린 리더 사용자를 위해 숨김 대체 텍스트를 제공하는 방법을 고안한 것이 바로 IR 기법이라고 할 수 있습니다. 웹 브라우저 개발자 또한 이러한 CSS의 가능성을 배제하지 않고, 접근성 향상을 위한 기능을 만들고자 노력하고 있습니다.

지난해 4월부터 5월, 두 번을 거쳐 소개해드린 -ms-high-contrast 미디어 쿼리부터 6월에 소개해드린 prefers-reduced-motion까지 개발자의 수고로 만들어진 접근성을 위한 결과물입니다.

이번 아티클의 주제 키워드는 디바이스 기본 설정(Device Preferences)으로, 여러 디바이스 환경의 설정값에 따라 반응하는 미디어 쿼리 레벨 5 섹션 중 사용자 선호 환경 미디어 속성(User Preference Media Features)의 현재 적용된 속성, 미래에 적용될 prefers 접두사 미디어 쿼리 속성들을 소개할 것입니다.

애니메이션 효과를 축소하거나 없애주는 prefers-reduced-motion

미디어 쿼리 레벨 5의 유저 선호환경 미디어 속성 중 가장 먼저 적용된 속성으로, 지난 2019년 7월의 아티클을 통해 먼저 소개해 드렸습니다.

이는 사용자의 운영체제가 애니메이션을 표시할 것인가에 대한 설정 여부를 브라우저가 인식하고, 웹 개발자가 애니메이션 효과를 줄이거나, 제거한 웹사이트를 사용자에게 제공할 수 있도록 돕는 속성이었습니다.

자세한 사항은 지난 2019년 7월의 아티클인 저사양 디바이스와 웹 접근성을 위한 애니메이션 동작 줄이기 미디어 쿼리 사용하기: prefers-reduced-motion 소개 를 참고해주시기 바랍니다.

어두운 테마와 미디어 쿼리: prefers-color-scheme

2019년, 운영체제나 브라우저 등에서 굉장히 활발하게 작업 된 분야가 있습니다. 바로 테마입니다. PC 운영체제는 Windows 10의 1809 업데이트, MacOS는 모하비부터 어두운 테마를 지원하기 시작하였으며, Chrome이나 FireFox 등 브라우저 자체에서 어두운 테마를 개발하기 시작했습니다.

또한 Android 10, iOS 13부터 모바일에서도 어두운 테마 환경을 정식적으로 지원하기 시작하였습니다. 이로 인해 어두운 테마의 수요가 늘어났다는 것을 직∙간접적으로 체감할 수 있습니다. 따라서 브라우저에서는 OS 테마가 어두운 테마를 사용 중인가 밝은 테마를 사용 중인가에 따라 반응하는 미디어 쿼리가 개발되었습니다.

prefers-color-scheme은 light와 dark를 값으로 제공하여, 운영체제의 설정에 따라 웹 페이지를 변형하는 것이 가능하며, 현재 최신의 Chrome, FireFox, Safari 등에서 사용할 수 있습니다. 이 기능을 적절하게 적용한다면 야간에 눈부심을 호소하는 사용자가 많이 감소할 것으로 기대되며, 현재 최신 브라우저에서 체험하실 수 있습니다.

더 다양한 환경설정에 따른 미디어 쿼리 지원 예정

1. 다양한 디바이스에 적용되는 고대비 미디어 쿼리

지난 4월부터 5월까지 두 달에 거처 소개되었던 -ms-high-contrast의 경우, ms의 브라우저에 한정되어 있다는 점이 아쉬운 부분이었습니다.

이러한 부분을 고려하여, 고대비 모드를 지원하는 다양한 디바이스를 위한 prefers-contrast 미디어 쿼리가 준비 중에 있습니다. 이 미디어 쿼리를 많은 브라우저에서 지원한다면 고대비 모드 사용자의 접근성이 향상될 것으로 보입니다.

2. 운영체제의 투명 테마 설정에 따라 반응하는 미디어 쿼리

prefers-reduced-transparency는 사용자가 투명한 UI를 선호하지 않아 불투명한 UI 테마를 준비 중에할 경우, 웹 개발자가 투명한 요소의 투명도를 줄이거나, 불투명한 색상으로 웹페이지를 제공할 수 있도록 도와줄 예정입니다.

속성 값을 reduce로 작성하여 적용할 수 있으며, 투명도 관련 설정 준비 중에 여부에 따라 반투명한 요소의 투명도를 조절해줄 수 있습니다.

3. 화면 밝기에 따라 반응하는 미디어 쿼리

light-level은 디바이스 주변 광량에 따른 자동 밝기설정에 반응하여 웹사이트가 사용자에게 보여줄 CSS 스타일을 결정할 수 있게 됩니다. light-level은 다음 세 가지의 속성값을 지원할 예정입니다.

dim

dim은 사용자가 디바이스를 어두운 환경에서 준비 중에할 때에 대한 스타일을 설정하는 값입니다.

야간, 희미한 실내조명에 따라 변동된 화면 밝기를 감지하여 스타일을 제공합니다.

normal

normal은 적당한 광량이 있는 환경에서 준비 중에할 때 조절된 밝기에 따라 변경되는 스타일 설정값입니다.

햇빛이 강하지 않고 적당히 들어오는 실내 환경이 이에 해당합니다.

washed

washed는 광량이 밝은 곳에서의 디바이스 밝기에 따라 변경될 스타일 설정값입니다.

햇빛이 강한 야외 환경이 이에 해당합니다.

4. 시스템 색상 제한 모드에 반응하는 미디어 쿼리

사용자의 디바이스 환경이나 사용자의 신체적 특징으로 인해 특정 색상을 화면에서 제외하거나 대체하는 모드 준비 중에 시, 이를 브라우저에서 인식하여 웹 개발자가 웹에서도 제한된 색상 모드를 지원할 수 있도록 돕는 속성입니다. 속성값은 총 두 가지로, 색상 제한 모드가 꺼진 상태인 none(기본값)과 켜진 상태인 active 값이 있습니다.

지금까지 현재 적용이 가능하거나, 머지않아 추가될 사용자 선호환경에 따라 반응하는 미디어 쿼리에 대해 알아보았습니다.

이러한 반응형 웹이 많은 사이트에 적용된다면 앞으로의 지금보다 더 사용자 친화적인 웹 환경이 조성되어 정보 접근성이 향상될 것으로 보여 매우 기대됩니다. 앞으로도 더 좋은 내용의 아티클로 찾아뵙도록 노력하겠습니다. 읽어주셔서 감사합니다.