Semantic Web? Semantic Tag?

ChoJinmok·2022년 1월 25일
0
post-thumbnail

Semantic Web

시맨틱 웹(Semantic Web)은 현재의 웹 환경에 자원들의 의미와 자원들 간의 관계 정보를 부가하여 컴퓨터 스스로가 웹에 연결된 정보의 의미를 인식하고 사용자가 필요로 하는 정보를 검색하며 검색된 정보에서 지식을 유추할 수 있는 기능을 제공한다. 즉, 컴퓨터가 웹 정보의 의미를 이해하고 의미에 따라 선택적으로 정보를 획득, 통합, 가공할 수 있는 웹 환경을 제공할 수 있다.

시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

웹의 창시자인 버너스 리는 현재의 웹을 한 단계 더 발전시키기 위해 시맨틱 웹을 제시하였으며 W3C를 주축으로 DARPA, SemanticWeb.org 및 학계에서 활발한 표준화 활동이 전개되고 있다. 또 시맨틱 웹의 요소 기술에 대한 벤더들의 연구 및 개발이 활발히 이루어지고 있다.

이러한 웹을 만들기 위해서는 웹 정보들 간의 관계를 기술할 수 있어야 하며, 또한 정보 자원들 사이의 의미적 연관성에 대한 메타정보와 컴퓨터가 이해할 수 있는 지식 표현 수단도 필요할 것이다.

Semantic Web의 수단

1. URI

URI는 정보자원을 식별하는 문자열로서 웹으로 제공되는 정보 자원들을 하이퍼링크(hyperlink)로 연결하기 위해 사용되는 네트워크 경로와 정보자원에 부여된 고유 이름으로 구성된다.

2. XML

XML은 정형화된 구문 언어인 SGML(Standard Generalized Markup Language)의 문서구조정의 기능 중 복잡한 기능을 배제하고 핵심적인 기능만을 포함하도록 설계된 메타언어(MetaLanguage)이며 인터넷에서 컴퓨터가 데이터를 처리할 수 있도록 문서를 인코딩하는 표준이기도 한다. 즉, XML 표준은 문서구조를 나타내는 DTD(Document Type Definition)를 정의하고, 이것을 이용하여 문서를 생성하며 컴퓨터가 XML 문서에 대해 가독성(machine-readable)을 가질 수 있도록 저장한다. 저장된 XML 문서는 사용자가 보다 간편하게 인식할 수 있는 텍스트, 음성, 그래픽 및 HTML로 변환할 수 있는 기능도 포함한다.
XML은 단지 구문단계에서 정의된 메타언어로서, 컴퓨터가 XML 문서에 포함된 태그의 의미를 정확하게 인식하는 데 모호함이 존재한다. 결론적으로 XML을 사용하여 복잡한 지식을 표현하는 것은 부적절하다.

3. RDF

RDF는 XML의 상위계층에 위치하며 XML에서 부족한 정형화된 의미를 포함하도록 설계되었다. RDF는 웹상에 존재하는 자원들 간의 관계를 기술하는 프레임워크로서 메타데이터를 사용하여 자원들간의 상호 운영성을 지원하고 컴퓨터가 인식할 수 있는 메타데이터를 정의할 수 있다. 즉 컴퓨터가 정보자원의 의미를 인식하는 기능을 제공한다.

4. 한계점 및 방향

위의 두 언어는 HTML 기반의 웹보다는 한 단계 발전된 웹을 만들 수 있게 해준다. 그러나 지식 표현(knowledge representation) 언어로서는 여전히 부족한 점이 있다. 따라서, 사람이 현세계를 이해하는 방식을 뜻하는 ‘개념’과 유사하게 컴퓨터들 간의 특정 영역에 대한 공통된 개념을 공유하는 Ontology가 활발히 연구되고 있으며, 이는 RDF의 상위계층에서 지식표현과 추론의 기반을 제공한다. 이러한 Ontology 언어 가운데 W3C에서는 XML과 RDF 기반의 DAML+ OIL과 같은 시맨틱 웹 마크업 언어(Semantic Web Markup Language)를 표준으로 제정하고 있다.

Semantic Web, Semantic Tag의 효용

대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 Google이나 Naver와 같은 검색사이트를 이용한다. 이런시대에 웹사이트는 검색엔진에의 노출이 매우 중요하다. 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다. 이런면에서 Semantic Web을 만드는 것은 아주 중요하다.

검색엔진 사이트 해석과정

  1. 크롤링: 로봇(Robot Program, 크롤러) 전세계의 웹사이트 정보를 수집
  2. 인덱싱: 인덱서가 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만듬

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보 즉, 웹사이트의 HTML 코드이다.
=> 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석

cf) SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 한다.

HTML으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있어 외형적으로(사람이 사용하는 자연어) 보면 같을지라도 내부적 코드(메타데이터)의 의미는 다를 수 있다.

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

위 코드를 보면 1행과 2행은 브라우저에서 동일한 외형을 갖지만 1행의 요소는 의미론적으로 어떤 의미도 가지고 있지 않다. 즉, 의도가 명확하지 않다. 2행의 요소는 header(제목) 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소의 의미가 명확히 드러나고 있다. 이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.

검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 또한 사람(개발자)도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있다.

시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다.

시맨틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

Semantic Tag

HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.
br태그는 단지 줄을 바꿔고 p태그는 어떤부분이 단락인지 파악할 수 있게 해준다. 태그들은 이렇게 그냥 단순 기능만 제공하는 경우도 있고 의미를 내포하는 경우도 있다.

non-semantic 요소
div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

semantic 요소
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다,

HTML5에서 새롭게 추가된 시맨틱 태그

TagDescription
header헤더를 의미한다
nav내비게이션을 의미한다
aside사이드에 위치하는 공간을 의미한다
section본문의 여러 내용(article)을 포함하는 공간을 의미한다
article분문의 주내용이 들어가는 공간을 의미한다
footer푸터를 의미한다

생각정리

위코드의 replit Assignment에서 사이트에 이미지를 넣을때 img태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보라는 과제를 받았다.
두가지 모두 개발자의 의도에따라 작성됐다면 나쁘지 않은 코드라고 생각한다. 하지만 정확한 의미를 모른채 이미지를 웹사이트에 넣기 급급해 아무방법이나 가지고와 사용한다면 이는 잘못된거 같다.
정보전달 차원에서는 무조건 img태그를 사용해서 이미지를 만들어 주는 것이 좋다. 위에서 정리한바와 같이 img태그를 사용하면 메타데이터로써 브라우저에게 전달돼서 더 많은 사람들에게 페이지가 보여질 확률도 높아진다. 이런 비지니스적 관점 이외에도 alt attribute를 사용했다면 청각장애를 가진 사람들에게 음성으로도 전달도 가능(웹 접근성)하다.(비지니스 + 휴머지즘)
정보전달이 아닌 단순히 웹페이지의 디자인적인 요소로만 이미지를 사용한다면 CSS에서 background-image 속성을 추가해도 괜찮다고 생각한다. 하지만 css에서 이미지를 처리하기 때문에 다운로드 큐에서 밀리면서 늦게 로딩된다. 퍼포먼스가 안좋아지게된다.
성능상으로 안좋아질 수 있고, 웹표준에서도 img태그 사용을 권장하므로 일반적으로 페이지에 들어가는 이미지를 쓰기 위해 background 사용은 자제하는게 좋을것 같다.
Semantic Web과 Semantic Tag를 공부해봤는데 이를 잘 활용한다면 html의 근본가치인 정보전달로서의 도구로 더 잘 활용할 수 있을 것 같다. 정보로서 더 가치있게 태그를 거는 것이 중요하겠다.

Reference

  1. 위키백과
  2. poiemaweb
  3. Semantic Web의 표준화 및 요소기술 개발 동향
  4. 시맨틱 웹 ( img, background-image 뭐가 다를까)!
profile
적(는)자생존, 기록은 기억을 이긴다.

0개의 댓글