웹브라우저는 문서형식(Doctype)에 따라 CSS나 DOM(Javascript)을 다르게 해석하고 있다. 즉, Strict 문서형식에서는 CSS나 DOM을 W3C의 권고안에 맞게 웹페이지를 랜더링하지만, Transitional 문서형식에서는 각 브라우저마다 제각각 랜더링하고 있다.

Transitional 문서형식이라도 파이어폭스나 오페라 또는 네스케이프 네비게이터처럼 최근에 출시된 웹브라우저는 가급적 W3C의 웹표준 권고안에 맞게 웹페이지를 랜더링하는 편이지만, 오래전에 출시된 인터넷 익스플러는 독특(IE정신?=박지호정신?)하게 랜더링하고 있다.

전세계적으로 IE의 웹브라우저 시장점유율이 높기 때문에(물론 국내처럼 IE 광신도 국가도 없지만), 이러한 IE의 랜더링 버그는 많은 웹디자이너들이 CSS의 사용을 어렵게 했다. 특히 박스모델의 padding과 border 값을 width 값으로 포함하는 IE의 독특한 랜더링이 버그가 골칫거리였다. 이 버그 때문에 웹디자이너들은 불필요한 (x)html 마크업을 사용해야 하거나(예:중첩 div 사용) IE 전용 CSS hack을 공부해야만 했다.

관련 이미지 : (출처 – MSDN)

지맘대로 해석하기

이러한 문제를 해결하는 방법은 MSDN에도 설명되어 있듯이 Strict 문서형식을 사용하는 것이다. 링크의 타겟을 줄 수 없는 문제는 자바스크립트를 이용해서 해결할 수 있다. 가장 큰 문제는 바로 DOM의 랜더링도 W3C의 웹표준 권고안을 따르기 때문에, 재작성해야 하는 것이다.

국내에 대표적인 무료 웹어플리케이션은 게시판에 제로보드와 블로그에 테터툴이 있다. 이 어플리케이션들은 Transitional 문서형식을 취하고 있다(문서 형식이 지정되지 않으면 대부분의 브라우저는 Transitional로 인식한다). 이러한 점 때문에 국내 무료 웹어플리케이션과 CSS를 이용해서는 웹페이지를 만들기가 쉽지 않다.

내가 워드프레스로 블로그툴을 옮긴 이유도 이때문이다. CSS를 이용하면 웹페이지를 간단하게 만들고 꾸밀 수 있지만, 국내에서 제작된 어플리케이션으로는 이러한 CSS를 사용하는 것이 너무너무 복잡하기 때문이다.

테터툴 1.0에 대해서 기대하는 블로거들이 많은 것으로 알고 있다. 나 역시 블로그툴을 바꿀 생각은 없지만, 많은 기대를 하고 있다. 특히 웹표준에 맞게 프로그램을 만들었으면 좋겠다. 더이상 웹표준이냐 아니냐의 논쟁은 의미 없다. 가장 쉽고 빠르게 웹페이지를 제작하는 방법이 바로 웹표준을 따르는 것이기 때문이다.

제작자님이 얼마전에 일본으로 갔다고 하던데, 최근 일본에서는 웹표준에 맞게 웹사이트를 제작한다고 알고 있다. 테터툴 1.0이 국내에서 웹표준을 선도하는 어플리케이션이 되길 바란다. 워드프레스와 경쟁하는 세계 만인의 블로그 툴이 되었으면 좋겠다.