익스플로러 호환성 보기

현재는 많이 줄었다고는 해도 아직도 인터넷 익스플로러의 사용자가 많은 편이다. 최근 11버전을 새로 출시하면서 예전 보다는 많이 좋아졌다는 평가들이 많다. 하지만 아직도 나에겐 좋지않은 인상이 더 많이 남은 것 같다. 본격적으로 일로써 브라우저를 접할 때에는 인터넷 익스폴로러가 5.5에서 6으로 막 넘어가던 시기였다. 그 시절만 하더라도 익스플로러에 대항할 브라우저는 없었다. 그 당시에도 파이어폭스, 오페라가 있었지만 점유율은 높지 않았다. 그 상태로 오랜 시간이 흘러 익스플로러7이 나오고 다시 8이 나왔다. 이 시점에 등장한 것이 호환성 보기라는 기능이다(사실 정확한 시점은 기억나지 않지만 8이 나오는 시점이었던 것 같다).

우선 호환성 보기란 무엇인가?

마이크로소프트의 윈도우 사이트에 보면 "왜 Internet Explorer 8에서 일부 웹 사이트가 올바르게 표시되지 않습니까?"라는 글이 있다. 사실 이 글에서도 명확하게 설명하진 않지만 "이전 버전의 Internet Explorer(인터넷 익스플로러)용 웹 사이트는 현재 버전에서 올바르게 표시되지 않을 수도 있습니다. 하지만 호환성 보기를 사용하여 Internet Explorer(인터넷 익스플로러)에서 웹 사이트가 표시되는 방식을 개선할 수 있습니다."라고 되어 있다.

MS 관련글

그렇다 새로운 인터넷 익스플로러에서 이전 버전의 익스플로러에 맞추어진 사이트가 정상적이지 보이지 않는 문제를 해결하기 위해 추가된 기능이다. 그럼 왜 정상적으로 보이지 않는 것일까? 인터넷 익스플로러는 웹 표준을 제대로 준수하지 않았기 때문에 버전이 올라가면서 호환성에 문제가 많이 발생한 것이다. 워낙에 점유율이 높은 상황이 이었으니 급진적 변화는 대란이 일어날 것이라는 생각에 호환성 보기를 추가했으리라 본다.

하지만 나는 이 호환성 보기라는 것이 더 큰 문제들을 만들었다고 생각한다. 어짜피 새로운 웹 표준으로 전향되어야 하는 상황에 알아서 맞춰주는 기능을 제공하니 서비스들이 변화에 적응하는 것이 더 늦어진 것이다. 변화할 시간을 준다는 목적이었을지 모르나 제대로된 웹으로 전환되는데 걸림돌이 되는 상황이다. 특히 이 호환성 모드가 8에서만 제공되는 것이 아니라 그 이후 9, 10, 11에서 조차도 제공한다는 것이다. 게다가 호환성 보기를 사용자가 판단하여 도저히 볼 수 없는 사이트를 골라서 적용하게 해야 하는데 인터넷 익스플로러가 자체적인 판단을 해서 호환성 모드로 보여주는 경우가 많다. 여기서 심각한 문제가 발생한다. 정작 웹표준을 준수하여 만들어진 페이지가 호환성 보기로 렌더링되어 깨지는 경우가 생기는 것이다(참고 - 랜더링 모드 선택 순서도 : https://hsivonen.fi/doctype/ie-mode.pdf).

나는 주변 지인들과이 대화에서 MS를 인터넷 발전의 "악의 축"이라고 자주 얘기하곤 한다. 그 이유를 나열하자면 한도 끝도 없을 것 같고... 웹 분야에 일을 하시는 분들이라면 대부분의 경우 무엇 때문에 그런 생각을 가지게 되었는지 공감할 것이라고 생각한다.

어쨌든 다시 본론으로 돌아가서 이 호환성 보기는 현재 시점(HTML5를 채용하는 신규 웹 프로젝트)에서는 사용할 일이 없는 기능이다. 하지만 앞서 얘기한 것처럼 익스플로러가 제작된 페이지를 호환성 보기로 보여줘 버리는 문제를 해결하지 않으면 불편한 상황을 만나게 될 수 있으니 미리 대비해야 한다.

인터넷 익스플로러가 호환성 보기가 아닌 지정된 모드로 랜더링되게 하는 방법을 하나씩 알아보자.

X-UA-Compatible Meta 선언을 사용하여 브라우저의 호환성 모드를 조정

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=edge : 최신모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링
chrome=1 : 크롬이 설치되어있다면 IE에서도 크롬 렌더링을 사용

당연히 위에 예시처럼 IE=edge,chrome=1을 사용하는 것이 권장된다. 하지만 그외에도 아래와 같은 설정도 있다.

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 표준모드나 관용모드로 렌더링

X-UA-Compatible는 HTML5에서 비표준 속성으로 validation에서 경고가 나올 수 있다.

서버에서 응답 헤더에 X-UA-Compatible를 함께 전송

# ------------------------------------------------------------------------------
# | 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>

# 또는

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  </IfModule>
</IfModule>
<IfModule mod_headers.c>
  Header append Vary User-Agent
</IfModule>

server {
  #...
  add_header X-UA-Compatible "IE=Edge,chrome=1";
}

<configuration>
  <system.webServer>
     <httpProtocol>
        <customHeaders>
           <add name="X-UA-Compatible" value="IE=edge,chrome=1" />
        </customHeaders>
     </httpProtocol>
  </system.webServer>
</configuration>

크롬 프레임

크롬 프레임이라는 ActiveX를 설치해서 익스플로러에서 크롬처럼 랜더링하는 것도 가능했지만 크롬 프레임의 개발 종료로 이제 더 이상 추천하지 않는다.

추가적 문제

자.. 그럼 이로써 모든 문제가 해결된 것인가? 항상 그렇듯 프로그래머에게는 쉽게 해피엔딩이 찾아오지 않는다. 사실 위의 X-UA-Compatible는 브라우저에게 주는 권고사항일뿐 강제사항이 아니다.

IE에서 호환성 보기를 체크한 사용자 판별하기에 소개된 내용을 기준으로 보조적 해결 방법을 제시한다.

아래의 경우들을 보자.

XP에서 IE8을 사용하는 경우 : 호환성 보기 버튼이 항상 표시되므로 사용자들이 언제든 호환성 보기로 변경이 가능하다.
Windows 7에서 IE8, 9를 사용하는 경우 : 위와 같은 이유지만 이 경우는 윈도우 업데이트를 사용하지 않거나 일부러 업데이트를 막은 경우라고 볼 수 있다.
모든 사이트를 호환성으로 보도록 설정한 경우 : 이 옵션은 기본적으로 활성화 되지 않으므로 사용자가 스스로 이 옵션을 켰을 가능성이 높다. 개발자가 테스트 환경 구축을 위해서 이러는 경우도 있다.
가끔 Tweek된 버전의 윈도에 이 옵션이 기본으로 활성화 된 경우 : 사실 제일 곤란한 건 이런 경우이다.

호환성 보기 모드에서 사용자에게 호환성 보기 해제를 안내하기

우선 사용자가 호환성 보기 모드를 사용하는지를 판별해야 적절한 가이드를 제시할 수 있다. IE에서 호환성 보기를 체크한 사용자 판별하기에 소개된 아래의 예시를 보자.

if( navigator.userAgent.indexOf( "MSIE 7" ) > 0 && navigator.userAgent.indexOf( "Trident" ) ) {
    // 호환성 보기 활성화
}

// or

if( /MSIE 7.*Trident/.test( navigator.userAgent ) ) {
    document.getElementsByTagName( "html" )[ 0 ].className += " ie-compatible";
}

판별 원리는 아래과 같다고도 소개되어 있다.

MS의 렌더링 엔진은 Trident 입니다. IE7에서 처음 도입되었습니다. 하지만 userAgent에 Trident가 명시되기 시작한건 IE8 부터죠. 순정 IE7은 “MSIE 7″ 문자열은 포함하지만 “Trident”는 포함하지 않습니다. IE8 이상에서 호환성 보기를 전환하면 userAgent에 버전 정보가 MSIE 7로 표시가 되기 때문에, 두 가지 문자열을 다 포함하게 되죠.

이렇게 판별이 완료되면 사용자에게 호환성 보기에서는 정상적 사용이 되지 않는다는 것을 안내하면 되겠다.