[Semantic Web/Tag] 웹을 가치있는 정보로 만들기

Semantic Web/Tag란 무엇이며,
왜 웹 개발 과정에서 중요하게 여겨질까?

 

Today I Learned #.1
- Front-end web development / HTML, CSS

1. Semantic Web/Tag란?
2. Semantic Web/Tag가 중요한 이유
3. Semantic Web/Tag 예시

 

1. Semantic Web/Tag란?

Front-end web 개발 현장에서 쓰이는 용어로,

번역하면 의미론적 웹/태그라고 풀이된다.

 

의미론은

어떤 언어 표현의 의미를 연구하는 것이니,

 

웹과 태그가

전체 맥락 안에서 가지는 '의미'에 주목해보면,

 

Semantic Web/Tag는
어떤 의도와 뜻을 가진 웹/태그라고 이해된다.

 

 

2. Semantic Web/Tag가 중요한 이유

어떤 의도와 뜻을 가진 태그로 이루어진
어떤 의도와 뜻을 가진 웹은 가치있는 정보이기 때문이다.

가치... 좋지...

근데 왜 별안간 웹 개발에서 가치 타령일까??

 

       " 웹 = 정보 "       

웹은 근본적으로 '인터넷을 통해 주고받는 정보의 집합'이다.

 

정보로써 기능이 발휘되어야

비로소 웹이라고 부를 수 있는 것이다.

 

 

사람이나 컴퓨터가

내가 만든 웹을 딱 맞닥뜨렸는데

무슨 의도를 가진 웹인지,

각 영역은 어떤 뜻을 지니는지,

도대체 확인하기 힘들다?

 

삐빕-

그거슨 이해하기 어려운 정보.

= '모르는 걸 알게해주는' 정보의 근본적 역할을 수행하지 못함.

= 활용하기 힘듦.

= 쓸모 없음.

= 웹이라 하기 부끄러움.

= 호...애써 만든 내 웹이 가치가 없다니....

가 되면 너무 슬프니까!

 

웹 개발에서 Semantic Web/Tag라는 개념이

중요하게 다뤄지는 듯하다.

 

 

3. Semantic Web/Tag 예시

의미론적 웹을 만드는 의미론적 태그는 다음과 같다.

article	본문
aside	광고와 같이 페이지의 내용과는 관계가 적은 내용들
details	기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
figure	삽화나 다이어그램과 같은 부가적인 요소를 정의
footer	화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
header	화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
main	문서에서 가장 중심이 되는 컨텐츠를 정의
mark	참조나 하이라이트 표시를 필요로 하는 문자를 정의
nav	문서의 네비게이션 항목을 정의
section	문서의 구획들을 정의 (참고)
time	시간을 정의

출처 - https://opentutorials.org/module/1892/10954

 

예를들어,

위 태그들로

header
nav	main	section	figure	a s i d e
			article
		section	figure
			article
footer

이렇게 영역마다 의도와 역할이 살아있는 구조물을 구성하면,

의미론적 웹이 완성....되지 않는다.

 

전체 맥락 안에서

각 요소의 태그가 적절하게 붙어야

의미론적 웹이 완성된다.

 

쓸데없이 언급해서 tmi인 웹을 만들거나,

중요한데 대충 짚고 넘어가는 불친절한 웹은

의미론적 웹이 아니라는 말이다.

 

 

단순한 예를들어,

같은 고양이 사진을 A웹, B웹에서 동일하게 썼다고 해보자.

 

A웹은 고양이를 설명하는 페이지이고,

B웹은 어려운 개발용어를 설명하는 페이지이다.

 

내용상

A웹에서 고양이 사진은 설명 자료로,

B웹에서 고양이 사진은 기분 전환 짤로 쓰였다.

 

의미론적 웹을 만드려면,

A웹에서 고양이 사진은 HTML <img>태그를 걸고,

B웹에서 고양이 사진은 CSS background-image 속성으로 추가하는 것이 좋다.

 

물론 고양이 사진은 언제나 핵심이라서 늘 <main>태그를 달아줘야한다..(?)

 

 

미래의 나야.. 나 잘 배운 거 맞지.......?

끗.