인터넷이 생기고 w3로 발전을 하면서 웹표준은 끊임없이 진보하고
항상 페러다임은 시대에 따라 달라져 왔습니다.

Web 2.0은 그 생명력이 얼마나 길것이며
개발자는 새로운 페러다임에 익숙해지기 위해서 얼마나 많은 노력을 경주해야 할지 모르겠습니다.
새로운 툴들이 쏟아지고 그 기능을 알기까지 많은 시간을 보내고 나면
다른 페러다임이 속출합니다.

아래 글은 월드웹의 월간 w.e.b 4월호에 기재된 내용입니다.

============================================================================================

2005년 1월에 야후 코리아의 웹사이트가 개편되면서 전에는 볼 수 없었던 형태의 HTML 마크업 방식이 사람들에게 알려졌다. 이후 네이버나 다음의 메인 페이지도 웹 표준에 맞추어 개편되었고, 웹 표준을 지킨다는 사이트가 조금씩 늘어나고 있다.

어떤 사람들은 좋은 기술이 만들어지고 많은 사람들이 사용하게 되면 그것을 표준으로 정하게 되기 때문에, 현재의 웹 표준을 지키는 것보다 더 좋은 방법을 사용하면 된다고 한다. 하지만, 그것은 원래 표준안이 없거나, 기존의 안이 있다면 그것이 제공하는 이점들을 그대로 살려내면서 좀 더 효율적이고 이로운 기술일 때의 이야기이다. 현재 웹에서 이런 표준 무용론이 그다지 설득력을 얻지 못하는 것은 실제로 웹 표준이 가져다 주는 좋은 점들이 이제서야 하나 둘씩 알려지고 있고, 다른 대안으로 그 이상의 효과를 낼 수 있는 수단이 제시된 것이 없기 때문이다.

지금은 웹 표준이라는 말을 흔하게 사용하지만, 여전히 그것이 div 태그와 CSS를 이용한 레이아웃 방식이다, 크로스 브라우징을 할 수 있게 하는 방법이다 등의 조금은 핵심을 비껴간 듯한 이야기만 구설수에 올라있다. 과연 웹 표준이란 무엇일까?

table은 표준이 아니다?

기존에는 table 태그를 이용해서 웹 페이지의 틀을 잡고 사이트를 만들어왔던 경우가 대부분이었다. 물론 table 태그 역시 표준 태그 중의 하나이며 그 용도를 잘 살펴보면, 이 태그는 여러 데이터 간의 관계를 쉽게 나타낼 수 있도록 행과 열이 있는 표를 만들어주는 것이라 할 수 있다. 그래서 행간에, 혹은 열간에 나란히 놓여있는 내용들이 어떤 특정한 값에 해당하는 데이터임을 알려줄 수 있도록 만들어주는 태그인 것이다.

실제로 HTML 태그 하나하나를 살펴보면 p(paragraph), h(heading), table, acronym, abbr(abbreviation), ins(insert), del(delete) 등, 문서를 만드는데 필요한 갖가지 요소가 갖춰져 있음을 알 수 있다. 그런데 우리는 그동안 table과 그 안에 들어갈 수 있는 td라는 태그면 모든 것을 다 만들어 낼 수 있었다. 과연 옳은 일일까.

태그의 의미를 따지기 전에 우리는 표준이라는 말에 대해서 생각해 볼 필요가 있다. 현재 우리가 웹 표준이라고 말하는 내용은 대개 World Wide Web Consortium(이하 W3C)에서 권고하고 있는 웹에서 사용 가능한 기술 지침이다. W3C는 특정인이 특정인만을 위하여 만든 단체가 아니라, 웹을 발전시키고자 하는 많은 사람들과 익히 알려져 있는 마이크로소프트, IBM, HP 등 굴지의 업체들이 모여있는 단체이며 여기서는 더 많은 사람들이 더 나은 웹을 사용할 수 있도록 지침을 정하고 권고하는 일을 하고 있다. 그래서 W3C에서는 HTML이나 CSS 뿐만 아니라, XML, MathML 등의 다양한 Markup 언어와 HTTP, SOAP 등의 프로토콜, 웹 접근성이나 웹 저작도구 접근성 등 웹에 관한 거의 모든 것들을 다루고 있다.

현재 우리가 말하는 웹 표준에서는 HTML/CSS/XHTML/DOM 등 일반적으로 웹 사이트를 만드는데 필요한 언어만을 이야기하고 있지만, XML과 XSLT를 이용해 사이트를 만든다고 하여 웹 표준을 지키지 못하는 것은 아니다. 표준을 지키는 데 중요한 것은 W3C의 권고안에 맞춰서 의미상 적합한 코드를 작성하고 누구나 그것을 쉽게 사용할 수 있도록 만드는 것이지 특정 태그의 사용 여부가 아니라는 점을 알아야 한다.

크로스 브라우징 ≠ 웹 표준

웹은 마크업 언어만으로 어떤 결과물을 내기 어려운데, 이는 브라우저라는 도구가 있어야만 그 결과물을 확인할 수 있기 때문이다. W3C의 HTML 4.01, XHTML 1.0, CSS, DOM 등의 규정이 매우 상세하고 이를 지원하는 브라우저가 늘어나서 현재에는 같은 문서가 브라우저에 따라 다르게 보이는 현상은 거의 사라졌다고 할 수 있다. 오히려 표준을 지키지 않아서 브라우저마다 다르게 보이는 경우가 발생한다.
이처럼 웹 표준을 지켜서 사이트를 만들면, 어떤 브라우저에서(Cross-Browse) 보더라도 내용을 인식할 수 있게 된다. 그러나 여러 브라우저에서 보았을 때 비슷하게 보인다고 해서 웹 표준을 지킨 것이라 할 수는 없다. 이는 앞서 언급한 table 태그를 이용해 웹 페이지를 작성하더라도 브라우저별로 비슷한 형태를 만들어내는 것에는 큰 문제가 없기 때문이다. 오히려 CSS나 스크립트를 잘못 사용해서 크로스 브라우징을 못하는 경우가 많지, table 태그를 썼다고 해서 크로스 브라우징이 되지 않는 것은 아니다.
웹 표준은 이름 그대로 표준안이기 때문에 대부분의 브라우저에서 이를 지원하고 있다. 단순히 Windows나 Mac, Linux 등 OS에서 사용하는 브라우저만이 아니라, PDA나 휴대폰, 게임기 등에서 사용되는 브라우저도 W3C의 표준 규격을 구현할 수 있도록 만들어져 있는 것이 보통이다. 이 이야기는 웹 표준을 지키면 더 많은 장치에서 더 많은 사용자들이 웹 사이트를 동등하게 이용할 수 있도록 구현할 수 있다는 사실을 알려준다.

다만, 여기서 분명히 해둬야 할 것은 크로스 브라우징이 어떤 브라우저에서 보더라도 형태적으로 똑같이 보여주는 것을 말하는 게 아니라 같은 정보를 차별없이 제공받을 수 있도록 하는 것이라는 점이다. 예를 들어, 같은 웹 페이지를 컴퓨터 스크린으로 보는 경우와 휴대폰(혹은 PDA 등의 화면 크기가 작은 모바일 장치)으로 보는 경우 똑같은 형태로 제공 받기 어렵다. 이럴 때 컴퓨터의 큰 화면에는 사이트의 정보가 이미지와 텍스트의 조합으로, 휴대폰에는 컨텐츠의 텍스트 위주로 제공될 수 있다. 실제로 PC와 PDA, 휴대폰 등에 탑재된 웹 브라우저는 생각보다 다양하고 웹 페이지를 표시하는 방식도 천차만별이다.

웹 표준은 단순히 마크업 언어만을 잘 사용하는 것에서 모든 것이 끝나지는 않는다. 사용자 층의 다양성을 고려한다면 이미 나와있는, 혹은 새로 만들어진 많은 브라우저와 장치를 감안하여 작성할 필요가 있다. 브라우저나 장치들은 만들어질 당시의 유행이나 자사의 신기술을 반영하게 된다. 하지만, 그 중에서도 항상 호환되는 것이 있으니, 바로 그것이 HTML 표준 문법이다. Javascript나 CSS가 반영되지 않는 웹 브라우저는 있지만 HTML이 동작하지 않는 경우는 없다. 그래서 HTML을 올바르게 사용하는 것이 중요해지는 것이다.

table은 표를 만들 때 사용하는 태그

웹 표준을 지키는 사이트가 점차 확산되고 있지만, 여전히 많은 사이트가 표에 갇혀있다. 여기서 표란 table 태그를 이용해서 사이트의 형태를 만든 경우를 말하는데, 이는 매우 좋지 않은 방식이다.
우선, 브라우저가 문서를 렌더링(Rendering, 브라우저가 HTML 코드를 읽어 화면에 표시해주는 과정)할 때 table 태그의 처리를 위해 많은 연산이 필요하기 때문에 로딩 속도가 느려진다. 또한 의미에 맞는 태그를 사용하는 것 보다 코드의 분량이 많기 때문에 더욱 문서의 로딩 시간이 길어진다.

이렇게 만들 수 있는 문서를 table을 이용할 경우 코드가 두배 이상 길어진다.

둘째로, 내용과 내용 사이의 구별이 어려워진다. 이는 시각적인 면의 문제가 아니라 의미적인 면의 문제라고 할 수 있는데, 문서 상의 모든 내용이 td 태그 안에서 동등한 관계를 갖게되는 것이며 제목과 내용이 어떻게 이어져 있는지를 설명할 수 있는 수단이 없는 상황이 되는 것이다.

위의 예제에서 볼 수 있듯이 의미에 맞는 태그를 사용한 경우에는 제목과 내용이 다르다. 하지만 table을 이용할 경우 순서가 맞지 않다면 제목과 내용이 동등하게 표시되어, 둘이 단순 나열되어 있는 것처럼 보일 수도 있으며 어떤 것이 제목인지 구별하기 어려워진다.

셋째, 모든 내용이 표안에 들어있는 형태가 되어 문서의 순서를 파악하는데 어려움이 생길 수 있다. 흔히
볼 수 있는 부적절한 컨텐츠 순서의 예로는 로그인 인터페이스를 만들기 위해 2열 2행의 table 태그로 아이디와 비밀번호 입력창을 만들고 우측의 2행을 합쳐 로그인 버튼을 넣는 경우이다. 이런 인터페이스를 배치하는 table 태그는 아래와 같은데 이것이 왜 부적절한지는 쉽게 알 수 있다.

아이디	버튼
비밀번호

코드에서 볼 수 있듯이 실제로 컨텐츠의 배치는 아이디-버튼-비밀번호 순이 되기 때문에, 입력 양식 간의 이동을 위해 탭(tab)키를 사용하는 경우에 제작 의도대로 포커스가 이동하지 않는다. 이런 양식에서 탭키를 사용하는 경우가 많다는 점을 감안하면, 이것은 사용자의 실수를 유발하기 쉬운 형태가 되는 것이다.

이처럼 컨텐츠가 순서대로 배치되지 않았을 경우 마우스를 사용하지 않는 장치에서 내용을 읽기가 매우 불편해질 수 있다. 컨텐츠의 순서를 잘 맞추어 작성하는 것을 선형화(線形化, linearize)라고 하며 이것은 사람에게나 기계에게나 내용을 파악하는데 많은 영향을 미치므로 내용의 순서를 지켜 문서를 작성하는 것이 좋다.

어떻게 만들어야 하나

구체적으로 코드를 작성하는 방법에 대해서는 후에 다시 다루겠지만, 웹 표준을 지켜서 사이트를 만드는 것에는 몇가지 원칙이 있다.

첫째, Doctype을 사용하라.

브라우저는 제조사가 있고, 이런 업체들은 일반적으로 자사의 기준으로 문서를 렌더링할 수 있는 기능을 브라우저에 내장시키고 있다. 이를 quirks mode라고 하는데, 이것은 브라우저가 표준 문법을 기준으로 문서를 보여주는 것이 아니라 브라우저 제조업체 기준으로 보여주도록 하는 것이다. HTML 문서 최상단에는 Doctype을 지정하도록 하고 있는데, 이는 해당 문서가 많은 표준안 중에서 어떤 것을 기준으로 만들어졌는지를 표시하며, 브라우저는 이에 따라 문서의 표현 형태를 바꾸게 된다. Doctype 표시에도 여러가지 방법이 있으며 기본적인 방법은 W3C 문서를 참고하기 바란다.(Wordpress editor의 문제로 포스트 상에 해당 구문 예제가 정확히 표시되지 않아 링크로 대체하고 내용을 변경함)
dtd란 Document Type Definition의 약자로 strict(엄격한), transitional(과도적인), frameset(프레임셋)의 세가지 형태가 있다. 이 중 프레임셋은 프레임을 사용할 경우에 프레임셋이 되는 문서에만 사용하게 되며, 나머지 두가지의 경우는 해당 문서가 문법을 엄격하게 준수하는지 아닌지를 표시하게 된다. 브라우저는 Doctype과 dtd를 참조하여 문서의 표시형태를 결정하게 된다. 문서의 언어 버전만 사용하고 참조 dtd를 기입하느냐 아니냐에 따라서도 문서의 표시 형태가 달라질 수 있다.

둘째, 의미에 맞는 태그를 사용하라.

앞에서도 설명했지만 HTML에는 문서의 구성요소를 표시할 수 있는 많은 태그가 준비되어 있다. 제목을 표시하기 위한 태그부터 내용을 표시하는 다양한 태그까지 실제로 우리가 문서를 작성할 때 잘 사용하지 않는 것들 역시 이미 마련되어 있다.

W3C는 웹 표준을 제시제정하는 단체이다.

이와 같은 문장은 아래와 같은 태그로 표현할 수 있다.

위의 코드에서 볼 수 있듯이 W3C라는 단어를 처음 보는 사람에게 이 약어가 무엇을 의미하는지 설명하거나, 문서의 변경으로 인해 삭제, 추가된 부분을 표시해줄 수 있는 태그도 있으며, 이 밖에도 제목, 인용문, 목록, 강조, 줄임말 등을 위한 태그도 존재하고 있다.

셋째, 표현을 위한 태그나 속성을 사용하지 말라.

i, b, u, s 등의 태그는 글자를 이탤릭체로 만들거나, 굵게 하거나, 밑줄을 긋거나, 취소선을 넣는 용도로 사용되어 왔다. 이런 태그들은 em, strong, ins, del 등의 태그로 대체될 수 있으며 이는 태그 안의 내용을 강조하거나, 매우 강조하거나, 삽입되었다거나, 삭제되었다는 것을 표시해준다. HTML의 기본적인 표현 방법이 마음에 들지 않는다면 CSS를 이용해 모양을 변경해줄 수 있다. HTML은 문서가 담고있는 내용이 어떤 것인지를 구체적으로 설명할 수 있는 수단이지, 문서를 장식하는 용도로 사용하는 것이 아니다.

앞에서 예로 든 i(italic), b(bold)나 font 등의 태그들은 HTML이 개량되는 과정에서 브라우저 제작사들의 무분별한 문법 처리 등의 문제로 만들어진 태그이지, 의미를 담을 수 있는 태그가 아니다. 그래서 차기 버전의 HTML에서는 이런 태그들을 배제할 가능성이 높다.

넷째, 디자인은 CSS를 이용해 적용하라.

사이트 제작 과정에서 문서에 디자인을 적용하기 위해서는 CSS를 이용할 수 있다. CSS 2에서는 매우 다양한 표현 방식과 장치를 지원하고 있으며 이를 이용하면 컴퓨터 화면과 인쇄물, PDA 화면을 서로 다르게 보여줄 수도 있다. CSS에는 글자를 꾸미는 것 뿐 아니라, 위치와 크기, 테두리와 색상 등을 표현할 수 있는 다양한 속성이 있다. 또한 문서의 구조에 따라서 그 속성을 상속하거나 상속 받을 수 있기 때문에 적은 코드로도 많은 부분에 대한 표현 정의가 가능해진다.

물론 현재로선 CSS 2.1의 모든 속성을 지원하는 브라우저가 없고, CSS 2의 표현 방식에 한계가 있다는 문제도 있다. W3C에서 현재 검토 중인 CSS 3가 나오고 브라우저들이 이를 지원하게되면 어느 정도 해소될 수 있는 문제겠지만, 지금으로서는 어느 정도 융통성있는 마크업이 필요한 것도 사실이다.

웹 표준이 우리에게 주는 것들

웹 표준은 제안 단계부터 권고안 확정까지 크게 네 단계를 거쳐 W3C에서 제정한다. 권고안(Recommendation)이라는 단어에서도 알 수 있듯이 이는 어떤 규제를 목적으로 하는 지침은 아니다. 물론 많은 개인과 기업이 참여하고 꽤 오랜 시간을 통해 검토되면서 많은 사람들의 동의로 제정되는 것이기는 하지만 제정에 참여한 사람들에게 조차도 강제력을 발생시키지 않는다. 웹 표준은 더 많은 사람이 더 좋은 웹을 사용할 수 있게 하기 위한 약속일 뿐이다. 생활하면서 약속을 때로 어기게 되기도 하지만, 여러 의미에서 이 웹 표준이라는 약속을 지켜야 하는 이유는 많다.

첫째, 표준을 지키면 문서를 읽기 쉬워진다.

그래픽 요소 등을 이용하여 문서를 장식하는 것은 문서의 가독성을 높이기 위한 것이기 때문에 기본적으로 문서의 내용이 있다는 사실을 전제로 한다. 그래서 문서의 내용을 먼저 잘 만들어내는 것이 중요해진다.

HTML은 문서를 작성하기 위한 많은 요소가 포함되어있으며, 이는 텍스트 뿐만 아니라 이미지와 같은 멀티미디어 요소 역시 포함하고 있다. 제목, 문단, 인용, 강조, 목록, 표, 이미지 등의 다양한 요소를 적절히 이용하면 특별히 장식하지 않아도 하나의 완결된 문서로 인식할 수 있도록 브라우저가 만들어 준다. 또한 비슷한 이유로 검색 엔진 등의 프로그램에서 문서의 구조를 파악하기 쉬워지기 때문에, 정보를 찾아내기가 용이해질 수 있다.

둘째, 사이트가 빨라진다.

앞서 설명한 바 있지만, 테이블에 비해 코드의 분량이 엄청나게 줄어들 뿐만 아니라, 브라우저가 렌더링하는 속도 역시 빨라질 수 있다. 물론, 단순히 HTML 코드만 줄어들고 CSS 등이 길면 똑같지 않느냐고 할 수도 있다. 하지만, HTML 문서는 페이지가 열릴 때마다 로딩해야하지만, CSS나 Javascript 파일 등의 경우는 처음에 한번 내려받으면 클라이언트의 캐시에 저장되어 있기 때문에, 파일이 변하지 않는한 다시 내려받지 않는다. 그래서 시각적인 효과 등을 표시하기 위해 반복적으로 사용되는 코드가 확실히 줄어들 수 있는 것이다.

실제로 몇몇 사이트의 리뉴얼을 통해서 코드의 분량이 40% 이상 줄어드는 것을 확인 할 수 있었다. 이는 로딩 속도의 문제 뿐 아니라 웹사이트 이용시 발생하는 트래픽의 양을 고려했을때 회선 비용 등의 절감 효과가 매우 크다할 수 있겠다.

셋째, 관리가 쉬워진다.

똑같은 내용의 사이트를 개편하기 위해서 처음부터 끝까지 다시 만드는 작업이 얼마나 비효율적인 일인지는 굳이 설명하지 않아도 될 것이다.

위에서 설명한 웹 표준 사용 원칙의 세번째와 네번째에서 이야기한 것처럼 내용과 구조는 HTML로, 표현은 CSS로 처리하는 - 구조와 표현을 분리한 - 방식으로 사이트를 만들게 되면 사이트의 관리가 쉬워질 수 있다. 내용은 어차피 내용을 담고 있는 문서를 수정해야 하는 것이지만, 디자인의 변경을 위해서 사이트를 고쳐야 한다면, 이미지 파일과 CSS의 수정만으로도 사이트의 레이아웃부터 글자, 색상까지 대부분의 것들을 수정할 수 있다.

CSS ZenGarden을 보면, 하나의 HTML문서에 CSS를 이용하여 다양한 디자인을 적용한 것을 찾아볼 수 있다.

웹 표준이 대세다 아니다를 따질 때가 아니다. 수많은 사람들이 머리 맞대어 고민한만큼 웹 표준에는 좋은 기능이 많으며, 이를 사용함으로써 웹을 더욱 풍요롭게 만들 수 있다. 웹을 웹 답게, 문서를 문서답게, 정보를 가치있게 사용할 수 있는 시대를 만들어가려면 웹 표준은 필수 조건인 것이다.

* 이 글은 월간 w.e.b. 4월호에 기고된 글이며, 잡지 사정상 5월호까지 2회로 나뉘어 실립니다.

======================================================================================

HTML은 구조적인 문서를 만든다.

HTML과 콘텐트

웹이 정보의 공유를 원활하게 하기 위해 만들어졌다는 점 때문에, HTML을 비롯하여 웹 브라우저에서 구동되는 마크업 언어들은 기본적으로 텍스트 포맷으로 작성된다. 이는 MS Word나 한글 파일과 같은 바이너리 형식과는 달리 대단히 개방적이기 때문에 어떤 플랫폼이나 프로그램에서도 읽어들이기 쉽다는 장점을 갖고 있다. 물론, 브라우저라는 해석기가 이 HTML 파일을 좀 더 보기 좋게 담아주기는 하지만, HTML 파일은 기본적으로 간단한 텍스트 편집기 만으로도 그 내용을 읽어낼 수 있다는 뜻이다.

웹 사이트에서 콘텐트란 말 그대로 페이지에 담아야할 내용이다. 이는 문서 형태를 정하는 서식이나 문서에 관한 정보를 말하는 것이 아니라, 사용자에게 전달되어야할 내용 그 자체를 말하는 것이다. 이러한 콘텐트의 형식에는 텍스트나 이미지 등이 있으며 이를 좀 더 세분화하면 일반 텍스트와 표, 이미지, 멀티미디어 등이 있겠다.

HTML 문서는 이런 콘텐트를 좀 더 구조적으로 작성할 수 있도록 만들어진 언어인 것이다. 따라서 콘텐트를 직접 담는 부분(Body)이 아닌 곳에서는 문서 자체에 대한 정보나, 콘텐트의 서식에 관한 것들을 지정할 수 있도록 만들어져있다. 똑같은 문서를 작성하는 도구지만 HTML이 MS Word와 다른 이유는 파일 포맷만이 아니라, 그것이 포함하는 정보의 내용이 다르기 때문이다.

Word와 같은 워드프로세서 프로그램들은 일반적으로 콘텐트만이 아니라 콘텐트의 형태를 정의하는 서식 정보를 함께 포함하여 파일로 저장하게 된다. 그러나 HTML은 기본적으로 콘텐트의 내용만을 저장하며, 서식 정보 등은 외부 파일을 참조하도록 만들어져 있는 것이다. 만약 HTML을 Word와 같은 도구로 사용해 본다면 그 기능에 얼마나 제약이 있는지 쉽게 알 수 있을 것이다.

물론, 낮은 버전의 HTML에서는 서식을 지정하는 속성을 태그에 사용할 수 있도록 하기도 했다. 하지만 그것은 W3C에서 표준안을 제작할 때 의도했던 바라고 하기 보다는, 좀 더 새로운 방향으로 확장을 꾀했던 브라우저 제조사들의 무분별한 확대 해석 때문이라고 할 수 있다. 실제로 서식을 직접적으로 지정하는 몇몇 태그들은 W3C의 아이디어가 아니라 브라우저 제조사에서 만들어졌으며, 이를 사용자들이 더 많이 사용하게 되면서 표준안에 포함되게 되었던 경우라 할 수 있다.

이렇게 탄생한 태그나 속성들 때문에, 문서를 제작한 사람들은 처음의 의도와는 다르게 브라우저마다 문서가 다르게 보이는 결과에 부딪힐 수밖에 없었다. 새로운 기술과 시장 지배에 대한 욕심이 오히려 사용자의 선택권을 제한하거나 사용성을 떨어뜨려 버린 것이다. 실제로 현존하는 여러 브라우저들은 똑같은 HTML 문서를 처리하는데 서로 다른 방법을 사용하고 있다.

문서가 구조적이어야 하는 이유

문서 제목은 그 문서가 담고 있는 정보가 어떤 내용인지를 독자가 손쉽게 파악할 수 있도록 도와준다. 일반적으로 대제목이 소제목보다 크게 표시되는 이유는 강조의 정도에 따라 어떤 것이 더 많은 부분을 포함하고 있는지를 관습적으로 설명할 수 있기 때문이다. 이런 이유에서 소제목이 대제목을 포함하는 것은 말이 안되는 일이 된다.

이렇듯 상위 요소와 하위 요소의 등급을 확실히 하고, 해당 요소에 포함되는 내용을 명확하게 구분해서 정리하는 것이 바로 구조화라 할 수 있다. 문서 구조화를 통해서 얻을 수 있는 이점은 무엇이 있을까?

인식의 용이

앞서 설명한 바와 같이 내용의 상하 등급이 분명하면, 이를 읽는 사람들도 좀 더 손쉽게 내용을 파악할 수 있게된다. 내용과 내용 사이의 구별이 쉬워지는 것은 말할 것도 없고, 어떤 것이 중요한지 아닌지를 더 알기 쉬워지는 것이다.

재활용 가능한 데이터로써 콘텐트

웹 사이트의 콘텐트란 파일 형식의 데이터로 볼 수도 있다. 이는 HTML 파일이 단순히 문서 형태로 사람의 눈에 인지되기 위한 존재만이 아니라, 가공을 통하여 프로그램 간에 주고 받을 수 있는 데이터로 사용될 수도 있는 것이다. 이 때 파일 내의 정보가 잘 짜여진 구조를 가지고 있다면, 단순히 파일 단위의 데이터가 아니라 태그를 통해 구별할 수 있는 작은 단위의 정보를 활용할 수도 있게 될 것이다.

검색의 효율성 제고

우리가 검색 엔진을 이용할 때에는 특정 키워드나 몇 개의 키워드를 조합하여 결과를 얻곤 한다. 많은 검색엔진이 그렇지만 이 때 나오는 검색 결과를 보다보면 그 키워드가 페이지의 제목인 경우보다 내용 중의 일부분, 그것도 문장 중에 연속된 형태로 나오는 경우보다 떨어져있는 단어를 각각 찾아주는 경우를 더 많이 볼 수 있다. 이는 검색 엔진이 문서 전체를 검색해서 해당하는 키워드가 있는 경우를 모두 찾아내기 때문이다.

만약 검색엔진이 페이지를 처음부터 끝까지 찾는 것이 아니라 제목 중심으로 검색을 해준다면 어떨까? 앞서 이야기한 바와 같이, 문서의 제목이란 문서가 담고 있는 내용을 압축적으로 전달해준다. 문서의 시작점부터 끝점까지를 다 읽는 것과, 제목만 먼저 읽는 것 중에 무엇이 더 빠를지는 명확하다. 어쩌면, 해당 키워드와 비슷한 의미의 단어가 사용된 제목을 찾아줄 여유도 생기지 않을까?

구조를 만드는 방법

꼭 HTML 형식이 아니라고 하더라도 여러분은 많은 문서를 작성하고 있을 것이다. 아마 Word 프로그램으로 문서를 만든다고 생각하면 이해가 쉬울 것이다. 처음부터 끝까지 똑같은 글자 크기로 줄한번 바꾸지 않고 쓰는 문서란 이미 다른 사람에게 회람할 수 있는 형태가 아닐 것이다. 마찬가지로, 문단의 내용이 변경될 때는 단락을 바꾸고, 내용이 다른 것을 다루기 시작할 때는 다음 내용의 제목을 먼저 써주고 다음 단락을 쓰면 된다.

이렇게 문서를 작성하다보면 우리가 일반적으로 트리 구조라고 부르는 형태가 전체적으로 만들어진다. 문서 전체를 대표하는 모든 내용은 상위 요소를 가지게 되는 하위 요소의 형태가 되는 것이다. 이렇게 문서를 구조화 하는 형태를 DOM(Document Object Model)이라고도 하며 이를 잘 지키는 것은 스타일시트나 스크립트를 활용할 때에도 매우 중요한 역할을 한다.

이를 그림으로 표현하면 위와 같은 형태가 되며, 이를 태그를 이용하면 아래 그림처럼 만들 수 있다. 내용 칸에는 필요에 따라 다양한 태그를 이용하여 여러 내용을 넣을 수도 있고, 내용간의 구별을 위해 구분자를 사용할 수도 있다.

구체적인 내용을 다루는 태그 안에는 강조나 첨삭, 설명을 위한 태그들이 사용될 수 있으며 이는 사용자가 내용을 이해하는데 도움을 줄 수 있다. 필요한 속성을 적절히 사용하는 것 역시 마찬가지로 내용의 이해에 도움이 된다.

태그의 종류

HTML 태그는 그 출력 형태나 사용 방법 등에 따라서 몇가지 종류가 있다. 우선 h,p,div,address, ul, ol, li, table 등의 태그는 block element로 구분된다. Block element란 스스로가 하나의 블록을 구성해서 그 태그가 끝나는 지점에서 줄이 바뀌게 되는 것을 뜻한다.

반대로 img, a, strong, em, span, ins, del 등의 태그는 inline element로 구분할 수 있다. 이는 다른 블록 속에서 존재하며 문장 속에서 그 일부를 구성하게 된다. 이 태그들은 사용했을 경우 그 끝점에서 줄이 바뀌지 않으며 일반적으로 다른 내용과 연속성을 갖는다.

이 때 br(break)이라는 태그는 block이나 inline element 모두에 속하지 않는데, 이 태그는 예외적으로 스스로 블록이 되지도 않으면서 줄을 바꿔주는 역할을 하기 때문이다.

또 태그가 독립적으로 사용되는지 아닌지에 따라 구별하는 방법도 있다. div, p, h, table 등의 태그처럼 여는 태그와 닫는 태그 사이에 콘텐트가 들어가게 되는 형태를 non-empty 태그라고 하며, img나 input 등의 태그처럼 여는 태그와 닫는 태그 사이에 콘텐트가 들어가지 않고 스스로가 콘텐트 중 하나가 되는 형태를 empty 태그라고 한다.

태그 바로 쓰기

HTML은 문서 내용에 의미를 부여하는 태그를 포함하고 있다. 태그는 콘텐트의 성질을 정의하는 용도로 만들어진 것이다. 태그는 그 스스로가 감싸고 있는 콘텐트가 어떤 역할을 하는지, 그리고 다른 태그로 싸여있는 콘텐트와 어떤 관계가 있는지를 나타낸다. 그동안 그 목적에 어긋나게 사용해왔던 table 역시 행과 열을 가진 데이터의 집합을 나타낼 수 있도록 만들어진 태그인 것이다. 그러면 콘텐트에 비교적 많이 사용되는 태그와 그 용도를 알아보자.

h(heading)

제목을 표시한다. h1부터 h6까지 사용할 수 있으며 숫자가 낮을 수록 더 큰 제목임을 뜻한다.

p(paragraph)

콘텐트 중에서 문단으로 묶인 내용을 나타낸다.

ol(ordered list), ul(unordered list)

순서가 있거나 없는 목록을 나타낸다. 목록은 여러 아이템의 집합이며 각 아이템들은 li(list item)라는 태그를 이용해 나타낼 수 있다.

dl(definition list)

정의 목록이란 사전에서 흔히 볼 수 있는 것처럼, 용어와 그 정의를 나란히 표시하기 위해 사용한다. 용어는 dt(definition term) 태그로, 이 용어의 설명은 dd(definition data)로 나타낼 수 있다.

table

행(tr:table row)과 열이 있는 표를 나타내며, 각 행과 열의 제목(th:table header)값에 해당하는 데이터를 나열할 때 사용한다. 표를 올바르게 사용하는 것은 매우 중요한데, 그것은 테이블이 데이터를 순차적으로 나열하기도 하지만 셀(td:table data)의 병합 등으로 인해 데이터가 순서와는 다르게 출력되기도 하기 때문이다.

object

텍스트가 아닌 객체를 문서에 삽입하기 위해 사용한다. 음악, 동영상, 플래시 등 멀티미디어 요소를 문서에 삽입하기 위한 용도로 주로 사용되며, param(parameter) 태그를 이용하여 삽입된 멀티미디어 요소에 변수를 제공하거나 상태를 제어할 수 있다.

img(image)

문서 내에 그림을 넣는 용도로 사용한다.

a(anchor)

HTML의 핵심적인 요소 중 하나인 하이퍼링크를 만들어주는 태그이다. 이 태그를 통해서 문서는 다른 문서와의 연결점을 가질 수 있다.

blockquote, q(quote)

이 두 개의 태그는 인용문을 표시하기 위해 사용한다. blockquote는 장문을 인용하여 인용문 자체가 하나의 문단을 구성할 때 사용할 수 있고, q 태그는 문단 내에서 짧은 인용문을 삽입하기 위해 사용할 수 있다.

em, strong

내용을 강조하기 위해 사용한다. 드러나는 형태적으로 보면 i, b 태그와 비슷하지만 그 의미에서는 차이가 있다. i나 b 태그가 글자를 이탤릭으로 만들거나 굵게 만들기 위해 사용하는 것이라면 em과 strong은 내용을 강조하거나 매우 강조하는 용도로 사용하는 것이다. 이는 이 태그들이 형태적 제어를 위한 태그가 아니라 의미적 강조를 하기 위한 태그임을 뜻하는 것이다.

acronym, abbr(abbreviation)

이 두개의 태그는 각각 이니셜과 줄임말을 표현하기 위해 사용한다. 예를 들어 UK라는 이니셜은 <acronym title=”United Kingdom”>UK</acroym>으로 표시하면, 그 이니셜이 어떤 뜻인지를 표현할 수 있고, <abbr title=”english”>en</abbr> 처럼 관습적으로 줄여쓰는 말을 표시하기 위해서는 abbr 태그를 사용할 수 있다. 이를 통해 해당 단어를 처음 보는 사람도 그것이 무슨 뜻인지를 이해할 수 있도록 내용을 작성할 수 있는 것이다.

이 외에도 주소를 나타내는 address 태그나, 문장의 일부가 삭제되었음을 뜻하는 del, 삽입되었음을 뜻하는 ins 태그 등이 사용될 수 있다.

div와 span

사람들이 웹 표준 마크업에 대해서 오해를 하는 것 중 하나가 table 태그를 쓰지 않고 div(division) 태그를 사용하면 모두 웹 표준을 지킨 사이트라고 여긴다는 점이다. 예전에는 div라는 태그는 마치 포토샵의 레이어처럼 문서의 내용과는 관계없이 특정한 위치에 일부 콘텐트를 넣기 위해 사용하는 태그라는 오해를 많이 받았다. 이는 Netscape에서 지원하던 layer라는 태그나 일부 에디터에서 손쉽게 사용할 수 있었던 CSS의 absolute position 속성에 영향을 받은 듯한데, 실제로 div라는 태그의 용법은 그렇지 않다.

division이라는 이름에서도 알 수 있듯이, div 태그는 영역을 분할하기 위한 용도로 사용된다. 앞서 설명했던 많은 태그와는 달리 div는 콘텐트의 역할이나 내용을 설명하는 것이 아니라, 여러 콘텐트를 묶거나 서로 분리해주는 역할을 한다. 이는 콘텐트를 그룹으로 묶어서 좀 더 체계적으로 관리할 수 있도록 해줄 뿐만 아니라, CSS 등에서 디자인을 손쉽게 적용할 수 있도록 도와주기도 한다.

span 태그 역시 마찬가지로, 콘텐트를 설명하기 보다는 일반적으로 사용하게 되는 태그로 적용하기 어려운 디자인 등을 좀 더 확장성 있게 사용할 수 있도록 도와주는 역할을 한다. 예를 들어 어떤 문장 속에 있는 특정 단어가 강조될 필요는 없지만 미적인 이유로 다른 형태를 띠어야 할 경우, span 태그를 사용할 수 있다. span은 이름 그대로 문서 구조상에서 특정한 의미를 부여받지 않지만 별도의 처리가 필요한 경우를 위한 확장용 태그라 할 수 있다.

테이블 알고 쓰기

앞서 태그 설명에서도 언급했지만, 표를 만드는 일은 꽤 중요하다. 왜냐하면 데이터를 인식하는 차원에서도 그렇지만 접근성의 측면에서도 어떤 정보가 있느냐 없느냐에 따라 내용을 파악할 수 있는 형태가 크게 달라질 수 있기 때문이다. 그렇다면 표에서 제공해야할 정보와 이를 올바르게 표시하는 방법을 알아보자.

이 코드는 3열 3행을 나타내는 일반적인 형태의 표를 표시한다. 흔히 쓰는 방식과 다른 것이라면 summary와 caption이 제공되고 thead, tbody, th 등 표 안에서 어떤 역할을 하는 셀과 그 그룹을 분리하고 있다는 점이다. summary는 데이터테이블 전체 내용을 간략하게 요약하는 용도로 사용하고 caption은 테이블의 제목을 넣어줄 수 있는 태그이다. 이 예제처럼 셀의 모든 값이 동등한 데이터가 아니라 어떤 것은 그 열을, 혹은 그 행을 대표하고 있는 값이라는 것을 분명히 하면 해당하는 데이터가 어떤 값에 해당하는 것인지를 쉽게 파악할 수 있게된다. 또한 thead와 tbody처럼 헤딩 그룹과 데이터 그룹을 묶어주면 1페이지를 넘어가는 표의 인쇄시에도 각 헤더를 찾아볼 수 있게 출력된다. 조금만 더 신경써서 적절한 태그와 적절한 속성을 사용한다면 보다 많은 사람들이 보다 많은 상황에서 쉽게 콘텐트를 파악할 수 있게 되는 것이다.

웹에 집 짓기

4월호에서 언급한 적이 있지만, CSS나 Javascript를 지원하지 않는 브라우저는 있어도 HTML을 지원하지 않는 브라우저는 없다. HTML만 잘 작성해도 사용자가 콘텐트를 인식하고 이해하는데 무리가 적다는 뜻이다. 잘 만든 HTML 문서가 가독성 높은 디자인만큼 중요해지는 것은 바로 이런 이유 때문이고, 하나의 웹 페이지가 더 많은 방향으로 확장해나갈 수 있는 가능성 역시 여기에 있다 하겠다.
위에서 부터 계속 강조하고 있는 것이지만, HTML은 문서의 구조와 내용을 담는 도구이다. 이는 문서가 시각적으로 어떤 형태를 띠게될지를 HTML 문서에서 굳이 다룰 필요가 없다는 점이다. 흔히 범하게 되는 오류가 형태 제어를 위한 태그나 속성을 습관적으로 사용하는 것이다.

font라는 태그는 글자의 모양을 제어하기 위한 수단으로만 쓰이는 태그이다. 글자의 모양은 CSS로도 제어할 수 있으며, 이 태그와 해당 속성을 사용하는 것보다 훨씬 더 세밀하게 조정이 가능하다. 마찬가지로 앞에서 말한 i나 b, 혹은 u나 s 같은 태그들 역시 형태만을 제어하는 태그이므로 사용하지 않는 것이 좋다. XHTML 1.0이 나온 이후에 이런 태그들은 많은 부분 배제되고 있으며, 차기 버전의 마크업 언어에서는 완전히 축출당할 가능성이 높다.

웹 사이트를 만드는 것은 집을 짓는 것과도 같다. 구조를 잘 잡고 뼈대를 잘 세워야 튼튼하고 오래가는 집이 될 수 있다. 외장이나 인테리어는 시간이 지나면 유행도 지날테고 낡아서 벗겨지거나 상하기도 할 것이라, 새로 꾸미고 싶어지는 것이 사람 마음이다. 하지만 페인트칠이 조금 벗겨진다고 해도, 그 기둥이나 지붕 같은 기본 구조에 문제가 없다면 안식처로써의 역할을 하는데는 무리가 없을 것이다. 조금 편하고 예쁘더라도 낡은 재료보다는 불편해보이고 뼈대만 있는 것 같아도 공인받는 튼튼한 재료로 집을 짓는 것이 부실공사를 피하면서도 멋진 집을 지을 수 있는 바른 방법이 아닐까.

* 이 글은 월간 w.e.b. 6월호에 연재된 글입니다.