Semantic Web과 Semantic Tag

solee·2022년 1월 25일
0

TIL

목록 보기
11/20
post-thumbnail

사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.

이런 질문을 받는다면 어떻게 대답해야 할까?

'에이, 그래도 html은 자신 있지!' 하고 생각해온 것치고는, 어리버리 따라 치고 구글링하며 코드 치는 법만 공부해온지라 문장을 읽으면서 눈만 껌벅거릴 수밖에 없었다.

이것도 모르냐는 자괴감이 들었다가, 얼른 이런 것들을 모아 나의 밑천, 나의 코드, 나의 세상으로 만들자는 생각이 들어 글을 정리해 보려 한다.



시맨틱. 영문학과 출신이라 반사적으로 떠올린 것들을 제쳐 두고 알아 보니 그렇게 어렵지도 않다.

Semantic Web이란 말 그대로 '의미론적인 웹'이다.

컴퓨터가 정보를 단순한 데이터의 나열로 보게 하는 것이 아니라, 세상을 이루는 것들을 컴퓨터가 인식, 처리할 수 있는 onthology로 표현하고 그것이 가지고 있는 의미를 이해하도록 해 처리할 수 있도록 하는 것이다.

여기서 이 onthology란, 시맨틱 웹과 관계될 때면 지식을 의미적으로 연결할 수 있게 해 주는 도구로서 기능한다. 어떤 지식을 명시적으로 표현해 개념화하는 것이다. 어떠한 의미를 정의해, 그것을 기준으로 컴퓨터가 방대한 정보들을 보다 빠르게 이해하고 스스로 데이터를 처리하게 하는 것이라고도 할 수 있겠다.

html5를 기준으로 예를 들면 <header>와 같은 태그가 그 예시다.

 <div id="footer"></div>
 <footer></footer>

이 둘은 어떻게 다를까?

<div id="header"></div>
<header></header>

또 이 둘은 어떻게 다를까?


범람하는 인터넷 세상에는 수많은 div들이 있다. div들이 마구마구 쏟아지면 그것을 직관적으로 이해하기 쉽지 않다. 그러므로 그것들 중 자주 쓰이는, 의미있는 태그들을 모아 단순히 header라는 id를 가진 div가 아니라 <header>로 만든 것이 Semantic Tag라고 할 수 있겠다.

<header>가, 또 <footer>가 어떤 역할을 하는지 정의해 컴퓨터가 그것을 인식하고 처리할 수 있게 하는 것이다.


이것이 img태그, 그리고 background-image와는 무슨 상관이 있을까?

다시 질문을 떠올려 보자.

사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.

Semantic Web과 Tag에 대해서 앞서 의미있는 것으로 컴퓨터가 그것을 인식하고 처리하게 한다고 설명했다. 같은 원리로, <div> 태그에 추가된 background-image는 그저 div 중 하나일 뿐이다. 반대로 <img>태그는 컴퓨터에게 이것이 '이미지'라는 정보를 전달하는 것이다.

그러므로 올리려는 이미지가 어떠한 의미를 가진, 정보를 가진 이미지라면 <img>태그를 사용하는 것이 좋다. 이 태그는 의미가 있기 때문에 컴퓨터가 인식하고, 그러므로 검색 엔진에도 영향을 미친다. 또한 시각 장애인인 경우 컴퓨터를 사용할 때에 <img alt="대체 정보값">을 제공하기도 한다. 또 페이지를 인쇄할 때에 이러한 이미지들은 실제로 인쇄가 된다.

반대로 background-image 프로퍼티를 사용하면, 이는 의미를 가지고 있지 않은 <div>이기 때문에 컴퓨터가 인식하지 못하는 단순한 장식용으로 사용된다. 검색되지 않고, 시각 장애인용 대체 텍스트 등에는 이미지가 인식되지 않을 것이다. 또한 페이지를 인쇄했을 때에도 인쇄되지 않는다.



마치며

사이트를 만들고 관리한다면, 이러한 요소들의 의미와 목적을 이해하고 있는 것이 아주 중요할 것이다. 페이지를 방문하는 클라이언트들에게 의도한 대로의 정보를 제공할 수 있다. 지금도 이 글을 작성하며 내가 방문했던 수많은 페이지들과 출력하려고 시도했던(그러나 출력되지 않아 의아했던) 해외 페이지들이 떠오른다.
내가 직접 사이트를 만들고 관리하게 될 때, 이런 것들을 충분히 유용하게 사용할 수 있을 만큼 숙련되고 괜찮은, 아니 그를 넘어 좋은 개발자가 되기를 바란다.


그나저나 스택 오버플로우 외에 이런 타입의 편집기를 사용해 본 게 처음인데, 이거 꽤 재밌다!
익숙해지면 더 잘 쓸 수 있기를 기대해 본다.

profile
DA DA DA

0개의 댓글