TIL - HTML&CSS - Semantic Web, Semantic Tag

# Semantic Web

• Semantic Web을 이해하려면, 오늘날 검색엔진이 갖는 위상에 대해 알아볼 필요가 있다. 검색엔진은 디지털 시대의 가장 강력한 권력 중 하나로 인식되는데, 이유는 사용자가 웹을 통해 얻는 정보의 대부분이 검색엔진이라는 필터에 의해 걸러진 결과물이기 때문이다. 긍정적으로 보자면 검색엔진이 인간 대신 중요한 정보를 선별하는 귀찮은 작업을 해주는 것으로 생각할 수도 있다. 하지만 다른 관점에서 보면, 웹에 의해 선택받지 못한 정보는 실제로 정보가 담고 있는 콘텐츠의 질과 상관없이 쓸모없는 정보로 남을 수밖에 없는 서글픈 현실을 의미하기도 한다. 검색 엔진에 의해 노출되지 않는 정보는 존재하지 않는 것과 마찬가지이다.

• 상황이 이렇다 보니, 웹을 통해 자신의 정보를 타인과 공유하길 원하는 사람들은 '어떻게 하면 나의 정보가 검색엔진에 의해 노출될 수 있을까?'라는 질문과 필연적으로 마주하게 된다. 그리고 이러한 질문은 꼬리에 꼬리를 물고 이어지다가 결국, '검색엔진이 정보를 취사선택하는 기준은 뭘까?'라는 의문으로 귀결된다. 이때 의문 해결의 실마리를 제공해주는 것이 바로 Semantic Web이다.

• 검색을 통해 찾아본 Semantic Web의 의미는 다음과 같다.

  시맨틱 웹(Semantic Web)은 World-wide-web을 창안한 팀 버너스리가 제안한 차세대 웹 기술로, 웹 상에 존재하는 정보를 사람 뿐만 아니라 기계가 의미(Semantic)를 파악하고 사용자의 요구에 적합한 결과를 서비스 가능하도록 하는 것이다

• 요약하면 Semantic Web이란 기계(검색엔진)가 웹에 존재하는 정보의 의미를 파악하고, 이를 토대로 의미 있는 정보를 추려서 사용자에게 제공하는 웹 기술이다. 정리하면 검색엔진은 Semantic Web이라는 기술을 기반으로 의미 있는 정보를 필터링하여 우리(사용자)에게 제공해준다고 볼 수 있다.

# Semantic Tag

• Semantic Web을 알았다면, Semantic Tag 역시 어렵지 않게 이해할 수 있다. 앞서 검색엔진이 Semantic Web을 기반으로 의미 있는 정보를 추려 사용자의 입맛에 맞게 제공한다는 걸 알아봤다. 이 지점에서 생기는 또 다른 의문점 하나. '검색 엔진은 무엇을 근거로 웹에 있는 정보의 의미를 파악하는 걸까?' 이에 대한 해답은 Semantic Tag로부터 구할 수 있다.

  시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

• 요약하면, 시맨틱 태그는 검색엔진에 웹상의 정보(콘텐츠)가 가진 의미를 명확하게 설명해준다. 바꿔 말하면, 검색엔진은 시멘틱 태그의 명확한 설명 덕분에 웹에서 의미 있는 정보를 파악하고 필터링할 수 있는 것이다.

• 대표적인 시맨틱 태그 몇 가지를 소개한다.

  • <header>: 머리말 지정
  • <nav>: 문서를 연결하는 내비게이션 링크
  • <aside>: 본문 이외의 내용 표시
  • <section>: 주제별 콘텐츠 영역 나타내기
  • <article>: 콘텐츠 내용 넣기
  • <footer>: 콘텐츠 하단 영역에 내용 넣기

# <img> vs CSS 의 background-image

• 이전에 작성했던 글 'TIL - HTML&CSS(1)'을 통해, 웹 사이트에 이미지를 넣는 두 가지 방법에 대해 알아봤다. 하나는 <img>를 사용하는 것이고, 다른 하나는 CSS를 통해 <div>에 background-image 속성을 추가하는 것이었다. 그렇다면 여기서 궁금한 점 한 가지. 두 방법은 무엇이 다를까..?

• 두 방법의 차이는 웹 사이트에서 이미지 로드에 실패했을 경우에 명확히 드러난다. 먼저 <img>를 사용한 경우, 이미지 로드에 실패하면 깨진 이미지(broken image)와 <img>의 alt=""속성으로 지정된 문구가 화면으로 표시된다.

• 반면 background-image의 경우엔 깨진 이미지도 문구도 표시되지 않는다. 말 그대로 아무런 일도 일어나지 않는다고 볼 수 있다.

• 이러한 차이가 발생하는 이유가 뭘까? 위에서 정리했던 개념인 Semantic Tag를 통해 그 이유를 추측해볼 수 있지 않을까? <img>는 사이트에 이미지를 나타낼 때 사용하는 태그로서, '이미지 표시'라는 의미를 브라우저에 전달한다. 그러면 브라우저는 그 의미를 파악하게 되고, 이미지 로드가 실패했을 경우에 대한 처리(깨진 이미지 및 문구 표시)가 이뤄진다. 이에 반해 background-image 속성이 추가된 <div>는 특정한 의미를 갖지 않는 태그다. 그러므로 브라우저는 해당 태그로부터 아무런 의미도 전달받지 못하게 된다. 이미지 로드에 실패했을 때, 아무런 일도 일어나지 않는 이유도 거기에 있다.

# 노출이 잘되는 웹 사이트를 만들고 싶다면...

• 웹 개발자라면 누구나, 검색엔진에게 사랑받는 웹 사이트를 만들고 싶어 할 것이다. 이를 위해선 많은 것들이 고려돼야겠지만, 그중에서도 Semantic Tag의 활용은 필수라는 생각이 든다. 아무리 희소성 있는 콘텐츠를 갖고 있다고 해도, 그 의미가 제삼자에게 설명되고 전달되지 않는다면 공허하고 의미 없는 정보에 불과하기 때문이다. 손뼉도 마주쳐야 소리가 나는 것처럼, 의미에 맞게 Semantic Tag를 사용하여 브라우저의 Semantic Web 실현을 도울 때 진정으로 의미 있는 웹 사이트가 탄생하는 것은 아닐까.