"시맨틱 웹"이라는 용어는 이제 거의 인플레이션에 가까운 방식으로 사용되고 있습니다. 그러나 많은 사람들이 이토록 자랑스러운 시맨틱이 무엇인지조차 알지 못합니다. 시맨틱 덕분에 실제로 방대한 양의 데이터에서 필요한/원하는 정보를 추출해낼 수 있다는 사실은 매우 간단합니다.
구체적인 예를 들어 의미론의 중요성을 설명하겠습니다. 디지털 사진은 대단한 것입니다. 사진을 찍자마자 인터넷을 통해 전 세계로 전송할 수 있기 때문입니다. 사적인 영역에서 적용되던 것이 전문적인 영역에서는 이미 오래 전부터 자리를 잡았습니다. 사진 에이전시, 박물관, 도서관, 사진작가들은 전문 이미지 데이터베이스를 통해 사진, 그림 또는 귀중한 문서의 디지털 버전까지 제공합니다. 관련 웹사이트에는 플랫폼을 검색하는 데 사용할 수 있는 검색 마스크가 있습니다. 웹 2.0에서 이미지 검색 엔진의 가장 인기 있는 예는 단연 Flickr입니다.
이미 이러한 이미지 검색 엔진을 사용해 본 사람이라면 누구나 그 한계를 알고 있습니다: 예를 들어 ' Kohler '라는 용어를 입력하면 다양한 분야의 사진이 표시됩니다. 이미지 검색은 석탄 가슴, Kohler라는 테니스 선수, 헬무트 콜 전 총리의 사진을 보여줍니다.
이 시점에서 고전적인 WWW의 단점 중 하나가 분명해집니다. 제공된 정보는 현재 인간은 이해할 수 있지만 기계(이 예에서는 검색 엔진)는 정확하게 해석할 수 없다는 것입니다.
기계는 실제로 사용할 수 있는 정보만 읽을 수 있습니다. 바로 이 지점에서 의미론이 중요한 역할을 합니다.
문서 구조화
이전 버전의 HTML에서는 문서를 의미론적으로 구조화할 수 있는 방법이 없었습니다. 웹 페이지를 구조화하려면 제목과 텍스트 단락만 사용할 수 있었습니다. 다음은 일반적인 웹사이트 구조의 전형적인 예입니다:
<h1> 장 </h1> <p> 단락 </p> <h2> 하위 장 </h2> <p> 하위 장의 단락 </h2> <h3>
HTML은 문서 구조화를 위한 요소 h1~h6을 제공합니다. 그러나 이러한 요소로는 매우 깊게 중첩된 구조를 만들 수 없습니다. HTML에는 h7 또는 h8 요소가 제공되지 않기 때문입니다. 바로 이 부분에서 HTML5가 등장하여 몇 가지 추가적인 구조화 요소를 도입했습니다.
- article
- aside
- 대화
- 그림
- footer
- header
- nav
- 섹션
이 튜토리얼에서는 이러한 요소를 소개합니다. 하지만 그 전에 주의할 점은 시각적인 관점에서 이러한 요소에서 기적적인 효과를 기대하지 마세요. 시맨틱 요소를 기반으로 하는 웹사이트도 매력적으로 보이려면 CSS를 사용해야 합니다. 아시다시피 이에 대해서는 나중에 설명하겠습니다.
언뜻 보기에 의미론과 관련이 없더라도 일부 의미론적 요소에 대해 이미 배웠습니다. 다음은 그러한 요소의 예입니다:
<progress min="0" max="100" value="40"></progress>
그 위에 로딩 바가 생성됩니다. (참고로 진행률 요소는 이미 이 시리즈에서 자세히 설명한 바 있습니다).
이 요소는 해당 컨텍스트에 할당할 수 있는 콘텐츠를 만드는 데 얼마나 적은 노력이 필요한지 명확하게 보여줍니다. 소프트웨어는 로딩 막대임을 즉시 인식할 수 있습니다. 그러나 JavaScript에 의존하여 로딩 바를 생성하는 솔루션에서는 그렇지 않습니다.
시맨틱 요소 구조
"일반적인" HTML 문서에서는 DIV 요소를 사용하여 콘텐츠를 구조화합니다. 이러한 요소에는 클래스 또는 ID가 할당되어 CSS를 사용하여 서식을 지정할 수 있습니다. 이 원칙은 HTML5에서도 활용됩니다. 실제로 Google에서 실시한 설문조사에 따르면 많은 문서에서 항상 동일한 클래스가 사용되는 것으로 나타났습니다.
예를 들어 보겠습니다:
<div class="nav"></div>
예를 들어 많은 개발자가 이 div 요소 내에 탐색을 수용하기 위해 nav를 사용합니다. 그러나 HTLM5에서는 다음과 같이 보입니다:
<nav>content</nav>
nav 요소는 단순한 하이퍼링크 목록이 아님을 분명히 합니다. 실제로 이 요소는 매우 구체적인 맥락에서 웹사이트 탐색에 대한 정보가 포함된 콘텐츠 블록을 설명합니다.
현대적인 구조
HTML 문서의 구조는 일반적으로 어떤 모습일까요? 기본적으로 페이지에 궁극적으로 어떤 콘텐츠가 포함되든 비슷합니다. 일반적으로 다음 영역이 포함됩니다:
- 헤더
- 메인 메뉴
- 콘텐츠 영역
- 바닥글 영역
구조화를 위해 div 요소를 사용하는 웹사이트는 다음과 같이 보일 수 있습니다:
<body> <div id="header"> <div id="logo">로고</div> <div id="search">검색</div> <div id="nav">메인 메뉴</div> </div> </div> <div id="content"> <h1>이것이 콘텐츠입니다</h1> <div class="section"> <h2>부제목</h2> <h3>섹션</h3> <!-- 콘텐츠는 다음과 같습니다 --> </div> <div class="section"> <h2>Subheading</h2> <!-- 콘텐츠는 다음과 같습니다 --> </div> </div> <div id="사이드바"> <div id="서브네브">서브메뉴</div> </div> <div id="푸터">푸터 영역</div> </body>
이러한 div 구조에 이미 익숙하실 것입니다. 개발자는 구조를 논리적으로 만들기 위해 '말하는' 이름을 가진 div 영역에 해당 클래스 또는 ID를 할당합니다. 예를 들어, 개발자는 푸터 ID가 있는 div 영역에 페이지의 푸터 영역에 속하는 콘텐츠가 포함되어 있다는 것을 알 수 있습니다. 문제는 이름이 웹사이트의 구조에 대한 아이디어를 제공할 수 있지만 웹사이트가 여전히 의미론적으로 구조화되어 있지 않다는 것입니다. 바로 여기에서 새로운 HTML 요소가 등장합니다. 처음으로 문서와 웹사이트를 실제로 구조화할 수 있게 해줍니다.
더 나은 이해를 위해 다음 HTML5 문서를 살펴보세요:
<body> <header> <div id="logo">로고</div> <div id="search">검색</div> <nav>메인 메뉴</nav> </header> <article> <h1>이것은 콘텐츠입니다</h1> <section> <h2>부제목</h2> <h3>섹션</h3> <!-- 콘텐츠는 이렇습니다 --> </section> <section> <h2>Subheading</h2> <!-- 다음은 내용입니다 --> </section> </article> <aside> <nav>Submenu</nav> </aside> <footer>바닥글 영역</footer> </body>
물론 여기에 사용된 요소에 대해서는 다음 튜토리얼에서 더 자세히 설명하겠습니다. 하지만 이 예시를 보면 사용된 요소의 장점이 어디에 있는지 이미 알 수 있습니다. 이제 페이지 영역에 특별히 의도된 요소로 레이블을 지정할 수 있습니다. 페이지의 헤더 영역에 속하는 모든 요소를 헤더 요소에 통합할 수 있습니다.
또한 이제 섹션 및 글 요소를 사용할 수 있으므로 실제 페이지 콘텐츠를 훨씬 더 잘 구성하는 데 사용할 수 있습니다. 보시다시피 문서의 의미 구조와 관련하여 HTML5가 제공하는 가능성에 대해 자세히 살펴볼 가치가 있습니다.
