Semantic Web이란 무엇일까?
시맨틱 웹이란 보다 직관적이고 지능적인 웹사이트를 만들기 위해 world wide web을 만든 Tim Berners-Lee의 아이디어였습니다. 그럼 도대체 그 이전에는 무엇이 문제였길래 시맨틱 웹이 등장하게 되었는지에 대해 알아보도록 하겠습니다.
Semantic Web 등장배경
시멘틱 웹의 등장배경을 알아보기 위해서 검색 사이트에서 검색 엔진이 어떻게 사용자가 원하는 정보를 보여주는지에 알아보도록 하겠습니다.
오늘날 우리가 원하는 문서나 페이지를 검색하게 되면 수많은 결과들이 뜨는 것을 볼 수 있습니다. 여기서 또 하나의 의문이 생기는데요, 검색엔진은 어떻게 이 많은 검색결과를 사용자에게 보여주는 걸까요?
그 정답은 검색엔진의 로봇(Robot)이라는 프로그램입니다. 이 프로그램의 역할은 매일 전세계의 웹사이트 정보를 수집하는데 이것을 크롤링이라 부르며 검색엔진의 크롤러가 이를 수행합니다. 그리고 이렇게 수집한 데이터들을 토대로 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둡니다.
여기서 시맨틱 웹의 등장배경이 나오게 되는데요, 이 인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 이는 결국 HTML 코드입니다.
즉 검색 엔진은 HTML 코드만으로 그 의미를 이해해야 하는데 일반적인 웹 페이지의 경우 구조화되지 않은 데이터가 많이 포함되어 있습니다. 시맨틱 마크업이 없는 페이지의 검색 같은 경우는 해당 페이지의 HTML 설명에만 의존하게 되는데 이 경우 검색엔진이 해당 페이지에 있는 내용이나 포함된 이름이나 문장의 데이터가 무엇인지 알 수 없습니다. 하지만 시맨틱 요소가 있다면 검색 엔진이 이해하는데에 더 수월합니다.
아래 코드를 통해 확인해보록 하겠습니다.
<font size="6"><b>Hello</b></font>
<h1>Hello</h1>위 코드들의 결과물은 같습니다. 하지만 그 의미는 같지 않습니다.
비교를 해보면 첫 번째 행의 요소는 폰트의 크기와 볼드체만을 보여주고 있지만
두 번째 행의 경우 header 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소의 의미가 명확히 드러나고 있습니다.
바로 이런 차이가 코드의 가독성을 높이며 유지보수를 쉽게하고 검색엔진이 더 잘 이해할 수 있도록 도와줍니다.
이러한 시맨틱 요소들로 구성된 시맨틱 웹의 등장으로 검색엔진에게는 더욱 효율높은 검색과 개발자에게는 한 눈에 html 코드의 가독성을 높여주면서 유지보수를 더 쉽게 할 수 있게 되었습니다.
Semantic Tag
시맨틱 태그란 위의 예시에서 본 것과 같이 의미를 가지고 있는 태그를 의미합니다.
대표적으로 페이지 상단의 로고나 검색 바, 네비게이션을 포함하는 정보를 담고 있는 header 태그가 있습니다.
시맨틱 태그를 사용함으로써 얻을 수 있는 장점은 무엇이 있을까요?
- SEO(Search Engine Optimization:검색엔진 최적화)에 유리하다
- Accessbility(웹접근성) - 웹 페이지를 시각적인 것인 아닌 음성적으로 읽어주는 스크린 리더와 같은 프로그램을 이용할 시 문제없이 동작하게 된다.
- 유지보수와 가독성을 올려준다.
이번에는 이러한 장점을 가지고 있는 시맨틱 태그를 사용하기 위해 시맨틱 태그에는 무엇이 있는지 알아보겠습니다.
-
header : 웹 자체의 도입부로 주로 페이지 상단에 웹 사이트 로고와 네비게이션 링크를 감싸는 것에 사용
-
nav : 내비게이션을 나타내며 주로 메뉴등이 포함된다.
-
main : 웹 사이트의 본문을 뜻하며 메인 컨텐츠를 크게 감싸는 역할로 한 HTML당 1개만 존재
-
aside : main 이외의 컨텐츠이며 주로 왼쪽이나 오른쪽 측면에 위치한 내용을 담는 태그
-
section : 주로 각 컨텐츠의 영역을 나눌 때 사용
-
article : main 내에서 독립적인 정보를 나타낼 때 사용
-
footer : 웹문서의 하단 부분을 나타내는 태그
Question?
사이트에 이미지를 삽입하는 방법은 두 가지가 있습니다.
- img 태그의 src 속성을 통해 삽입
- 태그에 background-image 속성을 통해 삽입
이 두가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋을까요?
가장 큰 차이점은 위에서 다뤄어 보았던 태그가 가지게 되는 의미의 차이입니다.
img 태그는 alt라는 속성을 통해 에러가 발생할 경우 어떤 이미지에 대한 정보인지를 표시해줄 수 있지만 background-image 의 경우는 이를 보장할 수 없습니다.
반대로 말하면 이미지 로딩에 실패했다는 것을 굳이 알려줄 필요가 없는 것이라면 background-image를 사용하는 것이 더 좋은 방법이 될 것 같습니다.
따라서 이미지가 사용자에게 도움을 주는 것이라면 img 태그를 사용함으로써 검색에 노출시키는 것이 좋고 그것이 아니라면 background-image를 사용하면 될 것 같습니다.
사실 그동안 무분별한 div 태그와 class의 남발이 이어지는 코드를 작성해왔었는데 이번 기회를 통해 시맨틱한 웹 구성을 위해 앞으로의 마크업은 조금 더 신중히 하도록 할 수 있는 습관을 들이도록 해야할 것 같습니다.
