HTML의 구조적 한계

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

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

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

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

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

봄볕 ⓒ 이철수 www.mokpan.com
봄볕 ⓒ 이철수 www.mokpan.com

Textile로 블로그에 글을 편리하게 작성하기

최근 많은 사람들이 블로그를 이용해서 자신의 글을 웹에 기록/공유하고 있습니다. 이 때문에 책보다 블로그에서 양질을 글을 쉽고 빠르게 찾기도 합니다. 실제로 인터넷에서 검색하면 “구글(Google)”:http://google.com이나 “위키피디아(WikiPedia)”:http://en.wikipedia.org/에서 필요한 내용을 바로 찾아볼 수 있습니다.

좋은 글은 내용이 좋아야 합니다. 그리고 구조적이어야 합니다. 즉, 좋은 웹 문서란 좋은 내용이 잘 구성된 문서입니다. 물론 시각적인 요소나 동적인 효과도 무시할 수 없는 요소이지만, 문서의 핵심은 내용과 구조입니다.

결국, HTML 마크업을 잘 사용해야만 좋은 글을 좋은 웹 문서로 만들 수 있습니다. 제목글에는 h1~h6 태그를, 문단에는 p를, 목록은 ul이나 ol로 구성해야 합니다. 문장이나 단어를 강조하려고 색상을 사용한다면, @@ 보다 @@ 태그와 CSS에서 @strong{color:red;}@로 구조와 표현을 분리해야 합니다.

아무리 HTML이 쉽다고 하더라도, 블로그에 글을 작성하는 사람들 중에선 HTML을 거의 사용할 줄 모르는 분이 더 많습니다. 수 많은 실무 웹 종사자들도 HTML을 올바르게 작성하는 게 어려운 현실이죠. 이 때문에 많은 블로거들이 이지윅(WYSIWYG) 에디터를 사용하고 있습니다. 하지만 이지웍 에디터가 최선의 대안일까요?

h2. Textile 소개

Textile은 “humane Web text generator”라는 목적으로 “Dean Allen”:http://textism.com/about/이 만든 경량의 마크업 언어입니다. 위키 마크업처럼 별표(*)나 대시(-), 인용부호(‘) 등을 구조화된 HTML으로 변경시켜줍니다. 또한 “<, >” 부등호를 “&lt;, &gt;”로 인코딩하기 때문에 HTML 코드를 블로그에 작성하기 편리합니다. Textile에 대한 자세한 내용은 “위키피디아”:http://en.wikipedia.org/wiki/Textile_%28markup_language%29에서 확인할 수 있습니다.

bq. Textile is a lightweight markup language originally developed by Dean Allen and billed as a “humane Web text generator”. Textile converts its marked-up text input to valid, well-formed XHTML and also inserts character entity references for apostrophes, opening and closing single and double quotation marks, ellipses and em dashes. -위키피디아

h2. Textile 문법

|_. 화면 출력 |_. HTML |_. Textile |
|

첫번째 제목글

| @

첫번째 제목글

@ | @h1. 첫번째 제목글@ |
|

두번째 제목글

| @

두번째 제목글

@ | @h2. 두번째 제목글@ |
|

세번째 제목글

| @

세번째 제목글

@ | @h3. 세번째 제목글@ |
|

문단

| @

문단

@ | 문단 |
|

  1. 순서 있는 목록

| @

  1. 순서 있는 목록

@ | @# 순서있는 목록@ |
|

  • 순서 없는 목록

| @

  • 순서 없는 목록

@ | @* 순서없는 목록@ |
| @code@ | @code@ | @code@ |
| 강조 | @강조@ | @_강조_@ |
| 더욱강조 | @더욱강조@ | @*더욱강조*@ |
| 연결 | @연결@ | @”연결”:/url@ |

이 외에도 “다양한 문법”:http://hobix.com/textile/을 사용할 수 있으며, 또한 “Textism”:http://textism.com/tools/textile/에서 연습할 수도 있습니다.

h2. Textile 플러그인

“텍스트패턴”:http://www.textpattern.com/은 Textile을 기본적으로 사용할 수 있으며, 이 외 블로그 툴은 플러그인을 설치해서 사용할 수 있습니다. 아쉽게도 플러그인을 제공하지 않는 서비스형 블로그는 서비스 회사의 지원 없이는 사용할 수 없겠네요.

* “워드프레스(WordPress) Textile 플러그인”:http://idly.org/category/textile
* “무버블타입(MovableType) Textile 플러그인”:http://www.bradchoate.com/mt-plugins/textile

h2. 유사한 마크업 언어

* “Wiki markup”:http://en.wikipedia.org/wiki/Wikipedia:Formatting#Wiki_Markup
* “MarkDown”:http://daringfireball.net/projects/markdown/
* 관련 정보를 제공해주세요~

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)의 특징

  1. 브라우저가 HTML을 읽는데 시간이 더 걸린다.
  2. 브라우저가 HTML을 해석하는데 시간이 더 걸린다.
  3. 브라우저가 HTML을 출력하는데 시간이 더 걸린다.
  4. 브라우저마다 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">

참고 문서

W3C의 마크업 유효성 검사 서비스 디자인 개편

W3C의 Markup Validation Service가 개편됐다. 기능 개선이야 꾸준히 진행되고 눈에 잘 보이지 않는 대신, 이번의 디자인 개편은 서비스를 이용하는 사람들의 시선을 사로잡기 충분하다. 기존의 디자인에 비해서 부드러운 톤의 배경색과 둥근 모서리가 눈에 뛴다. 아무래도 W3C 사이트의 디자인에 대한 불만을 수용한 듯 싶다.

개편 전 사이트 모습

개편 전 W3C 마크업 검사 서비스 페이지

개편 후 사이트 모습

개편 후 W3C 마크업 검사 서비스 페이지

W3C의 Markup Validation Service 기록

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

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

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

구조적 마크업 :

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

양식적 마크업 :

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

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

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

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

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

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


Be Friend~! Be Friend~!