1. What is the Semantic?

semantic이란 사전적으로 '의미론적'이라는 뜻이고 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고 이를 컴퓨터가 처리하도록 하는 프레임워크이자 기술을 말한다.

*온톨로지(Ontology): 사전적 의미는 '실제의미', '존재론'으로, 사람들이 보고 듣고 느끼고 생각하는 것에 대한 토론을 통해 합의를 이룬 바를, 개념적이고 컴퓨터에서 다룰 수 있는 형태로 표현한 모델로, 개념의 타입이나 사용상의 제약조건들을 명시적으로 정의한 기술이다. Semantic web에서의 온톨로지는 각각의 지식이 전체 지식 체계 중에서 어디에 위치하는지를 밝히는 연구분야를 의미한다.

2. What is the Semantic Web?

웹의 창시자 팀 버너스리가 2001년에 웹 기술의 비전으로 제시한 개념이다. 웹 기술은 키워드 중심으로 데이터에 접근하는데, 이로 인해 사용자 입장에서 불필요한 정보들이 넘쳐나고 있다. 이러한 문제들의 근본 원인은 컴퓨터가 정보자원의 의미를 이해하지 못하기 때문이다. 이를 개선하고자 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행함으로써 인간과 컴퓨터 모두 잘 이해할 수 있는 웹을 만들고 있다. 이러한 의미론적인 웹을 Semantic Web이라고 한다.

3. What is the Semantic Tag?

예를 들면, 벨로그 #12에서 정리했듯이, 일반적으로 웹 페이지를 디자인할 때 header, navigation bar, aside bar, section, footer 등으로 나누어서 구성하게 된다. HTML4 버전에서는 분할을 뜻하는 divion의 약자로 <div> 태그를 사용했다면 HTML5 버전부터는 <header>, <nav>, <aside>, <section>, <footer> 태그를 사용하여 웹을 더 쉽게 구성할 수 있게 되었다. 이러한 의미론적인 태그를 semantic tags라고 한다.

4. Quiz

웹사이트에 이미지를 넣는 방법은 2가지가 있다. <img>태그를 사용하는 것과 <div>태그에 background-image속성을 추가하는 방법의 차이점은 무엇이 있을까? 각각 어떠한 경우에 사용하면 좋을지 알아보자.

img 태그는 HTML에서 사용할 수 있고 alt를 추가할 수 있고, 에러가 나면 화면에 노출된다. 반면에 background-image속성은 CSS에서 사용할 수 있지만 에러가 났을 때 어떠한 텍스트도 노출되지 않는다. 또한 background-image를 사용하면 구글 검색 등에 노출되지 않는다. 따라서 이미지가 에러화면을 노출하는 리스크 이상으로 사용자가 컨텐츠를 이해하는 것에 도움을 더 준다면 img태그를 쓰고, 그렇지 않으면 background-image 속성을 사용한다.

"이미지 로드에 실패하면 어떻게 되나요??"

<img>tag: 깨진 이미지가 화면에 노출되고 alt 텍스트가 보인다.
background-image: 이미지 로딩에 실패할 뿐, 화면에는 아무것도 보이지 않는다.