Semantic Web

kich555·2021년 9월 11일
0

HTML

목록 보기
3/3
post-thumbnail

정보의 바다

우리는 정보의 바다에 살고있다.

인터넷 상에 얼마나 많은 페이지가 있는지 혹시 생각해본적 있나?

구글에 '와인'이라고만 검색해도 14억3000만개의 검색결과가 나온다.

우리는 말 그대로 정보의 바다에서 살고있다.

하지만 우리는 검색을 통해 우리가 원하고자 하는 정보를 쉽게 찾을 수 있다.

검색은 검색엔진이라는 강력한 프로그램에 의해 구현되는 기능이며,
검색엔진은 다양한 알고리즘을 사용하여 사용자에게 최적화된 검색 기능을 제공해 준다.

노출의 시대

우리는 노출의 시대에 살고있다.

정보통신의 발달에 따라 우리는 더 많은 것을 알 수 있을 것이라 생각했지만,
실상은 반대이다. 정보통신의 발전은 우리의 인지보다 훨씬더 많은 정보의 생산을 이끌어냈다.

노출은 마케팅이라는 하나의 전문화된 학문으로까지 발전했으며
현재도 수많은 마케터들은 한사람에게라도 더 자신들의 정보가 노출될 수 있게 노력을 아끼지 않고 있다.

정보통신의 발전에 따라 노출은 단순 오프라인 노출을 넘어 온라인 노출이 더 중요한 시대가 되어가고 있는데, 특히나 코로나 시대는 이런 현상을 더욱 앞당겼다.

이러한 온라인 광고는 해당 웹 사이트에게 일정의 비용을 지불해서 자신의 사이트를 노출시키는 것으로 볼 수 있다.

하지만 우리는 위와 같이 검색 시 쉽게 광고가 붙지 않는 검색결과를 보기도 한다.

만약 광고가 붙지 않았다면, 검색 브라우저는 어떠한 원리로 우리에게 검색결과를 제공하는 걸까?

검색 엔진

브라우저는 검색 엔진을 통해 우리가 검색한 정보를 제공한다.

우리가 검색창에 무언가 검색하면 어떤 일이 벌어질까?
  • 검색 엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.)

  • 그리고 크롤러가 웹 페이지를 찾으면, 시스템에서는 브라우저와 마찬가지로 해당 페이지의 콘텐츠를 렌더링한다.

  • 이때 키워드 및 웹사이트 최신 정보에 이르는 주요 사인(key signal)들을 기록하며, 일종의 목록을 생성한다.

  • 검색 엔진은 알고리즘을 가지고 수집된 목록들의 랭크(index)를 정한다.

  • 사용자가 검색을 진행할 시 검색 엔진은 해당 검색어로 생성된 랭킹순으로 정보를 상단부터 노출시킨다.

검색 알고리즘

위에서 검색 엔진은 알고리즘을 가지고 목록들의 랭크(index)를 정한다고 했다.

그럼 알고리즘은 어떠한 '기준점' 으로 순위를 매기는 것일까?

한번 찾아보자.

Chrome 검색 알고리즘

위 링크는 구글 크롬의 검색 알고리즘이 어떠한 기준점을 바탕으로 인덱싱을 진행하는지 알려준다.

크롬은 수집한 주요 사인(key signal)을 가지고,

  • 단어 분석
  • 웹 페이지 관련성
  • 콘텐츠의 품질
  • 웹페이지의 활용도
  • 문맥 고려하기

등의 과정을 거쳐 페이지들의 순위를 매긴하고 한다.

페이지는 HTML코드로 이루어져 있으므로 이때 수집되는 key signal들은 당연히 HTML코드들 일 것이다.

그럼 우리의 사이트가 검색 엔진의 인덱스 상위에 위치하도록 하려면 우리는 어떻게 해야할까?

Semantic Web

시멘티 웹이란 한국어로 해석하면 의미론 적 웹이다.

위 화면을 보자.
우측 상단의 'hello'와 하단의 'hello'는 무엇이 다를까?

  • 상단 'hello'는 <h1>header/제목을 뜻하는 <tag>로 만들었고
  • 하단 'hello'는 단순히font-size<b>로 외형만 똑같이 만들었다

이는 우리 눈에 똑같은 hello로 보일 수 있겠지만 HTML 코드 상에서는 엄연히 다른 의미(Semantic)의 요소로 이루어져있다.

<h1>header/제목과 같이 의미를 가진 HTML Element를 의미론적 요소(Semantic Element)라 부르며 이런 의미론적 요소를 활용하여 HTML code를 작성된 Semantic Web이라 한다.

이런 Semantic Web의 장점은 여러가지가 있다.

  1. 웹 접근성이 좋다.(코드의 가독성을 높이고 유지보수를 쉽게한다.)
  2. 브라우저(검색 엔진) 친화적이다.
그냥 쉽게 말해서, 인스타 팔로워 늘리려면 좋은 해쉬태그 잘 써야하듯이,
HTML도 시멘틱 태그를 사용할 수 있다면 논 시멘틱 태그보다 시멘틱 태그를 사용하자. 정도로 받아들이면 될 듯 하다 
profile
const isInChallenge = true; const hasStrongWill = true; (() => { while (isInChallenge) { if(hasStrongWill) {return 'Success' } })();

0개의 댓글