TIL - Semantic Web

김현재·2021년 8월 3일
1
post-thumbnail

Semantic web?

단어를 먼저 살펴보면 semantic은 "의미론적인"이라는 뜻을 갖고 있다. 즉, semantic web은 의미론적인 웹이라고 직역할 수 있으며, 의역하면 "의미를 내포하고 있는 웹페이지"가 된다.

why semantic?

시각적으로 보았을 때 아무 차이가 없는데도 우리는 왜 시맨틱하게 마크업을 해야할까?
이유는 심플하다. "웹 접근성"을 높이기 위해서이다.

그러면, 왜 웹 접근성을 높여야 할까?

모든 사람이 디스플레이 화면을 볼 수 있는 것은 아니다

"접근성"이라는 단어에서 유추되듯이, 웹 접근성을 지킨다는 것은 모든 환경적 상황에서 접근이 가능한 웹을 구축한다는 의의가 있다. 그리고 이것은 화면을 볼 수 없는 환경에 있는 사람 또한 "화면을 보지 않고" 웹을 사용할 수 있는 환경을 구축해야 한다는 것이다.

가령 라섹 수술을 해서 화면을 볼 수가 없는 상태에서 시리를 통해 인터넷에 접속했다고 가정하자.(feat.Siri) "시리야~ 오늘 코로나 확진자 몇명 나왔는지 네이버에 검색해줘" 라고 하면, 우리의 인공지능 비서인 시리는 1. 네이버에 접속해서 2. 검색창을 "찾고" 3. 검색창에다가 "코로나 확진자 수"를 입력해야한다.
우리는 보통 검색창을 input 태그를 사용해서 만들지만, 만약..네이버의 검색창이 div 를 사용해서 보기에만 input 처럼 만들었으면..? 우리 가엾은 시리는 검색을 못하게 되고(?!), 눈을 뜨지 못하는 우리 사용자는 눈이 회복될 때까지 인터넷을 사용하지 못할 것이다.

잠깐, 그런데 왜 시리는 검색을 못하게 되는걸까? 그 이유는 div 는 무엇을 입력하는 용도로 사용되는게 아니라고 "컴퓨터와 인간끼리 한 약속"이기 때문이다.
시리는 이 약속에 따라 움직이기에 검색어를 입력하기 위해 div는 무시하고 input만 찾게 되는 것이다.

정리하면, 우리가 시맨틱하게 마크업을 해야하는 이유는 우리의 컴퓨터가 인간의 의도를 잘 이해하고, 의도한대로 똘똘하게 해석하기를 원하기 때문이다. 그래야 우리가 쾌적한 환경에서 인터넷을 누릴 수 있으니까!

이를 좀 더 전문적으로 말하면 : 시맨틱 웹이란 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic interoperability)을 실현하여, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할수 있는 웹을 만드는 것
이라고 라고 말할 수 있겠다.



좋은 예) img vs background-image

시맨틱 웹을 설명하는데 가장 좋은 예시는 HTMLimg 태그와 CSSbackground-image 가 있다.
두가지 경우 모두 화면에 그림을 보여주지만, "시맨틱"적인 것을 따져가면 사용해야 된다는 것!
위를 참고하면 의미를 내포하고 있는 이미지의 경우 img 태그를 사용해야한다는 것을 유추해볼 수 있다😊

보다 디테일한 가이드를 참고하여 마크업 시 활용해봅시다.

img 태그의 사용하는게 좋은 경우

1. 프린트가 필요한 경우
백그라운드 이미지는 출력시 포함되지 않는다.

2. 이미지에 문구가 사용되어 의미를 가지는 경우
이미지 자체가 특정 의미를 내포한 경우 alt 태그를 사용해 해당 내용을 표현할 수 있다.
허나, 백그라운드 이미지는 alt 태그가 없기에 의미를 나타낼 수 없다.

3. 이미지가 콘텐츠의 중심으로 가장 중요한 경우

백그라운드 이미지를 사용하는게 좋은 경우

1. 일정부분만 선택해 보여줄 경우 (ex-hover button)

2. 이미지 위에 텍스트가 들어가는 경우
이미지 위에 텍스트가 들어가는 경우 간단하게 텍스트 태그 안에 백그라운드를 넣을 수 있다.
(텍스트가 더욱 의미적으로 가치가 있다고 전제되어야 한다)

3. 페이지 전체 출력시 이미지를 제거해야 되는 경우
이미지가 출력되면 곤란한 경우거나 겹치는 경우에 해당.

4. CSS sprites를 사용해 이미지 속도를 향상시킬 경우
다수의 img 태그를 통한 방법보다 CSS sprites 기법을 사용하면
이미지의 수정, 보관, 관리가 용이하고 미리 다른 아이콘 영역도 읽어들여 로딩 속도 개선이 가능하다.

5. 배경 전체에 확대해 보여줄 필요가 있는 경우
background-size 등의 속성을 사용해 배경 이미지의 크기를 조작하는 편이 심플하다.
(물론 장식적인 요소로 사용된다는 전제로)

6. 순수히 디자인을 위해서만 사용되어져 왔을 경우

7. 이미지가 컨텐츠의 어떠한 영역이 아닐 경우

8. 반복되는 이미지일 경우 (ex 아이콘)



참고자료

profile
쉽게만 살아가면 재미없어 빙고!

0개의 댓글