NARADESIGN

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


웹 표준 개발자의 IE8 고려사항.

본문 건너 뛰기

한국 Microsoft에서 주최한 IE8 Love Developer 행사에 참석하여 웹 개발자들이 고려해야 할 IE8 대응 방법을 주제로 발표를 다녀왔기에 공유 드립니다. IE8은 기존 버전의 IE와는 다르게 웹 표준 지원폭을 경쟁사들의 브라우저와 동등한 수준으로 끌어올린 브라우저로써 그 의미가 큽니다. 또한 렌더링 방식이 기존 버전과 매우 큰 차이를 보이기 때문에 여느 버전 업데이트와 달리 특별히 주목해야 한다고 생각 합니다. IE8 등장을 앞두고 막연한 두려움이나 호환성 문제로 고민하고 계신다면 이 자료를 통해서 해결 되었으면 하는 바램입니다. 슬라이드 버전으로 보기. 동영상 버전으로 보기.

목차

  1. 지구촌 IE 버전별 점유율
  2. 한국의 IE 버전별 점유율
  3. 국내외 IE 통계의 시사점
  4. IE의 버전별 웹 표준 지원 현황
  5. IE8과 낡은 웹 사이트의 호환성 문제
  6. 웹 표준 사이트와 낡은 브라우저의 호환성 문제
  7. IE8의 향상된 웹 표준 활용하기
  8. 개발자 도구를 사용하여 브라우저 호환성 테스트
  9. 참고

지구촌 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 등의 렌더링을 표준에 따라 얼마나 잘 구현했는지 테스트 하는 도구 입니다.

IE6 = absolutely bad
Acid2 Acid3
IE6의 Acid2 테스트 결과 IE6의 Acid3 테스트 결과
IE7 = so bad
Acid2 Acid3
IE7의 Acid2 테스트 결과 IE7의 Acid3 테스트 결과
IE8 = so good
Acid2 Acid3
IE8의 Acid2 테스트 결과 IE8의 Acid3 테스트 결과

이런 추세라면 IE9 버전이 등장했을 때에는 ‘absolutely good’. IE10 버전이 등장했을 때에는 ‘excellent’ 정도의 평가를 기대해 보겠습니다.

IE8과 낡은 웹 사이트의 호환성 문제

IE8이 웹 표준 준수율을 극도로 개선함으로써 미래의 웹 개발자는 자연스럽게 표준을 준수하게 될 것이고 웹 브라우저의 호환성 문제는 점차 사라질 것입니다. 그러나, 과거에 작성된 낡은 페이지들은 오래된 브라우저에 최적화 되어 있기 때문에 IE8 브라우저에서는 오히려 깨질 것입니다. 이러한 현상은 "언젠가는 넘어야 할 산"이라고 생각합니다.

낡은 웹 사이트를 IE8에서 깨지 않기

낡은 웹 사이트라고 해서 모두 같은 것은 아닙니다. 낡은 웹 사이트는 크게 세 가지 유형으로 나뉩니다.

  1. 첫째, DTD가 없는 웹 사이트.
  2. 둘째, DTD가 있는 웹 사이트.
  3. 셋째, DTD 없는 페이지와 DTD 있는 페이지가 웹 사이트에 혼재되어 있는 경우.

DTD가 없는 웹 사이트 대응법

DTD가 없는 페이지는 아무 대응을 할 필요가 없습니다. IE8은 DTD가 없는 페이지를 여전히 Quirks Mode로 렌더링 하기 때문에 웹 사이트는 깨지지 않습니다.

DTD가 있는 웹 사이트 대응법

DTD가 있는 페이지라고 해서 모두 같은것은 아닙니다.

  1. 첫째, IE5에 최적화 된 페이지.
  2. 둘째, IE6에 최적화 된 페이지.
  3. 셋째, 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 IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]-->
<!--[if IE 5]><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 표준 모드로 렌더링 합니다.
  • 브라우저 모드(Browser Mode) : 브라우저 식별정보를 필요로 하는 서버측 개발자에게 필요하며 다음과 같이 모드 전환이 가능합니다.
    • 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의 호환성 모드를 이용했다는 정보까지 식별할 수 있게 됩니다.

참 고

분류: CSS,웹 기획,웹 디자인,웹 접근성,웹 표준,자바스크립트 | 2009년 3월 12일, 1:23 | 정찬명 | 댓글: 67개 |
트랙백URI - http://naradesign.net/wp/2009/03/12/670/trackback/

67개의 댓글이 있습니다.

  1. 정찬명의 생각…

    주문하신 발표자료 ‘웹 표준 개발자의 IE8 고려사항’ 나왔습니다. 맛있게 드세요. ㅎㅎ….

  2. channy's me2DAY 댓글:

    차니의 생각…

    IE8을 위한 웹표준 대응 및 자바스크립트 대응추천! (IE사용자들 Firefox 쓰시란 말 안합니다. IE8나오면 업그레이드나 해주세요.)…

  3. 리거니 댓글:

    정말 수고 많이 하셨습니다. (__)

  4. 웹 표준 개발자의 IE8 고려사항…

    웹 표준 개발자의 IE8 고려사항을 나라디자인 블로그에서 공개했네요. 이제 웹 표준은 더 이상 남의 이야기가 아닙니다. 특히 이러닝 업계에서도요. 관심 있는 분들 참고하세요. 원본글 : http:/…

  5. 엉뚱이 댓글:

    좋은 정보를 공유해 주셔서 감사합니다. ^^

  6. 루미렌트 댓글:

    좋은 자료 감사합니다 :)

  7. 아직은 IE8을 사랑하긴 이르다…

    오늘 오후 한국MS가 마련한 IE8 Love Developer – 개발자가 주목할 Internet Explorer 8 세미나에 다녀왔습니다. 소문난 잔치에 먹을 것 없다고 해서 사실 MS가 차린 밥상에는 숟가락 들고 잘 찾아가지는 …

  8. 진달래 댓글:

    역시 찬명님이 차려주신 밥상은 한정식이였군요 ㅎ
    맛있게 보고 골고른 영양 섭취하겠습니다.
    감사합니다~

  9. juwon 댓글:

    잘먹겠습니다. 냠.

  10. 나에 댓글:

    수고하셨습니다아~

  11. 코리아몽키 댓글:

    어제 강연을 듣고 온 1인 입니다 ㅎ 좋은 강연 감사합니다^^

  12. Dark devil 댓글:

    잘듣고 왔는데…또 정리까지 하셔서 올려주시다니…아 너무 좋군요~~

  13. 이준희 댓글:

    이번 세미나가 많은 도움이 되었습니다.
    IE 8 에 대하여 기존 버전과의 호환성 문제를 아주 명쾌하게 풀어주셨네요~ㅎ
    사실 IE8 이 나오면서 많은 테스트를 해봐야 하겠지만, 많은 부분 어떻게 하면 되는지
    알수 있게 조리있게 설명을 해주셔서 이해가 빨랐습니다^^
    수고하셨습니다~

  14. hong! 댓글:

    아쉽게도 일정이 되질 않아 못갔는데 이렇게 자료를 공개해주시니 감사할 따름입니다.
    이번에 참석하면 꼭 인사드리려 했는데 또 미뤄졌네요. ^^;;

  15. Se0 댓글:

    세미나도 잘듣고 블로그에 친절한 정리까지..맛있게 먹겠습니다^^ㅋㅋ

  16. 븐푸리 댓글:

    어제 들은 강좌 중 젤 남는 세미나였습니다.
    역시 찬명님 믿고 간 보람이 있었던 듯 싶어요
    자료도 감사합니다.

  17. IE8 의 브라우저 호환하기……

    ie8이 출시되면서 5,6,7 버전의 호환성 문제가 재기되고 있다.. 어제 참석한 세미나에서 ie8의 호환성에 대한 문제를 알려줬는데 꽤 쓸만한 팁이 많이 있었다.. 트랙백을 참고하시길…..

  18. IE8의 프로포즈…

    IE8 정식버전 릴리즈가 몇일 앞둔 2009년 3월 11일
    한국 마이크로소프트에서
    [IE8 ♥ Developer-개발자가 주목할 Internet Explorer 8]
    이라는 제목으로 삼성동 코엑스 컨퍼런스 센터에서 IE8에 관한 기술….

  19. Na! 댓글:

    또 한번 좋은 지식을 배웠습니다.
    IE가 찬명님 블로그에서 에러 보고가 이닌 게시물에 언급되었다는
    사실 하나로 웹표준의 확산이 느껴집니다.

  20. 주형준 댓글:

    세미나 잘들었습니다. 어제 Q/A시간에도 말씀드렸던 부모창에서 띄운 팝업창에서 부모창으로 window.opener로 페이지를 열수 없고 새로운 창에 나오는 현상에 대한 의견을 듣고자 합니다.
    IE8 보안옵션중 다른도메인 간의 하위 프레임 탐색 옵션이 사용안함이 default 라서 문제가 발생하네요 해당 문제를 어떻게 풀어가고 계신지요 ..
    ① 익스플로러 > 도구 > 인터넷옵션 [보안]을 선택
    ② 이 영역에 적용할 보안수준의 사용자지정 수준을 클릭
    ③ 보안설정에서 기타 > 다른 도메인 간의 하위 프레임 탐색에서 “사용”에 체크시 부모창에 정상적으로 결과가 전송됨.

  21. sojw's me2DAY 댓글:

    성.게군의 알림…

    MS가 알아서 일을 만들어 주는군하 -_-…

  22. 정찬명 댓글:

    격려말씀들 감사합니다. (__)

    형준님 질문주신 부분을 다른분들께 자문을 구해서 물어보았습니다. 제가 그부분에 대해서 잘 모르기 때문에 이해한 내용대로 말씀드리면 다음과 같습니다.

    부모창과 자식창이 서로 다른 도메인(크로스 도메인)인 경우 브라우저의 보안 설정 때문에 절대로 제어할 수 없고 크로스 도메인 아닌 방법으로 문제를 해결해야 한다고 합니다.

    더 이상 자세한 이야기는 제가 이해할 수 없는 부분이라 자문해주신 분께 묻지도 않고 따지지도 않았습니다. ㅜㅜ; 죄송합니다.

  23. 김성광 댓글:

    IE8 세미나에서 강연 잘들었습니다.
    수고 많이 하셨습니다.
    정찬명님께 항상 고맙게 생각하고 있습니다.

  24. 누구 댓글:

    IE8 세미나에서 강연 잘들었습니다.
    외부 업체들이 영세한 업체가 많아서 아직 IE5부터 시작해서 정말 다양하게 사용하고 있어 늘 호환성이 가장 큰 문제였거든요.

    그날 들은 기억과 올려주신 자료를 바탕으로 사내에서 세미나를 할려고하는데
    과연 찬명님만큼 잘 할 수 있을지 모르겠네요 ^^

  25. 박아름(미식+대식가) 댓글:

    IE8 세미나에서 역시 정찬명님의 강연이 제일 기억에 잘 남았습니다!
    좋은 내용의 발표.. 언제나 감사하게 잘 듣고 있습니다!

    앞으로도 맛난 발표 많이 기대하겠습니다! 홧팅!! ^ㅡ^/ 냠냠!!

  26. 중스 댓글:

    IE8 호환성 및 웹 표준 관련으로 국내 웹 개발자 분들에게 좋은 가이드가 될 멋진 발표 정말 감사드립니다.

  27. egg 댓글:

    좋은 정보 감사드립니다.
    웹표준을 잘 지킨다는 IE8이지만 고민해야 할 브라우저가 하나 더 늘어나는 것은
    역시나 신경 쓰이는 것 같네요. ^^

  28. 조성민 댓글:

    좋은 강연 자료 감사합니다.
    IE8이라…. 앞으로 해결해야될 숙제가 하나 더 늘어난 기분이네요.
    아직 베타판이라 설치를 안하고 있는데 정식판 나오면 바로 버전 올려서 사용해보고 기존에 작업했던 곳들 자세히 살펴봐야겠네요 ^^

    항상 유익한 정보들 올려주셔서 감사합니다.

  29. 아크몬드 댓글:

    멋지고, 유용합니다!

  30. 아크몬드의 생각…

    웹 표준 개발자의 고려 사항(출처: 나라디자인)…

  31. 정찬명 댓글:

    부족한 강연에 좋은 평가를 주셔서 감사합니다.

    모자라지는 않았는지, 이해하기 쉽게 전달할 수 있는지 고민하면서 자료를 준비하고 발표했는데 생각보다 긍정적인 피드백들을 주셔서 무척 격려가 되었습니다.

    다시 한번 감사 드립니다. (__)

  32. 무적전설 댓글:

    IE8 Beta 때 까지는 멀쩡 했으나…
    RC 와서 멈춤 현상이 생기는 사이트가 있습니다.

    …. 원인을 못찾겠네요 IE8 RC 문제인지.. 제 소스의 문제인지 –;

  33. 정찬명 댓글:

    URL 공유해 주시면 저도 한번 보겠습니다. ^^

  34. 세상끝까지 댓글:

    강의 잘 들었습니다. 덕분에 툴바를 지워버리고 ie8 에서 제공하는 개발자 도구를 사용하고 있네요.

    특히 프로파일링 부분은 정말 제가 원하던 것이어서 별로 좋아하진 않지만 ms에 처음으로 감탄했습니다.

    그럼 수고하세요

  35. 꿈트리 댓글:

    똑똑해진 IE8 이녀석 때문에 가끔 깜짝 놀라기도 합니다.

    후덜덜~

  36. skell83 댓글:

    네이버 까페 -_- 코멘트 입력쩔어요 ㅡ_ㅜ
    약2~3초에 한자씩 치지않으면 멈춰있다가 한참후에 뜬다죠;;
    다른데는 안그러는데;;

  37. 깜찍슈기 댓글:

    그날 좋은 강의 감사드립니다.
    나름 속~시원했습니다 ^^

    옆자리 개발자의 투덜투덜 – “이거 뭐 우리가 들을 것도 아니네..디자이너 섹션이네 ㄱ-”
    한마디 해주고 싶었으나…전 소심하니까요 Orz;;

  38. 정찬명 댓글:

    세상에는 두 종류의 개발자가 있지요. ㅎㅎ. 서버 개발자와 클라이언트 개발자. 하지만 어느 한 쪽을 담당하고 있다고 해서 다른쪽을 전혀 몰라도 된다고 생각하지 않습니다. ^^; 그분 정말 몰라도 된다고 생각하셨던 걸까요? 감사합니다. (__)

  39. MIT 댓글:

    맥유저인데 한국 대표 포털인 네이버 조차 너무 힘겨워요. 제발, 사파리와 오페라도 지원해주세요. 한국에서는 완전 무시당하는 분위기여서 완전 서러워요. 아무도 지원안해주니까… 원…

  40. 정찬명 댓글:

    최근 네이버 서비스에서 브라우저 호환성 때문에 문제가 되는 부분은 ActiveX를 사용한 극소수 서비스(자료실의 대량 파일 다운로드) 이거나 자바스크립트로 구현된 기능(지도 등) 가운데 일부인 것으로 알고 있습니다.

    제한된 일부 기능 때문에 특정 서비스 자체를 이용하지 못하는 사례가 있어 안타깝지만 이런 문제는 과거에 제작된 서비스가 아직 때를 만나지 못해 개편을 하지 못했기 때문 입니다.

    NHN UIT 센터에 근무하는 UI 개발자 분들중 일부는 맥북을 기본 데스크탑으로 사용하는 등 일반인에 비해 맥 사용율이 상당히 높아서 특히 이러한 문제에 깊은 공감을 하고 있을 것으로 생각 됩니다.

    지금은 완전하지 않고 개선되는 속도는 조금 느리지만 지속적으로 브라우저 호환성 개선을 위한 노력을 하고 있습니다. 저도 맥을 사용하고 있고 MIT님께서 격고 계신 고충에 충분히 공감합니다.

    감사합니다.

  41. redmouse 댓글:

    세미나 자료는 http://www.microsoft.com/korea/msdn/events/2009/ie8love/ 에 있는 것을 말하는 건지요 ?

    지금 링크 안걸려있던데…

    아니면 다른 곳에 또 링크된 것이 있나요 ?

  42. 정찬명 댓글:

    redmouse님 안녕하세요? 마이크로소프트 페이지가 아직 준비가 안된 모양이네요. 일단 http://docs.google.com/Present?docid=dd9gps8g_193d8k6b5d3&skipauth=true 이 페이지에서 PDF 버전으로 다운로드가 가능 하십니다.

  43. 김일규 댓글:

    이제 익스플로러8을 정복한다~
    익플8이 크롬하고 거의 비슷하더라구요
    좋은게시물 감사합니다. 덕분에 도움되었습니다.

  44. 정찬명 댓글:

    네, HTML/CSS 렌더링에 있어서 IE8은 다른 경쟁사 브라우저(파이어폭스, 오페라, 사파리, 크롬)들과 거의 완전히 일치하는 렌더링을 보여줄껍니다. 웹 표준 준수율이 높아졌기 때문에 상호 운용성이 높아진 거죠 ^^; 아직 옛날 웹 페이지들과의 호환성 문제를 해결해야 하는 숙제가 남아있긴 하지만요. 좋은 저녁 되세요.

  45. 조소 댓글:

    별 영양가 없는 자료라고 생각합니다.
    먼소린지도 모르겠을 뿐더러 그정도 호환성 신경쓸 정도에 홈피라면
    XHTML 리뉴얼 벌써 했겠죠.
    실무에서 위 자료의 잡태그들을 한번도 써본적인 없는것 같네요.

    랜더링 전문가 답게 언급하지말아야할 CSS핵 강좌에
    아무도 관심없는 IE5 내용은 정말 쓸데없는 페이지 낭비라고 보아요.

    무엇이 님들을 그토록 랜더링에 집착하게 만드나요?
    랜더링 불일치해서 정상적으로 컨텐츠를 이용할수 있다면 그것이 웹표준에 합당하는 것입니다.
    랜더링 정확히 일치해도 소외 계층을 배려하지 않으면 그것은 웹표준이 아니죠.

  46. 깜찍슈기 댓글:

    조소님…영양가 없는 자료라고 말씀하시는 건 좀…자제해주셨으면 좋겠네요
    저 자료를 만들기 위해 이 자료 저 자료 찾아보시고…그러셨을텐데 말이죠.
    그렇다면 조소님께서 더 영양가 있는 자료를 만들어서 공유해주셨으면 좋겠네요.
    CSS핵을 강좌를 했다기 보단 지양한다고 썼는걸요.

    그리고 크로스브라우징이 웹접근성에서는 빙산의 일각이라는건 조소님 말고 다른 분들도
    다 인식하고 고민하고 있는 문제입니다.
    조소님의 말씀중에 소외계층을 배려해서 작업해도…실제 의견결정권에서 우린 아직까진
    그정도 까지 생각안해도 돼! 이래버리면 끝이죠…현재 제가 작업하는 사이트도 그렇고요.
    갈 길이 너무 멉니다.

    제가 볼때에는 괜히 찬명님 글에 대해 자꾸 딴지를 거시는 걸로 밖에 보이지 않습니다.
    제가 아는 동호회에서 하는 말이 있죠
    “오프모임에서도 온라인에서 말한 것처럼 할 수 있어요?”라고요

  47. 정찬명 댓글:

    meta 요소를 이용한 호환 유도 코드는 IE8 브라우저부터 사용할 수 있는 코드라서 기존에는 당연히 써 본적이 없으실껍니다.

    CSS 핵이나 IE5 관련 내용은 불필요 하시면 그냥 넘어 가시면 됩니다.

    랜더링 불일치해서 정상적으로 컨텐츠를 이용할수 있다면 그것이 웹표준에 합당하는 것입니다.

    이 부분은 정확이 무슨 말씀인지 이해가 되지 않네요.
    그리고 소외 계층을 배려하지 않아도 된다고 주장한일 없습니다.

    별 영양가 없는 블로그에 왜 이렇게 자주 오시는지. ^^

  48. 조소 댓글:

    오타입니다.
    랜더링이 불일치할찌라도 컨텐츠 수급이 정상적이면 웹표준에 합당할수 있다는 얘기였습니다.
    느끼실찌 모르지만 현재 웹표준 큰 흐름을 탄 것은 다 아는 사실이고,
    하지만 웹표준 = 크로그브라우져 이런 생각을 하고 있는 사람들이 너무 많타는 겁니다.
    나라디자인도 바로 사람들에게 그런 오해의 소지를 주는 웹사이트중 하나라고 생각해서
    댓글 가끔 다는겁니다.
    물론 랜더링 전문가 분한테 자꾸와서 이런글 남기는 것도 미안한 마음도 없지않아 있습니다. 랜더링 전문도 대단한거니까요. 너무 랜더링 연구를 웹표준과 관련 있는 것처럼 하지 않았으면 하는 바램이 있습니다.

  49. 정찬명 댓글:

    저는 웹 표준과 크로스브라우져를 동일하게 취급하거나 같다고 말한적이 없습니다.
    그렇게 오해의 소지를 불러일으킨 대목이 있었다면 어떤 글이었는지 알려주세요.
    만약 조소님 말씀이 맞다면 제가 글을 고치겠습니다.

  50. [퍼옴] 웹 표준 개발자의 IE8 고려사항….

    네이버 스마트에디터의 UI를 담당하고 계신 정찬명님(지금도 담당하고 계신가?)이 쓴 글입니다. 웹프로그래머나 디자이너라면 참고적으로 꼭 한번 읽어보면 도움이 되지 않을까 싶습니다. htt…

  51. Channy 댓글:

    현실적에서 사람들과 이야기할 때 웹표준을 크로스브라우징과 동일시 할 수 밖에 없다는 사실을 인정해야 합니다. 각 웹 브라우저 버전마다 구현 사항이 다르고 나름 acid2/3같은 평가 기준이 있지만 완벽한 표준 준수는 불가능하고 따라서 웹표준은 컨텐츠 접근성이라는 실체 없는 이상만 남게되니까요.

    작금의 시대는 “문서 위주”에서 “애플리케이션 위주”로 웹이 옮겨가고 있고 컨텐츠 접근성으로만 해결 할 수 없는 문제와 요구사항이 산재해 있습니다. 물론 이런 문제를 해결하기 위해 W3C랑 브라우저 업체들이 각고의 노력을 하고 있습니다만 W3C의 어느 정도 수준까지가 웹표준일까요? (지금 HTML5 의 Working Draft도 웹 브라우저마다 구현 수준이 다릅니다. HTML5를 지키면 웹 표준을 지키는 것일까요.)

    웹 표준론자들도 최근 몇년간의 변화 때문에 고민이 좀 필요한 시기 입니다.

  52. 정찬명 댓글:

    브라우저 벤더들이 완벽한 웹 표준 준수가 불가능하고 콘텐츠 접근성만으로는 현실적인 문제들을 해결할 수 없다는 의견은 자명한 사실이고 동의할 수 밖에 없는 부분이라고 생각합니다.

    하지만 저는 웹 표준과 브라우저 호환성 문제를 동일하게 취급하는 경향은 여전히 경계해야 한다고 생각합니다.

    이유는 보통 사람들이 깨진 화면을 만났을 때 웹 표준을 지키지 않았다고 생각하는 경향 때문 인데 이러한 상황을 방관하는 것은 웹 표준이나 브라우저 호환성에 대한 오해를 계속해서 증폭시키고 있다고 판단 됩니다.

    웹 표준이 가장 좋은 수단이긴 하지만 만능이 아니라는 사실을 설명할 필요도 있고 이런 상황에서 되도록 정확한 사실을 전달하고 싶습니다.

    의견 감사드립니다.

  53. 조소 댓글:

    Channy 님 의견은 정말 당황스럽네요.
    고민 안하셔도 됩니다. 고민 할 이유도 없고요.
    웹표준과 크로스브라우져를 동일 시 하려니까 고민이 생기는거죠.
    잡태그 섞어서 크로스브라우져 하시려면 편하게 하세요. 누가 모라고 않하자나요.
    다만, 그렇케 제작하면서 웹표준과 연관 짖지 말라는 이야기 입니다.
    Channy님처럼 웹표준을 잘못 이해하는 사람들이 자꾸 발생하니까 이런 얘기 하는거져.

    웹표준은 그냥 웹표준이져. 브라우져 렌더링 일치 하냐 안하냐 문제는 잡태그 연구하시는분들이 하면 되는겁니다.
    웹표준에 논리 코딩을 통해서 다양한 계층의 사람들이 웹의 정보혜택을 다같이 누리는 것이
    W3C에서 말하는 것이지.
    어디 W3C에 아직까지는 모든 브라우져에서 렌더링 일치는 현실적으로 힘이들고,
    크로스브라우져를 완벽히 구현하기 위해 고민을 해야 한다는 그런 이야기가 어디에 있습니까.

    잡태그와 CSS핵을 통해 브라우져 렌더링을 해결하자는 웹표준과 무관한 쓸때없는 보고서를 가지고 “웹 표준 개발자의 IE 8 고려사항” 이런식으로 제목 달아 노니까. 하는 얘기져…

  54. 정찬명 댓글:

    저는 표준을 지키는 사람이 아니라 이용하는 사람입니다. 표준을 100% 준수하지 못했다고 해서 표준이라는 말을 사용하지 말라는 것은 납득하기 어려운 논리군요.

    표준이 해결해 주지 못하는 문제에 대하여 잡 태그라는 것을 사용했다고 계속해서 비판하시려면 비판과 함께 대안도 제시해 주셨으면 좋겠습니다.

  55. Channy 댓글:

    조소님
    님 이야기 대로 Validation만 통과하면(표준 태그로 컨텐츠 수급만 되면) 웹 표준에 100% 부합한다는 이야기인데요. 맞는 말입니다. Browser가 됐던 Agent가 됐던 읽을 수 있으니까요. 그게 웹 표준이라는 말에는 동의 하겠습니다.

    문제는 “그런 논리 코딩에 의해 다양한 계층의 사람들이 웹의 정보혜택을 다같이 누리기 위해” 깨지는 렌더링에 대한 보정 작업을 하는 것이 왜 웹 표준 활동에 합당하지 않습니까? 소위 잡태그들이 validation을 무력화 시키나요? 논리 코딩에 문제를 일으키나요? 그렇지 않잖아요. 그럼 웹 표준 프로젝트(webstandards.org)는 왜 잡다한 TF를 만들어서 일을 하고 있는 것일까요? 그냥 표준 코딩만 하라고 하면 되는데 말이죠.

    웹표준이 웹 브라우저만을 위해 있는 것이 아닌 보편적인 접근에 대한 건 동의하면서, 왜 정작 브라우저의 차이에 의한 접근성이 문제가 되는 건 상관 없는지요?

    또하나,
    조소님이 믿고 있다고 생각되는 w3c가 밀고온 xhtml 정책은 사실상 실패했다고 봐야 합니다. w3c가 하나의 웹을 만들기 위한 다양한 표준을 제정하지만 그 자체가 목적이 아닙니다. 그 이상에 동조하지만 현실적 각론의 중요성을 간과하면 안됩니다.

    최근 HTML5 표준은 사용자들에게 더 편리하고 원활한 정보 유통을 위해 다양한 표준을 제정하고 있습니다. 그 중심에 웹 브라우저들이 있구요. 웹 브라우저들의 비호환성을 재정의하고 문서 기반 정보 개념을 뛰어넘고 있는 중입니다.

    늘 처음 배웠던 과거의 개념에 사로잡혀 있으면 안됩니다. 뭐가 바뀌고 있는지 바뀌는 조류에 몸을 맡기고 있는지 스스로 한번 고민해 보세요.

  56. 지나가나가... 댓글:

    Acid3에서 100/100을 받는 브라우저가 있기는 할까요?

  57. 정찬명 댓글:

    Opera 10 알파 버전과 Webkit 계열의 Safari 4 베타, Chrome 2 베타 브라우저가 현재 100점을 받아 두었다고 하는구요. 아직 활성 버전에는 100점 맞은 브라우저가 없는건 사실이죠. ^^

    http://en.wikipedia.org/wiki/Acid3

  58. 진이 댓글:

    ㅎㅁㅎ 좋은글 감샤르르

  59. 정찬명 댓글:

    댓글도 감사드려요. ^^

  60. 황준상 댓글:

    좋은글 감사합니다.
    어느정도 조소님의 말씀도 일리는 있습니다만..
    공격적이고 감정적인 언행이 자신을 깍는 것 같습니다.
    표준은 말그대로 표준이라고 생각합니다..
    당연한거죠.
    태그의 오남용과 편법의 사용으로인하여 표준이 더욱 절실해진때에..
    CSS핵은 제 생각으로도 반대입니다. 하나의 편법이니까요.
    쓰진 않지만 알곤 있어야 하죠. 항상 자신이원하는 페이지만 만드는게 아니니깐..
    아직 우리나라는 시각적인걸 더욱 중요시한다고 봅니다.
    1px떨어지는 차이때문에 핵을 쓰죠..
    장차법이 발효된지금 공공기관쪽에서도 표준표준외치면서..
    정작 표준이 뭔지 아는사람이 있을까요? 정작 페이지나왔을때
    스크린리더기로 돌려보고 웹접근성을 테스트하는게 아니라 고작
    IE6쓰면서 여백이 틀리다느니… 1024쓰면서 가로에 스크롤생긴다느니..
    왼쪽컨텐츠 오른쪽 컨텐츠 라인이 안맞는다든지.. height 고정주면 텍스트 크게 했을땐 잘리는게 당연해서 min-height로 주면 IE6에선 안먹고 그럼 또 편법을 동원하고……. 참 이런일이 많죠??
    그런 시각적인 측면을 더 중요시하는 나라니깐요…
    사람들의 생각이 중요합니다..
    생각이 바껴야합니다..
    아직도 웹표준이 왜필요하냐… 우리나라에선 IE6에서만 잘돌면된다라고 생각하시는분도 많은데.. 여기오시는분들만이라도 분쟁없이 뭉쳐야 한다고 생각합니다..
    그냥 쓸데없는 주저리였습니다.

  61. 황준상 댓글:

    그리고.. 모든 브라우져..
    IE5,6,7,8을 신경쓰고 파폭은 어디부터 신경써야하는지. 오페라는..사파리는..넷스케이프는..완벽한 소프트웨어는 없지 않습니까.. 항상 업그레이드 하지 않습니까..
    항상 모든 브라우져의 호환성을 생각하며 코딩하시는분들 때문에 사용자들이 불편함을 모르는거 아닐까요…저또한 그러지만..ㅜㅜ 제생각엔 개혁이 필요합니다.ㅋ
    사용자들을 불편하게 느끼게 만들어야죠.. ‘아 업글해야겠구나’란 생각이 들게끔 만들어야죠.. 호환성을 생각하며 그자리에 머물러있는건 발전을 막는 요인이 아닐까요??
    전 그렇게 생각합니다..물론 상업적인 일적인 면에선 그럴수 없지만 개인적인 용도의 사이트나 상업적이지 않은 사이트에선 우리 모두 신기술을 사용합시다..ㅋㅋ first-child,input[type=”text”],>>…..무궁무진한 셀렉터들.. 사용합시다. 개인적인 생각이었습니다.

  62. 정찬명 댓글:

    황준상님, 의견 감사드립니다. 준상님 의견에 완전히 동의할 수는 없지만(개혁..ㅎㅎ) 완전히 공감은 합니다. ㅎㅎ. 그리고 누구도 차별받지 않아야 한다는 의견에도 물론 동의해 주시리라 믿습니다. 저도 낡은 브라우저만 생각하면 발만 동동 구르던것을 포함해서 오만가지 생각들이… ㅎㅎ.

  63. 황준상 댓글:

    차별받지 않는것엔 저도 동의합니다.. 그래서 웹접근성을 항상 생각하며 작업하지만.. 낡은 브라우져를 쓰시는 분들은 어느정도의 리스크?? 는 감수해야 하지 않을까요? 표준코딩의 장점이.. CSS를 제거한 상태에서도 문서를 제대로 읽을수 있다? 아닙니까.. 시각적인 면에서 좀 떨어지더라도 어느정도 낡은브라우져를 배려한 웹표준이 아닐까 합니다. 흠..IE가 5,6,7,8 버젼업으로 나올게 아니라 IE5 update 1,2,3,4 로 나왔다면.. IE5 update 1,2,3,4 를 지원하나 안하나를 가지고 논하진 않았을거 같습니다..
    누구나 업데잇을 했을거같습니다.. 네비게이션을 예로들면 업데잇하기 무지힘듭니다.. 3개월에 한번씩은 꼭 해주죠.. 필요하기 때문에.. 하지만 브라우져는.. 웹퍼블리셔들의 수고덕분에.. 불편함을 느끼지 못한다는게 안타깝습니다.. 물론 그것이 지금 사회의 경쟁이겠죠.. 어느 회사가 더 낡은 버전까지 지원하느냐가.. 경쟁의 일부겠죠.. 한사람이라도 더 사용자로 만들어야할테니까요.. 저는 낡은버젼의 브라우저들을 버리자는게 아닙니다. 좀더 구조화된 의미있는 태그들의 사용으로서 텍스트라도 제대로 보여지게 만들면 되지않을까 합니다. 시각적인 면은 버리고.. 버릴건 버리고 좋은건 쓰고.. 요즘엔 서버와 클라이언트쪽, 디자인쪽도 병행하다 보니 여러 측면이 보입니다..
    디자이너분들도 웹표준에 대해 많이 알고 웹표준적(?) 디자인을 해주셨으면 하기도 한답니다.ㅋ

  64. 정찬명 댓글:

    이 세상에 황준상님과 같은 생각을 하는 디자이너분들이 98%쯤 되면 그 땐 저도 버릴건 버리자는 의견에 동의할 수 있을것 같습니다. ^^; 저는 웹 표준과 현실의 어중간한 위치 쯤에서 타협하고 있는 중이라 뭔가 딱 부러지게 무리수를 두지는 못하겠더라구요.

  65. 오군 댓글:

    아 이거 정말 최고네요.
    IE7에 맞게 작업한 html이 IE8에서 깨지길래 당황했는데
    덕분에 잘 해결했습니다. ^ ^

  66. Return 댓글:

    웹접근성 – IE 6,7,8, 기타 브라우저의 문제해결…

    나라디자인을 통해 웹표준,웹접근성에 대한 진지한 정보를 얻게 되었습니다. 당장 닥친 IE6,7,8,크롬,파폭 크로스브라우징 프로젝트로 꽤나 난항을 겪게 될것 같습니다. 한때 잠시나마웹의 구현을 위한 기술적 변화가 지나치게 개발자 위주의논리에 입각한 것 아닌가 하는 의문이 들기도 했습니다만 전문화 되고 표준화 되어가는 무한(?)과도기는 이 분야에선피할…

  67. 익명 댓글:

    오호 좋은 정보 감사합니다

댓글 쓰기

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

필수 아님

필수 아님