[도서] HTML5 차세대 웹 표준 기술


웹표준과 접근성에 대한 이슈가 나타난지 2~3년이 지났고 그에 관한 폭발적 관심 또는 거품적 관심은 어느정도 정리가 되가고 있다고 생각하던 요즘 다즘 다시 웹 저작업계(?)에 종사하는 사람들에게 새로운 떡밥이 던져졌으니 이름하여 HTML5이다.
(여전히 아무것도 없는 Na!의 블로그의 최근 글을 보면 알수 있겠지만 Na!역시 이 떡밥에 달려드고 있다. )

HTML5에 대한 관심은 출판업계의 움직임에서도 볼수 있는데 주로 해외번역서 위주였던 웹표준 관련서적들과는 다르게 매우 빠르게 국내 저자가 저적한 HTML5에 대한 서적이 출판되었다.
(국내저자의 웹표준 접근성 관련서적이 없다는것이 아니라 그에 비해 시기적으로 무척 빠르게 나왔다는 점이다. )

HTML5는 구성을 요구한다.

HTML5 – 차세대 웹 표준 기술 | 김보영 저 | ITC | 2010

[HTML5 - 차세대 웹표준 기술] 을 볼때 당연히 비교가 되는었던것은 당연히 먼저 출간된 HTML5관련 번역서인[ HTML5&API입문](이하 번역서) 이었다. 분량은 이책이 1/3가량 더 많고 글자수를 보면 한 두배는 되는것 같았다.

하지만 두 책의 차이는 외적인면보다 저자가 주된 관점을 어디에 두고 있는가에 대한 차이가 큰것 같다. 번역서는 HTML5에 새로이 등장하게된 API에 대한 소개와 해설에 주된 관심이 있었다면 이책은 HTML5의 tag와 그 구성에 대한것에 더 많은 관심이 가있다고 보여진다. (물론 두서적 모두 tag와 API를 모두 다루고 있으며 상대적 비교해 보면 무게를 두고 있는 쪽이 그렇게 보인다는 것이다.)

특히나 본서는 HTML5의 콘텐츠모델에 대해 강조하고 있는듯 하다.
다음 Na!의 개인적인 이해로 작성한 각 콘텐츠 모델의 역할이다.

Flow
사용자에게 보여지는 컨텐츠를 구성하는 Tag그룹
Heading
컨텐츠구조의 목차를 구성하는 Tag그룹
Sectioning
컨텐츠 흐름에 따라 내용 블럭 또는 구역을 지정하는 Tag그룹
Phrasing
해당내용을 직접 표현하는 Tag그룹
Embedded
브라우저가 해석하여 외부요소로 대치하는 Tag그룹
Interactive
사용자와의 상호작용을 위한 Tag그룹
Metadata
해당컨텐츠와 관련된 메타정보를 제공하는 Tag그룹

그리고 이러한 요소들은 다음그림과 같은 포함관계를 갖는다고 한다.
HTML5의 컨텐츠모델-whatwg.org

처음에는 개념이해가 쉽지 않았지만 사실 기존 HTML4.01기반의 스팩을 잘생각해 본다면 전혀 새로운 개념은 아니라고 생각한다. (HTML5가 혁명이 아닌 진화를 택했으므로 그렇다고 생각한다.)

그럼에도 불구하고 개인적으로 이해가 어려웠던 부분은 Sectioning 그룹 부분이었다. 그이유는 Sectioning의 성격을 HTML4.01의 <div>와 연관하여 생각했기 때문어었던것 같다. Na!의 지금의 판단으로는 Sectioning은 HTML4.01의 <div>의 대치또는 확장이 아니라 <h[x]> – heading Tag와 더 관련이 있다고 생각하고 있다.

HTML4.01에서는 heading의 영향범위(?)를 명시적으로 지정해줄수 있는 tag가 없었지만 컨텐츠를 구성하는 저작자는 개념적으로 그 범위를 나누고 있다고 볼수 있다. 그 개념적 범위를 명시적으로 지정하는 것이 Sectioning그룹의 역할이라고 본다.

이렇게 되면 하나의 HTML파일로 구성된 컨텐츠에 <h1> tag가 몇 번 들어가는 것이 맞느냐에 대한 논의 자체가 무의미해 질 것이다. 각각의 <h1>은 서로 다른 영향범위를 갖기 때문이다.
(어떻게 보면 xhtml2.0의 뒤에 숫자가 없는 <h>가 더 좋치 않았나 싶다. <selction>를 사용하여 구성을 테스트 해보니 heading 숫자를 전체의 구조에 따라 낮춰쓰고 싶은 생각과 또는 개념을 버리는것이 개인적으로 쉽지 않았다.)

이러한 변경과 새로운 tag가 지향하는 바는 무엇일까? Na!는 이것은 HTML4.01기반의 스펙과 변하지 않았다고 생각한다. 더많은 사용자들에게 정보를 보다 잘 전달하기 위해서라고 생각한다. 급격히 변화하는 웹의 기술환경속에서도 이것은 변하지 않치 않을까 한다.

저자는

html4.01은 구조적(아마도 형태의..)이었으며 html5는 구성(아마도 컨텐츠의..)을 요구한다.

라고 이야기 하고 있다.

개인적으로 틀리진 않치만 완전히 맞는다고 생각하지 않는다. html4.01 기반 스펙도 컨텐츠의 구성을 구현하는 것을 목적으로 하였지만 형태구조를 작성하는 것을 위주로 사용해왔던 사례가 많았던것이라고 본다.
일례를 들면 <div>는 많이 쓰이나 <h[x]>을 찾아볼 수 없는 표준화 되었다는 웹사이트가 있을 것이다.

이러한 사례는 웹사이트의 저작방식에 기인한다고 생각한다.
html의 구성형태에 가장 큰영향력을 가져야 하는것은 PSD 가 아니라 DOC 또는 HWP 이다. (ppt는 웹 저작업계에서… 사용용도가 변질(?)되었다고 생각하기에..) 너무나도 당연한 이야기이고 상식적인 이야기이지만 전달하고자 하는 정보의 구성 컨텐츠의 내용이 HTML구성의 주된 영향요소가  되어야 한다는것이다.

이러한 예는 저자가 머리글에서도 언급한 무려 23페이지나 되는 [alt]속성에 대한 설명에서도 볼수 있다. 이미지에 대체 텍스트를 제공하는 [alt]를 꽤 많은 분량에 걸처 설명하고 예시를 들고 있다. 이를 한줄로 줄이자면..

컨텐츠가 전달하고자 하는 바를 지원하는 대체 텍스트

라고 생각한다.

이미지나 멀티미디어를 사용하는것은 전달하고자 하는 내용을 시각적 감성적인 레벨에서 한번 암호화 함으로서 해석단계에서 사용자에게 감동을주거나 강한 인상을 남기기 위함이라 고 생각한다.
그러므로 어떠한 대체 컨텐츠는 그 요소자체를 대체하는것이 아니라 그 요소가 전달하고자하는 목적성을 대치할 수 있는 내용이 되어야 한다는 개인적 의견을 가지고 있었으며 이번 HTML5의 alt속성에 대한 해설은 Na!의견과 상당히 일치하고 있다고 보인다.

이렇듯 HTML5의 tag구성은 전혀 새롭다기 보다는 기존에 명확하지 못했던 구성구현요소를 추가하거나 재정의 하여 보다 명확한 정보구조체를 구현할수 있도록 진화한 것이라고 본다.

html5 tag의 중심의 구성의 명확화가 가져올수 있는 변화는 어떤것이 있을까? HTML5를 모바일 환경과 함께 이야기 하는경우가 많다. 하지만 그것은 대부분 API와 같은 기능적 측면이 강하다고 생각한다. 컨텐츠구성도 영향이 있을까?

구성이 Section화 되고 Section별 heading이 잘 구성되면 화면이 넓은 디바이스에서는 여러 Section을 한 페이지로 구성하여 제공하고 모바일기기 같이 좁은 디스플레이를 가진 기기에서는 Section자체를 페이로 구성하여 제공하하는것도 가능할 것 이라고 판단된다. 물론 서버사이드 기술의 지원이 필요하겠지만 어차피 HTML5의 API는 물론 VIDEO tag조차도 서버사이드 기술자의 협력이 필요하다.
(개인적으로 ogv video를 테스트해보려 했었는데 Content-Type이 text/plain이라… 막힌경험이 있었다. 결국 일은 팀이 하는거다. – 서버이야기가 나와서.. 서버측에서도 javascript 처럼 좀 쉽게 DOM조작을 할수 있으면 좋겠는데..서버측에서는 DOM구성자체를 안할테니.. 결국 xhtml로 해서 xml파싱하는 법뿐이 없을까..?)

검색도 변화하지 않을까 한다.
html5의 <section>은 앞서 이야기했던 컨텐츠 구성자가 생각하는 heading의 영향범위를 구체화하기 위한 Sectioning그룹중 가장 그 특징을 잘 나타내는 tag라 생각한다. <section>은 전체컨텐츠의 흐름에서 일정구역이 그 자체로 하나의 정보블럭으로서 역할을 하고 있을때 이를 구분해주는 tag라고 이해했다. Na!의 이해가 맞다면 검색은 이제 파일이나 페이지 단위 검색이 아닌 <section>별로 검색할수 도 있다는 이야기일것이다.

예를 들어 특정핸드폰이나 자동차를 검색했을때 지금은 그 제조사나 판매점의 사이트나 페이지 단위로 검색이 되지만 HTML5에서는 해당 <section>만을 뽑아서 그결과를 재구성해주는 검색도 생각해 볼수 있지 않을까 한다.
이러한 검색패턴은 좀더 사용자가 원하는 정보를 사용자 중심적으로 구현해 줄수 있을 것이다.

그외에도 여러가지를 생각해볼수 있겠지만 이야기 하고 싶은것은 잘 구성된 정보구조체의 작성이라는 HTML5 tag의 고전적(?)역할도 새롭게 등장하는 HTML5 api의 중요도에 뒤지지 않는다는 것이다.

또 길게 돌아서 … 책자체의 이야기를 해보면..
HTML5에 대한 기술스펙을 상세히 풀어 설명하고 있으며 앞서 언급한대로 API보다는 TAG쪽에 무게를 두고 있다.
비슷한 느낌의 책을 꼽아본다면 웹표준 교과서 정도가 생각난다.
(즉 내용은 알차다고 생각하지만 읽는 재미는 없다는… 스펙 해설서니까..)

Na!의 개인적 서적분류상 정독해야할 책이라기보다는 차례와 찾아보기를 정독하고 찾아보는 책에 가깝지만 HTML5개 새로운 개념이므로 전체적으로 한번은 봐두는 것이 좋다고 생각한다.

앞서 나온책과 비교를 피할수가 없다고 생각하는데 다행이도 관점의 중심이 달라서 두개의 책 모두 나름 가치가 있다고 생각한다.

Na!도 아직 HTML5에 대한 개념을 파악하는 중이지만
개인적으로 권하자면..

기존의 퍼블리셔라 불리우는 사용자측의 HTML+CSS위주의 작업에 익숙하고 정보구성 자체에 관심이 있다면 이책  [HTML5-차세대 웹표준 기술] 이 좋을것 같고

javascript와 서버사이드 개발자적 지식이 있으며 어플리케이션으로써의 HTML5에 대한 관심이 더 높다면  [HTML5&API입문]쪽이 관심분야와 맞을것 같다.

여유가 되거나 회사지원등이 있다면 둘 다 지르는것도 무방하다.

Tags: , , ,

Leave a Reply