💡 1. 정의
시멘틱 웹이란 직역하면 의미론적 웹으로, 컴퓨터가 인식할 수 있는 시멘틱 태그로 만들어진 웹을 말합니다.
현재의 컴퓨터처럼 사람이 마우스나 키보드를 이용해 원하는 정보를 찾아 눈으로 보고 이해하는 웹이 아니라, 컴퓨터가 이해할 수 있는 웹을 말한다. 즉 사람이 읽고 해석하기에 편리하게 설계되어 있는 현재의 웹 대신에 컴퓨터가 이해할 수 있는 형태의 새로운 언어로 표현해 기계들끼리 서로 의사소통을 할 수 있는 지능형 웹이다.
[네이버 지식백과] 시맨틱 웹 [Semantic Web] (손에 잡히는 IT 시사용어, 2008.02.01)
컴퓨터가 정보자원의 뜻을 이해하고, 논리적 추론까지 할 수 있는 차세대 지능형 웹
💡 2. 사용이유
의미론적인 웹이란 이름으로도 알 수 있듯이, 단순히 나열된 문장과 자원들을 시멘틱 태그를 사용하여 의미를 명확하게 부여하여 브라우저, 검색엔진, 개발자 모두가 이해할 수 있게 됩니다.
현재의 웹페이지도 Bot의 어떠한 알고리즘으로 header, content, footer 등을 클래스나 ID로 구분하여 수집하여 검색 등 데이터 자료로 활용하고 있지만,
시멘틱 태그를 사용하면 훨씬 효율적으로 컴퓨터가 자료처리가 가능해집니다.
시맨틱 웹이 실현되면 컴퓨터가 자동으로 정보를 처리할 수 있어 정보 시스템의 생산성과 효율성이 극대화된다. 컴퓨터 혼자 전자상거래를 할 수 있고, 기업의 시스템 통합(SI), 지능형 로봇 시스템, 의료 정보화 등 다양한 분야에 응용할 수 있다. 웹의 창시자인 팀버너스리가 1998년 제안했으며, 현재는 W3C에 의해 표준화 작업이 진행 중이다.
[네이버 지식백과] 시맨틱 웹 [Semantic Web] (손에 잡히는 IT 시사용어, 2008.02.01)
💡 3. 기존 웹과 차이점
non-semantic Tag vs semantic Tag
> 기존 웹
<div class="header">
웹 페이지 제목입니다.
</div>
<div class="content">
유용한 설명입니다.
</div>
<div class="footer">
copylight
</div>> 시멘틱 태그를 활용한 웹
<header>
웹 페이지 제목입니다.
</header>
<main>
유용한 설명입니다.
</main>
<footer>
copylight
</footer>
레이아웃 구분을 class로 한 기존 웹 코드를 보면 가독성이 떨어져 보입니다.
반면, 시멘틱 테그로 짜여진 코드를 보면 명확하고 가독성 또한 좋아 시스템 뿐만 아니라 개발자의 생산성과 효율성도 증가할 것 같습니다.
💡 4. Semantic Tag
> html5 Semantic Tag
| Tag | 설명 |
|---|---|
<article> | 독립적인 콘텐츠 정의 |
<aside> | 메인 컨텐츠 외 부가 컨텐츠 정의 |
<details> | 사용자가 보거나 숨길 수 있는 추가 세부 정보 정의 |
<figcaption> | <fiqure> 요소에 대한 캡션을 정의 |
<figure> | 그림, 다이어그램, 사진, 코드 등과 같은 자체 포함 콘텐츠를 지정 |
<footer> | 문서 또는 섹션에 대한 바닥글 정의 |
<header> | 문서 또는 섹션에 대한 머리글 지정 |
<main> | 문서의 기본 내용 지정 |
<mark> | 표시/강조 텍스트 |
<nav> | 네비게이션 링크 정의 |
<section> | 문서에서 섹션 정의 |
<summary> | <details>요소에 대해 표시되는 제목 정의 |
<time> | 날짜/시간 정의 |
> HTML5 레이아웃 예
💡 5. <img>와 <div> 의 차이점을 설명하실 수 있나요?
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
이미지 태그를 사용하게 되면 브라우저가 명확하게 이미지로 인식하여 그에 맞는 대우를 합니다.
먼저, 웹 접근석 측면에서는 그림을 정상적으로 읽어 오지 않을 경우 alt 속성에 적힌 값을 표출하거나, 시각 장애인을 위해 청각 자료로써도 활용할 수 있습니다.
검색 엔진의 경우에도 img태그가 있다면 유용한 데이터를 담은 페이지로 분류하여 검색 결과 상위에 노출될 가능성도 있을 것 같습니다.
(성능 측면으로는 브라우저 랜더링 엔진마다 구현의 차이가 존재하기때문에 크게 신경을 쓰지 않아도 될 것 같습니다.)
반면, div태그를 사용하게 될 경우에는 컴퓨터는 이 그림을 유용한 자료가 아닐 것으로 취급합니다.
따라서, 단순히 디자인 효과를 위한 이미지이거나 자료로서 가치가 없다고 판단될 경우에는 div 태그를 사용하고,
자료로서 활용될 가치가 있는 이미지일 경우에는 img태그를 사용하여 명확히 구분해 주는 것이 지능형 웹에 적합한 페이지가 되겠습니다.
