아티클

Windows 고대비 모드 사용자를 위한 MS 고대비 반응형 웹 제작하기 1부: MS 고대비 미디어쿼리 소개

2019-04-25 16:26:45

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

많은 분께서 오래전부터 Microsoft Windows에 고대비 모드와 고대비 테마가 있다는 것을 알고 계십니다. 전 세계적으로 고대비 기능을 사용하는 저시력 사용자가 많이 있습니다. 그러나 웹 페이지 상에서 Windows 고대비 모드 사용 시 오래전부터 CSS 이슈가 발생했으며 이를 논의해 왔으나 오늘날까지 이슈가 지속하여 왔습니다. 이에 대응하여 마이크로소프트는 Windows 8 이상 운영체제에서 Windows 고대비 모드 상태에 반응하는 미디어쿼리 기술을 공개하였습니다.  하지만 국내에는 널리 보급되어 있지 않습니다. 하여 이번 아티클에서는 고대비와 색상 반전의 개념 정의, 고대비 모드에 반응하는 미디어쿼리 기술인 -ms-high-contrast 미디어쿼리 문법과 활용 방법을 살펴보도록 하겠습니다.

고대비의 정의

고대비는 높을 고()와 한자어인 대비((對比: 차이를 밝히기 위해 서로 비교함)가 합쳐진 한자어로 배경색(Background)와 전경색(Foreground)의 명도 대비가 높음을 의미하는 용어라고 정의할 수 있습니다. 주로 배경색과 전경색(배경을 제외한 텍스트 등의 요소)이 서로 비교가 잘 되는 상태를 의미합니다.

 

고대비와 색상 반전의 정의 및 차이점

많은 소프트웨어 및 디바이스에서 저시력 사용자를 위한 기능으로 고대비와 관련된 기능을 제공하고 있습니다. 그중에서 대표적으로 Windows는 고대비 모드 및 테마, 돋보기의 색 반전 기능을 제공하고 있으며, 모바일에서도 이들과 비슷한 기능을 제공하고 있습니다. 이 둘은 분명히 다른 기능이지만 이 두 용어를 혼용하여 제공하는 경우가 많이 있습니다. 하여 이 두 가지의 차이점을 설명하고자 합니다.

 

고대비 모드/테마의 특징

고대비 모드는 위에서 정의했던 그대로 소프트웨어의 배경색과 전경색이 구분이 잘 되게끔 색상을 변경하는 것입니다. Windows에서는 고대비 모드 및 테마를 제공하며, 일부의 안드로이드 스마트폰의 경우, 고대비 테마 및 고대비 브라우저 기능을 제공하고 있습니다. 고대비 모드는 특정 요소의 색 자체를 바꾸기 때문에 사용자가 원치 않는 요소에 대해서는 작동하지 않습니다.

 

색상 반전의 특징

색상 반전은 색상의 특성이 거꾸로 바뀌는 것을 의미합니다. 흰 색이면 검은색, 검은색이면 흰색으로 바뀌는 원리입니다. 밝은 색이면 어둡게, 어두운색이면 밝게 바꿉니다. 소프트웨어에서 출력하는 모든 화면에 해당되며, 특별한 기능이 없다면 예외가 존재하지 않습니다.

 

이 둘의 차이점

위에서 설명한 특징들로 차이점을 정리해보자면 다음과 같이 정리할 수 있습니다.

  1. 범위 적용방식: 색상 반전은 소프트웨어가 지정한 만큼의 화면 영역이나 전체 화면의 모든 요소를 대상으로 하며, 고대비 모드는 사용자나 개발자가 지정한 특정 요소에 국한됩니다.
  2. 색상 제어고대비 모드는 개발자나 사용자가 요소의 색상을 지정할 수 있으나대부분의 색상 반전 기능은 이름 그대로 색상을 반전시켜주는 효과만을 목적으로 합니다.
  3. 장점과 단점:
    • 고대비 모드의 장단점: 대비 모드의 가장 큰 장점은 원하지 않는 요소에 작동하지 않는 것입니다. 치명적인 단점으로는 개발자가 미처 생각하지 못했거나, 프로그램 개발자 간의 협의가 이루어지지 않은 경우, 고대비 모드가 비정상적으로 작동하거나 작동하지 않을 수 있다는 점이 있습니다.
    • 색상 반전의 장단점: 색상 반전의 가장 큰 장점은 필터와 흡사한 원리이기 때문에 고대비 모드보다 많은 프로그램에서 호환됩니다. 단점으로는 이미지와 같이 반전되면 부자연스러운 요소 또한 색이 반전되는 경우가 다반사이며, 말 그대로 색을 반전시키는 것이기 때문에 명도 대비율이 올라가지 않을 가능성도 있습니다.
-ms-high-contrast Microsoft의 브라우저에서 Windows 고대비 모드의 상태를 참조하여 웹 문서가 반응하게끔 만드는 미디어쿼리의 속성(Feature)입니다. 아래부터는 -ms-high-contrast의 속성값과 작성방법, 그리고 활용방법 등을 다루도록 하겠습니다.

 

 

-ms-high-contrast의 속성값

  1. None [고대비 모드가 비활성화 중일 때: Edge 브라우저에서 해당 속성이 제외되었습니다.]
  2. Active [고대비 모드의 옵션과 관련 없이 고대비 모드가 활성화 중일 때]
  3. white-on-black [고대비 모드가 검은 바탕 위 흰 글씨 옵션으로 활성화 중일 때]
  4. black-on-white [고대비 모드에서 흰 바탕에 검은 글씨 옵션으로 활성화 중일 때]

 

HTML에서의 작성방법

HTML에서 활용할 경우에는 Media 속성의 조건이 만족할 경우, 해당 CSS 문서를 불러옵니다.
즉 여러 개의 CSS 파일을 나누어 사용할 때 활용하는 방법입니다.
코드 예제:
<link rel=”stylesheet” type=”tex/css” media=”screen and (-ms-high-contrast: [속성값])” href=”css/contrast-A.css” />
<link rel=”stylesheet” type=”tex/css” media=”screen and (-ms-high-contrast: [속성값])” href=”css/contrast-B.css” />
<link rel=”stylesheet” type=”tex/css” media=”screen and (-ms-high-contrast: [속성값])” href=”css/contrast-C.css” />

스타일 시트에서의 코드 작성 방법

미디어쿼리 조건이 만족할 경우, 해당 영역의 스타일을 적용시킵니다.
미디어쿼리 코드 예제:
@media screen and (-ms-high-contrast: [속성값] ) {
/*-ms-high-contrast 미디어쿼리의 스타일 영역*/
Selector{
          properties[속성 값]      
          }
}

자바스크립트

예제 코드1: -ms-high-contrast 미디어쿼리 기본 사용법
var contrastMode=window.matchMedia(‘screen and (-ms-high-contrast: [속성값] ) ’)
if( contrastMode.matches== true ){
          [DOM 코드]
}

자바스크립트에서는 BOM의 window 객체에서 object.matchMedia() 함수를 사용하여 조건을 부여하고, object.matches 객체 속성을 사용하여 검사합니다.
MatchMedia()는 미디어쿼리의 조건식을 받기 위한 함수이며, matches 속성은 matchMedia()에 작성한 조건과 브라우저의 상태가 일치하고 있는지에 대한 정보를 true와 false 값으로 반환하는 속성입니다. MatchMedia() 함수와 matches 속성을 조건문과 Event를 적절하게 활용하여 CSS 디자인을 조정할 수 있습니다.

예제 코드2: 이벤트 사용법
var contrastMode=window.matchMedia(‘screen and (-ms-high-contrast: [속성값] ) ’)
contrastMode.addListener(MyFunction)
function MyFunction(evt){
          if(evt.matches){
          [DOM 코드]
          }
}

자바스크립트로 스타일을 주었을 경우, 위와 같은 자바스크립트의 미디어쿼리 조정방법으로 자바스크립트를 활용하여 해당 DOM 요소에 맞는 스크립트를 추가해주어야 합니다.

-ms-high-contrast의 추가적인 CSS 속성

-ms-high-contrast-adjust 속성
-ms-high-contrast-adjust는 고대비 모드와 관련된 CSS 속성으로 위 속성의 주요 기능은 사용자가 고대비 모드를 활성화하여도 선택자로 선택한 해당 요소에 대해서는 고대비 모드가 적용되지 않도록 할 것인지, 고대비 모드의 디자인을 적용시킬 것인지를 지정해주는 속성입니다. 
속성값은 none과 auto가 있으며, 기본값은 auto입니다. 
이 CSS 속성은 고대비 사용자를 위한 디자인을 제공할 용도로만 사용하는 것이 좋으며 이외의 용도로 -ms-high-contrast-adjust: none; 을 남용하는 것은 지양하여야 합니다.

-ms-high-contrast-adjust 사용 예시
  1. 고대비 모드가 활성화된 Internet Explorer에서 background-image 사용하기
    Internet Explorer에서 고대비 모드를 사용할 경우, background-image 요소까지 고대비 모드의 배경 색상으로 처리해버리는 문제가 발생합니다. 이를 해당 속성으로 해결이 가능합니다. Internet Explorer 사용자를 고려할 경우 해당 속성을 사용합니다. 적용된 샘플은 다음 링크를 통해 확인하실 수 있습니다.
  2. 고대비 모드 사용자용 디자인 제작 용도
현재 Edge에서는 Background에서 색상을 부여할 경우, 아래와 같이 글자 주변에 박스가 생기는 현상이 있습니다.

그림 1 -ms- high-contrast-adjust를 활용한 Edge 커스텀 디자인 예시
Background-color -ms-high-contrast-adjust 적용 전후 비교

좌측은 기본값이며, 우측은 -ms-high-contrast-adjust의 속성 값을 none으로 적용한 요소입니다. 
기본값을 사용하는 버튼의 경우, 위에서 언급한 것처럼 검은색 박스가 생기며, 함께 border의 색상도 고대비의 영향을 받아 원치 않는 결과가 화면에 출력되기도 합니다. 때문에 고대비 모드 사용자를 위한 커스텀 디자인을 제작할 경우, 해당 속성을 사용하여야 합니다.

글을 마치며

지금까지 Internet Explorer와 Microsoft Edge에 적용되는 고대비 모드 미디어쿼리의 사용법에 대하여 알아보았습니다. 모든 버전의 Windows 고대비 모드(Windows High Contrast Mode)의 사용 방법은 아래의 부록을 참고해주십시오. 다음 2부에서는 고대비 모드 미디어쿼리에 대한 한계 및 문제점 그리고 개선방안을 내용으로 다시 찾아뵙도록 하겠습니다.  읽어 주셔서 감사합니다.

부록1) Windows 고대비 모드 사용 방법
고대비 모드를 켜는 바로 가기 키는 [Alt] + [Shift] + [Print Screen] 키로, 색상은 검정 화면에 흰색 글씨가 기본값으로 제공됩니다. 고대비 모드의 설정 방법은 아래의 링크를 참고해주세요. 

부록2) Windows 돋보기 색상 반전 사용 방법
Windows 돋보기를 활용한 색 반전 기능은 아래 링크를 참고해주세요.

부록3) 고대비 모드 반응형 샘플 페이지: Internet Explorer에서 이미지 콘텐츠 표시하기
아래 링크는 -ms-high-contrast-adjust를 사용한 이미지와 그렇지 않은 이미지가 Internet Explorer에서 어떻게 표시되는지 체험할 수 있는 샘플 페이지입니다.

부록4) 고대비 모드 반응형 샘플 페이지: 고대비 반응형 체크박스 
아래 링크는 -ms-high-contrast가 적용된 체크박스와 그렇지 않은 체크박스의 예시입니다.

 

 

 

 

댓글 0
댓글을 작성하려면 해주세요.