고대비 모드
고대비 모드란?
일반적으로 저시력자를 위해 고려된 모드입니다. 개인 성향에 따라 누구나 쉽게 설정할 수 있습니다.
고대비 모드 설정하기 – 윈도우 XP
윈도우에서 고대비 모드를 설정하는 방법은 다양합니다.
아래는 XP부터 8.1까지 윈도우 고대비 모드를 설정하는 방법들입니다.
윈도우 XP의 고대비 모드 설정은 제어판 내게 필요한 옵션에서도 가능합니다.
디스플레이 등록정보 설정의 고대비 모드를 색 구성표에서 선택합니다.
이는 윈도우 비스타/ 7/ 8.1 에서도 역시, 바탕화면에서 우클릭하여 개인 설정에 진입하면 고대비 모드를 손쉽게 설정할 수 있습니다.
단축키로 왼쪽 Shift + 왼쪽 Alt + Print Screen 키를 입력하여 고대비 기능을 켤 수도 있습니다.
이미지 대치기법들
이미지 스프라이트(Image Sprite)식 사용 방법은 익히 게임에서 구성 파일들을 열어보면 볼 수 있습니다.
성능 향상을 위해, 파일 전송 개수(http-request)를 줄이는 방안으로 많이들 사용하는 방법입니다.
이 기법에 대한 맹점은 익히 여러 포럼들에서 논의가 되었고, 여러 방법들이 다양하게 개발자들에게 애용되고 있습니다.
꽤 오래 전인 2008년 3월 CSS-기법들을 모아둔, CSS-Tricks에 정리된 글이 있습니다.
각 기법들에 개발자 이름을 붙여 정리한 글도 있습니다만, 체감 상으로는 글자만 요소 영역 바깥으로 날려버리는 것이 현업에서 가장 많이 쓰이는 것으로 추정합니다.
/* Image Replacement */
.ir_type1{display:inline-block;overflow:hidden;width:...px;height:...px;background-image:url(...);text-indent:-9999px}
.ir_type2{display:inline-block;overflow:hidden;width:...px;height:...px;background-image:url(...);line-height:999px}
.ir_parent{...;background-image:url(...)}
.ir_parent .ir_type3{position:absolute;left:0;top:0;overflow:hidden;width:1px;height:1px}
.ir_type4{color:transparent;background-image:url(...)}
/* 물론, class를 위와 같이 명명하지는 않겠지만, 구분을 위한 예시입니다. */
영역 바깥으로 나간 문자열들은 많은 UI오류를 야기해왔습니다.
대표적으로 예전 IE 7과 FireFox 구 버전에서는 text-indent:-9999px이 있는 요소가 문자열과 함께 통째로 날아간다든지, 예기치 못한 오류로 인해 1가지 방법을 class로 사용하지 않는 경우도 현업에서는 종종 있어 왔습니다.
이미지의 불러오기 실패(onError/Fallback)상황에 대한 대비
대치기법들 중, 단연 이미지가 표시되지 않는 상황을 고려하는 방법이 각광받기도 했죠.
<IMG>의 대체문구(alt) 속성처럼, 이미지가 표시되지 않은 영역에 스타일(style)을 부여해서 시쳇말로 “엑박”을 스타일로 만드는 과정도 있었습니다.
/* .ir이 .ir_wrap을 배경으로 덮어 놓고 있지요 */
.ir_wrap{position:relative;width:...px;height:...px;border:1px solid #eee}
.ir_wrap ir{position:absolute;top:-1px;left:-1px;width:100%;height:100%;padding:1px;background-image:url(...)}
재미 삼아 하는 것도 괜찮겠지만, 이미지가 미처 불려와지지 않은 상황에서는 영역이 먼저 보여서 이상해 보일 수도 있습니다.
이야기가 쓸데없이 길어지네요.
윈도우 고대비 모드와 이미지 대치기법이 만날 때
각설하고, 본론으로 들어가겠습니다.
조금 독특하게 padding으로 글자들을 밀어내어 대치기법을 써봤는데요.
윈도우7의 IE11입니다.
문자열이 영역 밖에 있으니, 배경으로 처리했던 글자들이 보이지 않습니다.
위 그림처럼 글자가 잘 나와야 하는데, 생각지도 못한 부작용이었습니다.
명세 파악
MSDN에 나온 윈도우8의 고대비 모드 설명은 역시 장점과 기존 버전보다 나아진 점들이 많이 보입니다.
윈도우 비스타쪽에는 쉽게 보기 위해 고대비 모드를 켜라고 하네요.
고대비 모드에서는 왜 배경이 나오지 않는 것인지 궁금했습니다.
살펴보면, 안타깝게도 몇가지 CSS를 경감(Mitigation)하는 데에 포함되는 것들이 명시되어 있습니다.
For example, background-image, background, and color CSS properties are ignored.
예를 들면, 배경 이미지와 배경, 색상 CSS속성은 무시된다고 합니다.
이미지 대치기법의 불러오기 실패 상황을 고려하는 것이 고대비 모드 상에서 반드시 필요하게 되는 것입니다.
윈도우 XP의 고대비 모드
다행한 것인지 불행한 것인지, XP에서는 배경이미지가 가공되거나 무시되지 않습니다.
때문에 아예 내용을 알 수 없는 배경으로 치부되지는 않습니다.
이 점이 다음 버전의 윈도우를 개발할 때에, 배경 때문에 의도한 정도로 색상 대비를 높일 수 없다는 판단에 도달했을 것입니다.
이로 인해, 비스타부터는 배경 설정 무시라는 결과가 되었다고 생각해봅니다.
분기? 포기?
IE 10 부터는 미디어 쿼리(Media Query)로 분기가 가능합니다.
/* 이렇게 분기하면 된다고 합니다 */
@media screen and (-ms-high-contrast: active) {
/* All high contrast styling rules */
}
@media screen and (-ms-high-contrast: black-on-white) {
div { background-image: url('image-bw.png'); }
}
@media screen and (-ms-high-contrast: white-on-black) {
div { background-image: url('image-wb.png'); }
}
물론 10 미만에서는 불가합니다.
고로, IE10을 지원하지 않는 윈도우 비스타 까지는 분기를 할 수 없습니다.
XP는 대응이 불필요했고, 비스타부터는 대응이 필요한 데요.
절망스러운 소식은, 윈도우 비스타는 IE7부터 사용이 가능합니다.
고대비 모드의 해결
비스타는 IE9까지 IE의 버전 업그레이드가 가능하고, XP는 대응할 필요가 없으니 분기를 결정했습니다.
IE8 이하는 글자를 보이지 않게 하는 방법으로, IE9부터 적용될 기본 속성으로는 글자색을 투명하게 하여 해당 위치에 보이도록 한 것입니다.
.ir{color:transparent;background-image:url(...)}
.ie6 .ir,
.ie7 .ir,
.ie8 .ir{font-size:0;line-height:0;...}
/* 핵으로 사용했다면, 더 지저분 하겠지요 */
.ir{*font-size:0;*line-height:0}
@media screen{
.ir{font-size:0/9;line-height:0/9}
}
그런데, 여기에도 문제점이 있습니다.
대기업인 모 기업 제품으로 추정되는 일부 기기에서는 IE버전이 8임에도, 9로 사용자 환경에 대한 정보(UserAgent String)를 잘못 전달하고 있는 것입니다.
일부 분기 포기
실상의 해결은 글자색을 투명하게 처리합니다.
IE9까지 포함해서 투명하게 처리했습니다.
OS도 웹브라우저도 최신 버전이 아닌 비스타의 IE7/ IE8/ IE9에서는 고대비 모드 시, 대치기법이 사용된 메뉴를 볼 수 없습니다.
크롬의 고대비 모드
개발자들이 좋아하는 웹브라우저는 아마 IE는 아닐 것입니다.
물론, 개인 취향에 따라 좋아하는 사람들을 비난하거나 폄하할 의도로 쓴 글은 아닙니다.
개인적으로 뭔가를 만들다가 가장 많은 문제점을 부딪히게 되는 웹 브라우저이다 보니, 저는 애용하지 않습니다.
IE의 이런 문제점과 달리, OS에 덜 종속적인 다른 웹브라우저는 확장프로그램이라는 방법으로 고대비 모드를 처리합니다.
대표적으로 크롬의 확장프로그램은 화면에 대한 가공처리가 더욱 깔끔합니다.
크롬 웹브라우저의 확장 프로그램 사용이, 배경을 아예 없애는 방법은 아니기에 원래 모습에 더 가깝게 보여 좋습니다.
몇몇 이미지는 대비되지 않는 반쪽짜리 고대비 모드보다, 이러한 확장 프로그램 사용이 더 나아 보입니다.
마치며
역시 UI개발은 쉽지 않습니다.
업계에서 웹 퍼블리셔(Web Publisher – 웹문서 출판자, 펴낸이)라고 우리 직업을 흔히 칭합니다.
책 출판은 같은 방법으로 출력해낼 수 있고 보여질 방법을 정할 수 있지만, 우리는 사용자 환경을 정할 수 없습니다.
때문에 하나의 문제에 봉착하면 고민이 많이 되고, 해결 방법을 찾아도 다른 곳에서의 노출 모습에 대한 확신이 많이 없습니다.
윈도우의 버전별로, 웹브라우저 1가지 종류에 대한 고대비 모드만으로 이만큼의 내용을 채웠습니다.
맥 OS X(Mac OS X)와 우분투(Ubuntu)나 다른 리눅스(Linux) OS, 크롬(Chrome) OS…등 모든 OS의 설치가능한 웹브라우저 별로 이러한 고대비 모드가 있는 지 확인해서 대응한다고 생각만 해도, 엄청난 고행길이 예상됩니다.
그래서 다양한 해결방법이 있다면, 함께 논의해보고 싶은 내용입니다.
네이버 통합검색에 적용한 내용이지만, 이 방법이 최선이라 하기에는 아직 해결하지 못한 문제가 많습니다.
또한 모든 서비스의 방법을 대표하지 않기에 더 적은 분기와 더 나은 호환성을 가진 다른 방법을 논의하고 싶습니다.
0개의 댓글