시멘틱 웹이란?
HTML와 웹을 공부하다 보면 '시멘틱 웹'이라는 개념을 심심치 않게 볼 수 있다.
웹을 공부하는 사람으로서 한번 정리하고 넘어가면 좋을 개념이라고 생각해 오늘 정리를 한번 해보려고 한다.
먼저 위키피디아에서 시멘틱 웹에 대한 정의를 찾아보면, 다음과 같다.
시멘틱 웹은 W3C에 의해 세워진 기준으로 WWW의 확장판이다.
시멘틱 웹의 목표는 인터넷 데이터를 기계가 읽을 수 있게 만드는 것이다. 데이터를 언어학적으로 해석이 가능하게 만들기 위해 RDF나 OWL 같은 기술이 사용된다. 미리 포함된 시맨틱은 서로 다른 데이터 소스의 연산과 데이터 사이의 추론에 대해 어드벤티지를 제공한다.
여기서 잠깐! ⚡️
RDF란 Resource Description Framework의 약자로서 W3C에서 만든 메타 데이터 데이터 모델로 고안한 표준의 일환이다. 웹 리소스 상에 있는 정보의 모델링이나 개념적 묘사를 위한 방법론이라고 볼 수 있다.OWL이란 Web Ontology Language의 약자로 온톨로지를 쓰는 (시멘틱 웹 생성) 언어라고 한다. 어떤 객체들의 계층(Class)을 나타내는 명사, 객체들 사이의 관계를 나타내는 동사 등의 구조를 정의하는 방법이라고 볼 수 있다.
좀 더 쉽게 말하면 어떤 단어들을 구성하는 용어(term)의 의미와 그 용어들 간의 관계를 명시적으로 표현하는 것이다.
예를 들어 자식, 어머니 라는 단어가 있다고 가정했을 때, 우리는 저 단어들 사이의 어떤 관계가 있다는 것을 알 수 있다.
RDF에 대해 더 자세하게 알고 싶으면 이 링크를 참고하자.
OWL도 더 자세하게 알고 싶다면, 이 링크를 참고하자.
W3C은 시멘틱 웹을 다음과 같이 정의한다.
"시멘틱 웹은 어플리케이션/기업/커뮤니티 등 간의 공유 가능하고, 재사용 가능한 공통적인 프레임워크를 제공한다."
누가 만든 용어일까?
시멘틱 웹이라는 단어는 웹의 아버지 '팀 버너스 리'에 의해 만들어졌다.
그는 웹 상에 있는 모든 데이터가 분석 가능해지는 웹을 꿈꿔왔다고 한다. 그는 시멘틱 웹은 그걸 가능하게 만들 것이고, 이게 가능해진 세상에서는 그 날 그 날 행해지는 트레이드, 관료체제, 일상이 기계가 기계에게 이야기하는 것으로써 통제될 것이라고 생각했다. (쉽게 말해서, 웹 상의 모든 데이터가 의미를 가질 수 있다고 생각한 것 같다.)
그럼 시멘틱은 뭐야?
정의를 보니 계속 '시멘틱'이라는 단어가 나온다. 이 단어의 뜻도 한번 알아보자.
구글에 시멘틱을 검색해보면, '단어나 기호 같은 언어 요소의 의미 사이의 관계를 파악하는 것' 정도로 그 의미를 알 수 있다.
즉, 간단하게 생각하면 '우리가 사용하는 언어에서 단어의 의미를 파악할 수 있기 위함' 인 것이다.
총 정리를 해보면, 시멘틱 웹은 '웹 상에 있는 모든 데이터(사람이 보면 어떤 의미론적 관계를 추론할 수 있는 데이터 포함)를 기계가 읽게 만들 수 있게 하기 위한 작업'이라고 볼 수 있다.
이제 시멘틱 웹의 정의에 대해 대략 알아보았으니, 이제 이걸 왜 우리가 익혀야 하는지 궁금할 것이다.
시멘틱 웹이 필요한 이유
시멘틱 웹이 필요한 이유는 웹이 계속 성장해서 복잡해지기 때문이다.
1991년 첫번째 웹사이트가 나온 이후로 지금은 셀 수 없이 수 많은 웹사이트가 존재한다.
수 많은 웹사이트를 확인하면서 내가 원하는 사이트를 찾는 것은 거의 불가능에 가깝다. 그러므로 우리는 웹에서 원하는 정보,사이트를 찾기 위해 검색 엔진을 사용한다.
이 검색 엔진들은 정보를 인덱싱해서 의미 있는 검색에 연결시키려면 이 웹사이트가 어떤 정보를 파악하고 있는지 알아야 한다.
거꾸로 말하면 검색 엔진에 내가 만든 사이트가 검색 결과에 잘 나오게 하려면 '검색엔진 최적화'(SEO)를 하게 되는데 이 때도 시멘틱 웹이 적용된다.
이 밖에도 서로 다른 시스템 간의 통합이 필요할 때 데이터베이스 스키마 매칭 문제 등을 해결할 때도 시멘틱 웹이 사용된다고 한다.
위의 이야기를 종합하면, 시멘틱 웹은 결국 HTML 문서에 적용된다는 것을 알 수 있다. HTML 문서는 결국 HTML 태그의 집합인데, 이 문서에서 시멘틱 웹을 잘 구현하려면 HTML 문서에 시멘틱 요소를 집어 넣어야한다.
웹 문서는 기본적으로 개발자가 설계하기 나름이기 때문에 어떤 태그를 사용해서 문서를 만드느냐에 따라 그 문서가 가지는 의의가 정해지기 때문이다.
그래서 HTML5부터 시멘틱 태그라는 개념이 등장했다.
HTML5 이전에 header를 표현하기 위해 <div class="header"> 를 사용했는데,
HTML5에서는 아예 해당 태그가 문서 상의 header라는 의미를 가질 수 있게 <header>라는 태그를 사용하는 것을 권장한다.
<abbr> , <dfn> , <section> 등의 시멘틱 태그를 사용해서 개발된 HTML 문서는 <div> 덩어리로 가득 찬 문서보다는 검색엔진이 해당 문서의 내용을 더 잘 파악할 수 밖에 없다.
또한 문서를 읽는 개발자에게도 좋은 가독성을 제공한다.
아래의 비교 예시를 보면 이해가 더 잘 될 것이다.
예시
시멘틱 태그 사용
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>시멘틱 태그 사용 X
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>아래는 시멘틱 태그에 대해 잘 설명해놓은 링크이다. 참고해보자.
https://diveinto.html5doctor.com/semantics.html
복습
자, 이제 시멘틱 웹과 시멘틱 태그에 대해 대략 학습했다. 만약 면접 때 이런 질문이 들어오면 어떻게 답할 것인가?
<img>태그를 사용하는 것과<div>태그에background-image속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요
만약 나라면, 이렇게 답할 것 같다.
우선 <img> 태그와 background-image 속성은 태생부터가 다르다. 전자는 HTML 태그로 처리되고, 후자는 CSS 속성으로 처리된다.
만약, 내가 만들 웹 문서를 시멘틱 웹으로 만들고 싶다면 img 태그를 사용하는게 좋다. <img> 태그에는 여러가지 요소가 있는데, 그 중 alt 요소는 웹 문서의 접근성을 강화시켜준다. 시각장애인들도 읽을 수 있기 때문이다.
그러므로 검색엔진에게 내가 올린 이미지 요소를 알려주고 싶다면 시멘틱한 img 태그를 사용하는게 좋다.
만약 이미지를 장식 요소로 사용하고 싶다면, background-image 속성을 사용해라. 시멘틱하진 않기 때문에 검색엔진이 인식할 수 없는 단점이 있지만 img 태그보다는 좀 더 이미지를 자유롭게 처리할 수 있다.
예를 들어 이미지 위에 텍스트를 얹히고 싶을 때는 img 태그보다는 background-image를 사용하는게 좋다. 또한 background는 background-size 같이 다양한 파생 요소가 있기 때문에 이미지를 더 잘 꾸밀 수 있다.
비고
위 답변을 위해 아래의 글도 참고해보자.
https://pawelgrzybek.com/image-tag-vs-background-property/
