semantic web / tags 가 뭐길래

삼안기·2021년 5월 30일
0
post-thumbnail

😬 해당 포스팅은 개인 학습/기록용 포스팅이므로 잘못된 정보가 포함되어 있을 수도 있습니다. 이 코린이를 위해 올바른 정보를 댓글로 부탁드립니다. 행복하세요.

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.

출처 - wikipedia

🕸 semantic web이 뭐야?

시맨틱 웹. 어딘가 멋있는 이름. 존재 이유조차 멋있다.

시맨틱 웹은 컴퓨터가 정보 자원의 뜻을 이해하고 논리적 추론까지 하는 지능형 웹이다. 웹상에 정보가 점점 방대하게 쌓여가고 불필요한 정보까지 검색되는 정보 홍수의 시대에 컴퓨터 스스로가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic interoperability)을 실현하여, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행, 인간과 컴퓨터 모두 잘 이해할 수 있는 웹을 만드는 것이다.

웹의 창시자 팀 버너스리 는 진정한 의미에서의 연결이란 하이퍼텍스트 링크를 통한 가상공간에서의 단순한 위치적 연결이 아니라 정보 자원들 간의 의미적 연결이라는 개념을 일찍이 제시했다.

단순히 a)의미가 옅고 표면적인 데이터를 하나하나 찾는 것보다 기계가 스스로 b)의미있고 구조화된 정보들을 찾아 이해하고 논리 구조를 가지며 서로 수근수근 이야기 할 수 있는 웹.

a) 의 데이터는 인간만이 이해할 수 있고, 기본적으로 컴퓨터에게는 무의미하다.

b) 의 경우는 데이터들 사이에 연관성을 표현할 수 있는 구조가 더해지고 이런 연관성에 기반하여 기존 정보들로부터 추론을 통해 새로운 정보를 만들어 낸다.

이러한 환경에서는 사용자들이 정보와 지식을 더욱 효율적으로 처리하고 복잡한 의사결정 또한 쉽게 처리할 수 있는 가능성이 생긴다.

🧠 semantic web을 구현하려면요?

구현을 위한 핵심기술적 요소는 두 가지가 있다.

메타데이터 (metadata)
지식표현

metadata?

메타데이터란 간단히 말해 데이터에 대한 데이터. 예를 들면 작성자, 파일 크기, 문서의 생성 날짜, 키워드 등의 간단한 정보부터 권리, 기술, 마크업 언어 정보 등을 다룬 데이터베이스. 메타데이터가 포함되어야 포털 검색 노출에 유리하다.
또한 이를 추적해 사용자의 웹상 움직임을 파악할 수 있고 현재는 여러 정보로 마케팅에도 활용이 활발하게 이루어지고 있다.

지식표현

정보 사이의 관계성을 주는 것. 예를 들면 시맨틱 웹 에서는 대한민국 정부의 세무 양식과 미국 정부의 세무 양식이 동일하지 않다고 하더라도 몇 가지 공통된 부분이 있고 이것들 사이에 중요한 의미적 연결성이 존재한다면 추론의 과정을 거쳐 어떤 결론을 도출해 낼 수 있으며 이들을 합성한 새로운 양식을 만들어 낼 수도 있다.

🧐 그럼 semantic tag를 쓰면 도움이 되겠네요!

semantic tag 역시 의미론적 태그를 말한다. 앞서 살핀 개념과 같이 기계에게 의미있게 이야기 해주는 것. 간단히 divheader 태그를 비교해보자.

<body>
<!-- 어서오세요. 헤더 분이 누구시죠? -->
	<div>나는 헤더요.</div>
	<header>내가 헤더요.</header>
<!-- 네?;; -->
</body>

이런 경우 웹 표면상에서는 구분할 수 없다. 둘 다 같은 형태로 나타난다. 하지만 웹을 수집하는 기계의 입장에서는 어떨까?

header라는 명찰을 단 친구를 단 번에 알아볼 것이다. 의미론적으로 header를 나타내고 싶을 때 그에 맞는 태그를 사용해주는 것이 좋다는 이야기다. semantic tag는 다양하게 존재한다. 궁금하면 아래링크를 통해 더 공부해보자.

🔗 Semantic Elements in HTML

🤡 check! <img tag와 div의 attribute>

자, 그렇다면 img 태그와 div 태그에 background-image 속성을 추가하는 이 두가지 방법에는 어떤 차이가 있는지 짚어보며 마무리 해보자.

앞 개념들을 쭉 훑고 왔다면 너무나도 간단히 답이 나온다. 두 방식 모두 이미지를 불러올 수 있지만 검색엔진이 훑고 지나가기에는 img 태그가 훨씬 유의미하다.

<body>
<!-- 어서오세요. 이미지 분이 누구시죠? -->
	<img src="**" alt="**">저요!</img>
    	<div>저용ㅎ</div>
	
        <style>
            div {
            background-image: url("**")
            }
	</style>
<!-- 네?;; -->
</body>

다만 이 경우에는 무조건적으로 img 태그가 좋다고만은 할 수 없는 몇 가지 이유가 있다.

img 태그는 broken image와 alt라는 대체텍스트를 가지는데 실제 사용 환경에서 어떠한 이유로 에러시 이런 것들을 노출하고 싶지 않을 경우가 생긴다. 혹은 검색엔진에 이미지를 노출하고 싶지 않을 시에!

이런 경우에는 background-image 속성을 사용하기도 한다. 이미지가 사용자의 유의미적 이해를 돕기 위함이라면 img 태그를, 그렇지 않다면 background-image를 사용하면 되겠다.

참고

이미지출처

profile
문제를 해결해야지

0개의 댓글