현대 사회에는 너무 방대한 정보가 존재한다. 고로 어떤 정보가 나에게 필요한 정보인지 찾아내는 것이 중요하다. 즉, 바꿔 말하면 정보 제공자의 입장에서도 정보 요청자의 검색 내용에 많이 부합하는 정보를 제공하는 것이 중요하다.
따라서, 이런 것들과 많은 연관이 되어 있는 Semantic tag와 Semantic web에 대해서 알아 보려고 한다.
<목차>
1. Semantic tag & web 이란?
2. 중요성 및 예시
3. 이미지 삽입 관련 방식 비교
4. 마치며...
1. Semantic tag & Web 이란?
시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
- 여기서 메타데이터란 다른 데이터를 설명해주는 데이터를 의미한다.
2. 중요성 및 활용 예시
시맨틱 태그와 웹에 대한 정의는 위에 적혀있는 것과 같지만, 단순히 저 문장 만으로는 사실 어떤 개념인지 잘 와닿지가 않는다.
따라서, 하나의 예시를 들어서 설명해 보고자 한다.
<font size="6"><b>Hello</b></font>
<h1>Hello</h1>출력은 아래와 같다.
위의 두 코드는 브라우저에서 동일한 외형으로 출력된다. 그러나, 코드가 갖는 의미를 생각했을 때는 전혀 다르다고 볼 수 있다.
먼저 첫 번째 코드의 요소는 특별한 의미를 갖고 있지는 않다. 적어도 컴퓨터가 받아들이기에는 그렇다.(컴퓨터 입장에서는 무수히 많은 size="6"인 요소중에 하나이다.) 그러나, 두 번째 코드의 요소는 제목 중에 가장 상위 레벨이라는 의미를 내포하고 있다. 따라서 작성자의 의도가 잘 드러나며, 해당 포스팅에서 가장 중요한 것이 표시되어 있다고 판단해도 무방하다.
따라서, 어떤 정보 요청자가 정보 플랫폼에 Hello라는 검색어를 입력해서 입력 했을 때, 정보 플랫폼의 컴퓨터는 첫 번째 코드를 포함한 페이지가 아닌 두 번째 코드를 포함한 페이지를 상단에 출력할 가능성이 아주 높다.
이러한 것을 시맨틱 태그라고 볼 수 있으며, 웹 페이지로 확장하여 데이터 베이스를 만든다는 개념이 시맨틱 웹이라고 볼 수 있다.
정보를 제공하는 업무를 한다고 볼 수 있는 개발자에게 정보 플랫폼의 중요성은 상상을 초월하는 세상이다. 따라서, 정보 요청자가 검색을 했을 때, 플랫폼에 상단에 노출 될 수 있게 끔 하는 것은 개발자에게 있어서 정말 중요한 것이며, 가능하다면 코드도 그에 맞게 짜는 것이 좋은 코드라고 생각한다. 따라서, 시맨틱 태그와 웹은 정말 중요한 개념이며, 한 번쯤은 짚고 넘어가는 것이 좋다고 생각한다.
3. 이미지 삽입 관련 방식 비교
HTML & CSS를 활용하여 사이트에 이미지를 넣는 방법은 기본적으로 두 가지가 있다.
1) img 태그 사용
2) div 태그 사용하여 background-image 속성 추가하는 방법
언뜻 두 가지의 방법은 이미지를 출력한다는 점에서는 차이가 없어보일 수 있지만, 시맨틱 태그의 관점에서 바라보면 큰 차이를 갖는다고 볼 수 있다.
그 이유를 알아보려면 semantic 요소와 non-semantic 요소를 알아야 한다. non-semantic요소는 content에 대하여 아무런 설명을 하지 않으며, semantic요소는 content의 의미를 명확히 설명한다.
- non-semantic 요소에는
div, span 등이 있으며 - semantic 요소에는
form, table, img 등이 있다.
따라서, img 태그를 사용할 경우 semantic 요소에 포함되기 때문에 해당 이미지가 해당 웹 페이지에서 중요도가 높다고 판단할 가능성이 높으며, div 태그를 사용하여 background-image 속성을 추가할 경우, 그 이미지는 웹 페이지에서 중요도가 높지 않다고 판단할 가능성이 높다.
즉, 자신의 웹 페이지의 주제와 밀접한 관련이 있는 이미지의 경우 img 태그를 사용하는 것이 좋다고 볼 수 있다.
4. 마치며...
오늘은 semantic tag & web에 대해서 간략하게 알아 보았다. 앞서 글에서 언급 했던 것과 같이, 현대 사회에는 너무 많은 정보가 흘러 넘쳐있는 상황이기 때문에 사용자가 원하는 정보와 잘 맞는 정보를 매칭하는 것이 정말 중요하다. 그 의미를 정확히 전달하고 정보 플랫폼에서 상단에 노출 시키기 위해서는 semantic에 대한 이해가 어느정도는 필요하다고 생각하여 정리 하였으며, 머리에서 잊혀질 때 쯤 다시 한 번 나의 벨로그에 돌아와서 찾아보는 날이 있으면 좋을 것 같다.
