문서 구조는 정보문서로 변화중...

정보의 일생. 생성, 배포, 활용까지의 여정.

웹의 문서 구조는 정적문서에서 동적문서를 거쳐 정보문서로 진행되고 있다.

시맨틱웹까지 진행과정을 알아보기 위해 지금까지 웹의 변화과정을 간략하게 살펴볼 필요가 있다. 웹은 문서 구조에 따라 '정적문서 - 동적문서 - 정보문서'로 진행되고 있다. 정적문서 시대는 HTML 문서 시대로 문서 작성과 관리는 웹마스터에 의존하며, 방문객의 반응을 확인하거나 네티즌끼리 반응을 주고받을 수 없는 일방적(단방향) 구조를 가지고 있다. 때문에 정보 전달에 목적을 두었으며 문서 주소는 고유링크만 사용했다. 정적문서 시대의 문서 작성과 배포, 사용자는 사람이다.

동적문서 시대는 CGI와 DB를 이용한 게시판 시대를 말한다. 게시판을 이용하므로 네티즌끼리 즉각적인 반응을 주고받을 수 있으며, 방문객의 반응을 확인하고 글의 수정 보완이 가능한 양방향 구조를 가지고 있다. 전달된 내용의 되먹임에 큰 목표를 두었으며, 문서 주소에 동적주소를 사용했다. 문서 작성과 관리는 웹마스터 외에도 게시판 사용자에게 의존했으나 문서 작성과 배포, 사용자는 여전히 사람이다.

정보문서 시대는 시맨틱웹 시대로 문서 안에 메타데이터를 포함시켜 컴퓨터끼리 즉각적인 반응을 주고받을 수 있다. 문서 작성과 관리, 배포, 활용의 상당 부분을 프로그램이 알아서 하는 시대로 넘어가는 것이다. 정보문서 시대에는 방문객이 아닌 방문프로그램과의 대화가 가능한 양방향 자동화 구조를 가지고 있으며, 내용전달과 되먹임 반응보다 의사결정에 목적을 둔다. 문서 주소에서는 원본과 복사본의 구분이 일어나기 시작한다.

문서 형식은 HTML 시대, CSS 시대, 온톨로지 시대로 변화하고 있다.

문서 형식에 따라서 구분하면 'HTML - CSS - 온톨로지'로 구분할 수 있다. HTML 시대는 내용 형식 결합 시대로 HTML 문서의 경우 글 좌우를 HTML 태그로 직접 감싸야만 했다. 본문의 글씨 색 하나를 바꾸려 해도 본문의 태그 명령을 직접 수정하는 불편이 있었다. CSS 시대는 내용과 기술 분리 시대로 문서 내용과 디자인, 형식 등이 분리되었다. 본문의 글씨 색을 바꾸기 위해 본문 문서를 수정하지 않고 스타일시트 문서만 수정하면 된다. 온톨로지 시대는 내용과 요소 분리 시대로 내용을 구성하고 있는 요소가 문서 내용과 분리되기 시작한다. CSS를 통해 내용을 감싸고 있는 기술과 형식이 분리되었다면, 온톨로지를 통해 내용을 구성하고 있는 낱말이나 각종 자원, 의미가 분리되기 시작했다. 눈에 보이지 않는 문서 안의 숨은자료의 활용이 큰 비중을 차지한다.

CSS는 HTML 문서에서 디자인을 분리함으로써 내용과 형식의 분리하고 효율성을 높였다.

CSS(Cascading Style Sheets, 스타일시트)는 글틀(word processor, 문서편집) 프로그램에서 사용하는 스타일 개념을 웹에 도입한 기술이다. 스타일이란 어떤 영역을 잡아서 하나의 틀로 정의하는 기술이다. 예를 들어 지금 이 문장을 a 문장이라고 할 경우, 문장 전체를 구역으로 잡은 뒤에 A 스타일로 정의한다고 명령을 내린다. 그런 뒤에 A 스타일의 내용으로 '바탕체, 13포인트, 배경 없음, 흰색 바탕에 검정색글씨, 좌우 문단 폭 5mm, 줄간격 5mm, 글자간격 1mm, 장평 95'로 정의하는 것이 스타일의 사용법이다. 이런 식으로 책 안의 본문 부분만 구역으로 잡아 'A 스타일'로 정의내려두면 된다. 대개 스타일은 문장의 글씨 모양을 정의하는 것이 일반적이다.

스타일이 유용할 때는 문서 모습을 수정할 때다. 만약 책 안의 본문을 모두 꽃무늬 배경의 그림을 깐 돋움체로 바꿔야 한다고 생각해보자. 스타일을 사용하지 않았다면 책 안의 본문 부분을 일일이 다시 구역으로 잡아가면서 글씨 모양을 바꾸고 배경그림을 깔아주는 수작업을 해야 할 것이다. 이는 몇 시간에서 몇 달 씩 걸리는 일이다. 하지만 본문 부분을 모두 A 스타일로 입혀둔 상태라면 A 스타일의 정의 영역에서 정의 내용만 바꾸어주면 된다. A 스타일 내용을 '돋움체, 13포인트, 꽃무늬 그림 배경, 흰색 바탕에 회색글씨, 좌우 문단 폭 0mm, 줄간격 5mm, 글자간격 1mm, 장평 100'으로 수정해주면 되는 것이다.

HTML 문서의 경우 과거에는 '<font color="red" size="13">시맨틱웹 예제문서</font>'와 같이 문장의 좌우에 <font>라는 HTML 태그를 감싸서 문장에 사용하는 글씨 색과 글씨 크기를 지정했다. 때문에 글씨 색을 빨간색에서 파란색으로 바꿀 때는 일일이 본문을 고쳐가면서 '<font color="blue" size="13">시맨틱웹 예제문서</font>'로 고쳐야 했다. 1만 개의 문서 안의 빨간색을 파란색으로 바꾸려면 1만 개 문서를 불러와 수정해야 하므로 며칠이 걸리는 셈이다.

하지만 스타일을 이용한다면 '<div class="title">시맨틱웹 예제문서</div>'라는 HTML 본문 안의 내용을 전혀 손대지 않는다. 만약 title이라는 스타일을 입힌 문장들을 빨간색에서 파란색으로 바꾸려면 title이라는 스타일을 정의한 스타일시트 문서 안에서 글씨 색을 파란색으로 바꾸면 된다. 불과 몇 초 만에 수 십 만개 문서의 글씨 색을 바꿀 수 있는 것이다.

이처럼 CSS는 문서의 디자인을 바꾸기 위해서 HTML 문서 자체를 수정하지 않아도 되므로 매우 편리하다. 문서 관리에서 이전과 비교할 수 없는 속도 향상이 생긴다. 스타일을 사용한 문서는 문서를 전혀 수정하지 않고 스타일시트의 정의 내용만 바꿔가면서 봄에는 꽃그림이 배경으로 깔리고, 가을에는 단풍그림이 배경으로 깔리는 문서로 바꿀 수 있다. 내용과 형식(디자인)이 분리되는 것이다.

당연히 문서의 효율적 관리나 수정을 위해 CSS(스타일시트)를 사용해야 한다. CSS는 문서 수정이 용이할 뿐 아니라 자동화나 표준 준수에도 유리하다. 물론 시맨틱웹의 구현에도 훨씬 유리하다. 직접 <font color="red">라고 지정하지 않고 CSS만 입혀둔다면 언제든지 정의 내용을 변경할 수 있기 때문이다. CSS로 정의할 수 있는 내용은 초기의 글씨 크기, 글씩 색, 문단 모습에서 점차 확장되고 있기 때문에 언제든지 새로운 기능의 적용이 가능하다.

출처 : 김중태 문화원