[TIL]Day 13-2. Semantic Web에 대하여

 

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

 

면접에서 자주 다루는 내용 중에 하나라고 합니다. 이 질문에 대한 대답을 하기 위해선 Semantic Web에 대한 이해가 선결 되어야 합니다.

 

Semantic Web은 현재 W3C에 의해 표준화 작업이 진행되고 있는 개념입니다. 웹의 창시자인 팀 버너스리가 1998년도에 제안을 했다고도 하죠. 도대체 Semantic Web이 무엇이길래 웹의 창시자가 직접 이 개념을 제안할 정도인지 알아보는 시간을 갖도록 하겠습니다.

 

1. Semantic Web의 정의

 

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다(출처: 위키백과).

이처럼 웅장한 위키백과 설명을 단순하게 설명하자면, 기계가 html내의 요소를 의미론적인 입장에서 좀 더 잘 파악할 수 있도록 각 태그들에 대해 의미를 부여하자는 운동/개념이라고 할 수 있습니다. 근데 왜 기계가 html의 요소들에 대한 의미를 파악해야 할까요? 이에 대한 답은 다음과 같습니다.

 

2. Semantic Web의 필요성

 

2020년 기준 웹사이트의 갯수는 약 20억개라고 합니다. 그 중 400만개 미만의 사이트들만이 활성화 되어 있다고 합니다(출처: hostingtribunal.com/blog/how-many-websites/#gref). 세상에는 이처럼 너무나 많은 웹사이트들이 존재합니다. '나는 검색된다, 고로 존재한다.'는 말이 존재할 정도로 방대한 인터넷의 세상에서는 검색되는 것이 곧 권력인 셈입니다. 이때 어떻게 html을 구성해야 보다 많은 사용자들의 검색에서 상위권 페이지를 차지할 수 있을까요? 

이에 대한 고민으로 나온 해결책이 바로 Semantic Web입니다. 검색엔진들은 보통 html의 코드를 인식하여 정보를 검색합니다. 즉, 어떤 html 태그와 코드를 구성하는지가 검색의 성패를 좌우하는 것입니다. 다음의 예를 살펴보죠

 

<font size="6"><b>안녕하세요</b></font>
<h1>안녕하세요</h1>

위의 코드를 실행시켜보면, 화면에는 똑같이 '안녕하세요'라는 문구가 등장합니다. 하지만 검색엔진이라는 기계가 인식하는 것은 조금 다릅니다. 첫 번째 안녕하세요는 무의미한 내용이고, 두 번째 안녕하세요는 제목이라고 강조된 의미를 갖게 됩니다. 

 

이렇게 되면 검색엔진 입장에서는 무의미한 첫 번째 정보보다는 유의미한 두 번째 정보를 보다 상위 페이지에 검색결과로 내세울 수밖에 없습니다. 그것이 사용자가 원하는 일이기 때문입니다. 또한 개발자 입장에서도 첫번째 코드보다 두 번째 코드가 코드의 가독성 및 유지보수 측면에서 훨씬 좋은 코드라고 할 수 있습니다. 

 

다시 한 번 정의 하자면, Semantic Web이란 수많은 데이터로 가득찬 웹의 세상에 각종 메타데이터를 부여하여 인터넷이 의미와 관련성을 가지는 정보망으로서 탈바꿈할 수 있도록 만드는 방식이라고 할 수 있습니다. 

 

이런 Semantic web에는 non-Semantic 요소와 Semantic 요소로 이루어져 있습니다.

 

3. 마치며

 

*공부하면서 알게 된 사실 중 하나는 시각장애인 분들의 경우, 웹을 스크린 리더 같은 도구를 통해 보신다고 합니다. 이때 각 태그들이 Semantic web이라는 표준을 지켜 이루어져 있다면 그분들의 입장에서 웹에 대한 접근성이 훨씬 더 좋아진다고 합니다. 

 

이 포스팅의 시작이었던 질문에 대한 답을 드디어 할 수 있게 되었군요!

 

지금까지의 내용을 바탕으로 답을 하자면, 기술적인 측면에선 <img>태그가 애니메이션 성능 향상, SEO(검색엔진최적화) 등에 있어서 효율이 좋기 때문에 삽입하고자 하는 이미지가 내용적인 측면에서 의미가 있거나 높은 가독성을 필요로 한다면 <img>태그를 사용하는 것이 훨씬 유리하다고 할 수 있습니다. 하지만, 해당 이미지가 단순 시각적 효과를 위해 사용되는 경우이거나 부가적인 의미로 사용될 경우에는 CSS의 background-image를 활용하는 것이 더 좋을 것입니다.