현재 웹어플리케이션을 개발하기 위해 한창 프로젝트를 진행하고 있거나, 기존 웹사이트를 유지보수 하고 있는 개발자들에게 Internet Explorer 8(이하 IE8)의 등장은 부담이 아닐 수 없다.
현재 수행중인 프로젝트의 경우에도 초기에 웹 표준 준수를 목표 잡고 Internet Explorer, Firefox 등 다양한 브라우저와 버전들에서 테스트를 병행하여 개발을 진행해왔다. 그럼에도 불구하고 새롭게 등장한 IE8 버전에서 테스트한 결과, 페이지 레이아웃이 다소 깨지거나 동작에 문제가 발생하는 부분들이 발생하였다. 프로젝트 시작하던 올 초 IE8 출시를 예고되던 시점부터 우려하던 내용이 현실이 되고말았다.
지난주 IE8에서 사이트의 레이아웃이 깨지는 것이 크게 이슈화되었고, 이를 처리하기 위한 방법을 고민하던 중 다행히 간단한 코드를 통하여 전체 페이지의 레이아웃을 바로잡을 수 있었다.
다음은 meta.jspf 의 일부인데, 내가 한 작업이라고는 첫번째 메타(META) 태그를 추가한 것이 전부이다.
<%@ page pageEncoding="utf-8" %>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
아래 IE8에서 테스트한 화면을 보면 Poll 설문조사 부분이 완전히 어긋나 있다.
meta 태그를 적용후 다음과 같이 바로잡혔다.
한가지 더 예를 들면, 다음과 같이 테이블 형태가 깨지던 화면이
정상의 모습으로 돌아왔다.
간단하게 meta 태그를 추가함으로써 대부분의 문제는 바로잡혔지만, 전체 문제가 해결된 것은 아니다. 바로 윗 그림을 보면 검색 버튼의 우측에 우리가 의도하지 않았던 파이프 형태의 라인이 들어간 것이 보인다. 소소한 부분들에 대해서는 확인하고 처리할 수 밖에 없을 것 같다.
개발하는 입장에선 부담이 되지만 IE8은 기존의 IE6, IE7에 비해 월등히 향상된 렌더링 성능을 보여주고 있다고 한다. 실제로 웹서핑을 해보면 체감할 수 있을 수준이다. 그리고 한가지, IE8은 자체에 괜찮은 개발자 툴을 제공하고 있다.
웹표준 적용을 위해 기존 웹사이트에 대한 IE8 브라우저에 대한 호환성을 제공하기 위한 방안 중, 가장 권장되는 수준은 웹어플리케이션을 웹 표준에 맞도록 다시 검증하고 HTML과 CSS, Javascript 등을 수정하는 방법이다. 여건에 따라 이것이 용이하지 않다면 위의 예와 같이 <META> 태그를 이용하는 방안을 권장한다. 단, 전체 페이지가 잘 설계되고 구조화되어 있어야 적용이 쉽다는 것과 <META> 태그가 모든 것을 해결해주지는 않는다는 점을 염두에 두어야 한다.
메타(META) 태그를 적용하는 방법은 두가지이다.
- 페이지 헤더에 메타 태그(X-UA-Compatible)를 추가한다. 이 메타 태그는 여타 태그들 보다 상단에 기술되어야 한다.
- 서비스단의 자바 코드를 사용해 응답 헤더에 덧씌운다.
메타 태그 외에도 몇가지 방법들이 있는데, 내 위키에 간략히 정리한 것을 다시 붙여본다(내용은 마소의 지난 기사 중 "Internet Explorer 8 스페셜 리포트"에서 참고, 인용했음을 밝힌다).
DTD가 없는 웹 사이트 대응 방법
-
Quirks Mode란 DTD를 표준에 따라 인식하지 못했던 과거의 IE5 브라우저의 렌더링을 그대로 흉내 내는 모드다.
DTD가 있는 웹 사이트 대응 방법
DTD가 있고 IE5에 최적화 된 페이지 대응 방법
DTD가 있고 IE5에 최적화된 웹 페이지는 HTML 소스 코드 <head>…</head> 안쪽에 다음과 같은 코드 한 줄을 포함시키면 된다.
<meta http-equiv="X-UA-Compatible" content="IE=5"/>
IE8은 이 명령을“나는 IE5에 최적화된 페이지 입니다. Quirks Mode로 렌더링 해 주십시오”로 받아들여진다.
DTD가 있고 IE6에 최적화 된 페이지 대응 방법
IE6에 최적화 된 페이지는 IE7에 최적화 작업 후 다음 코드로 대응한다.
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
IE8은 이 명령을“나는 IE7에 최적화된 페이지 입니다. IE7 표준 모드로 렌더링 해 주십시오”라고 받아들인다.
DTD가 혼재되어 있는 웹 사이트 대응법
DTD가 없는 페이지는 IE8이 Quirks Mode로 렌더링 하기 때문에 아무런 대응을 하지 않아도 페이지는 깨지지 않는다. DTD가 있는 페이지에 한하여 IE7에 최적화 시킨 후 다음 코드를 적용 하면 된다.
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
만약 이런 호환 유도 코드를 DTD가 있는 페이지에만 별도로 적용하는 것이 어렵다면 모든 페이지에 호환 유도 코드를 추가하는 방법도 있다. DTD가 있는 페이지만 IE7에 최적화 시킨 후 모든 페이지에 다음 코드를 적용한다.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
DTD가 없는 페이지는 여전히 Quirks Mode로, DTD가 있는 페이지는 IE7 표준 모드로 렌더링 할 것이다. 따라서 DTD가 있는지 없는지 여부에 관계없이 무조건 IE7 표준 모드로 렌더링 하는‘IE=7’보다 DTD가 있고 없음에 따라 자동으로 렌더링 모드를 전환해 주는‘IE=EmulateIE7’코드를 더욱 권장 한다.
호환 유도 코드를 서버측 응답 헤더에 적용하는 방법
모든 페이지에 일일이 호환 유도 코드를 추가하는 것은 아무리 봐도 효율적이라고 생각할 수 없다. 따라서 서버 사이드 개발자는 서버측 응답 헤더에 다음과 같이 적용할 수 있다. 이 코드는 웹 사이트에 전체적으로 호환 유도 코드를 삽입하는 것과 같은 효과를 거둘 수 있다.
* 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>
* Apache에 적용할 코드
X-UA-Compatible:IE=EmulateIE7
IE8은 DTD가 없거나 표준 DTD가 아닌 페이지를 만났을 때 Quirks Mode로 렌더링 하고, 표준 DTD를 만났을 때 IE7 표준 모드로 렌더링 할 것이다.
웹 표준 사이트와 낡은 브라우저의 호환성 문제
웹 표준 사이트는 IE8에 별도로 대응할 필요가 없다. IE8이 웹 표준을 잘 지원하고 있기 때문이다. 그러나 웹 표준을 잘 지킨 사이트는 낡은 브라우저에서 깨질 것이다. 낡은 브라우저는 웹 표준을 완전히 지원하지 않기 때문이다. 또한, 낡은 브라우저라고 해서 다 같은 브라우저가 아니다. IE7, IE6, IE5 세 가지 버전의 브라우저 엔진은 지원하는 표준의 범위가 다르기 때문에 렌더링도 각각 다르다. 렌더링 엔진이 제각기 다르기 때문에 각각의 버전에 대응하는 CSS 코드도 달라야 한다. CSS 코드를 적용함에 있어 버전 타깃팅 기법이 필요하다. 다행히도 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]?>
ie7.css 파일은 IE7 버전에만 작용한다. ie6.css 파일은 IE6 버전에만 작용한다. ie5.css 파일은 IE5 버전에만 작용한다. 나머지 브라우저들은 default.css 파일만 파싱하며 ie7.css, ie6.css, ie5.css 파일에 대한 링크를 주석으로 처리한다.
CSS Hack 활용하기
권장하지는 않지만 CSS Hack을 사용하는 방법도 있다. CSS Hack은 브라우저의 버그를 이용하여 문제를 해결하는 방법이다. 버전별로 CSS 파일을 각각 작성하지 않아도 간편하게 낡은 브라우저에 대응할 수 있지만 CSS 문법 규격에 맞지 않는 것이 흠이다. 앞쪽에 선언된 property:value 값은 표준 계열 브라우저(IE8, 파이어폭스, 오페라, 사파리, 크롬)에서 작용하고 뒤에 선언된 property:value 값은 IE 버전에 대응하며 앞에 선언된 속성과 값을 덮어 쓴다.
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가 표준모드인 경우에만 작용함 */
IE5 대응 Hack의 경우 /**/ 주석 앞에 한 칸의 공백이 있음에 유의한다.
참고로 아직도 여전히,
한국의 IE 버전별 점유율(2009년 2월 Internet Trend 보고서 기준)에 따르면 10년 전에 출시된 IE6 브라우저의 점유율이 59.42%로 가장 높고 IE7이 38.81% 대의 점유율을 보이고 있다. 또한 기타 브라우저들의 점유율도 큰 차이를 보인다. 파이어폭스와 사파리, 오페라, 크롬 브라우저의 지구촌 점유율이 통틀어 32.58%나 되는데 비하여 한국에서는 고작 1.4%에 그치고 있다.
고 한다. 파폭을 쓰는 사람은 개발자들이 다인 것 같다.
출처 : http://kyungseo.pe.kr/blog
