Semantic Tag 과 Semantic Web

Taeha Kim·2020년 7월 22일
0

HTML5와 CSS3

목록 보기
10/10

Semantic Web에 대해서 찾아보면 다음과 같은 설명이 있다.

웹 상에 존재하는 정보들을 컴퓨터가 해독하고 작업하기 용이하게 표현하고 정보간의 관계
를 추출 및 다양한 응용 분야까지 자동화하고 통합된 정보 공유를 한다.
정보자원들의 연결된 의미를 컴퓨터가 이해할 수 있는 형태로 변환한다.
컴퓨터가 정보자원의 뜻을 해석하고, 기계들간의 정보 교환을 하면서 자체적으로 필요한 일을
처리하고 사용자가 필요한 정보를 검색한다. 검색된 정보에서 지식을 추론할 수 있는 기능을 제공한다.

시맨틱 웹의 목표는 인터넷에 방대한 양의 온톨로지로 부터, 이를 자동으로 해석하여 처리할 수 있는 에이전트 소프트웨어에 사람 또는 에이전트가 질의를 하면, 컴퓨터가 자동으로 분산된 온톨로지를 탐색하고 추론하여 원하는 결과를 알려주는 것이다.

온톨로지???는 뭐고 무슨말인지 이해가 안된다.
그래서 위에 말은 일단 넘기고 최대한 이해하기 쉽게 설명을 해보고자 한다.

1. Semantic Tag


웹 문서에서 <div> 태그, <span>태그와 같은 태그들로만 레이아웃을 구성하면,
온갖 클래스에 이것저것 다 붙여서 만들어야 할 것입니다. 이렇게 구성하면, 수 많은 요소들의
의미를 파악하기 어렵고 레이아웃 구성하기도 힘들어 집니다.
따라서 HTML5에서는 웹문서의 레이아웃을 시맨틱 태그를 이용해서 구성합니다.
예를 들면 아래의 그림처럼 레이아웃을 구성 한다고 하면,

<div class="header">와 같은 방식이 아닌 <header>, <main>, <footer>, <aside> 와 같은
시맨틱 태그를 사용합니다. 이렇게 하면 태그들이 무엇을 의미하는지 파악하기 매우 쉬워집니다.

이 뿐만 아니라 만약에 웹사이트에 이미지를 넣어야 할 경우가 생겼다고 가정해 봅시다.
이미지를 넣는 방법은 두 가지 방법이 있는데,

1) <img>태그를 사용하는 방법
2) <div>태그에 background-image 속성을 추가 하는 방법

<img>태그의 경우 시맨틱 태그라서 <div>태그에 background-image 속성을
추가하는 방법보다 태그가 나타내는 의미를 파악하기 쉽습니다.
아래의 링크에서 다른 시맨틱 태그들을 확인할 수 있습니다.
- HTML5 Reference -

1.1 Semantic Tag를 사용하면 누가 의미를 파악하나?

<img>태그를 사용하면, 내가 "아! 여기에 이미지가 삽입되었겠구나" 하고 이해할 수 있는데
누가 의미를 파악하다니? 당연히 나 아닌가? 라고 생각이 들 수 있습니다. 물론 Semantic Tag를 사용하면
사람이 의미를 파악하고 이해하기 쉬운 장점이 있지만, 더 중요한것은 컴퓨터가 이해한다는 것입니다!

자! 이게 또 무슨 말인가 설명을 드리면,
구글에 강아지 사진, 고양이 사진을 찾고 싶어서 검색창에 강아지랑 고양이를 각각 검색해 보았다고 합시다.

강아지와 고양이 사진이 나왔습니다. 검색엔진이 강아지와 고양이 사진을 찾아준 것인데, 어떻게 찾았을까요? 검색엔진 최적화(SEO)라는 말을 들어 보셨나요?ㅎㅎ;; 몰라도 괜찮습니다.
다만 알아둘것은 검색엔진이 강아지와 고양이사진을 찾을때는
사용자가 올린 사진에 붙은 <img>태그를 찾고, 태그안의 'Alt' 속성에 강아지 또는 고양이가 입력되어 있는지를 확인하고 강아지면 강아지 사진으로, 고양이면 고양이 사진으로 검색되어 사진이 노출되는 것입니다.

즉, 컴퓨터가!
위의 예시에서는 검색엔진이 Semantic Tag를 확인해서 최적의 검색이 되게 만든것 입니다.

2. Semantic Web

이제 Semantic Web이 뭔지 이해하기 쉬울거 같습니다.
Semantic Web이란 Semantic Tag로 만든 웹사이트를 의미합니다.


웹 상에 존재하는 정보들을 컴퓨터가 해독하고 작업하기 용이하게 표현하고 정보간의 관계
를 추출 및 다양한 응용 분야까지 자동화하고 통합된 정보 공유를 한다.
정보자원들의 연결된 의미를 컴퓨터가 이해할 수 있는 형태로 변환한다.
컴퓨터가 정보자원의 뜻을 해석하고, 기계들간의 정보 교환을 하면서 자체적으로 필요한 일을
처리하고 사용자가 필요한 정보를 검색한다. 검색된 정보에서 지식을 추론할 수 있는 기능을 제공한다.

시맨틱 웹의 목표는 인터넷에 방대한 양의 온톨로지로 부터, 이를 자동으로 해석하여 처리할 수 있는 에이전트 소프트웨어에 사람 또는 에이전트가 질의를 하면, 컴퓨터가 자동으로 분산된 온톨로지를 탐색하고 추론하여 원하는 결과를 알려주는 것이다.


이제는 온톨로지 이런게 뭔지 몰라도 위의 글이 무슨말인지 감이 오시죠? :)

profile
함께 성장하는 개발자가 되고 싶습니다.

0개의 댓글