Semantic: 의미론의, 의미의
Semantic web을 직역하자면 '의미의 웹'이다.
...한국어가 맞다 싶다.
좀 더 풀어 이야기 하자면 '의미스러운 웹', 나아가 '의미를 담고 있는 웹'으로 말할 수 있다.
즉, Sementic web은 리소스(웹문서 등)에 대한 의미있는 정보를 기계(컴퓨터)가 인식할 수 있도록 하는 기술이다.
어떻게?
다양한 시맨틱 태그를 통해 컴퓨터가 정보의 의미를 인식할 수 있도록 한다.
<header>
제목, 로고, 검색 폼, 작성자 이름 등의 요소가 포함된다. '소개 및 탐색에 도움을 주는 콘텐츠'를 담는 곳으로 웹 검색을 할 때, 이 태그에 있는 언어는 노출될 확률이 높다.
<h1>
가장 중요한 글, 즉, 제목을 나타낸다. 그냥 폰트 사이즈를 키우는 것은 이 글의 중요도를 나타낼 수 없다.
<nav>
문서의 현재 페이지, 혹은 다른 페이지 링크를 보여주는 구획이다. (쉽게 말해 네비게이션 바 부분이다.) 메뉴, 목차, 색인 등의 요소가 포함된다.
<aside>
문서의 주된 내용과 '간접적으로 연관'이 있는 부분을 나타낸다. 주로 사이드바 또는 콜아웃 박스로 표현한다.
<section>
웹 문서의 독립적인 구획을 나타낸다.
<article>
문서, 페이지, 앱, 사이트 내 독립적으로 구분해 배포하거나, 재사용할 수 있는 구획을 나타낸다. 뉴스 기사를 보면 여러 개의 칼럼이 박싱되어 있는 것처럼 보이는데, 그런 칼럼 하나하나를 article 태그를 통해 구성할 수 있다.
<footer>
화면에서 맨아래쪽에 구성되는 부분이다. 작성자, 저작권 정보, 관련 문서 등의 내용을 담고 있다. 위의 태그들은 각각 고유의 의미를 지니고 있다. 그 중 중요도가 높은 태그 내에 있는 단어가 검색될 때, 글이 검색창에 노출될 확률이 높아진다.
이런 태그를 Semantic tag라고 한다.
의미를 담고 있는 태그이기 때문이다.
사람이 사람의 언어를 통해 작성한 코드를,
컴퓨터가 알아서 의미를 파악하고 중요도를 인식할 수 있다는 것은
획기적인 일이다.
보다 인간답고 사람-친화적인 웹을 구현할 수 있기 때문이다.
🗣 상황 설정
개발자 직군의 면접날이다.
아래의 면접 질문을 마주하면 나는 뭐라고 대답할까?
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
"<img> 태그는 "이 정보는 이미지이다"라는 정보를 담고 있습니다. src 속성도 '이미지소스를 불러오는 주소가 이곳이다'라는 정보를 담고 있습니다.
또한, alt 속성을 통해 그림이 출력되지 않을 경우를 대비해 설명을 덧붙일 수 있기 때문에 정보의 비차별성을 지킬 수 있죠.
반면, <div> 태그는 순수 컨테이너로서 아무 정보도 표현하지 않습니다. 그러나 background-image가 '이 이미지는 배경이 되는 이미지이다'라는 정보를 담고 있고, url을 여러 번 추가해 여러 개의 배경 이미지를 넣을 수 있다는 장점이 있습니다.
따라서, Semantic web을 구현해서 보다 정확한 정보를 제공하고 사람-친화적인 웹을 구현하기 위해서는
정보를 담은 이미지를 제공할 때 <img> 태그를 사용하고
배경 이미지를 구성할 때 <div> 태그의 background-image 속성을 사용하는 것이 좋다고 생각합니다."
정리
면접이라는 상황 설정을 해서 글을 정리하니, 정보를 더 꼼꼼히 찾아보게 돼서 머리에 잘 각인된다.
앞으로도 종종 이런 설정을 통해 글을 정리해봐야겠다.
Semantic Web, Semantic Tag 끝-
