상상플러스 :: 올바른 랜더링 모드와 DTD의 선택

올바른 랜더링 모드와 DTD의 선택

웹표준은 문서의 DTD선택에서부터 시작된다고 할 수 있다. 그리고 이것을 환경과 상황에 맞게 선언해 주는 것이 무엇보다도 중요하다. DTD를 어떻게 선언하느냐에 따라서 브라우저의 랜더링 모드가 바뀌게 되고 사용할 수 있는 태그와 속성이 바뀌게 되기 때문이다.

DTD와 랜더링 모드를 선택하는데 있어서 특별한 규칙은 없고 어떠한 랜더링 모드나 DTD가 더 좋다고 말하기는 힘들다. 가장좋은 DTD는 상황에 맞는 DTD라고 하는 것이 가장 좋을 것이다. 어떤 사람들은 웹표준을 지향한다면 XHTML을 써야 하고 표준 모드 랜더링을 선택해야 한다고 생각하기도 하지만 상황에 맞지 않게 무리하게 표준 랜더링이나 XHTML을 선택한다면 웹표준을 준수하기 이전에 완성도 낮은 웹사이트가 될 가능성이 높다.

랜더링 모드의 선택

랜더링 모드는 인터넷 익스플로의 경우 표준모드와 호환모드가 있고 다른 브라우저들도 비슷한 방식의 랜더링 모드 변환 기능을 가지고 있다. 하지만 대부분의 랜더링 모드 이슈는 인터넷 익스플로러의 것만을 논하고 있는데 이는 인터넷 익스플로러의 표준, 호환모드가 랜더링에 있어서 가장 차이가 크기 때문이다. 보통 알려져 있는 것 같이 패딩과 보더의 구현이 확연하게 다르고 모드의 변화에 따라서 몇몇 버그도 수정이 되기 때문에 인터넷 익스플로러를 위해서 랜더링 모드를 주의해서 선택해야 한다.

가장 중요하게 고려해야 하는 것들은 기존 콘텐츠와의 호환성 문제이다. 기존 콘텐츠를 고려하지 않고 표준 랜더링 모드를 선택하게 되면 나중에 데이터를 이관한 다음에 낭패를 보기 십상이다. 기존 콘텐츠 중에 HTML 형태의 것이 있다면 CSS의 충돌과 할께 랜더링모드를 충분히 고려하여 문제가 발생되지 않게 해야 한다.

기존 HTML 콘텐츠가 있다고 해서 무조건 호환모드를 사용해야 하는 것은 아니다. 기존 콘텐츠와 관련이 없는 부분은 표준모드를 사용하고 기존 HTML 콘텐츠만 호환모드를 사용해도 충분하다. 물론 이렇게 두가지의 랜더링 모드로 사이트가 운용 될 때에는 공통으로 사용되는 레이아웃 부분 등에서 문제가 발생하지 않도록 패딩과 보더의 사용에 충분히 주의를 기울여야 한다.

또 한가지 고려해야 하는 문제는 솔루션 등에서 도입되는 화면들이다. 솔루션을 구매해서 웹사이트에 적용하는데 그 솔루션이 호환모드를 대상으로 만들어져 있다면 표준모드 페이지에 넣어서는 정상적으로 작동하지 않게 될 가능성이 높다. 이러한 문제를 접할 수 있는 가장 대표적인 경우는 웹에디터이다. 솔루션이 웹에디터를 가지고 있으면 이 웹에디터가 표준 랜더링 모드를 지원하는지, 표준 랜더링 모드에서 정상적으로 작동하는지를 미리 체크해 봐야 한다. 외산의 웹에디터들의 경우 표준/호환 모드 양쪽에서 잘 작동하는 경우가 대부분이지만 국산 웹에디터의 경우 호환 모드만 사용해야 하고 표준모드를 사용할 경우 화면이 제대로 출력이 되지 않고 기능이 작동하지 않는 경우가 대부분이다.

마지막으로 호환모드에서만 작동하는 스크립트 기능들이 있는지 검토해 보아야 한다. 가장 대표적인 예는 화면 옆에서 스크롤에 따라서 같이 움직이는 배너와 같은 기능이 있다. 화면의 스크롤이나 화면 크기를 참조해서 작동하는 스크립트의 경우 호환모드에서만 작동할 가능성이 높다. 마우스 클릭을 하면 레이어를 띄우는 스크립트나 달력에서 날짜를 선택하게 하는 스크립트 등도 이러한 경우에 속한다. 스크립트가 간단하면 표준모드에서 작동할 수 있게 수정해서 써도 되지만 그렇지 않은 경우에는 충분히 고려해야 한다.

새로 만드는 화면만 있다면 표준 모드를 선택해서 사이트를 만드는 것이 가장 좋겠지만 현실적으로 기존 콘텐츠나 기능, 화면등을 유지해야 하는 경우가 많기 때문에 이러한 것들을 종합적으로 고려하여 랜더링 모드를 선택해야 한다.

DTD의 선택

웹표준을 지켰다고 하면 누구나 HTML보다는 XHTML을 더 선호할 것이다. 하지만 HTML도 훌륭한 웹표준이고 상황에 따라서는 HTML을 선택하는 것이 보다 웹표준을 잘 지켰다고 볼 수도 있다.

가장 먼저는 엄격한(Strict) 구문을 사용할 것인지 느슨한(loose = 과도기적:Transitional) 구문을 사용할 것인지 선택하는 것이다. CSS에 익숙하다면 엄격한 구문을 선택해서 모든 디자인 요소를 CSS로 분리하는 것이 좋지만 엄격한 구문을 사용할 경우 고려해야 할 사항이 있다. 가장 큰 문제가 되는 것은 바로 "새창열기"이다. 엄격한 구문에서는 <a>태그에 타겟(target) 속성이 없기 때문에 새창으로 링크를 열 수 없다. 이를 극복하기 위해서 엄격한 구문을 사용하면서 자바스크립트로 새창을 여는 방법을 사용하는 사람도 있는데 이는 올바른 DTD를 선언하지 않은 것이기 때문에 이 경우 느슨한 구문을 선언하는 것이 더 좋은 선택이다. 그리고 자바스크립트로 어떠한 문제를 해결하고자 하는 접근 방식은 부가적인 문제를 더 많이 발생시킬 수 있기 때문에 피해야 한다. 자바스크립트로 새창을 여는 경우도 브라우저의 기능과 충돌을 일으켜서 사용자이게 불편함을 끼칠수도 있다.

그 다음에는 HTML을 사용할 것인지, XHTML을 사용할 것인지를 선택해야 한다. 문법적인 완성도와 기계적인 파싱을 생각한다면 XHTML을 사용하는 것이 여러모로 좋겠지만 현실적으로는 인터넷 익스플로러가 XHTML을 지원하지 않기 때문에 사용이 힘들다. 그리고 모든 작업자들이 XHTML에 대해서 올바르게 인식하고 있는 경우가 아니라면 완전한 XHTML 구문을 유지하기는 매우 힘들다. 나중에 개발자들이 잘 모르고 집어놓은 수많은 <input type="hidden"> 코드를 일일이 닫아줘야 하는 상황이 생길 수도 있다.

그리고 원칙적으로 XHTML은 콘텐트 타입(Content-type)이 application/xhtml+xml 또는 application/xml로 배포되어야 한다. 하지만 인터넷 익스플로러가 이를 지원하지 않기 때문에 이 콘텐트 타입을 사용하게 되면 대부분의 사용자가 사이트를 이용할 수 없게 될 것이다. XHTML을 사용한다면 적절한 콘텐트 타입을 사용해야 하고 그렇지 못할 경우 HTML과 구별되는 가장 큰 장점을 사용할 수 없기 때문에 굳이 XHTML을 선택할 필요가 없다. XHTML 1.0에서는 한시적으로 text/html 콘텐츠 타입을 허용하고 있지만 XHTML 1.1에서는 이를 허용하고 있지 않기 때문에 반드시 application/xhtml+xml을 사용해야 한다. 그래서 현실적으로 가장 좋은 DTD는 HTML 4.01 Strict일 수도 있다.

올바른 문법

올바른 랜더링 모드와 DTD를 선택했다면 다음에 고려해야 하는 부분은 올바른 문법을 사용했는가 하는 것이다. 많은 경우 CSS로 디자인은 분리 했지만 HTML 문법까지 제대로 지킨 사이트는 찾아보기가 힘들다(http://kwsg.org). DTD를 선언한다는 것은 어떠한 문법을 따른다는 것을 알리는 것인데 문법이 틀리면 이것이 무색해 지게 된다. 표준 문법을 완전히 지키는 것이 매우 어려운 것이 사실이지만 문법은 웹표준에서 매우 기본적인 사항이다. 문법이 지켜지지 않은 엄격한 DTD를 선언한 사이트 보다는 문법이 완벽한 느슨한 DTD를 사용한 사이트가 더 잘 만들어졌다고 말 할 수 있다.

이 글은 스탠다드 매거진 2호에 실린 글입니다.

-- 음 아는형과 css 갑론을박을하다 찾게된 DTD ...