1. Semantic, 의미론적인.
Semantic web을 이해하기 위해서는 왜 웹을 만드는가? 웹사이트를 만들고자 하는 목적은 무엇인가?에 대한 고찰이 필요하다.
웹사이트를 만드는 목적은 많은 사람들에게 서비스를 제공하기 위함이고, 많은 사람들이 이용해주었으면 하는 속내가 있기 때문이다.
많은 사람들에게 사랑받는 웹사이트가 되기 위해서는 결국 많은 사람들에게 알려져야하고, 검색엔진(Search Engine)에 노출이 이루어져야 한다.
2. 어떻게 검색엔진에 어필할 수 있는가
검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집하며 이를 크롤링이라고 한다. 이러한 검색엔진이 분석하는 문서는 무엇일까? 바로 HTML문서이며 좀 더 정확히는 semantic 요소를 분석한다.
HTML문서는 컴퓨터가 이해하는 메타데이터와 사람이 사용하는 자연어가 뒤섞여있다.
<h1>Hello</h1>
<font size="6"><b>Hello</b></font>위의 코드에서 1행과 2행의 실행결과는 정확히 일치한다.
2행의 코드에서 얻을 수 있는 메타데이터는 전무하다. 그저 폰트의 사이즈를 크게하고 볼드체 처리한것 뿐이다. 그러나 1행에서는 header 태그중 최상위 태그인 h1을 사용했기 때문에 검색엔진에게 '이 안에 쓰여진 컨텐츠는 중요한 내용이다'라고 알리고 있다.
즉, semantic하다.
3. 유지보수에도 좋은 Semantic Web
검색엔진에게 잘 보이기 위한 목적 이외에도, semantic web은 팀원들끼리 협업하기에도, 혹은 개발자 본인이 추후에 유지보수하기에도 편하다. 의미를 가지지 않는 div만을 남발하여 전체적인 문서구조를 만드는 것보다 header,nav, main, footer 등의 semantic한 tag들을 활용한다면 순식간에 문서의 구조를 파악할 수 있을 것이다.
4. img vs background-img
웹사이트에 이미지 컨텐츠를 발행할 수 있는 방법은 두가지가 있다.1. img태그를 사용하여 src 어트리뷰트에 상대경로 혹은 절대경로를 넘겨주는 방법.
2. div태그를 사용해서 빈 box를 만든후에 width값을 지정해주고, background-image 속성을 사용하는 방법이 있다.
어떤 방법이 더 옳은 것일까? 무슨 차이가 있을까?
img태그의 alt는 이미지에 대한 설명 혹은 요약이다. 만약 img태그의 src값이 훼손되거나 더 이상 유효하지 않은 값이 되면 alt 값으로 지정한 텍스트가 웹사이트에 드러나게 되며 시각장애인들이 웹 리더기를 사용할 때 img태그를 만나면 웹 리더기는 alt 값을 읽는다. 상당히 유용한 기능을 가지고 있지만 주목해야 하는 부분은 다른 점이다.
검색엔진은 img태그를 만났을 때 alt값을 조회한다. 즉, img태그에 대한 설명을 정보화시켜서 사용자에게 노출시킨다. 그렇기 때문에 웹사이트에 표시하고자 하는 이미지가 정보적인 측면을 담고 있다면 img태그를 사용해서 웹사이트에 표시하고, 만약 디자인적인 측면만 담고 있다면 background-image를 사용해서 웹사이트에 표시하는 것이 semantic web을 지향하는 개발자로서 추구해야 하는 일일 것이다.
