IE8 표준 모드
1. 호환 모드/표준 모드
웹 표준이라... ^^ IE8의 등장으로, 드디어 고민안할래야 안할 수 없는 상황에 와 버렸습니다. 점유율이 상대적으로 낮았던 다른 웹 브라우저의 표준 지원과는 사뭇 다른 상황이 펼쳐지고 있죠.
미리 말씀드리면, 이번 글은 아래의 2가지 내용을 정리한 것입니다.
Introducing IE=EmulateIE7
; https://docs.microsoft.com/en-us/archive/blogs/ie/introducing-ieemulateie7
Introducing Compatibility View
; https://docs.microsoft.com/en-us/archive/blogs/ie/introducing-compatibility-view
자, 그럼 현실적으로 다가서서 IE8과 웹 표준 과의 관계를 알아보겠습니다.
사실, 간단하지요. IE8은 현재 시점에 인트라넷 사이트에 대해서는 호환 모드를 기본 설정으로 보여주지만, 인터넷 사이트에서 대해서는 표준 모드를 강요하고 있습니다. 무슨 말이냐면, URL 기준으로 볼때 내부망에 있는 서버를 접근하는 경우와 외부망에 있는 서버를 접근하는 경우로 나눈다는 것인데, 그 기준으로 컴퓨터 명이냐 도메인 형식이냐를 보고 결정하는 것입니다. 예를 들어 아래의 주소는 "인트라넷 사이트" 접근입니다.
http://serverName/default.html
하지만, 아래의 경우는 "인터넷 사이트" 접근입니다.
http://www.serverName.co.kr/default.html
http://164.124.101.2/default.html
2가지 접근에 대해 IE8이 표현해주는 방식이 다른데, 아래는 IE8이 인터넷 사이트를 방문한 경우의 주소창 모습입니다.
[그림 1: 인터넷 사이트 방문 - 표준 모드]
주소 창 우측으로 "찢겨진 문서" 이미지가 보이시죠. 구분이 명확하지는 않은데 위의 상황이 바로 "표준 모드"로 웹 사이트를 렌더링하고 있다는 것을 나타내주는 것입니다. 만약, 이 모드에서 해당 웹 사이트가 정상적으로 보여지지 않는다면 "호환 모드"로 전환할 수가 있는데 "찢겨진 문서" 아이콘을 한번 눌러주면 됩니다.
[그림 2: 인터넷 사이트 방문 - 호환 모드]
위의 그림을 잘 보시면 "찢겨진 문서(이하, 호환 모드 변경 버튼이라고 부름)" 이미지가 색상이 다소 바뀐 것을 볼 수 있습니다. "호환 모드"로 전환되었다는 것을 알려주는 것이고, IE 탭에도 같이 "Compatibility View"라는 풍선 도움말을 함께 띄워주고 있습니다.
반면에, 인트라넷 사이트를 방문한 경우에는 아래에서 보는 것처럼 아예 "호환 모드 변경 버튼" 자체가 보이지 않게 됩니다.
[그림 3: 인트라넷 사이트 방문 - 호환 모드]
이렇게 안 보이는 경우 현재 모드가 어떤 것이 적용되고 있는지 확인하고 싶을 수 있는데 아쉽게도 이 부분은 명시적으로 제공되고 있지는 않습니다. 대신에 "F12" 키를 눌러서 나오는 "Developer Tools"에서 아래와 같이 "Browser Mode IE8 Compat View" 메뉴가 어떤 것으로 선택되었는지를 보고 판단할 수는 있습니다. (굳이 방법이 또 하나 있다면, "Page" 메뉴의 "Compatibility View" 활성 여부가 있긴 합니다.)
[그림 4: IE8 개발자 툴 메뉴로 "Browser Mode" 확인]
2. Browser Mode 와 Document Mode
Browser Mode와 Document Mode에 대한 설명은 아래의 글을 읽지 마시고, "http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-with-browser-mode-vs-doc-mode.aspx?wa=wsignin1.0" 글을 참고하십시오.
"1. 호환 모드/표준 모드" 에서 설명한 내용은 엄밀히 "Browser Mode"를 말합니다. 즉 웹 브라우저의 내부 렌더링 엔진 개선을 의미하는 것입니다. 달리 설명하면 "호환 모드"는 IE 7 이전의 웹 페이지 렌더링 엔진을 사용해서 보여준다는 것이고, "표준 모드"는 개선된 IE8의 웹 페이지 렌더링 엔진을 사용하겠다는 것입니다. (개인적인 추측입니다. 이에 대한 공식문서는 없습니다.)
그렇다면 "Document Mode"는 무엇일까요? 말 그대로 문서의 HTML이 따르는 서식 유형을 나타냅니다. 문제가 되고 있는 "Quirks" 모드라는 것은 HTML 문서의 내용이 아주 ^^; 자유분방하게 배치되었다는 것을 의미하죠. HTML 태그들이 정상적인 규칙이 없다 보니 "Quirks" 모드에서는 브라우저들마다 각각 구현한 내부 알고리즘으로 다시 문서 태그를 정형화 시켜서 표현해 주게 됩니다. 결과적으로 "Quirks" 모드의 문서들은 제 아무리 웹 표준을 지키는 브라우저라 할지라도 각각의 브라우저마다 다르게 보여질 수밖에 없습니다.
그런 것을 개선하려고 나온 것이 바로 W3C와 IETF에서 정의한 "표준 모드"입니다. 이것은 지금까지 언급했던 IE8의 렌더링과 관련된 "표준 모드"와는 의미가 다릅니다. HTML 페이지마다 가지고 있는 DocType이 이것을 결정하게 되는데, HTML 문서 양식을 정의하는 표준은 꽤나 다양해서 ... 웹 사이트 프로그래머만큼이나 웹 브라우저 제작자들이 불쌍하다는 생각이 들 정도입니다.
[표 1: DocType 종류 -
http://en.wikipedia.org/wiki/Quirks_mode 문서 참조]
- None
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- <!DOCTYPE html>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
아마도 더 나오겠지요. ^^;
위에서 None은 DocType이 지정되어 있지 않은 경우를 의미하고, "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">" 이것과 함께 아주 기본적인 양식으로 자유롭게 제작된 HTML 문서임을 나타내므로 대부분의 브라우저들이 "Quirks" 모드로 판단하고 문서 정형화를 나름대로 정해진 알고리즘에 따라 행합니다. (JavaScript로 HTML DOM 모델을 다뤄보면 알겠지만, "View Source"로 보는 문서와 document.body.innerHTML이 다른 것이 바로 정형화 과정의 예입니다.)
최소한 다양한 웹 브라우저에서도 동일한 모습을 보여주고 싶은 웹 사이트라면 "Quirks" 모드가 아닌 이외의 DocType을 따르는 문서를 제작해야 합니다. 쉬운 예로 xhtml 규격은 모든 태그가 열림과 닫힘이 있어야 합니다.(예를 들어, <P></P> 쌍)
Document Mode와 Browser Mode는 그럼 어떤 관계가 있을까요?
예를 들어, 웹 서버에서 test.html이라는 문서를 웹 브라우저가 열은 경우를 가정하면,
- [Document Mode] test.html의 DOCTYPE 을 보고 문서 유형을 판단.
- [Document Mode] DOCTYPE에 따라 렌더링 할 수 있는 유형으로 정형화(영어로 표현하자면, Canonicalization이나 Normalization 정도가 좋겠군요.)
- [Browser Mode] 정형화된 내용에 따라 웹 브라우저가 구현한 렌더링 엔진으로 화면에 표현
이쯤에서 다시 한번 곱씹어보면, IE8이 기본적으로 인터넷 웹 사이트에서 IE8 표준 모드를 적용한다는 것은 렌더링 엔진이 개선되어졌다는 것을 의미합니다.
현재 보여지고 있는 웹 페이지에 대한 Browser Mode와 Document Mode를 알아보는 방법은 역시 "F12"를 통한 "Developer Tools"를 통해서 가능합니다. "[그림 4]"에서 이미 Browser Mode는 확인해 보았고, 아래는 Document Mode를 보여주고 있습니다.
[그림 6: IE8 개발자 툴 메뉴로 Document Mode 확인]
위에서 보면 "Quirks Mode", "Internet Explorer 7 Standards", "Internet Explorer 8 Standards" 3가지 메뉴가 있는데, 아마도 HTML 원본 파일에 지정된 DocType을 해석하는 엔진도 개선이 된 것이 아닌가 예상해 봅니다. 그로 인해 IE7 표준 모드와 IE 8 표준 모드가 나눠졌겠지요. 어차피 프로그램 코드는 수정되기 마련이니까!
3. 호환 모드와 표준 모드를 명시
문제는!
IE7 까지는 잘 보이던 웹 사이트가 IE8에서 깨져 보이는 웹 사이트는 어떻게 해야 하느냐 입니다. 버전이 다른 IE 웹 브라우저가 동일한 화면을 다르게 보여주는 데에는 2가지 이유가 있을 수 있습니다. Browser Mode의 렌더링 차이이거나, Document Mode 정규화 차이일 것입니다.
만약, 표준을 전혀 고려하지 않은 웹페이지 저작자라면 (즉, Quirks 모드의 웹 페이지) IE8에서도 IE 7과 똑같이 웹 페이지를 다루도록 하고 싶다면 "BrowserMode = IE 8 Compatibility View" / "DocumentMode = Quirks"로 설정하면 됩니다. 반면에 표준에 맞게 (지정된 DocType에 충실하게) 제작된 웹 페이지라면 "BrowserMode = IE 7" / "DocumentMode = Internet Explorer 7 Standards"로 설정하면 되는 것이고.
그런데, 아쉽게도 웹 사이트 측에서는 "Browser Mode"를 조정할 수 있는 권리가 없습니다. IE8은 무조건 인터넷 사이트에 대해서는 Browser Mode를 IE8 표준 모드로 설정하고 보여줍니다. 물론, 클라이언트 측에서는 "Browser Mode"를 자유롭게 제어할 수 있습니다. "호환 모드 선택 버튼"을 이용해서 그때그때 설정하거나 아래와 같은 "Compatibility View Settings" 대화창을 통해서 특정 사이트에 대해서 "호환 모드" 렌더링 엔진을 선택하도록 하거나, 심지어 "모든 공용 사이트"에 대해서 호환 모드를 사용하도록 지정하는 것이 가능합니다.
[그림 7: 호환 모드 설정]
"Introducing IE=EmulateIE7"문서에 의하면, Document Mode는 웹사이트 측에서 제어할 수 있는 것으로 나옵니다. 기본값은 IE8 표준 모드이지만, "X-UA-Compatible" 속성을 사용해서 IE8로 하여금 Document Mode를 "Internet Explorer 7 Standards"로 설정한다는 것입니다.
---- 방법 1. 웹 페이지마다 메타 태그 지정 ----
<meta http-equiv="X-UA-Compatible" content="IE=7" />
---- 방법 2. 웹 서버에 HTTP 헤더 지정 - 모든 페이지에 영향 ----
X-UA-Compatible: IE=7
"IE=7" 값이 지정되면 Quirks 모드인 문서조차도 "IE7 Standards"로 처리하는 문제가 있어 별도로 "IE=EmulateIE7" 모드가 추가되었습니다.
정리해 보면, IE7로는 잘 보이던 웹 페이지가 IE8로 깨져 보인다면 웹 사이트 입장에서는 "Document Mode"만을 설정하는 범위에서 호환성을 설정해 줄 수 있습니다. "Browser Mode" 변경은 사용자의 명시적인 설정이 요구된다는 것!
4. 웹 표준을 지켜서: 잘 보인다. != 잘 동작한다.
IE8 웹 표준 모드에서 특정 웹 사이트를 정상적으로 "이용했다"고 해서 다른 웹 브라우저에서도 정상적으로 "이용할 수 있다"는 의미가 성립하는 것은 아닙니다. IE8 표준 모드는 단지 "보여주는" 방식이 표준을 지킨다는 것이지 ActiveX 등을 포함한 웹 페이지에서 ActiveX를 동작시키지 않도록 만든다는 것은 아닙니다. 아래에서 보시는 것처럼 IE8 표준 모드에서도 정상적으로 ActiveX 설치가 진행되고 있습니다.
[그림 8: IE8 표준 모드에서의 ActiveX 활성화]
아시겠지요! ^^
5. IE8 Acid 테스트
IE8이 웹 표준을 지킨다는 말에 새삼 주목을 받고 있는 웹 사이트가 있다면 바로 ^^ Acid 테스트 페이지인데요. IE8이 아직 베타 버전이긴 하지만 Acid 테스트 결과를 한번 볼까요! 우선, Acid2 테스트는 아래의 웹 페이지에서 할 수 있습니다. (IE 7로는 방문하지 마십시오. 민망합니다.)
Acid2 테스트
; http://webstandards.org/files/acid2/test.html
마이크로소프트에서 약속한대로 IE8 베타에서도 Acid2 테스트는 아래와 같이 잘 보이고 있습니다.
[그림 5: IE8 베타에서 본 Acid2 테스트]
반면, Acid3 테스트 결과는 아직 낮은 수준입니다.
Acid3 테스트
; http://acid3.acidtests.org/
IE7의 경우 12점인데, IE8 베타1 은 21점입니다. 최근 공개된 IE8 RC1은 아직 설치해보진 않았는데, 웹에서 검색해 보니 20 점을 받았다고 나오네요. 어떻게 뒷걸음질을. ^^;
Acid3 test IE8 RC1
; http://geeks.pirillo.com/photo/acid3-test-ie8-rc1
6. 기타...
한국 소프트웨어 진흥원에서 웹 표준 가이드를 무료로 배포하고 있습니다. 비록 2005년 12월 문서이긴 하지만. (소프트웨어 만큼이나 문서 역시 업데이트 관리를 해야 하는 대상이 아닐런지! 매번 새로운 문서를 만들 것이 아니라 이렇게 한번 만들어 놓은 문서에 지속적으로 버전 업데이트를 하면 좋을 텐데... 라는 생각입니다. ^^)
실전 웹 표준 가이드 (한국소프트웨어진흥원)
; http://www.iabf.or.kr/Pds/WalView.asp?board=wal&pg=1&bseq=2242&md=&sf=&ss=
마지막으로! 웹 표준은 IE8 표준모드에서 잘 보인다고 해서 지켜진 것은 아닙니다. 그렇다고 해서 간단한 웹 페이지(또는 재사용되지 않을 웹 페이지) 하나 만들면서 TABLE 태그로 하면 될 것을 굳이 DIV/CSS로 할 필요는 또 없다고 봅니다. 중요한 것은, 여러분들의 상황에 맞게 조율하는 것이 중요합니다. 기술은 기술일 뿐!
(이 글은, Windows 7 빌드 7000에 있는 IE 8 베타를 기준으로 작성된 것입니다. 여담으로, Windows 7 정말 마음에 드네요. ^^)
[이 토픽에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]