[출처 : http://naradesign.net/wp/2009/03/12/670/]
한국 Microsoft에서 주최한 IE8 Love Developer 행사에 참석하여 웹 개발자들이 고려해야 할 IE8 대응 방법을 주제로 발표를 다녀왔기에 공유 드립니다. IE8은 기존 버전의 IE와는 다르게 웹 표준 지원폭을 경쟁사들의 브라우저와 동등한 수준으로 끌어올린 브라우저로써 그 의미가 큽니다. 또한 렌더링 방식이 기존 버전과 매우 큰 차이를 보이기 때문에 여느 버전 업데이트와 달리 특별히 주목해야 한다고 생각 합니다. IE8 등장을 앞두고 막연한 두려움이나 호환성 문제로 고민하고 계신다면 이 자료를 통해서 해결 되었으면 하는 바램입니다.
목차
- 지구촌 IE 버전별 점유율
- 한국의 IE 버전별 점유율
- 국내외 IE 통계의 시사점
- IE의 버전별 웹 표준 지원 현황
- IE8과 낡은 웹 사이트의 호환성 문제
- 웹 표준 사이트와 낡은 브라우저의 호환성 문제
- IE8의 향상된 웹 표준 활용하기
- 개발자 도구를 사용하여 브라우저 호환성 테스트
- 참고
지구촌 IE 버전별 점유율 2009년 2월 Net Applications 보고서 기준
| 브라우저 및 버전 | 점유율 |
|---|---|
| IE8 |
1.17% |
| IE7 |
47.32% |
| IE6 |
18.85% |
| IE5 |
0.08% |
| etc.FF,SF,OP,CR |
32.58% |
한국의 IE 버전별 점유율 2009년 2월 Internet Trend 보고서 기준
| 브라우저 및 버전 | 점유율 |
|---|---|
| IE8 |
0.33% |
| IE7 |
38.81% |
| IE6 |
59.42% |
| IE5 |
0.04% |
| etc.FF,SF,OP,CR |
1.4% |
국내외 IE 통계의 시사점
IE6, 7, 8 버전에 모두 대응할 필요가 있습니다. 한편, 0.1% 미만의 IE5.x 점유율을 어떻게 받아들여야 할까요? 0.1% 미만의 점유율을 의미있게 받아들이는 경우 이 문제를 해결할 방법이 전혀 없는 것은 아니지만 되도록 운영체제를 업그레이드 할 수 있게 권장하는 것이 ‘현실적인 타협점’이라고 생각 합니다. 0.1% 미만의 장애인을 정상인으로 만드는 것은 불가능 하기 때문에 인권 보호 차원에서 ‘윤리적/법적’ 으로 ‘반드시’ 대응할 책임이 있습니다. 그러나, 0.1% 미만의 장애 환경은 사용자의 의지에 따라 인위적으로 개선할 수 있는 환경이므로 ‘가능하다면’ 돕는것이 좋겠습니다. Microsoft가 0.1% 고객의 장애환경을 개선하는데 도움이 되었으면 좋겠습니다.
IE의 버전별 웹 표준 지원 현황 Acid2 / Acid3 Test 기준
Acid2 Test는 HTML/CSS/PNG 등의 렌더링을 표준에 따라 얼마나 잘 구현했는지 테스트 하는 도구 이며 Acid3 Test는 HTML/CSS/DOM/SVG 등의 렌더링을 표준에 따라 얼마나 잘 구현했는지 테스트 하는 도구 입니다.
| Acid2 | Acid3 |
|---|---|
 |
 |
| Acid2 | Acid3 |
|---|---|
 |
 |
| Acid2 | Acid3 |
|---|---|
 |
 |
이런 추세라면 IE9 버전이 등장했을 때에는 ‘absolutely good’. IE10 버전이 등장했을 때에는 ‘excellent’ 정도의 평가를 기대해 보겠습니다.
IE8과 낡은 웹 사이트의 호환성 문제
IE8이 웹 표준 준수율을 극도로 개선함으로써 미래의 웹 개발자는 자연스럽게 표준을 준수하게 될 것이고 웹 브라우저의 호환성 문제는 점차 사라질 것입니다. 그러나, 과거에 작성된 낡은 페이지들은 오래된 브라우저에 최적화 되어 있기 때문에 IE8 브라우저에서는 오히려 깨질 것입니다. 이러한 현상은 “언젠가는 넘어야 할 산”이라고 생각합니다.
낡은 웹 사이트를 IE8에서 깨지 않기
낡은 웹 사이트라고 해서 모두 같은 것은 아닙니다. 낡은 웹 사이트는 크게 세 가지 유형으로 나뉩니다.
- 첫째, DTD가 없는 웹 사이트.
- 둘째, DTD가 있는 웹 사이트.
- 셋째, DTD 없는 페이지와 DTD 있는 페이지가 웹 사이트에 혼재되어 있는 경우.
DTD가 없는 웹 사이트 대응법
DTD가 없는 페이지는 아무 대응을 할 필요가 없습니다. IE8은 DTD가 없는 페이지를 여전히 Quirks Mode로 렌더링 하기 때문에 웹 사이트는 깨지지 않습니다.
DTD가 있는 웹 사이트 대응법
DTD가 있는 페이지라고 해서 모두 같은것은 아닙니다.
- 첫째, IE5에 최적화 된 페이지.
- 둘째, IE6에 최적화 된 페이지.
- 셋째, IE7에 최적화 된 페이지.
DTD가 있고 IE5에 최적화 된 페이지 대응법
< meta http-equiv="X-UA-Compatible" content="IE=5" />
DTD가 있고 IE6에 최적화 된 페이지 대응법
IE6에 최적화 된 페이지는 개편해야 합니다. 적어도 IE7에 최적화 시켜야 하는데 그렇지 않으면 구제할 방법이 없습니다. IE8 브라우저에 IE6 렌더링 엔진이 없기 때문입니다. IE6에 최적화된 페이지를 IE7에 최적화 하는 것은 그다지 어렵지 않습니다. IE6에 최적화 된 페이지는 IE7에 최적화 작업 후 다음 코드로 대응합니다.
< meta http-equiv="X-UA-Compatible" content="IE=7" />
DTD가 있고 IE7에 최적화 된 페이지 대응법
< meta http-equiv="X-UA-Compatible" content="IE=7" />
DTD가 혼재되어 있는 웹 사이트 대응법
DTD가 혼재 되어 있는 웹 사이트는 DTD가 없는 페이지와 DTD가 있는 페이지를 구분하여 각각 다른 방법으로 대응해야 합니다. DTD가 없는 페이지는 아무런 대응을 하지 않습니다. IE8은 DTD가 없는 페이지를 Quirks Mode로 렌더링 하기 때문에 페이지는 깨지지 않습니다. DTD가 있는 페이지는 IE7에 최적화 시킨 후 다음 코드를 적용 합니다.
< meta http-equiv="X-UA-Compatible" content="IE=7" />
만약, X-UA-Compatable 호환 코드를 DTD가 있는 페이지에만 별도로 적용하는 것이 어렵다면 모든 페이지에 호환 코드를 추가하는 방법도 있습니다. DTD가 있는 페이지만 IE7에 최적화 시킨 후 모든 페이지에 다음 코드를 적용합니다.
< meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
DTD가 없는 페이지는 여전히 Quirks Mode로, DTD가 있는 페이지는 IE7 표준 모드로 렌더링 할 것입니다.
Meta 호환 코드를 서버측 응답 헤더에 적용하는 방법
Implementing the META Switch on IIS
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Implementing the META Switch on Apache.
X-UA-Compatible:IE=EmulateIE7
웹 표준 사이트와 낡은 브라우저의 호환성 문제
웹 표준 사이트는 IE8에 별도로 대응할 필요가 없습니다. IE8이 웹 표준을 잘 지원하고 있기 때문입니다. 그러나, 웹 표준을 잘 지킨 사이트는 낡은 브라우저에서 깨질 것입니다. 낡은 브라우저는 웹 표준을 완전히 지원하지 않기 때문입니다. 또한, 낡은 브라우저라고 해서 다 같은 브라우저가 아닙니다. IE7, IE6, IE5 세 가지 버전의 브라우저 엔진은 지원하는 표준의 범위가 다르기 때문에 렌더링도 각각 다릅니다. 렌더링이 제각기 다르기 때문에 각각의 브라우저에 대응하는 CSS 코드도 달라야 합니다.
IE 조건부 주석을 사용하여 호환성 문제를 해결
조건부 주석이란, IE를 제외한 브라우저는 주석으로 처리하나 IE 브라우저는 버전에 따라 실제 콘텐츠로 인식하는 주석 입니다. 조건부 주석을 활용하면 IE7, IE6, IE5 각각의 브라우저에 최적화된 코드를 각각 다르게 적용할 수 있습니다. UI 개발자는 IE7, IE6, IE5 브라우저에 각각 대응하는 별도의 CSS 코드를 작성하고 각각을 파일로 분리합니다.
- default.css
- ie7.css
- ie6.css
- ie5.css
IE 조건부 주석의 이해
조건부 주석은 다음과 같은 형식을 갖습니다.
<!--[if expression]> HTML <![endif]–>
IE를 제외한 브라우저는 ‘<!--‘ 부터 ‘-->‘ 까지를 모두 주석으로 처리 하고 IE는 ‘HTML’을 실제 콘텐츠로 인식하고 파싱합니다.
IE 조건부 주석의 적절한 사용법
<link rel="stylesheet" type="text/css" href="default.css" />
<!–[if IE7]><link rel="stylesheet" type="text/css" href="ie7.css" /> <[endif]–>
<!–[if IE6]><link rel="stylesheet" type="text/css" href="ie6.css" /> <[endif]–>
<!–[if IE5]><link rel="stylesheet" type="text/css" href="ie5.css" /> <[endif]–>
CSS Hack을 사용하여 호환성 문제를 해결
CSS Hack은 브라우저의 버그를 이용하여 문제를 해결하는 방법입니다. 버전별로 CSS 파일을 각각 작성하지 않아도 간편하게 낡은 브라우저에 대응할 수 있지만 CSS 문법 규격에 맞지 않는것이 흠입니다. CSS Hack은 미래의 다른 브라우징 장치에서 오류로 취급하지 않는다는 보장이 없기 때문에 항상 주의가 필요합니다.
IE5 ~ IE7 대응 Hack
#selector { property:value; *property:value; } /* 문서의 DTD와 무관하게 작용함 */
IE5 ~ IE6 대응 Hack
#selector { property:value; _property:value; } /* DTD가 없는 문서는 IE7에도 작용함 */
IE5 대응 Hack
#selector { property:value; _property /**/:value; } /* DTD가 표준모드인 경우에만 작용함 */
IE8의 향상된 웹 표준 활용하기
IE8이 등장 했지만 낡은 브라우저와의 호환성을 유지하기 위하여 향상된 표준 코드를 사용하지 않는 것은 바보같은 짓이라고 생각합니다. IE8이 지원하는 표준 CSS 코드를 얼마든지 사용할 수 있습니다. 향상된 브라우저에 향상된 스타일을 제공하고 더 나은 사용자 경험을 제공 해야 한다고 생각합니다. 단, 표준 코드가 낡은 브라우저에 대하여 콘텐츠를 차별하는 형태로 구현되어서는 안됩니다.
개발자 도구를 사용하여 브라우저 호환성 테스트
IE8 브라우저는 3가지 종류의 렌더링 모드를 지니고 있으며 웹 사이트 개발자는 IE8에 탑재되어 있는 개발자 도구(F12)를 이용하여 이 모드를 강제로 변경할 수 있습니다.
- Quirks Mode (IE5를 흉내내기 때문에 IE5 모드라고 볼 수 있음)
- IE7 표준 모드
- IE8 표준 모드
렌더링 모드의 전환은 웹 페이지나 서버측 응답 헤더에 ‘IE 호환 유도 코드‘(Meta Tag)를 사용함으로써 가능하지만 웹 페이지에 선언된 코드를 변경하지 않고도 개발자 도구를 이용하여 다양한 렌더링 모드 테스트를 진행할 수 있습니다. 개발자 도구에서 렌더링 모드를 직접 제어하는 방법은 두 가지가 있습니다. 두 가지 방법 모두 렌더링 엔진을 전환하는 기능을 하지만 ‘문서 모드‘는 클라이언트측에서 단순하게 렌더링 모드만을 변경하고 ‘브라우저 모드‘는 렌더링 모드 전환 뿐만 아니라 서버측에 브라우저 식별정보를 보내주어야 할 때 사용합니다.
- 문서 모드(Document Mode) : 클라이언트측 개발자에게 필요한 옵션으로써 다음과 같이 모드 전환이 가능합니다.
- Quirks Mode : DTD가 있는 문서라도 마치 DTD가 없는듯 IE5를 흉내내는 렌더링을 합니다.
- IE7 표준 모드 : DTD가 없는 문서라도 마치 DTD가 있는듯 IE7 표준 모드로 렌더링 합니다.
- IE8 표준 모드 : DTD가 없는 문서라도 마치 DTD가 있는듯 IE8 표준 모드로 렌더링 합니다.
- IE7 모드 : IE7 브라우저와 같습니다. DTD가 없는 문서는 Quirks Mode로, DTD가 있는 문서는 IE7 표준 모드로 렌더링 합니다. 서버측에 브라우저 식별 정보를 보낼 때 IE7으로 보냅니다.
- IE8 모드 : IE8 브라우저와 같습니다. DTD가 없는 문서는 Quirks Mode로, DTD가 있는 문서는 IE8 표준 모드로 렌더링 합니다. 서버측에 브라우저 식별 정보를 보낼 때 IE8으로 보냅니다.
- IE8 호환성 모드 : IE7 브라우저와 같습니다. DTD가 없는 문서는 Quirks Mode로, DTD가 있는 문서는 IE7 표준 모드로 렌더링 합니다. 서버측에 브라우저 식별 정보를 보낼 때 IE7으로 보냅니다. 단, IE8의 호환성 모드를 이용했다는 정보까지 식별할 수 있게 됩니다.
