1999년 말의 Microsoft vs Netscape 간의 전세계 시장 잠식을 위한 전쟁은 각 브라우저의 고유 특성에 맞는 html 코드를 남발하게 되었고, 웹 페이지들은 표준을 지키지 않는 코드들로 넘쳐났다. 결국 IE 가 승리하자 국내 웹 브라우저 시장은 IE 가 완전히 석권해 버렸고 당연히 HTML 코드는 IE 에 종속될 수 밖에 없었고, 보안이라는 명목으로 ActiveXObject가 광법위하게 펴져나갔다.

현존하는 대부분의 브라우저들은 W3C 의 표준을 잘 지키려고 노력하고 있다. 그래야만 웹을 이용하는 사용자들이 브라우저에 상관없이 믿고 사용할 수 있게된다. 타인에 대한 배려차원이랄까? 하지만 대한민국에서는 아직까지 잘 지켜지지 않고 있다. 가장 큰 문제는 은행쪽이다. IE 를 빼고는 다른 브라우저로는 접근할 수 조차 없게 만들어 놨다. 인터넷뱅킹을 하려면 반드시 IE 를 사용하라는 얘기다. 인터넷 뱅킹을 개발할때에도 IE 및 MS 윈도우의 버젼을 고려해 개발하고 테스트할 뿐, 나머지는 전혀 고려대상조차 아니다. 소수 사용자에대한 무시인가? 난 소수에 대한 폭력이라고 생각한다.

비단 은행뿐만 아니라 포털싸이트도 마찬가지인데...네이버 블로그 같은 경우도 FireFox 를 사용해서는 100% 기능을 활용할 수 없다. FireFox로 블로깅을 작성하다가 최근 덧글을 볼 수도 입력할 수도 없어서 지금은 IE 를 통해서 글을 쓰고 있다.

프로그래밍 언어에는 보통 컴파일러라는 것이 있는데, 사람이 읽을 수 있는 코드를 컴퓨터가 쉽게 인식할 수 있는 기계어로 변환해 주는 프로그램이다. 브라우저는 이와 비슷한 역할을 수행한다. 사람이 읽은 수 있는 HTML 혹은 XHTML 을 번역해서 화면에 보여주는 것이다.

브라우저간의 1차 세계 대전이 종료가 된 후에서야 브라우저 메이커들은 W3C 평화협정을 지키기 시작하였다. 모든 브라우저들은 HTML 의 doctype 에 따라서 두가지 모드(strict mode, quirks mode)로 작동한다. strict 와 quirk 를 우리말로 바꾸자니 어색한 것 같아 있는 표현 그래도 사용하겠다. 웹 페이지가 HTML 4.1 혹은 XHTML 1.0 등 확실한 W3C 표준 권고안을 준수했다면, 대부분의 웹 브라우저는 stric 모드로 작동한다. 하지만 웹 페이지에서 유효하지 않은 doctype 이나 충돌이 발생했다면 quirk 모드로 작동한다.

개발자라면 확실하게 W3C의 표준을 준수하여 모든 브라우저의 사용자가 사옹할 수 있도록 해야 한다. 그래야만 브라우저는 HTML 코드로 부터 DOM 객체의 특성을 정확하게 뽑아서 사용할 수 있는 것이다. 표준을 지키지 않는다면 그만큼 DOM 객체를 다루는 코드가 각각의 브라우저마다 차이가 생기게 되고 이것은 결국 개발자들의 고민꺼리만 늘어나게 되고 소수 웹 브라우저 사용자들은 소외 되는 결과를 초래한다.

브라우저에는 엄격한 문법을 체크하는 컴파일러가 없다. 그렇다면 어떻게 W3C 표준을 준수했는지 알수 있을까? FireFox 브라우저가 해답을 제시할 것이다.

HTML Validator 는 W3C 가 개발한 Tidy 라는 툴에 기반한 프로그램으로, 웹 페이지가 W3C 의 표준을 준수하고 있는지 확인하여 그 결과를 보여준다. Tidy 는 HTML 에러를 3가지로 구분한다.

Errors : Tidy를 이용해서 고칠 수 없고 이해할 수 없는 문제

Warnings : Tidy 를 이용해서 자동으로 수정할 수 있는 에러

Accessiblity warnings : W3C Web Accessibility Initiative(WAI) 가 정의하고 있는 3단계 우선순위 HTML 에러

1. HTML Validator 설치 및 사용하기

파이어폭스는 http://www.mozilla.com/ 에서 최신버젼을 다운받아 설치한다. 전에는 많이 느렸으나 최신버젼은 속도면에서도 많은 성능향상이 엿보인다.

파이어폭스를 다운받아 설치할때 기본모드 대신에 사용자 정의 모드를 선택하자. 그리고 설치항목중 개발도구를 반드시 체크한 후에 설치하기를 권장한다. 왜냐하면 디폴트로 설치하면 DOM Inspector 라는 툴을 사용할 수 없기 때문이다. 개발도구를 포함하여 설치가 끝났을 경우 파이어폭스 메인메뉴->도구->확장기능을 클릭하면 아래와 같이 Html Validator 와 DOM Inspector 확장기능이 설치된 것을 확인 할 수 있을 것이다. 참고로 Html Validator 는 설치가 안되있더라도 확장기능으로 간단하게 설치가 되지만 DOM Inspector 는 확장기능으로도 설치가 안된다.

이미 파이어폭스 브라우저를 사용하고 있고 HTML Inspector 가 설치되어 있지 않다면 아래 그림을 보고 설치를 하면 될 것이다. 매우 간단할 것이다.

파이어폭스 브라우저를 열고 메인메뉴 -> 도구 -> 확장기능을 클릭하면 아래와 같은 창이 뜰 것이다.

위 그림에서 확장기능 찾아 ! 를 클릭하면 팝업 화면이 뜨면서 파이어폭스 확장기능이 있는 웹 싸이트가 나온다. search 창에다 Tidy 라고 입력하고 Go 를 클릭하면 HTML Validator 가 검색될 것이다. Install Now 를 클릭하면 확장기능이 설치되는데 설치 결과는 아래와 같이 확장기능에 항목이 표시될 것이다.

파이어폭스를 닫고 다시 실행한다. 그리고 url 창에 아무곳이나 입력한 후에 파이어폭스의 맨 오른쪽 하단 노란색 [주의 아이콘]에 마우스를 올려보자. 필자는 naver.com 을 입력했고 아래는 파이어폭스  HTML Validator 가 네이버 메인 페이지에서 발견한 HTML 에러 리스트를 표시한 화면이다.

위 화면을 보면 HTML 의 어떤 코드에서 에러가 양산되고 있는지 확인할 수 있다. 정말 대단하지 않은가? 놀라움은 여기서 그치지 않는다. 오른쪽 하단에 보면 Clean up the page 라는 버튼이 있을 것이다. 클릭하면 새로운 창이 열리고 4개의 탭이 있는데, 이 창에서는 HTML Validator가 자동으로 에러들을 수정한 새로운 소스 코드 및 수정된 소스코드가 화면에 어떻게 보여지는지를 탭을 눌러가면서 확인 할 수 있다.

HTML Validator 가 자동으로 수정해준 html 코드는 경우에 따라서는 브라우저가 렌더링 하는 방식과 다소 차이가 있어 원했던 결과와 다르게 나올 수 있다. 또한 HTML Validator 는 자바스크립트 에러를 잡아주지 못하며, 권장사항으로 제시된 대로 고쳤을때는 기존 자바스크립스 코딩방식과 충돌이 생겨 작동하지 않는 경우도 많다. 따라서 표준을 준수하지 않은 코드를 한꺼번에 자동으로 수정해줄 수있는 정말 강력하고 유용한 툴임에는 틀림없겠으나 자바스크립트와의 잠재적이고 실제적인 충돌 문제가 존재하는한 아직까지는 시기상조가 아닌가 싶다.

HTML Validator 이외에 Checky 라는 확장기능이 있다. 하지만 파이어폭스 1.5.0.1 버젼에는 아직까지 업데이트를 받을 수가 없어 안타깝다. Checky 에는 HTML 뿐만 아니라 CSS, RSS, Link 등 다양한 항목에 대해서 검증을 받을 수 있다. 또한 HTML Validator는 로컬에서 검증을 받지만 Checky 는 코드를 검증해주는 다양한 싸이트에 접속해서 서비스를 받을 수 있다는 이점도 있다.