[새싹] 웹을 지탱하는 기술 Chapter11

채상엽·2022년 5월 10일

Sproutt 2nd - Spring Study

목록 보기

23/32

layout: post
title: "웹을 지탱하는 기술 스터디 - Chapter11"
date: 2022-05-09-T00:00:00-00:00
author: sangyeop
categories: Sproutt-2nd

새싹 개발 서적 스터디 - 웹을 지탱하는 기술 Chapter11

Chapter 11. microformats

시맨틱스(의미론)란

시맨틱스란 무엇일까?

언어학에서의 의미론
자연언어를 예로 들면 '꽃' 이라는 단어는 그저 'ㄲ', 'ㅗ', 'ㅊ' 이라는 단어가 조합된 것에 불과하지만 이것들이 조합되어 '종자식뭉릐 생식기관' 이라는 '의미'가 갖추어짐을 의미한다.

프로그래밍 언어에서의 의미론
프로그래밍 언어가 가진 의미를 확정시키기 위한 이론을 '프로그램 의미론'이라고 한다.

웹에 있어서의 의미론
리소스가 가진 의미를 확정시키기 위한 의미론이다. HTML 등으로 표현한 텍스트가 어떤 의미를 가지는지를 프로그램에서도 이해할 수 있도록 한다는 목적이 있다. 즉 사람이 읽고 이해하는 웹 페이지의 의미를 프로그램도 처리할 수 있도록 형식적으로 의미를 기재하기 위한 기술이 시맨틱 웹이다.

RDF와 microformats

RDF의 경우
프로그램의 처리 가능한 정보의 의미를 기술하기 위한 스펙이다. '트리플' 이라고 불리는 주어, 술어, 목적어의 3가지 요소를 사용해 웹상의 리소스에 메타 데이터를 부여하고 프로그램이 리소스의 의미를 처리할 수 있도록 한다.

단점
- 작성이 복잡해지기 쉽다
- 통일적인 작성이 어렵다
- 대상 데이터와는 독립된 메타 데이터가 필요하다

microformats의 경우
RDF의 문제점을 해소한 기술이 microformats이다. microformats로 변화하면서 RDF에 비해 작성 분량이 줄어들었다. 또한 RDF는 대상 데이터와 다른 독립된 메타 데이터로서 기술해야 했지만, microformats는 원본 HTML에 삽입되어 있고, 통일적인 작성이 어렵던 RDF와는 다르게 기술 방법이 일관되어 있다.

이를 이용해 위 RDF로 작성된 예제를 다음과 같이 변경할 수 있다.

microformats의 표준화

microformats는 레이아웃을 표시하는 HTML 문서 자체에 의미를 부여하기 위해, 메타 데이터를 집어넣는 기술이다. 여기에 좀 더 간단하고 더욱 가볍게 웹 페이지의 시맨틱스를 기술하기 위해 다양한 메타 데이터 기술 스펙들이 책정되고 있다.

표준화를 마친 microformats

이름	개요
hCalendar	일정, 이벤트 정보, 베이스는 RFC 2445
hCard	프로필, 연락처 정보, 베이스는 RFC 2426
rel-license	라이선스 정보
rel-nofollow	스팸 링크 방지
rel-tag	소셜 태그, 태그임을 명시
Vote Links	링크하는 대상에 대한 찬반 또는 중립
XFN	친구 인맥 관계
XMDP	microformats 자체의 스키마
XOXO	아웃라인 포맷, 리스트와 요약정보

드래프트 상태의 microformats

이름	개요
adr	주소
geo	위도와 경도
hAtom	갱신 정보
hAudio	악곡 정보
hListing	검색 연동형 광고(리스팅 광고)
hMedia	이미지, 동영상, 음악 등의 미디어 정보
hNews	뉴스 기사
hProduct	상품정보
hRecipe	요리 레시피
hResume	이력서
hReview	책이나 레스토랑의 리뷰 정보
rel-directory	디렉토리 페이지로서의 링크
rel-enclosure	첨부 파일로의 링크
rel-home	웹 사이트의 홈페이지로의 링크
rel-payment	Paypal 같은 결제서비스로의 링크
Robots exclusion	검색 로봇 배제 정보
xFolk	소셜 북마크의 메타 데이터

microformats의 분류

elemental microformats

rel-license와 같은 링크 (<a>요소와 <link>요소와 rel속성)를 사용해 메타 데이터를 표현하는 포맷
compound microformats

hCalendar와 같이 주로 class 속성을 사용해 계층구조가 있는 메타 데이터를 표현하는 포맷

elemental microformats

rel-license - 라이선스 정보
```
이 웹페이지의 권리는<a rel="license"
href="http://creativecommons.org/licenses/by-sa/3.0/"
>Creative Commons by-sa3.0</a>에 따릅니다.
```
이 경우 해당 링크에 링크하고 있는<a> 요소의 rel 속성 값으로 license를 추가해, 링크의 참조가 그 페이지의 라이선스 정보라는 의미를 나타낸다. 이는 <link> 요소에서도 이용할 수 있다.
- rel-nofollow - 스팸 방지 링크
  
  가장 유명한 microformats이다. 다른 사람의 블로그 댓글 등에 자신의 사이트 URI를 기계적으로 달아서 자신 사이트로의 링크를 늘리려는 스팸 행위를 막기 위해 등장한 스펙이다.
```
재미있는 사이트가 있어요.<a href="http://spam.example.com"
rel="nofollow">http://spam.example.com</a>
```
  위 예시는 스패머가 자신의 사이트를 재밌는 사이트라고 사칭하고 댓글을 단 예제이다. 그러나 웹 사이트에서 URI 에 자동적으로 re="nofollow" 가 붙도록 구현해 두면, 검색 엔진은 이 링크를 랭킹 가중치에 이용하지 않는다.
  
  이 또한 <a> 뿐 아니라 <link>요소에서도 이용할 수 있다.

compound microformats

hCalendar - 이벤트 정보

캘린더 정보, 이벤트 정보를 기술하기 위한 microformats이다.

class 속성이 붙어 있는 요소가 hCalendar의 핵심이다. vevent, location, summary는 hCalendar가 정의하는 계층구조를 지키면 어떠한 요소라도 class 속성으로 넣을 수 있다.

자연언어에 의한 시간표현은 '19:00', '19시' 등으로 모호하여 프로그램으로 처리하기 어려우므로 title속성의 값으로는 ISO 8601(날짜와 시각의 표기를 규정한 국제표준) 형식의 문자열을 넣는다.
hAtom - 갱신정보

Atom이 가진 메타 데이터를 HTML에 집어넣는 microformats이다. 웹페이지에 포함되어 있는 엔트리의 갱신일자와 퍼머링크 같은 메타 데이터를 프로그램으로 처리 가능한 형태로 삽입할 수 있다.

<div class="hfeed">
  <div class="hentry">
    <h2 class="entry-title">
      <a href="http://blog.example.com/20100903/test"
         rel="bookmark">
         hAtom의 테스트    
      </a>
    </h2>
    <div class="entry-content">
      <p>
        hAtom을 테스트 해봤습니다
      </p>
    </div>
    	<p>
        <abbr class="updated"
              title="2010-09-03T09:23:22+09:00">
           2010년 9월 3일 9:23
        </abbr>
    </p>
  </div>
</div>

각 요소의 class 속성에서 지정하고 있는 값이 Atom의 각 요소에 대응한다.

hAtom이 정의하고 있는 class속성값(*는 필수)

이름	대응하는 Atom 요소	개요
hfeed	feed	피드 전체
hentry	entry	개개의 엔트리
entry-title	entry/title	엔트리의 타이틀
entry-content	entry/content	엔트리의 내용
entry-summary	entry/summary	엔트리의 개요
updated	entry/updated	엔트리의 갱신일시
published	entry/published	엔트리의 공개일시
author	entry/author	엔트리의 저자
bookmark	entry/link	엔트리 링크

microformats와 RDFa

microformats의 문제점
class 속성과 rel 속성의 값만으로 메타 데이터를 특정하기 때문에 같은 값을 가진 웹 페이지가 있을 경우 오판을 하거나 같은 속성값을 가진 다른 microformats를 만들 수 없게 된다.

RDFa에서의 해결(과 남은 문제점)
아래는 웹 페이지의 라이선스를 표현하는 RDFa의 예이다.

이 웹은 권리는<a xmlns:cc="http://creativecommons.org/ns#"
rel="cc:license" href="http://creativecommons.org/licenses/by-sa/3.0/"
           >Creative Commons by-sa3.0</a>에 따릅니다.

여기서는 'cc'라는 접두어로 이름공간을 정의한다는점이 다르다. 이 차이로 인해 microformats에 존재했던 충돌 문제를 회피할 수 있다.

그러나 여전히 남은 문제점이 존재한다. 하나의 심플한 스펙을 목표로 했던 것이 이름 공간을 사용함으로써 복잡해져 버렸다는 것이다. 또 하나는 이름 공간을 전제로 하기 때문에, XHTML에서만 이용이 가능하다는 문제점이 있다.

microformats의 가능성

hAtom/xFolk와 LDRize/AutoPagerize

LDRize

웹 페이지를 livedoor Reader와 같이 단축키를 이용해 쉽게 열람할 수 있는 Firefox/Greasemonkey의 유저 스크립트이다.
AutoPagerize

마찬가지로 유저 스크립트인데 검색결과 페이지와 뉴스기사 등 복수로 분할되어 있는 웹 페이지에서 현재의 페이지 아래에 자동으로 다음 페이지를 붙여준다.

위 두가지는 hAtom과 xFolk라는 microformats가 제공하는 메타 데이터를 사용하는 애플리케이션이다.

리소스 표현으로서의 microformats

프로그램을 위해서 별도의 웹 API를 제공하는 스타일에는 다음과 같은 문제점이 있다.

웹 서비스와 웹 API에서 제공하는 기능이 달라지기 쉽다
개발 규모의 증대에 따른 유지 보수성 저하
웹 API에 필요한 기술의 습득 비용

microformats를 이용하면, 기존의 웹 페이지를 그대로 웹 API로서 제공할 수 있으므로 양쪽의 기능차가 발생하지 않는다.

또한 속성 기반의 포맷이기 때문에, 기존의 웹 페이지에 미치는 영향도 적으며, 개발 비용이 훨씬 적게 든다.

그리고 HTML에 관한 지식이 있다면 쉽게 배울 수 있으므로, 습득 비용 또한 적게든다.

채상엽

프로게이머 연습생 출신 주니어 서버 개발자 채상엽입니다.

이전 포스트

[새싹] 웹을 지탱하는 기술 Chapter10

다음 포스트