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 태그의 처리를 위해 많은 연산이 필요하기 때문에 로딩 속도가 느려진다. 또한 의미에 맞는 태그를 사용하는 것 보다 코드의 분량이 많기 때문에 더욱 문서의 로딩 시간이 길어진다.

<h1>제목</h1>
<p>내용</p>

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

<table>
<tr>
<td>제목</td>
</tr> <tr>
<td>내용</td>
</tr>
</table>

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

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

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

아이디	버튼
비밀번호

이런 인터페이스를 배치하는 table 태그는 아래와 같은데 이것이 왜 부적절한지는 쉽게 알 수 있다.

<table>
<tr>
<td>아이디</td>
<td rowspan="2">버튼</td>
</tr>
<tr>
<td>비밀번호</td>
</tr>
</table>

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

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

어떻게 만들어야 하나

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

첫째, Doctype을 사용하라.

브라우저는 제조사가 있고, 이런 업체들은 일반적으로 자사의 기준으로 문서를 렌더링할 수 있는 기능을 브라우저에 내장시키고 있다. 이를 quirks mode라고 하는데, 이것은 브라우저가 표준 문법을 기준으로 문서를 보여주는 것이 아니라 브라우저 제조업체 기준으로 보여주도록 하는 것이다. HTML 문서 최상단에는 Doctype을 지정하도록 하고 있는데, 이는 해당 문서가 많은 표준안 중에서 어떤 것을 기준으로 만들어졌는지를 표시하며, 브라우저는 이에 따라 문서의 표현 형태를 바꾸게 된다. Doctype 표시에도 여러가지 방법이 있으며 기본적인 방법은 W3C 문서를 참고하기 바란다.

DTD란 Document Type Definition의 약자로 strict(엄격한), transitional(과도적인), frameset(프레임셋)의 세가지 형태가 있다. 이 중 프레임셋은 프레임을 사용할 경우에 프레임셋이 되는 문서에만 사용하게 되며, 나머지 두가지의 경우는 해당 문서가 문법을 엄격하게 준수하는지 아닌지를 표시하게 된다. 브라우저는 Doctype과 dtd를 참조하여 문서의 표시형태를 결정하게 된다. 문서의 언어 버전만 사용하고 참조 dtd를 기입하느냐 아니냐에 따라서도 문서의 표시 형태가 달라질 수 있다.

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

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

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

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

<p><acronym title="World wide web Consortium">W3C</acronym>는 웹 표준을 
<del>제시</del><ins>제정</ins>하는 단체이다.<p>

위의 코드에서 볼 수 있듯이 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회로 나뉘어 실립니다.