세상의 모든 지식

[별별 웹 용어] 시멘틱 웹(Semantic Web)이란? 본문

Web/별별 개발 이야기

[별별 웹 용어] 시멘틱 웹(Semantic Web)이란?

JuniorEinstein 2018.04.17 12:52

오랜만에 돌아왔습니다! 안녕하세요! 오늘은 '시맨틱 웹(Semantic Web)'이라는 개념에 대해서 알아보려고 합니다!


비슷하게 시맨틱 UI(Semantic UI)라는 CSS 프레임워크가 있는데! 서로 관련은 전혀 없구요 ㅋㅋㅋ


그러면! 시작해보죠.


시맨틱 웹이란?

시맨틱 웹(Semantic Web)"의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다. (물론 사람도 이해할 수 있습니다.)

- Wiki 백과


웹 2.0 시대가 시작되면서 사용자들이 생산하는 정보들이 많아지다가 그 양이 너무 많아졌습니다.


우리에게 필요하고 유익한 정보들도 많지만, 불필요한 정보들도 넘쳐나게 되었죠. 이렇게 되면 사람들이 일일이 수 많은 정보들 가운데에 자신이 필요한 정보를 찾아나서야 하는 문제점이 생기게 됩니다.


이러한 문제점을 해결하기 위한 방법이 "시맨틱 웹"이라는 개념이었고, 웹의 창시자 '팀 버너스 리(Tim Berners-Lee)'가 제안했습니다. (한국인 아닙니다 ^^ 영국사람)


시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해서 우리가 필요로 하는 형태로 가공해주는 것을 의미합니다.


그러기 위해서는 기계가 웹 페이지를 이해할 수 있도록 해주어야 합니다.


그런 의미에서 과거의 웹 문서는 많은 정보를 담지 못했습니다.


예를 들어서 웹 사이트에 대한 설명을 넣고 싶었다면, <body></body>에 직접 웹사이트에 대한 설명을 넣는것 외에는 방법이 없었습니다. 그런데 <body>태그에 들어간 내용들은 사람들에게 보여주고 싶을 때나 아닐때나 항상 보이게 됩니다.


하지만 지금은 <meta>태그를 이용해 다양한 설명과 이미지, 파비콘 등을 지정할 수 있게 되면서 웹 문서에 담을 수 있는 정보들이 늘어났습니다.


시맨틱 웹은 여기에서 한 단계 더 나아간 방식입니다. 웹 문서에 더 많은 정보들을 담을 수 있고, 웹 문서를 크롤링해가는 검색 엔진 로봇들에게 더 많은 정보를 알려줍니다.


예를 들면 이런 방식입니다.


과거에는

1
<div id="header"></div>
cs

로 나타냈던 태그를

1
<header></header>
cs

로 나타내는 것입니다.


차이를 아시겠나요??


로봇은 id가 header라고 적혀 있다고 해서 그 부분이 웹 페이지의 헤더에 해당하는지 알 수 없습니다. 게다가 사람에 따라서는 'pageHeader'과 같이 다른 형태로 header id를 작성하는 사람도 있을 수 있습니다.


하지만 <header>라는 태그를 사용해서 웹 사이트의 헤더를 정의해주면 기계도 이 부분이 웹 페이지의 헤더라는 것을 이해할 수 있습니다.


이 외에도 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<section>
 
<header>
 
<footer>
 
<article>
 
<aside>
 
<nav>
 
<address>
 
<item>
 
<form>
 
<figure>
 
<figcaption>
 
<summary>
 
<time>
 
<mark>
 
<main>
 
<details>
cs


등을 사용할 수 있습니다.


시맨틱 태그들을 사용하면 기계들도 이해할 수 있지만, 다른 개발자들도 어디가 메인인지, 네비게이션인지 쉽게 이해할 수 있습니다.




시맨틱 웹은 앞으로 사람만이 인식할 수 있는 범위의 웹페이지가 아니라 기계가 이해할 수 있는 웹페이지의 표준 언어가 되는 것을 목표로 하고 있습니다.


결론

오늘은 간단하게 시맨틱 웹에 대해서 알아봤습니다. 어떠셨나요? 이 외에도 웹 2.0의 등장과 함께 나타난 웹 신기술들이 되게 많습니다! 차차 알아보도록 하죠!

0 Comments
댓글쓰기 폼