[Network/Topic] 시맨틱(Semantic), 시맨틱 웹(Semantic Web)이란?

시맨틱(Semantic)

프로그래밍에서 시맨틱이란 코드 조각이 갖는 의미를 나타냅니다. 예를 들어 "시각적으로 어떻게 보이는지"가 아닌 "어떤 목적을 지니고 있는지"에 가깝습니다.

프로그램 코드 관점에서의 시맨틱

자바 스크립트에서 <li> Element를 생성하기 위해 textContext 문자열을 매개 변수로 요청하는 함수를 가정합니다. 함수의 이름을 build('Path')으로 작명하는 것보다 createLiWithContext('Path')으로 작명하는 것이 함수의 기능 파악에 유리합니다. 프로그램 코드 관점에서 기능을 내포하고 있는 함수 이름은 시맨틱이라고 볼 수 있습니다.

시맨틱 웹(Semantic Web)

다음과 같은 HTML 구문이 있다고 가정합니다. 웹 브라우저는 <h1> Element를 게시물의 제목(Heading)처럼 보이도록 스타일을 만드는 것이 일반적입니다.

<h1>This is a top level heading</h1>

반면 비슷한 효과를 다음과 같은 HTML 구문으로 대체 할 수 있습니다.

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

원본의 HTML 구문을 얼마나 완벽하게 재현하고 있는지에 관계 없이, 원본의 <h1> Element는 시맨틱으로 볼 수 있으나 대체문은 그렇지 않습니다. 원본은 "시각적으로 어떻게 보이는지" 와 동시에 웹 브라우저와 검색 엔진에서 "어떤 목적을 지니고 있는지"의 역할을 수행하기 때문입니다.  따라서 원본의 Tag가 "시각적으로 보이는 형태"를 완벽하게 재현하더라도 대체문은 시맨틱이 될 수 없습니다.

• 검색 엔진은 유의미한 Element를 중요한 검색 키워드로 사용합니다.
• 시각 장애가 있는 사용자가 화면 판독기로 게시글을 탐색 할 때 유의미한 목적으로 사용합니다.
• 개발자에게는 태그 안에 채워질 데이터 유형에 대한 일관성을 제시합니다.
• 그 외 유의미한 역할들

이처럼 시맨틱으로 구성된 웹 페이지 등을 시맨틱 웹(Semantic Web)이라고 부릅니다. 시맨틱 웹은 의미론적 웹을 의미하며, 좀 더 구체적으로는 기계가 이해 할 수 있는 웹을 뜻합니다.

• 위의 예시에서 <h1>과 유사한 시각적 효과를 만드는 방식은 개발자에 따라서 차이가 있습니다.
• 사람은 시각적인 차이를 통해 어떤 Element가 제목(Heading)인지 알 수 있으나, 기계 입장에서 불가능합니다.
• 따라서 제목의 역할을 수행하는 명확한 <h1> Element를  규정하고, 기계가 웹에서 <h1> Element를 찾도록 합니다.

시맨틱 웹을 구성하는 의미론적 Element는 다음과 같습니다.

• <article>
• <details>
• <figcatpion>
• <figure>
• <footer>
• <header>
• <main>
• 그 외 백 여개의 Element

Semantics - 용어 사전 | MDN