환영합니다!
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)이라고도 하며 이를 잘 지키는 것은 스타일시트나 스크립트를 활용할 때에도 매우 중요한 역할을 한다.
이를 그림으로 표현하면 위와 같은 형태가 되며, 이를 태그를 이용하면 아래 그림처럼 만들 수 있다. 내용 칸에는 필요에 따라 다양한 태그를 이용하여 여러 내용을 넣을 수도 있고, 내용간의 구별을 위해 구분자를 사용할 수도 있다.
구체적인 내용을 다루는 태그 안에는 강조나 첨삭, 설명을 위한 태그들이 사용될 수 있으며 이는 사용자가 내용을 이해하는데 도움을 줄 수 있다. 필요한 속성을 적절히 사용하는 것 역시 마찬가지로 내용의 이해에 도움이 된다.
XHTML, CSS, 혹은 웹표준 관련 책 이야기.
이미 많은 분들이 소개한바 있는 실용예제로 배우는 웹표준이나 웹 2.0을 이끄는 방탄웹 같은 책처럼 최근에 웹표준 관련한 책들이 제법 출간되었다. 아마 많은 분들이 이미 갖고 계시리라 생각하지만 나 역시 이 두 권은 이미 갖고 있는 책이기도 한데, 처음 실용 예제로 배우는 웹표준 출간 소식에 얼마나 기뻤는지!
아마 많은 분들이 이미 알고계신 책이라 생각하지만, 앞서 언급한 주황색과 파란색 책 외에 다른 책 한권을 소개할까 한다. 앞의 두 권이 이미 HTML이나 CSS에 대한 이해가 있는 사람들을 대상으로 한 책이라면, 지금 소개하는 책은 초보가 읽어도 큰 무리가 없는 책이 아닐까 한다.
- Head First HTML with CSS & XHTML - 웹2.0 시대의 웹표준 학습법
- by 엘리자베스 프리먼
- 한빛미디어 2006-05-31
- ISBN 8979144105
우선 이 책은 우리 나라 사람들이 좋아할만한 편집 스타일이 아닐지도 모른다. 책을 펼쳐보면 마치 잡지 같아서, 좀 산만한 감이 없지 않다. 또 전문적이라고 하기에는 아주 기초적인 내용부터 다루고 있어서, 이미 스스로의 기술 수준에 자신하는 사람들이 읽기에는 초반부가 좀 지루할지도 모르겠다.
하지만, HTML의 기초부터 시작한 이야기는 어떻게 하는 것이 웹 표준을 지켜서 웹페이지를 만드는 방법인지를 차근차근 설명하고 있다. 혹시라도, 자신이 다 아는 내용이라고 페이지를 쉽게 넘기지 않기를 바란다. 조금만 자세히 보면, 좀 더 새롭거나 놓치고 있었던 부분이 보인다.
이 책으로 회사에서 8주짜리 커리큘럼을 짜서 세미나를 진행한 적이 있는데, 참여자의 반응이나 결과가 나름 좋았던 것으로 기억한다. 우선은 내용이 어렵지 않아서 혼자서 해당 챕터를 읽어오는데 큰 무리가 없었고, 발제자가 준비한 내용으로 속을 더 채우기에 적당했던 것이다.
지금 출간을 준비 중인 책들도 있다. CDK 첫번째 모임에서 만박님께서도 말씀하셨지만 CSS Mastery(나는 원서를 구입한지 얼마 안됐는데 번역판이 출간 예정이라 좀 억울하다)나 nmind님이 번역하시고 현석님이 감수하셔서 이제 출간을 준비 중인 웹표준 교과서 같은 책들은 정말 기대된다.
흠… 이젠 국내에서 저술된 책이 나오기만 기다리면 되는건가? 
HTML과 CSS. 스타일 가이드 작성 방법
오늘 스타일가이드 작성에 관한 흥미로운 글을 하나 발견했다.
이 방법은 모든 스타일에 대해 해당하는 경우와 클래스 이름을 그대로 표기해서 샘플 페이지를 작성하는 방법이다.
내 경우는 보통 레이아웃 파일을 하나 만들면, 거기게 컨텐츠 상에서 들어갈 수 있는 여러 요소를 한페이지에 넣어서 샘플페이지를 만들곤 한다. 이 방법은 대개 규모있는 사이트 제작 때 마크업을 한사람이 전담해서 만들 수 없기 때문에, 한 페이지를 샘플처럼 만들어두고 다른 작업자들이 그 페이지에 놓인 요소를 가져다 쓰기 좋게 하기 위해서다. 다만 이 방법은 디자인에 따라서 세세한 부분까지 미리 정의해 둘 수 없기 때문에 - 어쩌면 이런 문제는 기획자나 디자이너들의 표준에 대한 이해 부족에 더 큰 원인이 있겠지만 - 작업자마다 작업한 페이지와 관련된 별도의 CSS를 작성해서 추후에 통합하는 과정을 거쳐야 한다.
kevo.com에 사용된 이 방법을 이용하면 나름대로의 장점은 있을 것 같다. 다만, 사이트가 완성된 후에 스타일가이드를 만들어야한다는 점이 좀 걸린다. 또 사이트를 유지보수 하는 과정에서도 스타일가이드를 지속적으로 업데이트해야하는 귀찮음이 있겠다. 다음 프로젝트 땐 좀 귀찮아도 한번 만들어볼까.
RSS
