[웹표준] 웹표준/HTML 검사 툴 (FireFox 용 플러그인)

웹 개발 하다보면, 요즘들어 웹표준을 따라야 하는 경우가 많다. 거기에다가 웹접근성 까지.. 머리아퍼 머리..
왜이리 아키텍트는 할게 많은건지, 기술만 쫒아가다가 세월 다 흘러갈 것 같다.

이런 우리들을 위해 감사하게도, 많은 툴들이 있는데 (사실 IE 용이나 별도의 전용 툴은 아직 사용해보지 못하고..^^)
그중, FireFox 에 Add-On 해서 쓸 수 있는 부가기능들이 몇가지 있어, 오늘은 비교나 좀 해봐야겠다.

http://addons.mozilla.com 에 가서, validator 로 검색하면 여러가지가 나오는데, 그중, 아래 Validator 들을 사용해보겠다.

툴들을 테스트 하기 전에, FireFox 3.5에 기본개발도구를 설치해둔다.

* FireBug - 웹개발시 디버깅용 필수
* IE Tab - IE 로 페이지를 볼 수 있다 (IE View 보다 인기 많음)
* IE View - IE 로 페이지를 볼 수 있다
* Screengrab - 화면 캡춰용
* Web Developer - 무엇보다, 소스보기>변환된소스보기 에서, Ajax 나 JavaScript 통해 변환된 페이지 소스 볼 수 있다
* ColorZilla - 컬러피커

위 툴 들은, 아래 툴과는 상관 없으나, 거의 Must-Have 아이템이다. 이제 본격적으로 Validator 를 살펴본다.

1. HTML Validator 0.8.5.8

웹 개발도구 카테고리 중, FireFox AddOns 사이트에서 순위가 꽤 높은 편이다.
설치하고 FireFox 재시작 하면,

위와 같은 화면이 뜬다. 두가지 중에 하나 혹은 둘다 병행하도록 설정할 수 있는데, HTML Tidy 방식이, WAI Level 1,2,3 의 웹접근성 까지도 검사해주므로, 일단 HTML Tidy 방식으로 선택하면 된다.

그런데, W3C 의 온라인 HTML 검사기와 동일한 레벨로 체크하고 싶으면, SGML 을 선택한다. 단, 웹접근성 검사를 해주지 않고, 자동으로 수정해주는 Cleanup 기능도 동작하지 않는다.

설치를 완료하면,

위와 같이, Task 영역에 아이콘이 생긴다. 위 예에서는 페이지에 경고가 있는 경우이고, 문제가 없는 페이지에서는 녹색 체크 아이콘이 뜬다.

경고를 더블클릭 하면, 아래 같은 화면이 뜬다.

경고나 오류를 볼 수 있는 화면으로, 소스코드도, JavaScript 가 실행된 최종 DOM 을 기반으로 하여 구성된다.
경고나 오류, 정보에 클릭하면 해당 위치의 라인으로 바로 이동한다. 경고에 대한 약간의 도움말도 바로 오른쪽에 나와주니 참으로 편리하다.

또 좋은 기능중에 하나가, "페이지 청소.." 기능이다. 이 버튼을 누르면, 어느정도 자동으로 정리해준 코드를 미리 볼 수 있다.

위에 보이는 탭 처럼, 정리된 HTML, 원본 HTML 을 소스로 하여, 각각 미리보기 까지 가능하다.
"파일>다른이름으로 저장" 메뉴를 통해, 현재 보이는 소스를 HTML 로 저장하여, 다른 검증 툴에서도 활용 가능하다.

마지막으로, "선택사항..." 버튼을 누르면, 같은 소스를 다른 알고리즘(HTML Tidy, SGML, 병행)으로 바로 바꾸어 재검사 할 수 있다.

참으로 쓰기 편하고, 소스보기도 JS 나 AJAX 등으로 변경된 결과를 반영하여 보여주기 때문에 활용성이 아주 뛰어나다.
(단, 아래와 같이, Status Bar 의 아이콘에서 우측클릭하여, 고급>지금검증... 을 눌러야 현재 JS 등으로 변경된 Page 를 Validate 한다.)

2. Total Validator 6.0.2

웹 기반의 Validation 을 수행해주는 툴이다.
플러그인이 설치되면, Status Bar 우측에, Tv 아이콘이 보인다.

우측클릭 하자마자, 바로 설정 메뉴가 뜬다. 여기에서, Validate 옵션을 선택할 수 있다.

Validation 옵션이며, HTML Validation, 접근성, 깨진링크, 스펠링체크, 스냅샷 찍기 까지 지원된다.
(스냅샷 찍기는 영 기능이 꽝이다. 시간도 오래 걸리고, 결과를 웹에서 보여주는데, 서버에 캡춰파일을 업로드 하고, 이를 결과 페이지에서 보여주는 방식이다. 스냅샷이 여러장 올라가는데, 그러다보니 파일 업로드/다운로드로 인해 속도가 상당히 느리다)

다양한 형식의 XHTML / HTML 의 Validation 을 지원한다.

웹접근성도 여러종류 지원한다.

결과 화면은 위와 같이 웹페이지로, totalvalidation.com 사이트를 통해 보여진다.
그러다보니, 전체적으로 많이 느린 편이다.

게다가, 동적으로 변경 된 소스코드를 검사할 수 없다. JS 나 Ajax 로 변경된 페이지는 검사할 수 없다는 단점이 있다.
웹페이지를 통해 결과를 보아야 하고, 파일 업로드와 서버의 분석시간이 오래걸리는것도 단점이다.
하지만, 다양한 표준에 맞추어 검사할 수 있다는 장점은 있다.

이외에도, 여러 Validator 가 있지만, 1번의 HTML Validator 가 써본 바로는 가장 괜챦았고, 다른 HTML Validator 들은, 웹서비스에 파일을 업로드 해서, 서버에서 검증하는 방식이 많이 있다.