NARADESIGN

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


웹 UI 개발자의 ‘웹 브라우저’ 이야기.

본문 건너 뛰기

오늘은 ‘웹 UI 개발자’ 의 ‘웹 브라우저’ 에 대한 이야기를 하려고 합니다. ‘웹 UI 개발자’ 란 현업에서 ‘웹 디자이너, 코더, 퍼블리셔’ 업무를 담당하고 있는 사람들을 모두 아우르는 의미. "어떻게 하면 조금이라도 더 많은 UI 개발자들이 접근성을 고려한 웹사이트를 구축하도록 지원할 수 있을까?" 나름 고심하던 차에 내린 결론은 "동기를 부여하고, 쉬운것 부터 시작하자."라는 것이었습니다. 마침 그동안 줄기차게 포스팅 하던 ‘드림위버를 활용한 웹 접근성 향상기법‘ 이라는 주제가 바닥이 나서 이제는 무엇인가 새로운 커리를 찾아내야만 하긴 했습니다.

드림위버와 같은 웹 저작 툴을 잘 다루는 것도 좋지만 공들여 만든 웹사이트가 특정 브라우저만 고려하여 개발된다면 그것은 웹이 아닌 인트라넷 입니다. 세계 어느곳에서 어떤 대중적인 웹 브라우저를 사용하더라도 문제가 없을 때 그것을 비로소 World Wide Web 이라고 부릅니다. 웹 UI 를 담당하고 있다면 웹 사이트 개발시 다른 브라우저에서는 어떻게 렌더링 되는지 반드시 테스트 하는 과정을 포함할 것을 권합니다.

다양한 웹 브라우저에서의 렌더링 테스트를 결심했다면 ‘과연 어떤 브라우저를 선택할 것인가.’ 라는 고민이 스쳐지나갈 것입니다. 그동안 Internet Explorer 밖에 모르고 살았다면 반성은 잠시후에 하시고 우선 FirefoxOpera 를 설치하십시오. 지금부터 왜 그래야만 하는지 설명하겠습니다. 또한, 여러분이 웹 표준 코딩을 시도하고자 한다면 가장 먼저 해야 할 일은 바로 웹 표준 브라우저를 선택하는 것입니다.

Web Standards Project 에서는 Acid2 Browser Test 라고 부르는 웹 브라우저의 CSS 표준 렌더링 테스트를 진행하고 있습니다. 지금 즉시 여러분의 웹 브라우저에 대한 CSS 표준 렌더링 테스트를 시도해 볼 수 도 있습니다. 테스트의 결과 값으로 바로 아래 그림과 동일한 화면을 얻을 수 있다면 여러분은 CSS 를 정확하게 렌더링 하고 있는 웹 브라우저를 사용하고 계신 겁니다. 하지만 전 세계적으로 저렇게 웃는 얼굴을 만날 수 있는 확률은 2006년 11월 현재 불과 2.4% 수준 입니다.

2006년 11월 현재 웹 브라우저 사용자 Global 통계.

  1. Microsoft IE   85.24%
  2. Mozilla Firefox    12.15%
  3. Apple Safari   1.61% (2005년 11월 Acid2 Browser Test 통과.)
  4. Opera   0.69% (2006년 7월 Acid2 Browser Test 통과)
  5. Netscape   0.11%

출처 – http://onstat.com/html/aboutus_pressbox.html

Opera9.x 의 Acid2 Browser Test 결과.

Opera9.x 는 Acid2 Browser Test 를 통과하였기 때문에 이렇게 멀쩡한 화면을 얻을 수 있습니다. UI개발자들에게 Opera9.x 를 추천하는 이유 입니다. 강추 하다못해 Opera9 를 사용하라고 협박하고 싶을 정도 입니다. 이보다 더 완벽할 순 없으니까요. 지금 설치 하시면 여러분은 대한민국 1% 가 됩니다. 적은 메모리 점유율과 빠른 로딩속도도 장점 입니다. 이렇게 좋은 브라우저가 시장 점유율이 낮은것은 그동안 Internet Explorer 가 시장을 완전히 독점했기 때문이라는 데에 이견이 없을 줄로 압니다.

Acid2 Browser Test for Opera 9.x

Firefox 2.0 의 Acid2 Browser Test 결과.

Firefox 는 아직 Acid2 Browser Test 를 통과하지 못했습니다. 역시 CSS 표준 렌더링에 관한한 Opera9 에게서 배우십시오. 하지만 Firefox 는 웹 표준 개발자들에게 매우 유용한 여러가지 확장기능들을 제공해 줍니다. 특히 UI 개발자들에게 꼭 필요한 확장 기능으로서 Web Developer, IE Tab, IE View, Opera View, HTML Validator, gTranslate, Fastdic 을 추천합니다. Firefox 만 펼쳐놓고 있으면 현재의 페이지를 Interner Explorer(IE Tab, IE View), Opera(Opera View) 브라우저로 띄울 수 있습니다. 또는 현재 페이지에 대한 W3C Markup Validation Service(Web Developer) 검사 뿐만 아니라 상태표시줄에 Validation 상태를 실시간으로 표시(HTML Validator)해주기도 합니다. Google Translate 사이트의 ‘단어+문장’ 번역 서비스(gTranslate)는 원문을 자주 참조하는 개발자에게 또 없어서는 안될 기능이며 FastDic을 이용하면 자주쓰던 검색포털의 사전서비스와 단축키를 등록해 놓을 수 있습니다. 이 모든것이 공개소프트웨어 입니다. 눈치볼 것 없이 전부 설치해 보세요. IE7은 Firefox 2.0의 발 뒤끔치 때만도 못합니다. 제 경우 업무 목적으로 Firefox 를 설치했다가 지금은 아예 Firefox 를 메인 브라우저로 바꿔 버렸습니다. IE전용 웹사이트(전자정부, 금융권, 쇼핑몰…)는 IE View 기능을 이용해서 Internet Explorer 를 즉시 띄울 수 있으므로 Firefox 를 메인 브라우저로 사용하는데 전혀 무리가 없습니다. 요즈음은 하루중 80% 이상의 시간을 Firefox 로 보냅니다. 공개소프트웨어이기 때문에 내가 필요로 하는 기능을 이미 누군가가 만들어서 항상 공유하고 있습니다. 뛰어난 확장기능은 여느 브라우저 가운데 최고 입니다. 특히 웹 표준 개발자라면 반드시 있어야 합니다. CSS 에 대한 표준 렌더링 결과는 다소 믿음직스럽지 못한 면이 있으나 바로 아래쪽에 펼쳐질 IE 7.0의 Acid2 Browser Test 결과에 비하면 월등히 낫습니다. Firefox 3.0 버전은 Acid2 Browser Test 를 가볍게 통과할 것으로 보입니다.

Acid2 Browser Test for Firefox 2.0

Internet Explorer 7.0 의 Acid2 Browser Test 결과.

처참합니다. 국내 다수(전자정부, 금융권, 쇼핑몰..)의 웹사이트가 ActiveX로 떡칠 되어 있기 때문에 우리나라 국민들이 제일 많이 사용할 수 밖에 없는 인기 최고 브라우저 입니다. 국내 인트라넷(AxtiveX로 떡칠된..)에 접속할 때 사용합니다. Windows 를 깔면 함께 깔리기 때문에 일반 국민들은 웹 브라우저의 종류가 Internet Explorer 밖에 없는줄 알고 그렇게들 살고 계십니다. 하지만 제가 오늘 소개해 드린 ‘UI 개발자에게 꼭 필요한 브라우저 3종세트’ 가운데 단연 최악의 브라우저 입니다. CSS 렌더링 결과를 보십시오. Firefox 는 양반이죠? Internet Explorer 는 7.0으로 업그레이드 되었음에도 불구하고 버러지만도 못한 브라우저라고 감히 말씀드립니다. 웹의 본질을 심하게 훼손시키면서 웹 표준 개발자들에게 삽자루를 안겨주었기 때문이죠. 웹 표준 개발자들이 가장 싫어하는 웹 브라우저 투표하면 1등 할껄요.

Acid2 Browser Test for Internet Explorer 7.0

Apple Safari 2.x 의 Acid2 Browser Test 결과.

Safari 는 세계 최초로 Acid2 Browser Test 를 통과(2005.11)한 웹 표준 원조 브라우저 입니다. Mac OS X 10.4.3 이상의 버전에 설치된 Safari 2.0.2 버전부터 Acid2 Browser Test 를 통과 하였습니다. Mac OS 전용이므로 Windows 에는 Safari 가 설치되지 않습니다. 하지만 BrowsrCamp 라는 웹사이트를 통하여 Safari 의 최신버전(2006년 11월 현재 2.0.4 버전)에서 나의 웹사이트가 어떻게 보이는지 스크린샷 테스트를 시도해 볼 수 있습니다. 이 밖에 다양한 웹 브라우저에 대하여 Acid2 Browser Test 스크린샷을 모아둔 페이지가 있으므로 참조해 보시기 바랍니다.

Acid2 Browser Test for Safari 2.0.2~2.0.4

결론.

이렇게 해서 현재는 개발이 중단된 Netscape 를 제외하고 지구촌에서 가장 많이 사용되고 있는 4종의 웹 브라우저를 소개해 드렸습니다. Opera, Firefox, Internet Explorer 는 설치 후 항상 렌더링 테스트 하는 규칙을 만들어 보세요. 개발하랴 렌더링 테스트 하랴 바빠지겠죠? 확장기능이 뛰어난 Firefox를 메인 브라우저로 사용하시면 현재 페이지를 IE, OP 브라우저로 빠르게 열 수 있기 때문에 손쉽게 테스트를 진행할 수 있습니다. 따라서 권장되는 렌더링 테스트 순서는 FF-OP-IE 순 입니다. IE를 가장 나중에 보는 이유는 표준 코딩에 IE가 매우 방해가 되기 때문입니다. 처음부터 IE 때문에 삽질해가면서 코딩하는 것보다 일단 표준 브라우저에 CSS코드를 맞춘 다음 IE 호환을 위한 코드를 추가로 넣거나 수정하는 것이 효과적 입니다. 웹 표준 코딩의 첫 번째 임무는 바로 웹 표준 브라우저를 선택하는 일.

분류: CSS,웹 디자인,웹 접근성,웹 표준 | 2006년 11월 24일, 5:29 | 정찬명 | 댓글: 31개 |
트랙백URI - http://naradesign.net/wp/2006/11/24/94/trackback/

31개의 댓글이 있습니다.

  1. CN 댓글:

    이미 파폭 3.0 버전 코드는 Acid test를 통과한지 오래되었습니다. :-) 빨리 파폭 3.0이 나왔으면 좋겠군요.

  2. A2 댓글:

    불여우 3.0은 Acid2 테스트를 통과했다니 기쁘네요.
    브라우저별 랜더링 테스트 순서도 상당히 공감합니다.

  3. 똘이 댓글:

    내년 상반기에 나올 예정인 Firefox 3.0은 로드맵에 따라 내부적으로도 많은 변화(Acd2 테스트 통과 포함)가 있어서 기대 됩니다.
    빨리 나와죠. FF 3.0!!

  4. astraea 댓글:

    후훔..글쎄요
    3.0 이 통과한지 오래되었다,,,는 아닌거 같은데;
    물론 통과한 빌드, 스샷은 봤습니다만
    실제로 지금 daily build 로 나오는걸 써보면 그렇지 않는걸요
    제가 지금 20061120 build 입니다만
    합격에 많이 가까워오긴해도 완벽은 아니에요
    하지만 3.0 이 공식으로 나올라면 한참 남기도 했고
    목표기도 하니 곧 daily build 에서도 이루어질거라 믿어요

  5. 정찬명 댓글:

    FF 2.0 나온지도 얼마 되지 않았는데 벌써부터 FF 3.0 을 기다리시는 분들이 많군요! daily build 까지 사용하신다니 정말 대단하세요. ^^;;

  6. Outsider 댓글:

    저도 FF를 사용하고 있고 웹개발자는 아니지만 전혀 모르는 일반사용자는 아닙니다만…
    지금 이시점에 와서 전세계의 97%가 사용하는 브라우저에서 제대로 뜨지 않는 표준이 표준이란 말이 어울린가 하는 생각이 듭니다.
    잘 정리된 글 잘 보았습니다.

  7. ENTClic 댓글:

    글 잘 읽었습니다 ^^
    예상은 하고 있었지만 IE가 저정도인지는 몰랐네요..충격이군요.

  8. A2 댓글:

    높은 점유율의 IE가 표준이 될 수 없는 이유중 하나를 예로들면 CSS 스타일 적용시 float가 적용된 박스모델은 margin을 10px 줄경우 20px이 되버립니다.
    이렇듯 IE는 경우에따라 10px이 적용되기도 하고 20px이 적용되기도 합니다.
    이 버그는 IE의 수많은 버그중에 하나입니다.

    IE6에서 만든 사이트가 IE7에서 깨져보이는 것은 이런 버그가 그나마 수정되었기 때문입니다.
    하지만 윗 글에서 보듯이 IE7이 나왔음에도 여전히 랜더링을 제대로 하지 못하고 있습니다.
    때문에 IE가 아무리 점유율이 높아도 표준이 될 수가 없습니다.

  9. 너른호수 댓글:

    잘 정리된 글 잘 봤습니다. 역시 3.0을 기다려야 겠군요,..

  10. 베리히 댓글:

    아웃사이더님/ 97%는 전세계가 아니라 우리나라에서 아닐까요? :-)

  11. Outsider 댓글:

    베리히 님 / 저도 제 홈의 로그로만 확인했지 저렇게 통게로 나온건 첨 보지만
    위에 보시면 Global이라고 되어 있고 본문에서도 전세계라는 표현을 쓰신걸로 보아 전세계의 사용빈도로 보입니다.

  12. rockmkd 댓글:

    아웃사이더님 말씀을 듣고 저도 궁금증이 생겨 이곳저곳을 뒤지면서 생각해 보았는데
    “CSS 렌더링 기술을 정확히 구현한다”는 점에서 의미가 있는 것 같습니다.
    표준을 따라야 한다는 말과 일맥상통하는 말이고…

    다른 의미로는 표현의 범위를 넓혀준다고 할까요?
    위의 그림을 표시하기 위해서는 순수 CSS 만 이용해야 합니다.
    CSS를 이용하지 않고(물론 이미지 파일도 이용하지 않고요)서는 위와같은 그림을 나타낼 수 없기 때문에
    acid2 테스트를 통과하면 나름대로 진화한 브라우저다라고 할 수 있는 것 아닐까 싶습니다.

    익스나 파폭도 CSS 표시를 잘 해주긴 하지만 완전하지 않기 때문에 저와 같은 결과가 나오는 것이고,
    완전하게 하는 것이 가능 하기 때문에 사파리와 오페라는 통과를 했겠지요.

    짧은 생각이니 틀린점이 있으면 꼭 지적해 주십시오!!

  13. 정찬명 댓글:

    rockmkd 님 말씀이 맞습니다.^^;
    Outsider 님 말씀대로라면 가장 많은 사람들이 사용하는 웹 브라우저에서 표준을 지원하지 않기 때문에 표준이 의미가 없다는 말씀이신지요? Internet Explorer 가 웹 표준을 제대로 렌더링 하지 못할 망정 Internet Explorer 도 웹 표준에 근거하여 만들어진 브라우저 입니다. 표준이 없다면 HTML, CSS 의 종류도 수십수백가지가 생겨날 것이고 이를 해석하는 브라우저의 종류도 그만큼 늘어날 것이며 그것들은 상호 호환되지 않을 것입니다. 설마 그런 세상이 오기를 바라시는건 아니시겠죠.

    “이 웹사이트는 ○○ HTML 및 ○○ CSS 으로 제작 되었습니다. ○○ 브라우저에 최적화 되어 있으므로 ○○ 브라우저를 먼저 설치하셔야 합니다.” 표준이 없다면 이런 혼탁한 세상속에 살아야만 합니다.

  14. Passion 댓글:

    넷스케이프 아직도 개발중이지 않나요?
    포럼같은데 들어가봐도 꾸준히 글들이 올라오구 있구요…
    파이어폭스와 익스플로러를 혼합한 형태라고 하던데
    넷스케이프 8.1.2를 설치해봐야겠군요…

  15. CN 댓글:

    이상하게 파폭 Acid Test 관련 링크를 건 글이 사라졌군요. 이미 올라온 덧글에도 영어환자같은게 적용이 된것인가요?

  16. Outsider 댓글:

    짧게 글을 남기다 보니 제 의도가 좀 와전된것 같은데…
    저도 그사이에 여기저기 찾아보니 acid2는 css2에에 국한되어 있다더군요… 그것도 해결하는 오페라가 대단하긴하지만..
    일단 저도 ff를 쓰고 있고 ie7도 같이 쓰고 있습니다. 그리고 앞으로 크로싱 브라우져를 바라는 사람이지만…
    제가 위에 단 리플은 지금 저 표준대로 만들면 전세계의 97%가 못본다는 얘기였습니다…..
    물론 ff는 발전이 빠르게 되고 있고 ie7은 됐으면.. 하고 바라고 있는 상황이긴 하지만……
    지금 상황에서 저 표준대로 뭘 만든가는게 현실적으로 좀 어렵지 않을까 해서 단 리플이었습니다.

  17. 정찬명 댓글:

    Outsider 님께,
    “지금 저 표준대로 만들면 전세계의 97%가 볼 수 없다” 라는 부분은 무엇을 근거로 그렇게 말씀하시는 건가요? 전혀 잘못된 추측입니다.

  18. 정찬명 댓글:

    CN 님께,
    댓글이 사라졌다는 말씀인가요? 필터링된 댓글 가운데서는 발견하지 못했습니다. 혹시 다른곳에 올리시고 여기에 올렸다고 착각하시는것은 아니시겠죠.. ^^a

  19. foton 댓글:

    outsider님 말씀은 IE사용자가 97%라면( 자세한수치는 저도 모르겠지만 뭐 그만큼 상당수라는 뜻으로 봐야겠지만) 웹표준을 철저히 지켜서 웹표준을 제대로 지원하지못하는 브라우져인 IE에서 깨져보인다면 그것을 이용하는 사용자는 제대로(제작자가의도한대로) 볼수없다는것은 맞는말이겠죠..

    뭐 결국 그리되어서 IE를 떠나던가 웹표준을 떠나던가 2중의 하나가 결정되겠지만요

  20. 정찬명 댓글:

    웹 표준을 지키는 것과 브라우저 호환성을 유지하는 것은 서로 별개의 작업 입니다. 하지만 웹 표준을 지키는 사람들은 보통 웹 브라우저 호환성을 유지하면서 작업을 진행하기 때문에 웹 표준을 따른다고 해서 IE에서 무조건 깨져보일꺼라는 추측은 완전히 잘못 되었다는 말입니다. IE에서 저 정도로 깨져 보이는 것은 Acid2 Browser Test 테스트 페이지 뿐입니다.

  21. CN 댓글:

    http://flickr.com/photos/dbaron/126886608/ 이 주소입니다. branch 코드에서 이미 예전에 통과했는데 아직 트렁크에 합쳐지지 못했습니다. astrea님의 글을 보고 바로 적은 후 혹시나 답글이 있을까봐 3번 정도 다시 방문했었는데 2번은 제 글을 보았었거든요. 어떤 영문인지 모르겠군요.

  22. CN's note 댓글:

    오페라, 파이어 폭스 Acid2 Test…

    오페라 이야기
    Acid2 Test를 오페라 직원이 만든 이후 들었던 반응은 두가지다.

    엥, 오페라 직원이 만들었는데 오페라가 통과못해? (통과 전)
    오페라 직원이 만든 테스트니 통과는 당연하지. (통…

  23. 정찬명 댓글:

    CN님의 마지막 댓글이 필터링 된 것도 아닌데 손봐야 할 답글 속에 있더군요. 본의 아니게 죄송하게 되었습니다. 어쨌든 다시 올려주셔서 참조할 수 있게 되었습니다. 감사합니다. 나중에 다시 알아보니 댓글에 1개 이상의 링크를 필터링 하도록 설정되어 있었습니다. 지금은 10개 이상의 링크만 필터링 하도록 변경하였습니다. 제가 주의깊게 확인하지 못한 불찰 입니다.

  24. CN 댓글:

    적절한 대응감사드립니다. 그리고 파폭 3의 알파 그란 파라디소가 나왔다는 것을 알려드립니다. :-)

  25. zlPaxcWs 댓글:

    하고자 하는 말은 알겠지만.. 너무 극단적. 언젠가 깨달을 날이 올터…

  26. 정찬명 댓글:

    zlPaxcWs님께, 어느 행성에서 도를 깨우치셨는지 모르겠지만 깨달음이 부족한 소자는 어찌하면 될까요? 참, 난감하네요.ㅎㅎㅎ.

  27. 머키 댓글:

    잘읽고 갑니다. ^^

  28. 정찬명 댓글:

    머키님, 안녕하세요? 이글 쓴지가 벌써 2년이나 되었네요. 지금은 IE 점유율이 좀 더 떨어지고 Firefox 점유율은 상승하고 있네요 ^^ 최근의 브라우저 점유율에 관련된 자료가 여기 있습니다. 함께 참고해 주세요. http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

  29. 지나다가 댓글:

    최종 사용자의 대다수가 원하던 원치않던 IE를 사용합니다.
    그들은 웹이 어떠니 표준이 어떠니 관심도 없고 알려줘도 알수 없고 알 필요성도 느끼지 않습니다.
    그것이 무엇이던 기술에 있어 표준화는 두 말할 필요없이 논리적,합리적,이성적으로 가치가 있습니다. 하지만 기업이윤과 경제논리 앞에 모두가 원하는 공공성 추구는 힘겹고 소모적인 노동을 반복하게 합니다. 썰이 길었군요..
    요지는 기술에 있어 절대적인 건 없고 항상 균형을 유지한다는 것인데… 어째 좀 그렇죠?
    여튼 늘상 노가다 하는 종사자들이나 표준이니 IE쓰레기니 열을 내지만 우리 시대의 현실은 이윤추구 기업의 힘의 논리앞에 외치는 작은 저항, 그 이상은 아닌 듯 싶습니다.

    집착과 타협의 균형을 찾아서…

  30. […] 웹 UI 개발자의 ‘웹 브라우저’ 이야기. […]

댓글 쓰기

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

필수 아님

필수 아님