오늘은 ‘웹 UI 개발자’ 의 ‘웹 브라우저’ 에 대한 이야기를 하려고 합니다. ‘웹 UI 개발자’ 란 현업에서 ‘웹 디자이너, 코더, 퍼블리셔’ 업무를 담당하고 있는 사람들을 모두 아우르는 의미. "어떻게 하면 조금이라도 더 많은 UI 개발자들이 접근성을 고려한 웹사이트를 구축하도록 지원할 수 있을까?" 나름 고심하던 차에 내린 결론은 "동기를 부여하고, 쉬운것 부터 시작하자."라는 것이었습니다. 마침 그동안 줄기차게 포스팅 하던 ‘드림위버를 활용한 웹 접근성 향상기법‘ 이라는 주제가 바닥이 나서 이제는 무엇인가 새로운 커리를 찾아내야만 하긴 했습니다.
드림위버와 같은 웹 저작 툴을 잘 다루는 것도 좋지만 공들여 만든 웹사이트가 특정 브라우저만 고려하여 개발된다면 그것은 웹이 아닌 인트라넷 입니다. 세계 어느곳에서 어떤 대중적인 웹 브라우저를 사용하더라도 문제가 없을 때 그것을 비로소 World Wide Web 이라고 부릅니다. 웹 UI 를 담당하고 있다면 웹 사이트 개발시 다른 브라우저에서는 어떻게 렌더링 되는지 반드시 테스트 하는 과정을 포함할 것을 권합니다.
다양한 웹 브라우저에서의 렌더링 테스트를 결심했다면 ‘과연 어떤 브라우저를 선택할 것인가.’ 라는 고민이 스쳐지나갈 것입니다. 그동안 Internet Explorer 밖에 모르고 살았다면 반성은 잠시후에 하시고 우선 Firefox 와 Opera 를 설치하십시오. 지금부터 왜 그래야만 하는지 설명하겠습니다. 또한, 여러분이 웹 표준 코딩을 시도하고자 한다면 가장 먼저 해야 할 일은 바로 웹 표준 브라우저를 선택하는 것입니다.
Web Standards Project 에서는 Acid2 Browser Test 라고 부르는 웹 브라우저의 CSS 표준 렌더링 테스트를 진행하고 있습니다. 지금 즉시 여러분의 웹 브라우저에 대한 CSS 표준 렌더링 테스트를 시도해 볼 수 도 있습니다. 테스트의 결과 값으로 바로 아래 그림과 동일한 화면을 얻을 수 있다면 여러분은 CSS 를 정확하게 렌더링 하고 있는 웹 브라우저를 사용하고 계신 겁니다. 하지만 전 세계적으로 저렇게 웃는 얼굴을 만날 수 있는 확률은 2006년 11월 현재 불과 2.4% 수준 입니다.
2006년 11월 현재 웹 브라우저 사용자 Global 통계.
- Microsoft IE 85.24%
- Mozilla Firefox 12.15%
- Apple Safari 1.61% (2005년 11월 Acid2 Browser Test 통과.)
- Opera 0.69% (2006년 7월 Acid2 Browser Test 통과)
- Netscape 0.11%
Opera9.x 의 Acid2 Browser Test 결과.
Opera9.x 는 Acid2 Browser Test 를 통과하였기 때문에 이렇게 멀쩡한 화면을 얻을 수 있습니다. UI개발자들에게 Opera9.x 를 추천하는 이유 입니다. 강추 하다못해 Opera9 를 사용하라고 협박하고 싶을 정도 입니다. 이보다 더 완벽할 순 없으니까요. 지금 설치 하시면 여러분은 대한민국 1% 가 됩니다. 적은 메모리 점유율과 빠른 로딩속도도 장점 입니다. 이렇게 좋은 브라우저가 시장 점유율이 낮은것은 그동안 Internet Explorer 가 시장을 완전히 독점했기 때문이라는 데에 이견이 없을 줄로 압니다.
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 를 가볍게 통과할 것으로 보입니다.
Internet Explorer 7.0 의 Acid2 Browser Test 결과.
처참합니다. 국내 다수(전자정부, 금융권, 쇼핑몰..)의 웹사이트가 ActiveX로 떡칠 되어 있기 때문에 우리나라 국민들이 제일 많이 사용할 수 밖에 없는 인기 최고 브라우저 입니다. 국내 인트라넷(AxtiveX로 떡칠된..)에 접속할 때 사용합니다. Windows 를 깔면 함께 깔리기 때문에 일반 국민들은 웹 브라우저의 종류가 Internet Explorer 밖에 없는줄 알고 그렇게들 살고 계십니다. 하지만 제가 오늘 소개해 드린 ‘UI 개발자에게 꼭 필요한 브라우저 3종세트’ 가운데 단연 최악의 브라우저 입니다. CSS 렌더링 결과를 보십시오. Firefox 는 양반이죠? Internet Explorer 는 7.0으로 업그레이드 되었음에도 불구하고 버러지만도 못한 브라우저라고 감히 말씀드립니다. 웹의 본질을 심하게 훼손시키면서 웹 표준 개발자들에게 삽자루를 안겨주었기 때문이죠. 웹 표준 개발자들이 가장 싫어하는 웹 브라우저 투표하면 1등 할껄요.
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 스크린샷을 모아둔 페이지가 있으므로 참조해 보시기 바랍니다.
결론.
이렇게 해서 현재는 개발이 중단된 Netscape 를 제외하고 지구촌에서 가장 많이 사용되고 있는 4종의 웹 브라우저를 소개해 드렸습니다. Opera, Firefox, Internet Explorer 는 설치 후 항상 렌더링 테스트 하는 규칙을 만들어 보세요. 개발하랴 렌더링 테스트 하랴 바빠지겠죠? 확장기능이 뛰어난 Firefox를 메인 브라우저로 사용하시면 현재 페이지를 IE, OP 브라우저로 빠르게 열 수 있기 때문에 손쉽게 테스트를 진행할 수 있습니다. 따라서 권장되는 렌더링 테스트 순서는 FF-OP-IE 순 입니다. IE를 가장 나중에 보는 이유는 표준 코딩에 IE가 매우 방해가 되기 때문입니다. 처음부터 IE 때문에 삽질해가면서 코딩하는 것보다 일단 표준 브라우저에 CSS코드를 맞춘 다음 IE 호환을 위한 코드를 추가로 넣거나 수정하는 것이 효과적 입니다. 웹 표준 코딩의 첫 번째 임무는 바로 웹 표준 브라우저를 선택하는 일.
