[HTML5.0]시맨틱(sementic)하다는 것에 대하여... - 1편. 시맨틱 태그

안녕하세요~ 뉴핀입니다.

오늘은 시맨틱 웹의 개념을 알아보고 시맨틱 하다는 것의 의미를 다시 살펴보는 시간을 가져보겠습니다. 시맨틱 웹에 관한 개념은 1998년, 웹의 창시자인 "팀 버너스 리"가 고안하고 웹 국제 표준기구인 W3C가 표준화한 컴퓨터와 사람이 소통하는 기술입니다. 시맨틱 웹 기술의 도입으로 개발자와 사용자는 좀 더 "의미론적"으로 웹 페이지를 구현하고 탐색할 수 있게 되었습니다.

그렇다면 과연 "의미론적인 웹"이라는 말이 도대체 어떤 것을 의미하는가! 또, XML에서는 시맨틱 웹을 어떻게 구현했는가! 에 대하여 함께 알아보도록 합시다.

Photo by vectorpouch on freepik

1. Sementic Web

시맨틱 웹의 정의

과거에 있던 웹페이지는 문서를 전달하는 기능에서 그쳤습니다. 하지만 21세기에 들어와 인터넷에 정보가 폭발적으로 넘쳐나면서 웹은 정보검색의 문제가 발생하게 됩니다. 팀 버너스 리는 이러한 문제가 정보 - 의미 관계에 있다고 생각했습니다. 즉, 컴퓨터는 정보를 문자 그대로 해석할 뿐, 어떤 의미를 가지고 있는지 이해하지 못하는 게 문제였습니다. 이를 해결하고자 웹에서 쓰이는 정보에 컴퓨터가 그 의미를 자동으로 인식할 수 있는 기술을 만들었습니다. 그게 바로 "시맨틱 웹"이라는 기술입니다. 시맨틱 웹의 자세한 내용은 다음 편에 포스팅하도록 하겠습니다.

Photo by Justin Morgan on Unsplash

시맨틱 웹의 장점

1. 에이전트가 웹페이지에 대한 정보를 탐색하고, 의미를 연결시키는 데 용이해집니다. 즉, 정보의 경중을 파악하고 정보와 정보 사이의 관계를 명확히 인덱싱할 수 있습니다.
2. 현대 웹 검색엔진은 대부분 XML태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단합니다. 이로 인해 검색 엔진 최적화를 이룰 수 있게 됩니다. 
3. 개발자 입장에서 코드의 가독성이 높아집니다. 의미를 가진 엘리먼트의 사용으로 직관성이 높아지고, 보다 명확하게 래핑 할 수 있습니다. 
4. W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다"라고 합니다. 가독성의 증진과 맥락을 같이합니다.

Photo by rawpixel.com on freepik

2. Sementic Tag

그렇다면, 시맨틱 웹 구현을 위한 시맨틱 태그란 무엇일까요?

시맨틱 태그의 정의

현대는 무수히 많은 정보 검색 엔진과 무수히 많은 검색 키워드를 가지고 있습니다. 이러한 검색 엔진들에 노출되지 않는 정보 혹은 키워드는 잊히기 쉽습니다. 인터넷에 존재하는 자동으로 움직이는 봇 즉, 에이전트들은 무작위로 웹페이지를 방문하며 웹페이지의 정보를 수집하여 검색 엔진 데이터베이스에 저장하는데, 이때 사용하는 것이 HTML의 태그입니다. 시맨틱 웹의 구현을 위해서는 정보와 의미의 연결이 중요하고, 이때 단순한 정보에 의미를 부여하는 것이 바로 시맨틱 태그인 것입니다.

시맨틱 태그의 사용

대표적인 시맨틱 태그들을 살펴보도록 하겠습니다.

<header>
	로고이미지, 브랜드명 혹은 제목
</header>

<header> 태그는 보통 제목을 담고 있는 머리말, 혹은 웹페이지 상단의 내비게이터로서 사용됩니다. 에이전트는 <header> 태그에 속한 정보를 간단한 소개(로고, 회사 이름, 본문의 제목 등...) 혹은 내비게이션으로 인식할 수 있습니다.

<aside>
	본문의 내용과 관계성이 떨어지는 내용들을 담은 어사이드태그
</aside>

<aside> 태그는 대개 사이드바 혹은 광고와 같은 부가적인 정보를 담는 콜 아웃박스로 사용됩니다.

<nav>
	메뉴와 목차
</nav>

<nav> 태그는 메뉴와 목차를 의미합니다. 이로 인해 검색엔진은 웹페이지의 목차를 확인할 수 있습니다.

<main>
	본문
</main>

<main> 태그는 웹페이지의 큰 흐름, 즉 본문을 의미합니다. 웹페이지에 딱 하나만 존재하는 태그이며 웹페이지의 중심 콘텐츠를 담고 있는 만큼 중요한 태그입니다.

<section>
	내용의 구분, 레이아웃의 구분
</section>

<section> 태그는 오직 섹션의 구분을 위해서 존재하는 태그입니다. 의미를 전달하지 않는 <div> 태그와 혼용하여 사용하는데, <section> 태그는 콘텐츠에는 의미를 부여하지 않지만 웹페이지의 흐름에서 명백히 콘텐츠의 구분을 의미합니다. <div> 대신 <section>, <article> 태그를 사용할 것을 권장합니다.

<article>
	뉴스나 신문의 기사, 게시글, 제품설명등...
</article>

<article> 태그는 본문 내에서 독립적인 콘텐츠를 의미합니다. "독립적인 콘텐츠"라는 말은 잡지 또는 신문 기사, 블로그 작성글, 제품 카드, 사용자가 제출한 댓글, 대화형 위젯 등 본 웹페이지에서 벗어나 독립적으로 배포될 수 있다는 것을 의미합니다.

<footer>
	기업정보, 저작권 정보
</footer>

<footer> 태그는 웹 페이지에 대한 상세 정보를 의미하며, 에이전트는 이를 웹페이지의 저작권과 작성자의 정보 등으로 해석합니다. 그래서 일반적으로 개발사 정보, 혹은 기업정보를 담고 있습니다.

Photo by&nbsp; Viktor Hanacek&nbsp;on picjumbo

이상으로, 시맨틱 웹을 위한 시맨틱 태그들을 알아보았습니다.

과거에 만들어진 웹페이지들과 프레임워크들은 <div>같이 시맨틱 하지 않은 태그들로 가득 차 있는 것으로 보입니다. 과거에도 웹페이지 작성자 나름의 인덱싱 방법으로 검색엔진 최적화등을 꾀했지만, 현대에 구현된 많은 웹페이지들은 시맨틱 태그를 사용하고 있습니다. 이제 여러분들도 시맨틱 태그를 이용하여 시맨틱 웹 구현을 할 수 있게 되었습니다.

다음 시간에는 시맨틱 웹의 좀 더 깊은 지식을 함께 알아보도록 하겠습니다. 왜 시맨틱 웹을 구현해야 하는가! 또, 시맨틱 웹이라는 기술을 도입한 팀 버너스 리는 어떤 미래를 바라보고 있었을까! 와 같은 이 궁금하신 분들은 다음 포스팅을 확인해주세요.

더 궁금한 점이 있다면 댓글 남겨주세요!!

감사합니다.