Semantic Web & Semantic Tag

Eye0n·2021년 5월 11일
1

시멘틱이란?

사전적 의미로 "의미의, 의미론적인"를 가진다.
즉, 간단히 말하자면 시멘틱 웹과 시멘틱 태그는 의미를 가진 웹과 태그인데
여기서 "의미를 가진"에 초점을 두어 글을 읽어보자.

시멘틱의 등장배경


기존 웹은 사용자가 문서를 읽기 쉽도록 정보를 표현하는것에 중점을 두었고 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어 이로 인해 모든 정보를 사용자가 직접 처리하여야 하는 문제가 있었다.
컴퓨터가 의미정보를 해석하고 정보 간의 관계를 이해하는데 어려움이 생겼고 이를 해결하고자 등장한 개념이 시멘틱이다.

예를 들자면

1번
<div>header<div>

2번
<header>header<header>

1번은 tag를 보면 사람의 경우 div tag가 헤더라는 것을 인지하지만 컴퓨터는 단지 div태그에 content가 header로 되어있다 정도만 인식한다.
다시말해 header를 위한 tag인 div가 아닌 단순히 div가 있는 정도로 여긴다.

2번은 tag만 봐도 header인 것을 알 수 있고 컴퓨터도 header tag만 봐도 제목이라는 의미를 알 수 있다.

그러면 컴퓨터가 어떻게 웹의 정보를 얻고 tag를 인식하는지 알아보자.

컴퓨터가 웹의 정보를 얻는 방법

일단 정보를 획득하는 주체는 검색 엔진의 로봇(robot)이다.

검색 엔진이 뭐냐면?

컴퓨터 시스템에 저장된 정보를 찾아주는 것을 도와주도록 설계된 정보 검색 시스템이다.
검색 된 정보는 리스트 형태로 표현되는게 일반적이다.

검색 엔진도 여러 종류가 있는데 (ex 인간 검색 엔진, 메타 검색 엔진 여러 등등)
웹에서는 웹 검색 엔진을 사용해 정보를 획득한다.

웹 검색 엔진의 로봇이 어떻게 수집하냐면?

자동적으로 웹 사이트를 돌아다니면서 웹에 대한 정보 미리를 수집하고 이후 검색 엔진 사이트에서 특정 단어를 검색하면 미리 수집된 정보에서 그에 맞는 정보를 반환해 준다.

검색 엔진은 문서 수집(크롤링) -> 색인(인덱싱) -> 검색 순으로 획득한 정보를 처리한다.

  • 크롤링
    로봇(프로그램)을 이용해 매일 전세계의 웹사이트 정보를 수집
  • 인덱싱(색인)
    페이지의 내용은 색인을 위해 분석된다. 예를 들어 문서 제목, 페이지 내용, 목차, 기타 등등으로 영역을 나누어 추출하고 분석한다. 이후 검색어가 들어올 것을 대비해 이 웹페이지 데이터는 DB에 적절히 색인된다. 이는 검색 엔진의 인덱서라는 아이가 수행한다.
    (색인은 문서 안에서 개별 어휘가 문서의 어디에 있는지르 확인해 축적하는 방식으로 만들어진다.)

인덱스를 생성할 때 사용되는 정보가 문서 제목, 페이지 내용, 목차 등이 있는데 결국 웹사이트의 HTML tags이다.

즉, 검색 엔진은 HTML 코드만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.

Semantic Web이란?

위키피디아에서
"시맨틱 웹(Semantic Web)은 의미론적인 웹이라는 뜻으로, 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다."

쉽게 말해 사용자가 읽기 편한 문서 정보를 이해할 수 없는 컴퓨터를 위해
정보 의미정보 간의 관계를 컴퓨터가 이해할 수 있는 표현으로 바꿔서
자동적으로 처리 가능하게 만들기 위한 기술이다.

다른 말로는

웹이 존재하는 수 많은 웹페이지들에 메타 데이터를 부여하여, 기존의 잡다한 데이터 집합이였던 웹페이지를 의미와 관련성을 가진 거대한 데이터베이스 구축하고자 하는 발상이다. - poienweb

온톨로지(Ontology)란 
사람들이 세상에 대하여 보고 듣고 느끼고 생각하는 것에 대하여 서로 간의 토론을 통하여 합의를
이룬 바를, 개념적이고 컴퓨터에서 다룰 수 있는 형태로 표현한 모델로, 개념의 타입이나 
사용상의 제약조건들을 명시적으로 정의한 기술이다. - 위키백과

메타데이터(metadata)는
데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 데이터이다. 

semantic tags란?

시멕틱 태그란 시멘틱 요소라고도 불린다.
시멘틱 요소들은 검색 엔진에 보다 의미있는 문서 정보를 전달할 수 있고 이를 이용한 검색 엔진이 보다 효과적인 크롤링과 인덱싱을 할 수 있게 된다.

인덱싱 과정에 정보 의미와 관련성이 내포되어 있기 때문에 보다 우선 순위가 높은 색인을 가지게 된다.

이를 이용해 기존 보다 검색이 더 잘되기 위해 사용하는 SEO(검색 엔진 최적화) 등장하였는데 이부분은 나중에 다뤄보자.

또한 개발자에게도 시멘틱 태그를 사용한 코드를 보면 구조적으로 눈에 더 잘들어 온다.

즉, 시멘틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

의미론적 요소(element)들

  • non-semantic 요소
    div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

  • semantic 요소
    form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다,

다음은 HTML5에서 새롭게 추가된 시맨틱 태그이다.

tagDescription
header화면 상단에 위치하는 사이트나 문서의 정보를 정의
nav문서의 네비게이션 항목을 정의
aside페이지의 주요 내용 외의 내용을 정의한다.
section본문의 여러내용(article)을 포함하는 공간
article본문의 주내용이 들어가는 공간
section내에서 하나의 기사를 article 태그로 감쌀 수 있다.
article내에서도 section태그가 있을 수 있다.
footer화면 하단에 위치하는 사이트나 문서의 정보를 정의
details사용자가 보거나 숨길 수 있는 추가적인 세부정보를 정의
figcaptionfigure 에 대한 자막 정의
figure사진이나 다이어그램과 같은 부가적인 요소를 정의
main문서의 주가 되는 컨텐츠를 정의
mark참조나 하이라이트 표시를 필요로 하는 문자를 정의
summarydetils에 대한 보이는 요소를 정의
time날짜/시간 정의

img tag VS background-image

사이트에 이미지를 넣는 방법은 두가지가 있는데 img태그를 사용하는 것과 css속성인 background-image를 넣는 방법이다.

두개의 경우는 상황과 개발자의 의도에 따라 사용됌이 달라져야한다.
이미지 자체를 콘텐츠로 보여주기 위해 즉, 시멘틱하게 만들기 위해선 img태그를 사용하는것이 알맞다.

단지 이미지로 배경을 꾸미지 위해 사용하는 것은 background-image가 맞다 왜냐? 배경은 의미를 가질 필요가 없기 때문이다.

img태그는 시멘틱 태그 중 하나로 검색엔진에 노출되어 사용자의 검색에 따라 보여질 수 있으나 background-image는 검색으로 노출 되지 않는다. 왜냐하면 검색 엔진이 수집하는 대상이 아니기때문이다. 즉 시멘틱하지 못하기 때문이다.

또한 img 태그는 alt 속성이 있어서 이미지가 출력이 안될 때 대체 텍스트가 출력되어 사용자에게 정보를 의미있게 전달할 수 있다.

이러한 차이가 있기 때문에 개발자의 의도에 따라 적절하게 사용해야한다.

reference

mdn
wikipedia
poienweb
w3s

0개의 댓글