3강 html5 시맨틱 마크업과 그누보드

들어가기

사실 시맨틱(Semantic)이란 단어를 처음 들었을 때 머리 속에 연상된 것은 '쎄멘'이었습니다. 거칠고 탁한 회색빛 반죽이 '쎄멘차' 뒷구멍에서 흘러내리는 공사판의 모습이 연상되었지요. 당연히 친숙한 기분보다는 '이게 뭐야? 웹도 이제는 공사판이 되는 거야?' 같은 알 수 없는 이질감이 느껴졌습니다.

당연히 시맨틱(Semantic)이란 단어는 '쎄멘'하고는 거리가 있습니다. 그런데 '쎄멘'을 채워 골격을 세우고 건물을 올리듯이 시맨틱 마크업(Semantic Markup) 또한 웹 사이트의 골격을 짜고 완성시킨다는 점에서 일면 상통하는 점이 없지 않아 있습니다.
이번 강좌에서는 듣자마자 '쎄멘'부터 생각나게 하고, 노턴 안티바이러스 프로그램 덕분에 구글에서 검색할 때마다 symantec 이라고 잘못 입력하곤 했던, 어쩌면 이미 우리의 곁에 성큼 다가와 있지만 막상 이론으로 마주하니 가깝고도 먼 이웃이 되어버린 '시맨틱 마크업(Semantic Markup)'에 대해서 알아보겠습니다.

시맨틱 마크업(Semantic Markup)이란?

시맨틱(Semantic)이란?

시맨틱(Semantic)의 사전적 정의는 '의미의, 의미론적인' 입니다.
그리고 우리(웹관련 종사자)가 시맨틱(Semantic)을 논할 때는 웹을 붙여서 시맨틱 웹(Semantic Web) 으로 논하는게 일반적입니다. 이 강좌에서는 시맨틱(Semantic)과 시맨틱 웹(Semantic Web)을 동일한 단어로 취급하겠습니다.

시맨틱 웹의 개념
웹 기술은 정보표현과 전달에 간편한 방법을 제공하여 인터넷이 실생활까지 확산되는 기폭제 역할을 하였다. 그러나, 웹상에 축적된 정보가 방대해 짐에 따라 많은 문제에 봉착하게 되었다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드(keyword)에 의한 정보 접근만을 허용하고 있어, 정보 검색시 무수히 많은 불필요한 정보가 돌출하여 정보 홍수를 가중시키고 있다. 또한, 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리하여야 하는 문제가 있다. 이러한 문제들의 근본원인은 컴퓨터가 정보자원의 의미를 이해하지 못하는데 원인이 있다. 이러한 웹 기술은 팀 버너스리가 초창기에 구상하였던 웹과도 거리가 있다.

2001년 팀 버너스리등에 의해 웹 기술의 비젼으로 시맨틱웹이 제시되었다. 시맨틱웹은 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic inteoperability)을 실현하여, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 간의 효과적인 협력체계를 구축하기 위한 것이다. 즉, 시맨틱웹은 컴퓨터가 웹 정보자원의 의미를 이해하고, 정보의 검색, 추출, 해석, 가공등 제반 처리를 사용자를 대신하여 지능형 에이전트(intelligent agent)가 수행하는 컴퓨터 중심의 기술이다.

시맨틱 웹, 위키피디아

마크업(Markup)이란?

그 파일이 프린터로 출력되거나 화면에서 어떻게 보여야할 것인지를 나타내기 위해 또는 그 문서의 논리적인 구조를 묘사하기 위해서, 텍스트나 워드프로세싱 파일의 특정위치에 삽입되는 일련의 문자들이나 기호들을 말한다. 마크업(Markup)에 사용되는 표지를 흔히 ‘태그’라고 부른다.

NEW 경제용어사전, 미래와경영연구소, 2006.04.07, 미래와 경영

그렇다면 시맨틱 마크업(Semantic Markup)이란?

간략하게 말하면,
시맨틱 웹(Semantic Web)은 컴퓨터가 웹 정보자원의 의미를 이해하는 것입니다.
마크업(Markup)은 문서의 논리적인 구조를 묘사하기 위해 삽입되는 기호입니다.
이 두 문장을 결합하면 '컴퓨터가 웹 정보자원의 의미를 이해할 수 있도록 문서의 논리적인 구조를 묘사하는 것'이 시맨틱 마크업(Semantic Markup)이라고 할 수 있겠습니다.

html5 시맨틱(Semantic) 태그

이 섹션의 내용은 구글 개발자가 들려주는 HTML5 (HTML5 Up and Running), 마크 필그림Mark Pilgrim, 현동석, 2011.01.20(2쇄), 에이콘에서 발췌한 내용이며, figure 는 필자가 추가한 내용입니다.

<header>

header 엘리먼트는 섹션(절)의 주제를 나타낸다. 이 부분이 부제나 별도 제목 혹은 주제의 주요 구절 등 여러 항목으로 구성된 경우 이 엘리먼트 내부에서 h1-h6 엘리먼트를 사용해 표시한다.

<nav>

nav 엘리먼트는 다른 페이지나 현재 페이지의 특정 부분을 나타낸다. 이동용 링크라고 보면 된다. 그렇다고 페이지 내의 모든 링크를 nav 엘리먼트로 만들 필요는 없다. 주요 링크를 가진 한 개 블럭 정도만 nav 엘리먼트로 지정하는게 적절하다. 페이지 하단의 푸터에 이용약관, 홈페이지, 저작권 등의 링크를 가진 경우가 있는데 이때에는 nav보다 footer 엘리먼트 사용이 적절하다.

<section>

section 엘리먼트는 문서나 애플리케이션의 섹션(절)을 나타낸다. 섹션은 컨텐트를 연관된 내용으로 묶은 형태로, 소제목과 함께 표시하는 경우가 대부분이다. 책의 장Chapter이나 대화상자에서 탭으로 구성된 각 페이지 혹은 논문에서 번호로 구분된 절을 생각하면 된다. 웹 사이트의 홈페이지는 소개나 새로운 소식 혹은 연락처처럼 각기 다른 섹션의 모음일 수 있다.

<article>

article 엘리먼트는 문서, 페이지, 사이트 등에서 하나의 독립된 요소로 따로 떼어내어 사용할 수 있는 내용이라 생각하면 된다. 포럼에 올라온 글이나 잡지와 신문 기사, 블로그와 사용자의 댓글, 그리고 위젯과 가젯 등과 같이 하나의 독립된 컨텐트에 이 엘리먼트를 사용할 수 있다.

<hgroup>

hgroup 엘리먼트는 섹션(절)의 주제를 나타낸다. 이 부분이 부제나 별도 제목 혹은 주제의 주요 구절 등 여러 항목으로 구성된 경우 이 엘리먼트 내부에서 h1-h6 엘리먼트를 사용해 표시한다.

<aside>

aside 엘리먼트는 현재 문서의 컨텐트와 큰 관련이 없는 부분을 보여줄 때 사용한다. 출판물에서 주요 기사 옆에 곁들이는 관련 기사처럼 표시한다. 인쇄물에서처럼 인용 부호를 사용하거나 광고를 붙이기도 하고 여러 nav 엘리먼트를 포함하거나 현재 페이지 내용과 다른 컨텐트를 노출할 때 사용할 만한 엘리먼트다.

<time>

time 엘리먼트는 24시간제로 시각을 표시하거나 그레고리력으로 날짜를 표시하는데 부가적으로 시각과 표준시간대와의 차이도 추가할 수 있다.

<mark>

mark 엘리먼트는 참조용으로 문서 내 이동을 돕는 엘리먼트다.

<figure>

figure 엘리먼트는 그림, 사진, 일러스트 등의 컨텐트에 연관된 캡션을 표시할때 사용할 수 있는 내용이라 생각하면 된다. figcaption 엘리먼트를 사용해 연관된 캡션을 표시한다.

<footer>

footer 엘리먼트는 바로 위 섹션의 컨텐트나 최상위 섹션에 대한 푸터를 제공한다. footer 는 통상 작성자, 관련문서에 대한 링크, 저작권 표시 등 섹션에 대한 정보를 갖는다. 대부분의 footer가 섹션 끝에 나타나긴 하지만 필수사항은 아니다. footer 엘리먼트가 섹션 전체를 포함하는 경우 부록, 색인, 출판사 정보, 라이선스 권한 등을 표시한다.

html5 시맨틱(Semantic) 태그와 그누보드 시맨틱 마크업(Semantic Markup)

현재 sir.co.kr에서 배포되고 있는 그누보드를 다운로드하여 설치한 후, 아무런 추가작업 없이 게시판 그룹과 게시판만을 생성한 상태에서 글과 댓글을 작성하면 위의 그림과 같은 결과를 확인하실 수 있습니다.
위의 그림은 아무런 디자인 작업이나 코딩 작업을 거치지 않은 상태일 때, 그누보드4에 시맨틱 마크업을 어떻게 적용할 수 있는지 보여주고 있습니다. 물론 위의 예제가 정답은 아닙니다. 마크업은 자신의 의도와 필요에 따라 적절하게 사용할 수 있습니다. (단, 본래 태그가 의미하는 바를 지나치게 훼손하지 않는다면요.)

실제 위의 그림보다는 보다 세세하고, 어떤 부분은 전혀 다를 수도 있지만, 이번 강좌에서는 위의 구조를 따라갈 것입니다. (변경될 가능성은 항상 존재한다는 걸 잊지 마세요.)

지겹고 빡빡한 이론은 이제 끝이 났습니다. 강좌를 쓰는 입장에서도 어떻게 풀어나가야 할지를 몰라서 쓰고 지우고 고치고 다시 쓰고 지우고 를 계속해서 반복했습니다. 읽는 분들의 고충이나 지겨움은 이루 말할 수가 없었겠지요. ㅠㅠ

이제 다음 강좌부터 진짜로 그누보드4를 HTML5 로 선언하고 웹 표준, 웹 접근성, 시맨틱 마크업화 하는 과정을 다뤄보겠습니다.
감사합니다.