NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


IE6부터 IE9까지 대응하기.

본문 건너 뛰기

어제 시간 IE9 베타 런칭 행사에 ‘IE6부터 IE9까지 대응하기’ 라는 주제로 발표를 다녀왔습니다. 경쟁사 브라우저들과 비교해도 손색이 없을만큼 높은 표준 준수율로 무장한 IE9 베타를 런칭하는 자리에서 낡은 브라우저 대응 방법을 소개하는 발표를 포함시켰다는 것은 어찌보면 참 아이러니한 일입니다. 국내 현실과 청중들의 욕구를 잘 헤아렸던 한국 마이크로소프트사의 배려라고 볼 수 있겠습니다. 

IE6는 아직 살아있다.

넷어플리케이션즈의 2010년 9월 최근 통계에 따르면 아직 전세계적으로 IE6 사용자는 16% 수준의 점유율을 보이고 있습니다. 인터넷트렌드의 2010년 9월 통계에 따르면 국내 IE6 사용자는 무려 36%나 됩니다. IE7과 IE8은 국내에서 각각 30% 수준의 점유율을 보이고 있습니다. 사람들은 IE6 브라우저의 장례식을 치를만큼 낡은 브라우저가 하루속히 사라져주길 원하지만 IE6는 아직 죽지 않았습니다. 웹 개발자는 IE6, IE7, IE8, IE9 브라우저에 모두 대응해야 합니다.

IE 브라우저 버전은 4개 이지만 둘로 구분할 수 있다.

IE6, IE7, IE8, IE9 브라우저 버전은 4개이나 표준 준수율 또는 버그 발생률에 따라 단 두 가지 종류로 간단하게 구분할 수 있습니다.

IE8~9 브라우저는 HTML/CSS 표준 준수 테스트 도구인 Acid2 테스트에서 모두 만점을 받은 브라우저 들입니다. 따라서 이 두 버전의 브라우저는 다른 여느 표준계열 브라우저들(크롬, 사파리, 오페라, 파이어폭스)과 어깨를 나란히 합니다. IE8 또는 IE9 브라우저에 최적화된 웹 페이지는 다른 브라우저에서도 별 문제 없이 똑같이 잘 보입니다.

그러나 IE6~7 브라우저는 표준 준수율이 상대적으로 떨어지고 버그도 많습니다. 다행인것은 IE6 브라우저와 IE7 브라우저가 그다지 큰 차이가 없다는 점입니다. IE6 브라우저에서 발생하는 문제는 IE7 브라우저에서 동일하게 발생할 확률이 높습니다. IE7 브라우저가 조금 더 나을 뿐입니다.

결국 저는 IE8~9 브라우저에 대해서는 할 말이 많지 않습니다. IE6~7 브라우저의 문제 해결을 위해서 몇 가지 팁을 소개합니다.

IE6~7 문제해결.

  • IE6~7 브라우저도 표준에 따라 구현된 브라우저 입니다. 표준 DTD를 사용하면 표준에 따라 잘 렌더링 해줍니다. 반드시 표준 DTD를 사용하세요. DTD를 사용하지 않으면 모든 브라우저들이 IE5 버전의 브라우저를 흉내내는 Quirks Mode 상태가 되어 각기 다른 뷰를 출력합니다.
  • 사용자에게 무엇이 더 좋은지 HTML과 XHTML의 우위를 논하는 것은 무의미 합니다. 그러나 XHTML의 엄격한 문법이 개발자에게는 더 유리할 것입니다.
  • 엄격한(Strict) DTD와 호환형(Transitional) DTD 가운데 호환형 DTD를 추천합니다. 엄격함은 많은 오류를 유발할 뿐입니다.
  • 마이크로소프트의 독자적인 표현방식인 hasLayout이 존재한다는 것을 알아야 합니다. hasLayout이 없으면 문제가 발생하는 경우가 많습니다. IE6~7 브라우저에서 화면에 특정 요소가 보이지 않거나 잘못된 표현을 하면 { zoom:1 } 속성을 추가로 부여하여 해결되는 경우가 많습니다. zoom 속성은 hasLayout Trigger 이며 다른 브라우저들은 해석하지 않는 속성입니다.
  • float된 방향와 같은 방향의 margin이 존재하는 경우 IE6 브라우저는 margin을 두 배로 출력하는 빈도 높은 버그가 있습니다. float이 부여된 요소에 display:inline 속성을 부여하면 해결됩니다. float 처리된 요소는 display 속성이 block으로 바뀌는데 이 값은 절대로 덮어쓰기가 되지 않습니다. float된 요소에 inline 속성을 부여해도 여전히 block 이라는 뜻입니다. 그 밖에 float 요소는 마지막 텍스트 콘텐츠를 복사해서 출력하는 버그도 있는데 이 때에도 display:inline 속성을 부여하면 해결됩니다.
  • zoom 속성으로 문제가 해결되지 않으면 position:relative 속성을 사용해 봅니다. display:block 으로 처리한 a 요소의 클릭 영역이 제대로 잡히지 않는 문제를 해결할 수 있습니다. 마우스 커서 모양의 잘못된 출력도 바로잡아 줍니다.
  • *property:value와 같은 형식으로 속성 앞에 ‘*’ 별표를 붙이면 IE6, IE7 브라우저만 이 속성을 해석하고 다른 브라우저는 무시합니다.
  • _property:value와 같은 형식으로 속성 앞에 ‘_’ 언더바를 붙이면 IE6 브라우저만 이 속성을 해석하고 다른 브라우저는 무시합니다.

IE6~9 브라우저에서 CSS3 사용하기.

낡은 브라우저 때문에 신기술을 사용할 수 없다는 생각은 극복할 수 있습니다. 마이크로소프트에서 이미 오래전에 브라우저에 탑재했던 기술이 CSS3 표준으로 채택(word-wrap, text-overflow, @font-face)이 되기도 했고 CSS3와 유사한 기술(filter)이 이미 IE6~8 브라우저에 구현되어 있기도 합니다. 우리는 신기술을 사용하거나 또는 모방하면서 브라우저 호환성도 유지할 수 있습니다.

IE6~9 브라우저에서 사용하거나 모방할 수 있는 CSS3에 대한 설명은 HTML5 오픈 컨퍼런스에서 발표했던 CSS3 소개 자료로 대신합니다.

요점 정리.

  1. 현존하는 하위 버전 브라우저에 대한 호환성을 지원해야 합니다.
  2. 신 기술의 사용을 두려워 할 필요가 없습니다. 좋은 도구를 선택한 사용자에게 향상된 경험을 전달해야 합니다. 
  3. 낡은 브라우저 비난하기 보다는 새 브라우저를 추천 합시다.

다소 지루하고 딱딱한 발표였음에도 불구하고 관심을 가지고 들어주셔서 고맙습니다. IE10 런칭 행사에서는 더 이상 낡은 브라우저 이야기는 나오지 않았으면 하는 바램입니다. 아마 한국 마이크로소프트도 그런 기대를 가지고 있을 것입니다. 발표자료. 발표영상.

분류: 웹 표준 | 2010년 9월 17일, 2:53 | 정찬명 | 댓글: 33개 |
트랙백URI - http://naradesign.net/wp/2010/09/17/1402/trackback/

33개의 댓글이 있습니다.

  1. 아크몬드말하길

    좋은 포스트, 잘 읽고 갑니다. :)

  2. 이병하말하길

    좋은정보 잘보고 갑니다!

  3. 채지수말하길

    다시봐도 찬명님은 글을 맛있게 잘 쓰시는것 같습니다.^^
    좋은 내용 잘읽고 갑니다.

  4. 익명말하길

    다시금 머리 속에 정리가 됩니다. 감사합니다. ^^

  5. 정찬명말하길

    @아크몬드 @이병하 @채치수 @익명
    피드백 고맙습니다. 대중 앞에서 말하는것보다는 글 쓰는게 훨씬 편하네요. ㅎㅎ

  6. 유현경말하길

    말씀도 잘 하시믄서..ㅎㅎ 어제 다시 한 번 너무나 감사드립니다..

  7. 순대포유말하길

    역시나 나라디자인블로그는 사막의 오아시스같네요! 잘 이해되도록 설명해주셔서 고맙습니다! 매번 와서 잘보고가는데 댓글을 못달고 눈팅만해서 @_@;;;

    추석명절 건강하게 잘~! 보내세요 ^.~

  8. 정찬명말하길

    @유현경
    고맙습니다. 하지만 저는 말을 잘하는 편이 아닌걸요. ㅡㅡ;

  9. 정찬명말하길

    @순대포유
    최고의 찬사 고맙습니다. 가족들과 즐거운 추석 보내세요. ^^

  10. 익명말하길

    발표시간이 그리 좋지 못했던 것 같습니다.

    맨 마지막 시간이다 보니 제 주위에 분들은 전부 주무시고 계시더라구요.
    열심히 들으려고 노력했으나.. 쏟아지는 잠은 어쩔도리가 없었다능.. 흑흑흑

  11. 정찬명말하길

    @익명
    아닙니다. 제 탓입니다. 다음부터는 좀 더 쉽고 재미있게 설명해야겠다는 다짐을 했답니다. ^^

  12. 익명말하길

    •+property:value와 같은 형식으로 속성 앞에 ‘+’ 플러스를 붙이면 IE7 브라우저만 이 속성을 해석하고 다른 브라우저는 무시합니다.

  13. 익명말하길

    잘못된 DTD가 Quicks Mode를 유발한다기보다는 DOCTYPE의 삽입여부가 렌더링방식을 결정한다고 봐야합니다.
    DOCTYPE를 선언하지 않아야만 브라우저는 Quicks Mode로 렌더링을 하죠.
    임의의 DOCTYPE를 선언했다면 IE6이하 브라우저를 제외하고 모두 엄격모드(표준모드로) 페이지를 렌더링하게 됩니다.

    DTD에 관련된 말들도 많기도 많은데 개인적으론 특정된 DTD를 선택하기보다 아예 그걸 고민할 필요가 없는 표기법을 추천합니다.
    1. 간단해서 기억하기가 쉽죠.
    2. 대략 100Byte의 용량을 절약하였습니다, 네이버나 다음처럼 엄청난 트래픽이 발생하는 사이트에는 아주 객관적으로 트래픽 절약을 꾀할 수 있겠지요.
    3. 야말로 진정한 호환이라고 생각합니다. IE6~9, FF, Webkit, Opera모두 호환될 수 있으며 심지어 향후를 대비해 호환될 수도 있습니다. HTML5에서도 바로 이 선언을 사용하죠. 그리고 요즘 새로 출시되는 브라우저는 모두 HTML5를 지원합니다.(주의: 가 HTML5전용이라고 이해하면 틀렸습니다.)

    http://hsivonen.iki.fi/doctype/
    http://www.quirksmode.org/css/quirksmode.html#link2
    http://www.quirksmode.org/dom/w3c_html.html#t11

  14. 익명말하길

    윗글에서 설명하려던 선언법은 [!–DOCTYPE html]였습니다-_- 글등록이 먹어버렸네요

  15. 정찬명말하길

    @익명
    IE7 브라우저에만 적용할 수 있는 좋은 팁 고맙습니다. ^^

  16. 정찬명말하길

    @익명
    DTD에 관한 섬세하고 멋진 의견 고맙습니다. ^^b

    DTD를 선언하더라도 Quirks Mode를 유발하는 경우가 있기 때문에 정확하게 표현하려면 “Quirks Mode를 유발하지 않는 표준 DTD를 사용해야 한다” 정도로 정정할 수 있을것 같습니다.

    예를 들면 다음과 같은 DTD는 표준 DTD이긴 하지만 Quirks Mode를 유발하는 DTD 입니다.
    [!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”]
    [!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”]

    [!DOCTYPE html]이 html5의 공식 DTD이긴 하나 이 DTD를 사용하면 대부분의 낡은 브라우저들이 준표준 모드(Almost Standards Mode)로 렌더링 하기 때문에 적극적으로 권장할수 있다는 의견은 절대적으로 좋은 팁이라고 생각합니다.

    html5 DTD는 모든 브라우저들이 준 표준 모드로 렌더링 되도록 함과 동시에 html 문법과 xhtml 문법을 모두 허용하기 때문에 ‘만능 DTD’라 부를 수 있겠습니다.

    P.S.
    html5 DTD가 html, xhtml 문법을 모두 허용하나 다음과 같은 예외를 두고 있습니다. html 문서에서 허용하던 닫기 태그의 생략은 허용하지 않습니다. 예를 들어 [p]… [td]… 이와 같이 내용있는 태그에 닫기를 생략하는 것을 html은 허용했지만 html5는 허용하지 않는다는 점이 다르므로 유의해야 합니다. html5 DTD를 선언했다면 반드시 [p]…[/p] [td]…[/td] 이렇게 닫아줘야겠지요. (이미 알고 계시겠지만 다른분들께 참고가 될까 싶어 적었습니다. ^^)

  17. 김장수말하길

    100% 이해하지는 못하지만 항상 좋은 글 잘 보고 있습니다 ^^
    가장 큰 문제가 되는 IE6의 사용률이 0%가 되려면
    XP사용률이 0% 가 되어야 가능하지 않을까 싶습니다 ㅠ
    XP 기본 탑재 브라우저가 IE6이라서
    잘 알지 못하는 사람들은 IE6을 그냥 그대로 사용하고 있으니까요.

    ….. 뿐만 아니라
    제가 다니는 학교에 컴퓨터관련 학과 2곳의 실습실은
    하드 순간복구 프로그램이 깔려있는데 브라우저는 모조리다 IE6이 더군요
    그 강의실에서 HTML , 웹 프로그래밍 등의 수업도 하고 있어서 참…

  18. 김장수말하길

    추가로 질문이 있습니다.
    XE의 Navigator 위젯, HoriNavigator 를 수정하여 사용하고 있습니다.
    기초가 부족하여 모두 이해하고 수정하여 사용하는것은 아니고,
    CSS를 조금씩 수정하고 확인하면서 저에게 맞게 사용중입니다.

    메인 메뉴가 나오는 부분의 높이를
    a 태그에 line-height:55px로 줬습니다. 글자크기는 11px 이기 때문에
    약간 높이 있는 li 의 중간높이에 글자가 표시되도록 하였습니다

    IE7,8,FF,Chrome 에서 모두 정상적으로 표시가 되는데..
    문제는 IE6이더군요.

    ‘메뉴에 새글 표시’를 사용하고 있는데, IE6에서만 N 아이콘이 붙으면
    li 가 가운데 높이에 위치하지 않고 위로 밀려버리는 현상이 발생합니다.

    원래의 horiNavigator 스킨은 그런 문제가 없더군요
    스스로의 힘으로 해결해 보려 노력하였으나 쉽지 않아, 댓글 남기고 갑니다.
    혹시나 하여 웹사이트 입력폼에 URL 적어 놓겠습니다.

    ps. depth 2 메뉴에는 새글표시 모듈이 작동하지 않는데
    소스를 수정해야 할까요?

  19. 정찬명말하길

    @김장수
    네 장수님 의견에 동의합니다. IE 업그레이드 했다가 하드 순간 복구 프로그램 때문에 좌절했던일이 한 두번이 아니죠. ㅎㅎ

  20. 정찬명말하길

    @김장수
    IE 브라우저는 이미지를 포함한 문자열의 수직 정렬 표현에 문제가 있습니다. 제가 지금 맥북이라서 IE 테스트는 못해봤는데요. 일단 img 요소에 margin-top 또는 margin-bottom 값을 조절해서 전체적인 수직 정렬을 맞춘 다음 이미지 요소에 position:relative 속성을 부여하고 top 값을 사용해서 인접된 글자와의 수직 정렬을 맞춥니다. 테스트 해보면서 말씀드리는게 아니라서 잘 될지 모르겠습니다만 저라면 이런 방법을 시도해 봤을것 같습니다. 그리고 이런 방법은 IE6 브라우저에서만 대응해야 하기 때문에 속성 앞에 ‘_’ 언더바 핵을 붙여서 IE6 브라우저만 해석할 수 있도록 필터링 해주세요. 예 { _property:value }

  21. 김장민말하길

    항상 좋은 글 감사히 잘 읽고 있슴다.. 트윗도…^^
    항상 감사합니다.^^

  22. 익명말하길

    좋은 정보 감사합니다 ^.^ 제가 개인적으로 float에 관해서 궁금한 것이 있는데요, float가 들어간 모든 부분에 display:inline를 넣어야하는 건가요? 아니면 버그가 있는 부분에만 display:inline를 넣어야하는건가요? ㅠㅠ 계속 float에 대해 해결이 되지 않아서… 답변 부탁드립니다.

  23. 정찬명말하길

    @익명
    버그가 발생하는 상황에서만 사용하는게 좋겠지요. ^^

  24. cini말하길

    안녕하세요~

    ie6~7의 문제 해결은 이제 좀 알겠는데, ie9에서 발생하는 문제를 대응하는 방법은 없을까요? ie9에서만 먹히는 핵이라던가; 후.. 어떻게 날이 갈 수록 짐이 더 느는 듯한 이 기분..-.-;

  25. 정찬명말하길

    @cini
    제가 알기로 IE9에서 사용할 수 있는 핵은 없습니다. 꼭 필요하다면 조건부 주석(conditional comment)이라도 사용 하셔야겠네요.

  26. 궁금이말하길

    ie9에서 이유없이 이미지가 불특정하게 깨져서 보이는 현상은 베타버전일때부터 나타난 버그인가요? 해결방법은 없는건가요?

  27. 정찬명말하길

    @궁금이
    아직 제가 격어보지 못해서 잘 모르겠습니다.

  28. 장소정말하길

    ie9에서 묘하게 플래시 사이즈가 작게 변해요. 1px정도?? 덕분에 이미지가 조금씩 깨져보이거나 공간이 조금씩 비어요. 해결 방안을 모르겠어요;; 그리고 회사 홈페이지가 쿼크모드라;;; 해결하기가 더 애매하네요;;

  29. 익명말하길

    플래시.. 저도 지금 하나 만들고 있는데 똑같은 증상이군요.. 그냥 html파일에서 플래시크기를 1px늘려주니 아무 문제 없더군요.. 어제 한건데 잘못기억하는것일 수도 있는데.. 이렇게 한번 해보시면 안되시면 플래시파일을 열어서 거기서 1px늘리면 될듯합니다.. 일단 먼저 html에서 플래시 불러오잖아용? 거기서 1px를 늘려보세요.. 지금 다시 확인해보니 html파일에서 1px추가한거 맞네요

    저도 가로로 1px이 비더라구요 도움이 될 수 있으면 좋겠습니다.

  30. 권진형말하길

    매일 여기 들르면서 위에 하나 적어봤네요.. 앞으로 인사말이나 적어야지.. 하하
    잘부탁 드립니다.

  31. 김근희말하길

    상단메뉴에 들어가는 css코드입니다.
    메인메뉴영역이 인지가 안되어서 ㅠㅠ 서브바가 나타나지않고 있습니다.

    ie7에서만요..
    .horizontal-dropdown { *zoom:1;}
    ul.horizontal-dropdown a {
    display: block;
    /*display:inline-block;*/
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;

    }

    메인메뉴(이미지)a 코드인데요..
    방법이 없을까요.. 정슨생님..

    그리고 한가지 더 여쭐게 있어요.. 스크롤바에 관한건데요..
    제 pc는 ie9인데요 메인은 스크롤바가 안생기는데요..
    ie테스터로 ie6,7,8에서 보니까.. 스크롤바가 생기네요
    방법이 없을까요?

  32. 정찬명말하길

    @김근희
    질문 내용을 이해할 수가 없습니다.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님