HTML의 구조적 한계

HTML은 웹에서 글을 작성하고 공유하는 가장 보편적인 마크업 언어입니다. 하지만 웹 문서를 작성하는데 구조적인 제약이 많습니다. 서양에서 사용하는 논문이나 보고서의 구조에서 파생된 마크업 언어이기 때문입니다.

이러한 논문과 보고서는 무척 체계적이고, 합리적이며 정해진 구조를 크게 벗어나지 않습니다. 예를 들어, 첫번째 제목글 아래 간단한 개요를 작성하고, 이후 목차로 문서의 뼈대를 잡은 후에 두번째 제목글과 본문이, 계속해서 세번째 제목글과 본문이 나오는 구조입니다. 물론 간간히 이미지나 도표도 넣고, 인용문과 출처도 넣어서 글을 완료하는 구조입니다.

하지만, 동양의 글쓰기는 이처럼 체계적이거나 합리적이지 않습니다. 상세하게 글을 작성하는 것보다 과감히 생략하고, 특정 부분만 강조하는 글을 작성합니다. 또한 직접적으로 표현하는 것보단 은유와 비유를, 심지어 반어적인 표현을 사용하기도 합니다. 또한 글의 음율을 무척 중시하죠.

서양의 웹 사이트와 페이지는 제목과 본문, 목차 등 일목요연한 구조를 이루는 반면, 국내는 제목글이 생략되고 본문과 목차보단 이미지 위주의 구조입니다. 물론 개인이 운영하는 블로그의 경우는 더 심한 편이죠. 이렇게 HTML 구조에 맞지 않은 국내 웹 사이트와 페이지가 잘못일까요?

제 생각은 아닙니다. 이는 HTML의 구조적인 한계라고 생각합니다. 이에 대한 구구절절한 설명보단 한장의 그림으로 제 의견을 전달하렵니다.

봄볕 ⓒ 이철수 www.mokpan.com

HTML에서 문서 형식(Doctype) 지정의 중요성

많은 노력을 기울여서 제작한 웹 페이지(문서, page)가 제작자의 의도와 다르게 출력되는 경우가 있다. 대부분 올바르지 못한 HTML 마크업과 CSS, JavaScript 코드로 작성했기 때문에 발생한 문제이지만, 어떤 문서는 유효성 검사를 모두 통과했음에도 불구하고 제대로 출력되지 않기도 한다.

이처럼 올바른 문법으로 작성한 문서가 올바르지 않게 출력되면, 제작자는 깊은 고민의 수렁에 빠질 수 밖에 없다. 자신의 경험과 주변의 도움으로 쉽게 문제를 해결하기 어렵기 때문이다. 또한 이러한 문제는 IE, FF, Opera, Safari와 같은 다양한 웹 브라우저에서 각각 다른 모습으로 출력되는 문제도 있다.

이러한 문제는 대부분 (x)HTML 문서의 코드 첫 줄에 문서 형식이 명시되지 않았기 때문이다. 올바르지 않은 문서 형식이 선언되었기 때문이거나, 또한 문서 형식이 선언되지 않았기 때문일 수 있다. 심지어 (x)HTML 코드의 첫 줄에 공백이나 주석이 입력되어 있기 때문일 수도 있다.

문서 형식이란

HTML 문서에는 여러 종류의 형식이 존재한다. HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict 외에도 다양한 문서 형식이 존재한다. 이들 문서 형식은 W3C의 스펙에서 보다 자세하게 확인할 수 있다.

문서에 형식을 정의하는 것을 “Document Type Definition”이라고 하며, 줄여서 DTD라고 한다. DTD는 HTML 문서의 첫번째 줄에 위치해야 하며, XHTML 1.0 Strict 문서 형식을 선언하는 code는 아래와 같다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

문서 형식을 지정해야 하는 이유

문서 형식은 HTML 버전과 종류를 명시함으로써, 브라우저가 문서를 해석하고 출력하는데 직접적인 영향을 준다. 웹 브라우저는 문서형식이 지정되지 않거나, 올바르게 지정되지 않은 HTML 문서를 읽고 해석하는데 어려움을 겪는다. 때문에 화면을 출력하는데 보다 오랜 시간이 소요되며, 또한 제작자의 의도와 다른 화면을 출력할 수 있다. 이는 일반적인 시각계 브라우저 외에도 시각장애인용 음성출력 브라우저나 기타 보조기기 역시 마찬가지다.

최근 웹 브라우저는 호환(Quirks) 또는 표준(Strict)처럼 다양한 방식으로 HTML 문서를 해석한다. 브라우저는 올바르게 지정된 문서 형식의 HTML을 표준(Strict) 방식으로 해석하고 출력하지만, 그렇지 않은 HTML은 호환(Quirks) 방식으로 출력한다.

표준 방식은 HTML를 W3C 스펙에 따라 출력하는 방식이며, 호환 방식은 각각의 브라우저마다 사용하는 별도의 스펙에 따라 출력하는 방식이다. 떄문에 호환 방식으로 출력된 HTML은 각각의 브라우저마다 다르게 출력된다. 문서 형식 지정에 따른 브라우저 출력 방식은 아래 표에서 확인할 수 있다.

문서 형식 선언과 브라우저 출력 방식

Eric Meyer가 2006년 11월에 작성한 Doctype Grid에서 문서 형석과 브라우저의 출력 방식의 관계를 확인할 수 있다.

호환 출력 방식(Quirks Rendering Mode)의 특징

브라우저가 HTML을 읽는데 시간이 더 걸린다.
브라우저가 HTML을 해석하는데 시간이 더 걸린다.
브라우저가 HTML을 출력하는데 시간이 더 걸린다.
브라우저마다 HTML을 각각 다르게 출력한다.

(x)HTML 문서 형식 선언

W3C에 정의된 (x)HTML의 문서 형식 선언은 아래와 같다.이 외에도 W3C QA팀의 Recommended list of DTDs에서 SVG, MathML 등의 XML 문서 형식 선언도 확인할 수 있다.

HTML 2.0

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.01 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"   
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

XHTML Basic 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">

참고 문서

HTML 디자인? 아트?

YouTube에 올라온 동영상입니다. 정말 입이 다물어지지 않네요. 일본인의 집착에 광기에 할말을 잃었습니다. OTL 외엔 마땅히 떠오르는 단어가 없네요. 픽셀아트를 넘어 라인아트 시대를 열어줄 테이블 태그 기반 HTML 예술의 극치입니다. ㅠ.ㅠ

이 동영상을 보면서 느낀 건데, table 태그를 작성하는 것은 드림위버같은 이지윅 프로그램보다 메모장이 보다 효율적이다는 것입니다. 무거운 프로그램에서 코드 작성하느니, 가벼운 메모장에서 “copy+paste”, “찾아서 바꾸기”가 더욱 빠르고 강력한 방법같네요.저도 고교/대학 시절에 만화를 그릴땐 하루 12시간 동안 책상에서 꼼짝하지 않고 그림만 그렸던 Geeks한 시절이 있었는데, 요즘은 그렇지 않네요. 인터넷이란 게 사람의 집중력을 분산시킬 때가 많다고 봅니다. TV 없이 지낸지 거의 1년이 되어가지만, 인터넷없인 1주일도 못지낼 것 같습니다. 이미 중독환자인지 모르겠네요.

NHN UI Library 오픈? 유출?

네이버와 한게임을 운영하고 있는 NHN의 UI Library가 오픈됐다. 이미 해외에선 Yahoo! User Interface Library(YUI)가 작년에 오픈되어 전세계 UI 개발자들과 다양한 의사소통을 해오고 있었지만, 국내에선 UI 관련 정보를 공유하는 사이트를 NHN이 처음으로 오픈했다.

NHN의 UI Library는 얼마전 다음에서 공개한 API와 서버측 개발자들의 공간인 DNA를 겨냥한 것으로 볼 수 있는데, 서버 사이드와 클라이언트 사이드 개발이라는 엄연한 차이가 있기 때문에 서로 선의의 경쟁을 할 수 있을 것 같다.

“Naver와 Hangame 서비스 웹페이지 UI 개발시 참고할 내용을 담고 있는 이 사이트”에 UI 개발 관련 다양한 정보와 사내 UI 개발팀에서 운영하는 블로그로 이뤄져 있으며, 다음의 DNA와 함께 국내 웹 개발 관련 자료의 공유에 많은 도움이 될 것이다

다만, NHN UI개발팀에서 말하는 ‘HTML 개발시 주안점’에 시멘틱(sementic)이 빠져서 아쉽다. HTML은 문서의 구조를 위한 마크업이고, 의미를 부여하기 위한 마크업이기 때문이다.

예를 들어, 문서의 어느 한 문맥을 강조하기 위해서 CSS를 통한 스타일 가이드로써 녹색을 지정했다고 하자. 그렇다면 이 문맥을 표현하기 위해서 HTML에선 class=”green”을 사용해야 할까? 아니다. 만약 그렇게 사용했다면, font color=”green”과 다름없는 형식(presentation)을 위한 마크업을 한 것과 다름 없다.

정답은 em을 사용하고, CSS에서 em {color:green}을 사용해야 한다. 웹 문서의 어느 한 문맥을 강조하는 것이 HTML의 역할이지, green이라고 class/id 네이밍을 통한 시각적 마크업을 사용하는 것은 올바르지 않다.

구조와 형식, 그리고 동작의 명확한 분리가 이뤄졌을 때에 비로서 웹은 보다 정보가 충만한 시멘틱 웹이 될 수 있을 것이다.

구조적, 양식적, 서술적 마크업

HTML은 문서의 구조를 정의하기 위해 태어났지만, 이후 사용자와 브라우저 제작사의 요청에 의해 문서의 표현도 정의하게 되었다. 그 결과, HTML 태그들은 세종류로 나뉘어지게 되었다.

구조적 마크업(Structual Markup) : 문서의 구조를 규정한다. 문단 p 와 제목글h1 ~6 등이 여기에속한다.
양식적 마크업(Stylistic Markup) : 상당수의 HTML 태그들이 표현하는 스타일을 징정하기 위한 것들이다. 대표적인 것이 b (굵은 글씨체)이다. 이런 종류의 마크업은 문서가 비시각적 매체로 표현될 때에는 의미가 없기 때문에 사용하지 않는 것이 좋다.
서술적 마크업(desciptive markup) : 의미적 마크업은 의미적(sementic) 마크업과 동일한 뜻으로, 요소 내용의 성질을 서술한다. 대표적인 예로 title 과 address 등이 여기에 속한다.

구조적 마크업 :

구조적 마크업은 항상 쓰이며, XHTML의 존재 이유이기도 하다. 구조적 마크업은 문서 내용의 형태와 무결성을 제공한다.

양식적 마크업 :

양식적 마크업은 요소 내용이 표시되는 스타일을 정의한다. 양식적 마크업은 양날의 검과 같으며, 화면 표시용 또는 인쇄용으로 만들어진 문서에만 적용된다.

그러나 가로로 긴 모니터 화면에 대한 디자인 원칙과 세로로 긴 인쇄 용지에 대한 디자인 원칙은 무척 다르다. 또한 사용자마다 화면 해상도도 다르고 사용하는 인쇄 용지도 다르기 때문에 동일한 문서라도 경우에 따라서는 전혀 의도하지 않은 모습으로 나타날 수 있다.

그리고 음성 브라우저나 점자 판독기 등 전혀 다른 종류의 매체를 사용하고자 하는 사용자들도 존재한다. 이러한 점들을 고려한다면 문서의 스타일 적용은 스타일쉬트로 분리하는 것이 바람직하다.

양식적 마크업들 중에는 table 태그와 같이 본래 의도를 잃고 대중화되버린 것들도 있다. 그러나 광범위한 접근성과 매체간의 호환성을 생각한다면 항상 서술적 마크업을 사용하는 것이 보다 더 나은 선택이라 할 수 있다.

서술적(의미적) 마크업 :

이제는 서술적 마크업을 좀더 많이 사용해야 한다는 사람들이 많아지고 있는 추세인데, 그 이유 중 하나는 서술적 마크업이 웹상의 방대한 문서들에 대한 검색에 도움이 되기 때문이다. 이는 XML이 하나의 새로운 마크업 언어로 도입된 주된 이유들 중 하나다.