html에 대해 이것저것 알아보다보면 꼭 등장하는 이 말
" semantic 하게 잘 짜여진 레이아웃 구조는 굉장히 중요합니다."
그래서 왜..? 왜 중요한데..? 이제부터 그 해답을 알아보러 가봅시다 슝슝슝⛷️⛷️⛷️
Semantic이 뭔데?
네이버 영어사전에 따르면 semantic은 의미의, 의미론적인 이라는 뜻을 가지고 있다.
영어를 좀 보면 알 것 같았는데, 이렇게 보면 배로 더 헷갈린다.
Semantic Element, Semantic Tag
HTML4에서 HTML5로 넘어오는 단계에서 "semantic"이라는 단어가 굉장히 중요해졌다.
그 이유는 검색 엔진에서 우리가 어떤 단어, 사진 등을 찾고자 할 때 엔진이 이러한 tag들을 분석해 검색 결과로 노출시켜주기 때문이다.
w3School에서는 개발자와 browser에게 명확하게 그 의미를 전달해주는 element가 곧 Semantic한 element라고 표현하고 있다.
A semantic element clearly describes its meaning to both the browser and the developer.
예를 들어 우리가 포럼 기사를 web에 올리기 위해 html을 작성하고 있다고 가정해보자.
<div></div>
<p></p>
<article></article>우리에게 3가지 선택권이 주어졌다. (물론, 이 이상 그 외 많은 선택권들이 주어질 수 있다. 예시를 위해 딱 3가지만 골라왔다)
맨 위에서부터 과연 semantic한지 이야기 해보자. semantic이라는 단어를 의미 그대로 해석하는 것 보다 실제로 이렇게 봐가며 이해하는것이 훨씬 쉬울 것이다.
-
div 태그
div태그는 division의 뜻을 가지고 있고, 한 덩어리로 묶여있다! 라고 알려주는 태그이다. 물론 div 태그를 써서 우리의 포럼 기사를 묶여있는 덩어리로 볼 수 있다. 쓰는데도 지장이 없고, 웹에도 잘 나타난다. 하지만.. 뭔가 많이 아쉽다. 더 잘 표현할 수 있는게 없을까? -
P 태그
p태그는 paragraph의 뜻을 가지고 있고, "단락 또는 문단" 의 의미를 가지고 있다. 기사도 글이고, 문단이고, 단락이니 이 태그를 써도 괜찮다. 물론 div처럼 웹에도 잘 나타나니 이상은 없다. 하지만.. 우리에겐 더 좋은 태그가 존재한다. -
article 태그
바로 article 태그이다. article태그는 단어 뜻 그대로 (신문의)기사 등을 나타내고, 우리는 포럼 기사를 웹에 올리고자 하니 아주 딱 들어맞는 태그이다. tag로 의미를 잘 전달하고 있고, web 또한 이 태그로 싸여진 컨텐츠가 article 요소라는 것을 인지할 수 있다.
이처럼 다양한 태그들 속에서 각 컨텐츠 요소가 무엇인지 가장 잘 나타내주고, 웹에 잘 보여주기 위해 적재적소에 각 태그를 사용하는 것을 semantic tag를 사용한다 등으로 표현할 수 있다. 그래, semantic element, semantic tag는 이해가 갔다.
또 다른 예시를 하나 들어보자.
요즘 아주 핫한 어몽어스라는 게임에 대한 소개페이지를 만들고자 위와 같은 이미지를 가져왔다고 가정해보자.
이미지를 웹에 올리는 방법에는 크게 두 가지 방법이 존재하는데, 그 첫 번째는 img 태그를 사용하는 것과 두 번째로는 background-image를 사용해 이미지를 삽입하는 것이다.
위에서처럼 하나하나 차근차근 생각해보자.
나는 이 이미지를 배경이 아니라 하나의 이미지로써 그 의미를 전달하고싶다.
검색엔진에 "어몽어스 사진" 이라고 입력했을 때, 위 사진이 등장하며 내 블로그 글이 노출되기를 바란다.
-
img태그를 사용해 이미지 넣기.
img는 image의 약자로, 의미 그대로 사진이라는 것을 엔진에 알려준다.
당연히 검색 결과로 사진이 노출될 확률이 굉장히 높다. -
background-image 사용해 이미지 넣기.
div, p 태그 등 다양한 블록 태그 내부에 배경으로 이미지를 삽입함으로써 영역의 크기와 공간을 지킬 수 있다. 하지만.. 검색엔진은 이게 사진이라고 인식하지 못 할 것이다. 왜냐면 div p 태그는 각각 구역, 문단이라는 뜻을 지니고있지 사진이라는 뜻은 지니고 있지 않기 때문이다.
이래서 중요한거야!
이처럼 웹 검색 엔진, 또는 웹에 우리가 사용하는 태그를 통해 내 컨텐츠가 가지는 의미가 무엇인지 노출되기 때문에 semantic한 tag, element를 사용해 html을 작성하는 것이 굉장히 중요하다. (웹에서 읽어들일 수 있게 잘 되어있다는 의미를 영어로는 machine-readable이라 표현하더라.) 그럼.. 다음 질문에 도달한다. 그래서 Semantic Web은 또 뭐야??
Semantic Web은.. 다음 포스트에서 설명하도록 하겠다. 찡긋. 한 번에 너무 많은걸 이해하려 애쓰면 더 어려워지는 법이니..까....☆
