Microsoft Edge에 적용된 모던 브라우저를 위한 Windows 고대비 모드 지원 미디어 쿼리 : forced-colors 살펴보기

Webacc NV 2020-11-24 13:28:23

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

오랜만에 새로운 CSS 소식과 함께 찾아뵙게 되어 정말 기쁩니다.

어느덧 Chromium 기반의 새로운 Edge 브라우저가 출시된 지도 오래되었습니다.

이제 Windows 10 Version 2004(20H1)에는 이 새로운 버전의 Edge 브라우저가 설치되며 올해 5월에 20H1 버전이 출시되었기 때문에 국내에서 Windows 10으로 컴퓨터를 사용하는 많은 분들께서 해당 버전의 Windows 10을 사용하고 있을 것이라고 생각합니다.

1909 버전의 Windows 10까지는 새로운 Edge 브라우저가 업데이트되었음에도 불구하고 새로운 Edge 브라우저가 탑재되지 않아 Chromium 기반의 Edge를 아는 사람이 적었습니다.

이번에 2004 업데이트를 통해 기본으로 새로운 Edge가 탑재된 덕분에 많은 사용자가 Edge 브라우저를 접하고 있는데요.

시각장애인 사용자들 또한 다양한 브라우저를 사용하는 시대이기에 Edge 브라우저를 사용하는 분들이 늘어나고 있습니다. 이러한 와중에 반가운 소식을 접하게 되었습니다.

바로 새로운 Chromium Edge에서 우선적으로 Windows의 고유 고대비 테마를 웹페이지에서 지원할 수 있는 미디어 쿼리를 적용했다는 소식입니다.

이번 아티클에서는 Internet Explorer의 -ms-high-contrast 미디어 쿼리를 대체하여 최신의 브라우저에서 고대비 모드 테마를 지원할 수 있게끔 해주는 forced-colors 미디어 쿼리를 소개하고자 합니다.

forced-colors: 색상 제한 상태에 대한 미디어 쿼리

지난해 널리에 발행한 아티클인 미래의 CSS - 시스템 환경에 반응하는 미디어 쿼리 소개로 잠깐이나마 소개한 이름으로, 생소한 분도 있을 것이며, 아닌 분도 있을 거라고 생각합니다.

그 당시에는 단순히 색상이 제한된 상태에 대한 미디어쿼리로 알고 있었으나, 개발자분들의 여러 논의 끝에 고대비 모드 설정에 대한 스타일도 이 미디어쿼리를 통해 조절하게끔 되었습니다. 고대비 모드도 색상을 제한한 상태인 것은 틀린 말이 아니니까요.

최신의 Chromium 기반의 새로운 Edge 브라우저에서 우선 적용된 이 미디어 쿼리는 역시나, 오래전에 소개한 -ms-high-contrast 모드와 상당히 유사한 방법으로 사용이 가능합니다.

내 웹페이지에 적용하기

미디어 속성의 속성값으로는 active와 none이 있으며, Alt + Shift + Print Screen으로 Windows 고대비 모드가 켜져 있는 상태를 active 상태로 정의하고 있습니다.

@media (forced-colors:active){
    .selector {
        props1:value;
    }
}

새로운 Edge 브라우저에서는 background-image 등으로 사진을 배경으로 사용하더라도 이전의 고대비 모드처럼 배경사진을 볼 수 없는 현상이 없으며, 기존에 사용했던 익숙한 고대비 테마를 웹페이지에서 그대로 사용할 수 있습니다.

따라서, -ms-high-contrast에서 -ms-high-contrast-adjust를 none 값으로 사용하여 배경 이미지가 검은색으로 표시되는 것을 방지하는 작업이 별도로 필요하지 않게 되었습니다.

하지만, 여전히 웹페이지에서 원하는 색상의 요소를 만들려면 이와 비슷한 작업이 필요합니다. 이 또한 기존의 -ms-high-contrast와 유사한 속성인 forced-color-adjust 속성을 none으로 설정하는 작업을 통해 원하는 요소에 적용하여, 색상 강제 고정을 막을 수 있습니다.

다만 지난 -ms-high-contrast에서 언급하였듯, 지나치게 많은 요소, 또는 넓은 범위의 요소에 adjust 속성을 사용하면, 고대비 모드 사용자의 테마가 적용되지 않으므로 사용에 주의하셔야 할 것 같습니다.

@media (forced-colors:active){
    .foo{
        color:red;
        forced-color-adjust:none;
    }
    #bar{
        color:ButtonText;
        forced-color-adjust:none;
    }
}

또한, 강제 색상 고정 모드를 위한 미디어 쿼리를 다시 지원하기 위해 ButtonText와 같이 CSS2에서는 Deprecated 되었던 몇몇 시스템 색상 속성값을 다시 사용하게 되었습니다. 이에 대해서는 여기(영문페이지)를 참고해 주시기 바랍니다.

새로운 Edge 외의 다른 브라우저에서 체험해보기

현재로서 새로운 Chromium Edge에서만 우선적으로 정식 지원을 시작했습니다. 하지만 브라우저에서 또한 이 미디어 쿼리에 대한 지원을 준비하고 있습니다.

정식적인 지원을 하지 않을 뿐, 대중적으로 사용하는 Chrome과 Firefox에서는 개발 중인 이 기능을 강제로 활성화할 수 있습니다. 그 방법은 다음과 같습니다.

Chrome

Chrome을 엽니다.
Ctrl + L, Alt + D 또는 F6 키를 눌러 주소 입력창으로 이동한 다음, chrome://flags를 입력합니다.
Experiments 페이지가 나타나면, 상단에 있는 검색 상자(search flags)에 Forced Colors를 입력하면 자동으로 주 영역에 force-color에 대한 옵션이 목록으로 표시됩니다.
Tab 키로 탐색하여 Forced Color 콤보 상자의 값을 enabled로 변경하여 forced-color를 활성화할 수 있습니다.

설정 바로 가기(크롬에서만 동작)

Firefox

Firefox를 엽니다.
Ctrl + L, Alt + D 또는 F6 키를 눌러 주소 입력창으로 이동한 다음, about:config를 입력합니다.
고급 설정에 대한 경고 화면이 뜨면, "위험을 감수하고 계속 진행" 버튼을 눌러 화면을 넘깁니다.
검색 콤보 상자 편집창에 초점이 이동되면, forced를 입력하면 편집창 바로 아래에 테이블이 나타나며 검색 결과가 자동 갱신됩니다.
Tab 키로 이동하여 layout.css.forced-colors.enabled 설정 버튼을 찾아 Enter나 Space 키로 누릅니다.
스크린리더로 잘 설정되었는가 확인하려면 테이블 요소 내부이므로 Ctrl+Alt+왼쪽 화살표 키를 눌러 2열에 있는 값이 true로 되어있는지 확인합니다.

아직 사용자에게 완전히 기본 기능으로 제공된 것이 아니므로 버그가 많을 수 있는 점을 반드시 참고하여 활성화하시기 바랍니다.

이상으로 새로운 Edge 브라우저에서 우선적으로 적용하기 시작한 forced-colors 미디어 쿼리 속성에 대해 함께 알아보았습니다. 하루빨리 다른 대중 브라우저인 Chrome과 Firefox에서도 이 기능을 지원하였으면 하는 바람입니다.

언제나 긴 글 읽어주셔서 감사드리며 더욱 유익한 정보로 찾아뵐 수 있도록 노력하겠습니다.

2241

아티클