Semantic Web & Tag

sj950902·2020년 11월 21일
1

HTML / CSS

목록 보기
1/2
post-thumbnail

1. Semantic Web & Tag 란?

인터넷의 발전으로, 세상은 정보의 바다가 되었고 방대한 정보들 속에서 단순 keyword 검색 접근만으로 원하는 정보를 추출하는 방식은 다른 불필요한 정보들까지 가져오기 때문에 더 이상 유용하게 활용되게 어려워졌다. 또한, 컴퓨터가 정보를 추출, 감별, 해석, 가공을 할 수 있는 방법이 없었기 때문에 사람이 직접 데이터를 일일히 가공해야되는 번거로움이 있었다. 이 문제의 근본원인 중 하나는 바로 컴퓨터가 알아서 정보를 이해할 수 없었기 때문이였고, 이를 해소하기 위해 나온 것이 Semantic web이라는 개념이다.

Semantic Web 의 목표는 다음과 같다.

"지금과 같이 사람만이 웹에 산재한 정보의 의미를 파악하는 것이 아닌, 자동화된 기계가 해석할 수 있는 일종의 표준 의미정보 교환의 수단이 되는 것이 시맨틱 웹의 목적이다. 시맨틱 웹의 이상향은, 인터넷에 방대한 양의 온톨로지가 산재하고, 이를 자동으로 해석하여 처리할 수 있는 에이전트 소프트웨어에 사람 또는 에이전트가 질의를 하면, 컴퓨터가 자동으로 분산된 온톨로지를 탐색하고 추론하여 원하는 결과를 돌려주는 것이다." (인용 : 위키피디아)

목표는 즉, 컴퓨터가 이해할 수 있는 정보의 개념을 추가하고 데이터에 의미와 관련성을 부여하여 거대한 데이터베이스를 구축하는 것이였고, 이를 위해 <header><footer> 같이 기존 <div> 태그와는 다르게 각 태그들의 명확한 역할과 해당 정보들의 순수 목적이 무엇인지 좀 더 직관적으로 컴퓨터가 이해할 수 있게 의미론적 태그(semantic tags)들이 개발되게 되었다. 이렇게 해서 웹을 구성하고 있는 요소들에게 의미를 부여하여, 보다 컴퓨터가 이해할 수 있도록 하는 것이 Semantic Web 이라고 생각한다.


2. Semantic Tag의 활용

Semantic V.S. Non-semantic

  • non-semantic tag인 <div><span>같은 경우 content에 대하여 어떤 설명도 하지 않는다.
  • semantic tag인 <form> , <table> , <header> 같은 경우 content에 대한 명확한 의미를 설명한다.
  • ex) <img> 태그의 "alt" 속성을 추가하여 의미를 부여 가능.

Semantic Examples

| Tags | Content |
|:--------|:--------|
| form | 사용자가 입력하는 데이터를 받는 역할의 태그 |
| table | 표를 나타내기 위한 데이터 표시 |
| header | 제목 (헤더)를 의미한다 |
| nav | 네비게이션의 의미 |


3. Semantic Web & Tag의 활용

Semantic tag은 검색엔진과 개발자에게 HTML 파일 속 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 이 덕분에 <div> 태그의 background 속성(attribute)을 이용하여 이미지를 표현하는 방식일 경우에는 해당 <div> 태그의 속성을 확인해야 된다는 번거러움이 있지만, <img> 태그를 이용하면 해당 태그가 이미지를 표현하는 콘텐츠라는 것을 **직관적으로 이해할 수 있고, 이는 코드의 유지보수에도 도움이 된다. **

추가적으로, 사용자가 작성한 데이터의 콘텐츠와 관련된 데이터는 그 주제와 직접적인 관계가 있기 때문에 이를 semantic tag들을 활용하여 보다 검색엔진에 더 노출시킬 수도 있지만, 반대로 주제와 관계없는 데이터같은 경우는 <div> 태그를 활용하여 검색엔진에 가공안되도록 유도 또한 가능하다.

하지만, 개발자가 고려해야되는 것은 위와 같은 코드의 유지보수 및 검색엔지의 노출도만 있는 것은 아니라고 생각한다. 예를 들어서, 콘텐츠와 관련된 방대한 양의 이미지들이 한 웹페이지 있어서 페이지 로딩시간이 유의미하게 증가했다고 가정해보자. 해당 웹페이지가 많은 양의 이미지데이터를 검색엔진에 노출하여 웹페이지 이용자를 늘렸어도, 웹페이지의 로딩시간이 그 이미지들로 인해 증가하여 결국 사용자의 사용감이 저하되는 효과를 보게될 수 도 있다. 이는 결국 웹페이지 운영에 부정적인 영향을 미칠 수도 있고 ,이를 해결하기 위해서는 근본적으로 방대한 양의 이미지를 처리해야만 한다. 이를 위해서, 사용하는 것이 CSS 와 위에서 언급한 div 태그를 이용한 "이미지 스프라이터" 이다. 한 웹페이지에 이용될 이미지들을 한 이미지 파일에 압축하여, 필요한 부분한 도출하는 방법인데, 이를 사용하여 이미지의 로딩시간을 현저히 줄일 수 있다고 한다. 이 방법을 봤을때, 경우를 따져가면서 무조건 <img> 태그가 semantic이여서 좋다는 이유로 사용하는 것은 부적절하다고 생각하고, 좀 더 경우와 실리를 따져봐서 코딩을 섬세하게 해야겠다고 생각하였다.

profile
# 백엔드개발자 # 기억보단 기록을

0개의 댓글