시맨틱 웹(Semantic Web)

ground4ekd·2020년 11월 17일
0

시맨틱 웹(Semantic Web)이란?

시맨틱(Semantic)은 사전적 의미로 '의미론적'을 뜻한다. 그럼 의미론적인 웹은 기계나 사람이 알아 볼 수 있게 의미있는 태그들을 이용하여 만들어진 일종의 잘 정리된 웹 문서라고 생각하면 된다. 이렇게 잘 정리된 문서는 단순한 데이터가 아니라 의미를 가지는 하나의 데이터 모음으로 분석된다.

시맨틱 웹의 목적

시맨틱 웹의 가장 큰 목적은 웹 크롤러(기계)가 쉽게 분석할 수 있게 하는 것이다.
수많은 웹사이트 중에서 내가 검색한 키워드와 맞는 문서를 찾기 위해서는 웹 크롤러가 모든 사이트들의 정보를 수집해야한다. 이때 시맨틱하게 잘 정리되지 않은 웹 문서(HTML)라면 웹 크롤러는 어떤 데이터가 중요한지 잘 구분할 수 없어서, 결국 중요한 데이터를 놓쳐 검색이 잘 안될 수 있다. 그렇기 때문에 웹 크롤러가 분석하기 쉽게 시맨틱 태그를 사용하여 의미론적으로 HTML을 작성해야한다.

물론 내가 한 프로젝트를 평생 유지보수 할게 아니니까 다른 개발자들도 알아보기 쉽게 작성하는 해야하는 이유도 있다.

스토리텔링

💡 내가 쓰레기를 버린다고 가정해보자.

  • 쓰레기를 버리는 행위 = 웹 문서 배포
  • 쓰레기 = 웹 문서
  • 분리수거 한 쓰레기 = 시맨틱 웹 문서
  • 분리수거 해주시는 고마운 분(분리수거님) = 웹 크롤러 봇

내가 쓰레기를 내놓았고 종이와 플라스틱을 가져가시는 분리수거님이 오셨을 때, 분리수거가 되어있지 않다면 원하시는 종류의 쓰레기를 제대로 가져갈 수 없다. 분리수거를 제대로 해놓는다면 분리수거님은 필요한 종류의 쓰레기만 잘 가져가실 것이다.


시맨틱 태그(Semantic Tag)

HTML5 이전에는 class, id와 함께 대부분 <div> <span> 태그를 사용하여 HTML을 작성하였다. 하지만 HTML5부터는 아래와 같은 시맨틱 태그들이 제공되었다.

  • <article>
  • <aside>
  • <detail>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

<header> 태그

<header>은 문서나 섹션의 머릿말을 의미하고, 한 문서에 여러개의 <header>를 사용할 수 있다.

<main> 태그

<main>은 해당 페이지의 본문을 의미하기 때문에 한 페이지에 하나의 <main>만 존재해야 한다.

<footer>은 문서나 섹션의 꼬릿말을 의미하고, 한 문서에 여러개의 <footer>를 사용할 수 있다.

<aside> 태그

<aside>는 본문 내용과 직접적인 연관성이 없는 분리된 내용을 의미한다. 주로 사이드바에 사용되며 배너광고, 위제 등으로 사용된다.
만약 아래와 같이 본문 내에 위치한다면 내용과 관련된 부가정보를 의미한다.

<article>
  <h3>오늘 VIPS에서 저녁을 먹었다.</h3>
  <aside>
    <h4>VIPS</h4>
    <p>빕스는 CJ푸드빌의 스테이크 및 샐러드바 브랜드이며...</p>
  </aside>
</article>

<nav>는 네비게이션 링크의 집합을 의미한다.

<section>, <article> 태그

<article>은 하나의 독립된 내용을 의미하고, <section>은 같은 성격의 내용의 묶음을 의미한다. <main>과 달리 <section><article>은 조금 더 자유로운 의미로 사용되어서 <section>안에 <article>을 작성할 수 있고 반대로도 사용 가능하다.

<figure>, <figcaption> 태그

<figure>은 이미지를 포함한 콘텐츠를 의미하며, 내부에 <figcaption>을 사용하여 이미지에 설명을 추가할 목적으로 사용된다.

<figure>
  <img src="seoul.jpg" alt="seoul_img">
  <figcaption>한국의 수도, 서울의 야경</figcaption>
</figure>

나머지 태그

  • <details> : 사용자가 볼 수 있거나 숨겨진 추가적인 세부사항
  • <summary> : <details> 를 위한 가시적인 제목
  • <time> : 날짜나 시간

Heading

헤딩 태그?

위의 추가된 태그들 외에도 아주 중요한 시맨틱 태그가 남아있다. 바로 헤딩 태그들이다. 흔히 아는 <h1>, <h2>, <h3> ... 를 뜻한다. 크롤러는 이러한 헤딩태그를 보면 중요 데이터로 인식해 인덱싱에 포함하게 된다. 책에서 목차와 같이 말이다.
<section><article> 태그에도 포함되어야한다.

크롬 확장 프로그램: HTML5 Outliner

이 크롬 확장프로그램을 사용하면 아래와 같이 헤딩태그로 만들어진 목차를 확인할 수 있다.


글을 마치며

시맨틱 웹에 대해 공부하면서 많은 포스트를 봤지만 정말 정보가 조금씩 모두 해석이 달랐다. 그래서 최대한 많은 검색 결과를 종합해서 정리하였다. 최대한 크롤링 잘되고 보기 편한게 최고인듯 하다😁

profile
오늘 뭐라도 하나 했다는 것

0개의 댓글