HTML Semantic Web

이번 주제는 본래 웹의 기본적인 컨셉이기도 했지만 html5가 되면서 더 두드러진 html의 특징이 된 semantic web에 대해서 다루도록 하겠다. 이번 내용은 코드스피츠 76 CSS Rendering의 강의를 정리한 것이다.

Semantic Web

semantic web을 우리 말로 번역하지면 의미론적 웹이라고 할 수 있겠지만, 좀 더 명확한 설명이 필요하다. semantic web은 html 자체만으로도 의미를 가진 하나의 문서가 되도록 웹 페이지를 작성하는 것을 말한다. html5을 사용해서 얻을 수 있는 결과라기 보다는 html5가 지향하는 바에 가깝다. 왜냐하면 여전히 많은 웹페이지들을 dom들을 의미론적으로 구성하고 html이 하나의 독립적인 문서가 되도록 작성하기 보다는 dom을 시각적인 요소에 따라서 구성하기 때문이다. 따라서 semantic web이 지향하는대로 웹 페이지를 구성하기 위해서는 html의 작성은 최대한 문서와 같이 의미론적으로 구성하되, 화면에 보이는 요소는 CSS로만 조작하도록 작성해야 한다.(이렇게 하는 것을 권장한다.)

그렇다면 의미론적으로 웹을 작성하는 이유, semantic web을 구성하는 이유는 무엇일까? 어떤 이점을 얻기 위해서 그런 것일까? 웹은 본래 태생부터 누구나 접근할 수 있는 정보 체계를 추구했다. 여기서 ‘누구나’의 대상은 시각, 청각, 지체 장애인들을 포함한 모든 사람들을 말한다. 더 다양한 사람들이 그 웹페이지에 접근할 수 있다면 그 웹페이지의 웹 접근성이 높다고 말한다. semantic web은 웹 접근성이 높은 웹을 구성할 수 있게 해준다.

그런데 최근에는 새로운 이유로 semantic web의 구성을 지향하게 되었다. 웹을 통한 서비스와 웹을 사용하는 이용자가 많아짐에 따라 현대의 웹페이지의 수는 천문학적인 수가 되었다. 우리가 일반적으로 웹페이지에 접근할 때는 유명한 페이지가 아닌한 도메인, 혹은 ip주소로 접근하는 일은 거의 없다. 대부분 사용자가 검색엔진에 검색을 해서 검색어에 대한 페이지 랭크가 매겨진 결과의 순서대로 사용자에게 제공된다. 따라서 사용자에게 웹페이지가 제공되기 위해서는 검색엔진이 해당 검색어에 대한 유의미한 내용을 담고 있는 컨텐츠라는 것을 알게 해주어야 한다. 잘 구성된 semantic web은 검색엔진이 html문서를 읽었을 때 마치 database에서 바로 데이터를 가지고 오는 것처럼 구조화된 정보를 추출할 수 있도록 해준다. 즉 semantic web을 구성함으로 보다 더 machine-friendly한 문서를 만들 수 있고, 검색엔진에게 높은 점수를 받을 확률이 더 올라간다.(실제로 최근의 웹페이지들은 검색 엔진에서 높은 랭크를 받을 수 있는 검색 엔진 최적화에 많은 노력을 기울이고 있다.)

정리하자면 semantic web을 구성하기 위해서는 개괄적으로는 다음의 원칙을 지키는 것이 좋다.

• DOM이 의미론적으로 구성되도록, 화면 요소를 기준으로 DOM을 작성하지 않고 내용을 기준으로 구성한다.

• 앞의 이유로 인해, 줄을 나누기 위한 목적이나 장식을 위한 목적, layout을 구성하기 위한 목적으로 div, p태그를 사용하는 것을 최소화한다.

• 태그 작성 시, 순수한 워드 문서라고 가정했을 경우 태그를 어떻게 배치하는 것이 좋을 지의 관점에서 태그를 작성한다.

• 위의 이유로 semantic tag를 활용하는 것이 좋다.(제목을 표현하고 있으면, header tag, 글을 표현하고 있으면 article tag)

따라서 semantic web의 철학에 맞춰서 태그를 구성한다는 말은 더 이상 화면의 구성요소로 dom을 평가할 수 없다는 말이다. 어떤 요소가 dom의 구 조상 먼저 작성되었을 지라도, 화면 구성에서는 제일 밑에 위치하거나 오른쪽에 위치할 수도 있고, 아예 보이지 않게 만들 수도 있다.

Semantic Web을 위한 CSS Selector

앞에서 semantic web을 위해서는 DOM을 의미론적으로 구성해야 한다고 했다. 그렇다면 의미론적으로 구성한 DOM을 바탕으로 화면 요소는 CSS에서 조작하도록 하기 위해서는 html과 CSS를 어떻게 구성해야 하는 것일까? 애초에 그렇게 구성하는 게 어렵기 때문에 DOM구조에 화면요소가 섞이도록 구성하게 된 것이 아닌가하는 의문이 든다. 물론 쉬운 작업은 아니다. 이 작업을 위해서는 CSS Selector의 적절한 활용이 필요하다.

class를 이용하여 semantic web을 구성하려고 할 때의 문제점

맨 처음 semantic web을 구성하려고 할 때, 쉽게 선택하는 방법은 class를 사용하려고 하는 것이다. 그러나 단순히 class를 사용해서 semantic web을 구성하려는 선택은 class에 의미를 부여하려는 선택이기 때문에, 이로 인해 스타일과 의미론적 구조 사이에 의존관계가 생긴다. 이렇게 되면, DOM을 class에 맞춰서 구성하게 되고, 이런 의존 관계로 인해 태그의 변화가 기존의 스타일을 깨뜨릴 수도 있다. 이렇게 구성된 사이트는 크기가 커지면 커질수록, css를 사용하는 요소가 많으면 많을 수록 html과 css 모두 수정하기가 어려워지기 때문에, 나중에는 유지보수가 거의 불가능한 html과 css가 만들어 진다. 즉 class를 활용하는 방식은 semantic web을 구성하는 방법이 될 수 없다.

CSS Selector를 의미론적으로 구성된 dom에 맞추는 방법

CSS Selector의 종류 중에는 CSS Attribute Selector가 있다. attribute selector는 해당 element의 속성을 기반으로 element를 선택할 수 있도록 해준다. 일반적으로는 input요소를 선택할 때 input[type=”text”]의 형식으로 많이 사용한다. 그런데 Attribute Selector의 구조가 SQL Query의 구조와 유사하다 SQL Query의 기본적인 서술은 다음과 같다 SELECT * FROM TABLE WHERE field conditions 그리고 attribut selector의 기본적인 서술을 다음과 같다. base selector[field condition][...][...] 따라서 semantic으로 dom을 구성할 때에 속성 값을 활용하여 구성하고 CSS attribute selector를 사용하면 semantic구조에 따라 스타일이 적용되도록 html과 css를 구성할 수 있다. 예를 들면 html과 CSS를 아래와 같이 구성하는 것이다.

See the Pen OJMdXWM by psy082 (@psy082) on CodePen.

일반적으로 name, pw, nick이라는 identifier는 서버와 합의된 값이기 때문에 서버에서 이름을 바꾸지 않는 한 유지되는 값이다. 따라서 스타일을 위와 같이 적용하면 data 구조에 근거를 둔 스타일 적용이 가능하다. 때문에 dom을 변경하지 않고도 디자인 변경이 자유롭게 된다.

HTML5 Microdata

Apple, Mozilla, Opera등 주요한 웹 브라우저 벤더 회사들이 참여하는 WHATWG라는 W3C 산하 커뮤니티가 있다. W3C 산하 조직이라고 하지만 W3C보다 더 강력한 권한으로(자본도 자기들꺼고 브라우저도 자기들이 만드니깐…) 웹 표준 작성을 주도하고 있다. 이 WHATWG에서 semantic web을 쉽게 구성할 수 있도록 microdata라는 규격을 만들었다. 이 규격은 element에 microdata attribute를 주는 방식으로 semantic web을 구성하도록 스펙을 만들었다. microdata는 완전한 표준은 아니지만 현재 html5에서도 사용할 수 있도록 기본 속성 값으로 제공된다. microdata는 다음과 같은 attribute를 가지고 있다.

• itemscope: 적용 범위 설정, 현재 의미가 적용되는 태그의 범위를 설정한다.
• itemtype: 의미 구조를 설명해 주는 참조 자료(문법 레퍼런스와 같은 것이다.)
• itemid: itemscope 내에서의 항목의 고유 식별자
• itemprop: itemscope 내에서의 속성명, itemtype에서 정의된 항목이어야 한다.(권장)
• content: 비가시적인 항목일 때의 값을 설정
• value: 가시적인 값과 다르게 내가 원하는 값을 설정
• itemref: itemscope 내에 정의된 항목이 아닌 항목을 설정

표준화된 microdata를 schema를 공유하는 사이트 schema.org에 가보면 semantic으로 웹을 구성하기 위한 모델들을 확인해볼 수 있다. microdata를 사용하면 html에서 제공하는 태그들만으로는 표현할 수 없는 그 이상의 의미를 가진 문서를 만들 수 있다. 예를 들어 최근에 많이 적용되는 다크 테마를 웹페이지에 쉽게 적용할 수 있는가? 만약에 dom과 스타일의 서로 의존하도록 구성되었다면 다크 테마를 적용하는 것은 굉장히 어렵다.(스타일의 변화가 페이지에 어떤 영향을 줄지 다 파악하기 어렵기 때문이다.) 즉, 단순하게 attribute selector를 사용한다고 해서 semantic web이 되는 것이 아니라 의미를 가진 구조로 웹을 구성해야 semantic web이 만들어 지는 것이다. microdata는 의미론적인 구조로 웹을 구성할 수 있도록 도와준다. 아래의 예제는 microdata를 사용해 웹페이지를 구성한 예시이다.

See the Pen semantic web ex2 by psy082 (@psy082) on CodePen.

위의 예제를 보면 2개의 itemscope가 있고 각 itemscope는 itemtype에 의해서 정의된다. microdata attribute를 사용하여 의미를 구성한 뒤에는 css(scss)에서 의미론적 구조에 맞게 스타일을 적용한다. 즉 스타일에 따라서 dom이 구성되는 것이 아니라 dom의 의미론적 구조에 따라서 스타일이 적용되었다.

※ microdata를 사용하는 또 다른 장점은 웹 크롤링에도 용이한 페이지가 된다는 것이다. microdata구조에 따라 웹페이지를 파싱하는 서버 부분 라이브러리는 이미 존재하기 때문에 microdata를 사용한 웹페이지는 데이터 추출이 매우 용이하다.

HTML5 Dataset

HTML5에서는 어떤 element든지 data-로 시작하는 사용자 정의 속성을 부여할 수 있다. HTML5의 dom은 element마다 dataset이라는 key를 가지고 있고 dom에서 data-로 시작하는 속성의 속성 값을 사용할 수 있다. data-set도 표준 spec이기 때문에 microdata를 사용하지 않는다면, 사용자 정의 속성인 data-속성으로 semantic web을 구성할 수도 있다. 아래 예제는 앞의 예제와 동일한 구조이지만 data-속성을 이용한 예시이다.

See the Pen semantic web ex3 by psy082 (@psy082) on CodePen.

정리

정리하자면 semantic web은 쉽게 작성되는 결과물이 아니라 dom을 의미론적으로 구성하고 그 dom의 구조에 맞춰서 스타일을 적용하는 방식으로 dom과 스타일을 독립적으로 분리한 결과로 만들어진다. 따라서 충분한 고민과 실제로 semantic web을 구성해보는 경험이 모두 필요하다. semantic web을 구성하게 된다면 웹 접근성이 높아질 뿐더러 검색엔진 최적화와 웹 크롤링에도 도움이 된다. 유지보수가 쉽고 생명이 긴 웹페이지 구성을 할 수 있도록 고민을 많이 해보자

※ 참고 - HTML5 Semantic Tag

• header: 헤더를 의미
• nav: 네이게이션을 의미
• aside: 사이드에 위치하는 공간을 의미
• section: 여러 중심 내용을 감싸는 공간을 의미
• article: 글을 의미
• footer: 푸터를 의미

위의 semantic tag들은 css rendering system의 입장에서는 div 태그와 동일하지만 의미론적 dom 구성의 입장에서는 해당 내용이 무엇인지, 그 의미를 알려준다.