X-UA-Compatible, IE=edge, 호환성 보기

Internet Explorer 8 버전이 등장하면서 새로운 기능 한 가지를 추가했습니다. 바로 호환성 보기 버튼인데, 이미 주소 표시줄 옆에 있는 종이 모양의 아이콘을 눌러 보신 분도 계실꺼라 생각합니다.

IE8 버전부터 추가된 호환성 보기 버튼

호환성 보기의 이해

호환성 보기 버튼은 IE8이 웹페이지에 접근했을때, 어떤 렌더링 엔진을 사용할 것인지를 선택하게 하는 용도의 버튼입니다. 웹 개발자 및 디자이너 분들은 구형 IE 브라우저에서 표준에 맞지 않는 수많은 오류와 싸우실텐데, IE의 브라우저 버전이 올라가면서 해당 오류들을 웹표준에 맞게 수정하면서 기존의 구형 브라우저와는 다르게 해석되는 부분이 발생하게 됩니다.

과거 IE6과 IE7이 브라우저 점유율의 대부분을 차지하고 있던 암흑기에 제작된 웹페이지들은 이러한 오류들을 우회하면서 제작되었기에 현재의 웹표준과 다른 방식으로 렌더링됩니다. 이로 인해, 최신의 브라우저에서 웹표준을 지키지 않던 브라우저를 기준으로 제작된 웹페이지를 방문하게 되면 레이아웃이 깨지거나 작동하지 않는 기능이 발생하게 됩니다.

렌더링 모드 적용

호환성 보기 버튼을 클릭함으로써, 웹표준을 지키지 않던 브라우저의 렌더링 방식(관용모드)으로 작동하게 됩니다. 시간은 흘러, 현재의 웹표준을 지키는 브라우저들을 기준으로 제작된 웹페이지들은 이 호환성 보기 버튼이 굳이 필요하지 않고, 해당 브라우저의 최신 렌더링 모드로 작동하게 강제할 필요가 생겼습니다. 아래와 같이 <meta> 태그를 사용해서 어떤 렌더링 엔진을 사용할 것인지 전달할 수 있습니다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

위의 content 값에 지정할수 있는 값은 아래와 같습니다.

• IE=5 : 관용모드(quirks mode)로 지정된 DOCTYPE에 상관없이 IE5 렌더링 방식이 사용됩니다.
• IE=7 : IE7 표준모드로 지정된 DOCTYPE에 상관없이 IE7 표준 모드 렌더링 방식이 사용됩니다.
• IE=EmulateIE7 : IE7 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE7 표준모드나 관용모드로 렌더링됩니다.
• IE=8 : IE8 표준모드로 지정된 DOCTYPE에 상관없이 IE8 표준모드로 렌더링됩니다 .
• IE=EmulateIE8 : IE8 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE8 표준모드나 관용모드로 렌더링됩니다.
• IE=edge : 최신모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링됩니다.

마이크로소프트는 실험적인 프로젝트가 아닌 이상 IE=edge 모드를 지정할 것을 권장합니다. 구식 콘텐츠를 위한 특정 렌더링 엔진을 사용하려면 앞서 나열한 content 속성의 다양한 값 중 하나를 지정하면 됩니다. 만약 X-UA-Compatible이 지정된 meta 태그가 없다면 사용자가 호환성 보기를 선택했는지, 개발자의 사이트가 마이크로소프트 호환성 정보 관리 사이트 목록에 있는지(트래픽이 많은 사이트만 해당)등의 요인에 따라 달라집니다.

과거에는 content="IE=edge,chrome=1" 처럼 대체 방법으로 크롬 프레임이라는 ActiveX를 설치하라는 것을 추천했는데 크롬 프레임의 개발 종료로 이제 더 이상 추천하지 않습니다.

서버에 렌더링 모드 적용

이 것을 Apache나 IIS 같은 웹서버에서 설정하여 HTTP 헤더를 통해 정보를 지정해도 됩니다. 위에서 거론한 X-UA-Compatible 속성 값은 IE에서만 작동하는 비표준 속성이기에, W3C에서 제공하는 유효성 검사툴(Validator)들은 이 속성 값이 적용되어 있다면 오류로 판단합니다 . 이 오류가 문제가 되진 않지만 해당 오류가 거슬리기도 하고, 굳이 모든 웹페이지에 해당 태그를 작성하지 않아도 되도록 웹서버 설정을 권장합니다.

아래의 구문을 httpd.conf 혹은 .htaccess에 설정합니다.

# ------------------------------------------------------------------------------
# | Better website experience                                                  |
# ------------------------------------------------------------------------------

# Force IE to render pages in the highest available mode in the various
# cases when it may not: http://hsivonen.iki.fi/doctype/ie-mode.pdf.

<IfModule mod_headers.c>
    Header set X-UA-Compatible "IE=edge"
    # `mod_headers` can't match based on the content-type, however, we only
    # want to send this header for HTML pages and not for the other resources
    <FilesMatch "\.(appcache|crx|css|cur|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|opus|otf|pdf|png|safariextz|svgz?|ttf|vcf|webapp|webm|webp|woff|xml|xpi)$">
    Header unset X-UA-Compatible
    </FilesMatch>
</IfModule>