이미지 삽입 방식을 통해 알아보는 Semantic Web: Point out meaning : Spike!

사이트에 이미지를 넣는 방법은 두 가지가 있습니다.

1. img태그를 사용하는 것

1	<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

2. 태그가 아닌 css에 background-image 속성을 추가하는 것

이렇듯 클래스가 bg-img인 div태그를 만들고,

1	<div class="bg-img">배경이미지</div>

div태그 클래스에 배경 이미지를 넣는 css를 추가합니다.

.bg-img {
  background-color: yellow;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}두

1번, 2번 방법 모두 사용자가 웹 상에서 보는 화면은 같습니다. 그렇다면 두 방법은 상황에 따라 어떻게 다르게 사용하면 좋을까요??

이에 대해 알아보기 위해, 우선 Semantic Web이라는 개념을 짚고 넘어가겠습니다.

인터넷은 네트워크를 통해 광범위한 정보 전달과 교류의 시대를 열었습니다. 동시에 웹은 인터넷 상의 어떠한 문서이든 저장하고, 필요할 때 꺼내볼 수 있는 환경을 구축하였고, 웹 위에서 사용자들은 검색 엔진을 통하여 원하는 웹사이트를 무엇이든 찾아볼 수 있습니다.

그러나, 웹에도 문제는 있습니다. 컴퓨터는 자신이 보여주는 웹 상의 정보의 의미에 대하여 무지합니다. Syntax는 이해할지 몰라도, 그 안의 의미(Semantic)은 이해하지 못한다는 뜻입니다. 만약 컴퓨터가 웹 페이지 안의 내용을 인지(이해) 할 수 있다면, 사용자의 관심사에 대해 배워서, 사용자가 필요한 것을 제공할 수 있지 않을까요? Semantic Web은 이러한 문제의식에서 출발했습니다. 컴퓨터가 제공하는 Passive helping을, Active helping으로 바꾸려는 시도입니다.

따라서 웹 사이트를 작성하는 사람들은 컴퓨터가 문서 뒤에 숨어 있는 actual meaning 에 대하여 이해할 수 있게 도와야 합니다. Semantic하게 작성된 문서가 주어진다면, 컴퓨터는 이에 대해 이해와, 정보 간의 관련성 파악을 용이하게 할 수 있을 것입니다. 예를 들어, 이 두 코드를 보시죠,

<header>
  <h1>100 Things About Guns N' Roses</h1>
</header>
-------------------------------------------------------------
<div>
  <span>100 Things About Guns N' Roses</span>
</div>

검색엔진에 Guns N'Roses를 작성하면 상단부의 코드가 높은 우선순위로 나타날 것입니다. header와 h1을 통해, Guns N' Roses가 문서의 중요한 주제임을 강조했기 때문입니다.

이렇듯 ,semantic하게 작성된 document는 어떤 것이 중요한 내용인지, 무엇과 관련되어 있는지 컴퓨터가 파악하기 용이하기에, 검색엔진에 잘 노출될 것입니다. 이렇게 SEO(Search Engine Optimization)에 한 발짝 다가갈 수 있습니다.

또한 semantic 하게 작성된 문서는, 그것을 보는 사람의 입장에서도 의미와 관계성을 파악하기 용이하기에, 코드의 가독성이 좋아지고 유지보수가 편안하다는 장점이 있습니다.

여기까지 보셨으면, 앞서 이미지를 삽입하는 두 코드에 대한 생각이 정립되셨을 것 입니다.

1번과 2번 중 어떤 방법이 더 semantic할까요? img태그를 사용하는 것입니다. img태그를 사용하면, "이것은 이미지다" 라고 각인할 수 있습니다. div에 css를 적용한다면, 컴퓨터의 입장에서는 div내의 내용이 글인지, 이미지인지, 알아차리기 힘든 것입니다.

코드를 보는 개발자의 입장도 마찬가지입니다. img태그를 보고, 이것은 이미지구나! 라고 바로 직관적으로 깨닫는 것이, div태그의 클래스명을 확인하고 -> 클래스의 css를 확인해서 -> 이미지임을 깨닫는 것보다 훨씬 간단합니다.

Semantic한 작성을 위하여, 표현하고자 하는 내용에 적합한 태그를 사용하는 습관을 들여야겠습니다.