Semantic Web

1. Semantic Web이란?

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

Semantic Web의 등장 배경

웹 기술이 발달됨에 따라 웹상에 축적된 정보가 방대해 짐에 따라 무수히 많은 불필요한 정보가 생산되고 정보 홍수를 가중시키고 있다. 시멘틱 웹 이전의 웹은 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리하여야 하는 문제가 있었다. 이 문제의 근본적인 원인은 컴퓨터가 정보 자원의 의미를 이해하지 못하는데 있었고, 팀 버너스리 Tim Berners-Lee는 이러한 문제를 해결하기 위한 비전으로 시멘틱 웹을 제시하였다.

Semantic Web의 목표

시멘틱 웹은 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic interoperability)을 실현하며, 다양한 정보 자원의 처리 자동화, 데이터의 통합 및 재사용 등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터가 모두 잘 이해할 수 있는 웹을 만드는 것을 목표로 한다.

[참고] 온톨로지란?

사람들이 세상에 대하여 보고 듣고 느끼고 생각하는 것에 대해 서로 간의 토론을 통하여 합의를 이룬바를, 개념적이고 컴퓨터에서 다룰 수 있는 형태로 표현한 모델로, 개념의 타입이나 제약 조건들을 명시적으로 정의한 기술이다. 프로그램과 인간이 지식을 공유하는데 도움을 주기 위한 온톨로지는, 정보시스템의 대상이 되는 자원의 개념을 명확하게 정의하고 상세하게 기술하여 보다 정확한 정보를 찾을 수 있도록 하는데 목적이 있다. RDF, OWL, SWRL 등의 언어를 이용해 표현한다.

2. Semantic Web의 응용

의미적 메타데이터 체계를 구축하고 이를 활용하고자 하는 다양한 분야에서 활발하게 활용되고 있다.

• 커뮤니티, 블로그
• 데이터 통합
• 포탈 및 검색
• 시맨틱 웹 서비스
• 기업 소프트웨어
• 지식 관리
• 비즈니스 인텔리전스
• 가상 공동체에 대한 연결
• 멀티미디어 데이터 관리
• 콘텐츠 어댑테이션 및 명명

---

Semantic Tag

1. HTML5의 Semantic Tag

이러한 시멘틱 웹의 등장과 비전에 맞게 시멘틱 태그들이 등장하게 되었다. HTML5에서 시맨틱 태그들은 특정 태그를 정의하여 해당 태그에 포함된 콘텐츠가 어떤 역할을 하는지 명확하게 표시하고 컴퓨터가 해당 페이지를 잘 이해할 수 있도록 돕는다.

2. HTML5와 그 이전 HTML의 차이점

<!-- HTML5 이전 -->
<div id="header">
	<!-- header contents-->
</div>

<!-- HTML5 이후 -->
<header>
	<!-- header contents-->
</header>

HTML5 이전에는 <div>와 <span>에 id와 class를 붙여 나누고 스타일링을 지정했다. 이렇게 두 개의 태그만을 이용하여 웹 페이지를 만드는데 문제는 없지만, 웹 접근성(Web Accessibility) 차원에서 문제가 된다.

시각 장애인은 스크린 리더와 같은 문서를 소리로 바꿔주는 장치를 이용해야 하는데 이러한 부분에서 두 가지 태그만을 이용하여 웹을 구성 했을 때보다 특정한 의미가 정의된 태그를 이용하였을 때, 코드의 가독성이 높아지고 의미를 명확하게 할 수 있기 때문에 문서를 소리로 변환하는데 훨씬 효율적일 것이다.

또, 두 개의 태그만을 사용하는 것이 아닌 시멘틱 태그를 통해 작성하면 검색 엔진 최적화(SEO: Search Engine Optimization) 하는데 유리하다.

구글의 웹 크롤러가 웹 페이지를 크롤링할 때 어떠한 콘텐츠가 중요한지, 또 어떤 것은 보조의 역할을 하고, 네비게이션의 역할을 하는지 등을 시멘틱 태그를 통해 보다 쉽게 이해할 수 있다. 상식적으로 시멘틱 태그를 통해 잘 구조화된 페이지는 그렇지 않은 페이지에 비해 컴퓨터가 잘 이해할 수 있을 것이고, 그만큼 상위 페이지에 노출될 확률이 높아질 것이다. (실제 알고리즘이 그러한지는 알 수 없다.)

[참고] 웹 접근성 Web Accessibility

웹 사이트, 도구, 기술이 장애를 가진 사용자들이 사용할 수 있도록 설계 및 개발된 것을 말한다.

자세한 내용은 링크(W3C: Introduction to Accessibility) 참고

2. Non-semantic Tag, Semantic Tag

• Non-semantic Tag: <div>, <span>
• Semantic Tag
  • <article> - 나머지 부분과 독립적으로 자체의 의미를 가지는 콘텐츠를 정의한다. 게시물, 블로그 포스트, 뉴스 기사 등.
  • <aside> - 페이지 콘텐츠를 제외한 콘텐츠를 정의한다. 링크, 광고, 사이드바 표시 등.
  • <details> - 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의한다.
  • <figcaption> - <figure> 요소에 대한 캡션을 정의한다.
  • <figure> - 일러스트, 다이어그램, 사진, 코드 목록 등과 같은 자체 콘텐츠를 지정한다.
  • <footer> - 문서 또는 섹션의 바닥글을 지정한다. 저작권, 연락처 정보 등.
  • <header> - 문서나 섹션의 머릿글을 지정한다. 검색창, <nav>를 이용한 네비게이션 등.
  • <main> - 문서의 주요 콘텐츠를 지정한다.
  • <mark> - 강조 표시된 텍스트를 정의한다. 노란색 형광팬을 칠한 느낌.
  • <nav> - 네비게이션 링크를 정의한다. 같은 사이트 내의 링크나 다른 사이트로의 링크 모음.
  • <section> - <header>, <footer>와 함께 문서의 구역을 정의한다. <section> 안에 <section>을 넣을 수도 있고, <article>을 이용해 콘텐츠를 넣는다.
  • <summary> - <details> 요소를 위한 눈에 보이는 제목을 정의한다.
  • <time> - 날짜/시간을 정의한다.

---

[참고] HTML의 <img> 태그와 CSS의 background-image 를 통한 이미지 삽입의 차이

• 이미지가 그 자체로 콘텐츠로 인식이 되는 경우(의미있는 정보)에는 <img>태그를 사용한다. <img> 태그를 사용하면 에러가 발생하여 이미지가 깨져도 어떠한 이미지 인지 alt 속성으로 이해할 수 있다. (예를 들어, 뉴스 페이지에서 해당 뉴스에 대한 이미지를 게시하는 경우 이미지가 그 자체로도 의미있는 내용이므로 <img>태그를 사용하는 것이 맞다.)
• 위와 같이 이미지가 콘텐츠가 아닌 단순히 배경화면, 디자인적 요소로 존재한다면 backgorund-image를 사용한다.