예비 개발자

const html = ["Semantic Web", "Semantic Tags"];

1. 시멘틱 웹(Semantic Web)

특정 단어를 포함하는 게시글을 얼마나 많을까? 예를 들어서 구글에 html의 역사라고 검색하면 정말 수많은 글이 검색결과로 나온다. 그 수많은 결과 중에 대부분 사람들은 첫 페이지에 뜨는 게시글을 읽어나갈 것이다. 어떻게 어떤 글은 검색 페이지 상위에 위치하여서 많은 사람들에게 노출되고, 다른 글은 검색결과에 뜨지 않는 것일까?

내가 지금 쓰는 TIL 정도는 검색에 노출되지 않아도 아쉬운 정도이지만(이미 정말 좋은 글에 인터넷에 한 가득하니🤣), 만일 내가 온라인 쇼핑몰을 운영한다고 하면 큰 고민이 될 수도 있다. 내 쇼핑몰 사이트는 왜 검색엔진에 안잡히지? 하는 고민은 매출에 대한 고민으로까지 커질 것이고, 실제로 수 많은 온라인 쇼핑몰은 광고를 해서 검색 상단으로 올리려고 노력하지 않는가?

여기까지 읽었다면, ‘이런 글을 쓰는 것을 보아하니…. 검색엔진에 잘 노출될 수 있는 사이트를 만드는 방법이 존재한다는 말이냐?’ 하는 합리적인 추측을 하고 있을 것이다. 물론 ….. 있다!

단순히 검색엔진에 노출됨을 넘어서, 나의 HTML 구성을 내 의도대로 해석하고 이해하며 심지어 음성으로 읽어줄 수도 있다. 그 모든 것이 가능하게 구성하는 웹이 시멘틱 웹(Semantic Web)이다.

2. 시맨틱 요소(Semantic element)

시맨틱 요소는 검색 엔진이 의미를 이해할 수 있는 HTML 코드의 요소이다.

HTML을 안다면 Tag에 대해서도 배웠을 것이다. 많은 태그들 중에 어떤 것을 써야할지에 대해서도 고민해 봤을 것이다. 그렇게 고민하며 몇번 페이지를 만들어보고, 다른 사이트의 HTML을 관찰하다 보면 어느정도 감을 잡게 된다.

CSS까지 배웠다면, CSS로 편하게 표현할 수 있는 Tag를 선택할 것이다. div나 span 중 무엇을 택할까🤔 같은 고민을 말이다.

그러면 그 Tag들 또한 접했을 것이다.h1, h2….하는 Tag 말이다. 그리고 그것들의 의미또한 알 것이다.

h1은 보통 제목을 표시하는 태그이며, h 뒤에 붙은 숫자가 커질수록 그 하위제목이 된다는 것을 말이다. 이러한 약속은 브라우저도 같은 의미로 이해한다. 예시를 찾으러 멀리 갈 필요 없다. 지금 이 페이지도 소제목은 h2 태그로 쓰여지고 있다.

옆의 스티커처럼 쫓아다니는 CONTENT를 보면 큰 글씨로 적힌 소제목들이 목차로 줄 서있는 것처럼, 브라우저는 시멘틱 요소를 이해한다.

H로 시작하는 Tag외에도 대표적으로 img 태그가 있다. 웹페이지에 이미지를 넣는 방법은 두 가지가 있다.

  1. CSS로 background-image 속성을 추가하는 방법
  2. img 태그를 사용하는 것

두 방법 다 보이는 모양은 같다. 그러나 같은 개발자가 이해하기에 img 태그가 더 이해하기 편하다. 뿐만 아니라, 브라우저도 이것이 이미지라는 것을 이해한다. 추가로, 어떤 이유로 이미지가 업로드 되지 않으면 그자리에 대체 텍스트를 남길 수도 있다.

background-image 속성을 사용하면 이미지를 다양한 방식으로 변경할 수 있다. background-repeat 등을 사용해서 해당 이미지가 반복적으로 뜨게 할 수도 있다.

정리하자면, 시맨틱 요소들을 사용하면 브라우저가 내 의도를 이해한다. 그리고 내 POST의 마크다운 파일을 보게 되는 어떤 사람이든 나의 의도를 이해할 것이다. 시멘틱 요소 사용이 필요한 이유 중 하나가 바로 그것이다. 개발자가 의도한 의미를 브라우저, 검색엔진(검색엔진도 H1을 제목으로 생각하고 검색엔진에 띄어준다.), 다른 개발자, 그리고 이 글을 썼다는 사실을 망각할 미래의 나도 이해할 수 있다. 사용에 있어서 주의할 점은 내가 이 태그를 사용하는 의도와 목적이다. 의도에 적합한 태그를 사용하는 것이 우선 되어야 할 것이다. (그에 대한 고민도 필요하다.)

2-1. HTML5에 추가된 태그

HTML5에 들어서 시맨틱 태그들이 추가되었다. 웹페이지의 구역을 나눌 떄, div를 사용하는 것이 아니라 헤더를 의미하는 header , nav bar를 만들때는 nav, 그리고 aside, section, article, footer 등을 사용하면 구역에 대한 의미를 정확히 파악할 수 있다.

새롭게 추가된 태그를 브라우저가 지원하는지는 잘 알아보고 사용하는 것을 권한다.

https://caniuse.com/

정리

시멘틱 웹이란 수 많은 웹페이지에 메타 데이터를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다. -https://poiemaweb.com/html5-semantic-web

이 문장을 보니 두루뭉실 했던 개념이 이해되었다. 데이터의 의미와 관련성을 담은 웹페이지로 구성된 것이 시멘틱 웹이다.

이렇게 보고나니, 내가 만든 자기소개 페이지에 있는 데이터들은 의미가 있는지에 대한 고민이 든다. 습관적으로 div를 사용해 id와 class에 모든 정보를 담으려고 했던 것은 아닐까? 앞으로 만들어나갈 나의 작품(?)들을 위해서, 내가 지금까지 만들어온 것들을 다시 다듬는 시간이 필요할 것 같다.

2022-02-16

오후 9: 09

참고