19
5월
2008

마이크로포맷을 사용해볼까요?

1989년, 팀 버너스 리(Tim Berners-Lee)는 네트워크에서 정보를 전달하고 서로 연결하기 위하여 WWW(world wide web)라는 시스템을 고안하고, 이를 구현하기 위해 URL, HTTP, HTML 규약을 만들었습니다. HTML은 그 단순함과 범용성, 호환성을 바탕으로 현재까지도 인터넷에서 정보의 전달을 위한 포맷으로서의 역할을 훌륭히 수행하고 있지요.

하지만 WWW가 탄생된 지 20년이 되어가는 현재 시점에서는 폭발적인 정보 증가량, 멀티미디어화 된 정보, 새로운 기술의 욕구 등으로 인해 HTML 만으로는 정보 전달에 있어 역부족인 상황이 되었습니다. 이 문제를 해결하기 위해 새로운 기술과 이론이 계속 발표되고 있으며, Flash, Silverlight, Javascript, 웹표준, 그리고 UX, RIA, Web 2.0, 시멘틱 웹 등등 많은 신기술과 개념들이 HTML의 부족했던 기능을 보충해주고 있습니다. 이 포스트에서 언급할 Microformat(마이크로포맷) 도 HTML을 도와 정보를 효율적으로 전달하기 위해 고안된 새로운 기술입니다.

마이크로포맷은 HTML 문서 내에서 특정 마크업을 사용하여, 특정 정보를 메타 데이터 형태로 가공하여 사용자(사람)와 컴퓨터(기계)가 이 정보를 직접 사용할 수 있도록 구현하는 정보 포맷 방식입니다.

보통 어떤 문서를 열람할 때, 예를 들어 “010-1234-1234” 라는 것을 사용자들이 보면 대부분 이 번호가 휴대폰의 전화번호라는 것을 금방 인식할 수 있습니다. 또한 “김철수 010-1234-1234” 라는 문구를 보면 대부분의 한국인(?) 사용자는 ‘김철수’라는 사람의 전화번호는 ‘010-1234-1234’라고 인식하게 됩니다.하지만, 이 과정은 컴퓨터에는 적용되지 않습니다. ‘김철수’라는 것이 사람 이름인지 아닌지도 알 수 없고, ‘010-1234-1234’라는 번호가 무엇인지도 알 수 없고, ‘김철수’와 ‘010-1234-1234’가 무슨 관계가 있는지도 알 수 없으며, 단지 ‘0101001’ 등의 이진수의 나열이라는 것 밖에 알 수 없습니다. 이 때문에 위 정보를 찾아내기 위해서 문서 내의 정보를 사람이 직접 검색(Ctrl+F)하여 이름을 찾아내고 전화번호를 찾아내는 불편한 과정을 수행해야 합니다.

하지만 HTML에 특정 마크업을 추가하여 표현한 ‘마이크로포맷’을 이용하면, 컴퓨터가 해당 정보가 어떤 종류인지 파악할 수 있으며 이를 통해 사람도 더욱 편리하게 정보를 얻을 수 있습니다.

즉, 마이크로포맷은 특정 마크업을 사용하여 human-readable(사람이 읽을 수 있는) 데이터를 machine-readable(기계가 읽을 수 있는), machine-understandable(기계가 이해할 수 있는) 데이터로 바꾸어주는 기술이며, 이를 각종 소프트웨어나 검색 엔진에서 활용하여 사용할 수 있는 방법은 무궁무진할 것이라고 예상되고 있습니다.

“마이크로포맷”은 다음 세가지 표준속성을 사용하여 삽입할 수 있습니다.

  • class : 마이크로포맷을 구성하는 기본 속성으로 정보를 정의하는 역할
  • rel : 현재 문서가 링크로 연결되는 문서와 어떤 관계인지 정의
  • rev : 링크로 연결되는 문서가 현재 문서와 어떤 관계인지 정의 (rel과 반대시점)

다음과 같은 HTML 코드가 있습니다.

<div>
  <div>김철수</div>
  <div>NHN corp.</div>
  <div>031-123-1234</div>
</div>

위 코드는 사람인 우리들이 읽어볼 때 어떤 내용인지 금방 파악할 수 있습니다. 이름과 회사, 전화번호 정도로 예상할 수 있지요. 하지만 컴퓨터는 위에서 설명했듯, 이 내용이 무슨 내용인지 알 수 없습니다. 이 단점을 해결하기 위해 마이크로포맷의 class 속성을 사용하여 다음과 같이 표현할 수 있습니다.

<div class="vcard">
  <div class="fn">김철수</div>
  <div class="org">NHN corp.</div>
  <div class="tel">031-123-1234</div>
</div>

위 코드만 추가하면 사용자는 물론이고 마이크로포맷을 인식할 수 있는 소프트웨어도 이 내용이 명함임을 파악하고, 이름과 소속, 전화번호를 얻을 수 있습니다.

또한, rel 속성은 XFN(XHTML Friends Network)를 사용하여 연결된 문서간의 관계를 정의할 수 있습니다.

<a href="http://dave-blog.example.org/" rel="friend met">Dave</a>
<a href="http://darryl-blog.example.org/" rel="friend met">Darryl</a>

위 코드가 나타내는 바는 dave-blog 라는 사이트는 현재 friend met 관계라는 것을 말하며 “friend” 는 친구, “met” 은 만난 적이 있는 관계를 의미합니다. 모두 조합하면 dave-blog 는 내가 예전에 만난 적 있는 친구라는 것을 의미합니다. 자세한 레퍼런스는 XFN 사이트를 참고해주세요.

또한, 마이크로포맷을 조합하여 사용할 수도 있는데 다음의 예처럼 hCard(명함)와 hCalendar(일정) 정보를 조합하여 사용할 수 있습니다.

<div class="vevent">
  <a href="http://aneventapart.com/" class="summary url">An Event Apart,
    <span class="location vcard">
      <span class="fn org">Scandinavia House</span>,
      <span class="adr"><span class="locality">New York City</span>, <span class="region">NY</span></span>
    </span>
  </a>,
  <abbr class="dtstart" title="2006-07-10">July 10</abbr>-<abbr class="dtend" title="2006-07-12">11th, 2006</abbr>
</div>

vevent는 hCalendar(일정) 정보를 표시하는 상위 클래스이며 그 하위에는 summary(일정 요약), url(인터넷주소), location(위치), dtstart(시작일시), dtend(종료일시) 등을 사용하였고 location에는 vcard 클래스를 통해 위치 정보를 더 자세하게 표현한 것을 알 수 있습니다.

이외에도 마이크로포맷 규칙은 많이 있으며 지금도 계속 제안되고 있습니다. 대표적인 클래스는 다음과 같습니다.

  • hCard : 주소록(명함) 정보, class=”vcard”
  • hCalendar : 일정 정보, class=”vevent”
  • hReview : 리뷰(사용기, 감상기, 체험기 등) 정보
  • hResume : 이력서 정보
  • geo : 위도와 경도
  • XOXO : 리스트와 요약 정보 저장
  • rel-nofollow : 마이크로포맷 파서가 분석할 필요가 없음을 명시하는 링크
  • rel-directory : 링크가 디렉토리 정보임을 명시
  • rel-tag : 링크가 태그 정보임을 명시
  • XFN : 웹페이지간의 관계 설정

위의 대표적인 속성인 hCard, geo 등을 조합하여 와인의 이름, 생산자와 위치 정보를 포함하는 마이크로포맷도 제안될 정도로 마이크로포맷은 활성화되어 있습니다.
이 글엔 언급하지 못할 정도로 많은 클래스가 제안되고 있기 때문에, 현재 제안된 마이크로포맷 클래스를 자세하게 찾아보려면 아래에 별도로 정리된 레퍼런스를 참조해주세요.

마이크로포맷은 어떻게 활용할 수 있을까요?

마이크로포맷은 파이어폭스 진영의 Tails Export, Operator 등의 플러그인을 통해 사용할 수 있습니다. 이 플러그인은 문서 내에 포함되어 있는 마이크로포맷을 파악하고, 해당 정보를 Outlook 등의 일정관리 프로그램에 보내주기도 합니다. 또한 Firefox 3 beta 버전에서도 브라우저 자체적으로 마이크로포맷을 활용할 수 있는 옵션이 존재합니다.

앞으로도 마이크로포맷이 활성화되면 이 정보들을 더욱 많은 곳에 활용할 수 있는 소프트웨어가 나올 것이라 예상됩니다. 각종 정보가 집중적으로 수집되는 포털에서 사용자들에게 원하는 정보를 예전과 달리 필요한 정보를 더 쉽게 쪽집게처럼 찾아준다는 것은 즐거운 일일 것입니다.
예를 들면, 사용자가 단순히 짜장면을 주문하는 명령 만으로도 사용자의 생활권 내에 수집된 음식점 정보들을 바탕으로 일정지역 내에 가장 싸고 맛있는 짜장면을 찾아내어 자동으로 주문하는 것도 가능하다는 것이죠.

현재로서는 마이크로포맷을 제공하는 사이트는 소수입니다. 국내에서 블로깅 툴로 유명한 텍스트큐브, 워드프레스 등이 마이크로포맷을 지원하고 있지만, 국내 포털에서는 아직 마이크로포맷을 제공하는 사이트가 없으며, 해외 사이트 중에서도 마이크로포맷을 활용한 사이트는 아직 많지 않습니다.
하지만 마이크로소프트, 야후 등이 차후에 자사의 사이트와 소프트웨어에 마이크로포맷을 활용할 것이라고 하였고, 쉬운 사용법을 바탕으로 블로그 등의 소셜 사이트 등에서 사용하는 곳이 많아지고 있기 때문에 마이크로포맷의 영향력은 더욱 확대될 것입니다.

WWW를 창시했던 팀 버너스 리(Tim Berners-Lee)가 차세대 웹으로 제안한 “시멘틱 웹” 은 컴퓨터가 이해할 수 있는 WWW 를 목표로 하고 있습니다. 하지만 이를 구현하기 위해서는 많은 장애물이 있으며, 사람의 사고를 컴퓨터가 이해해야 하기 때문에 어쩌면 도달하지도 못할 WWW의 이상향이라고 할 수 있으며, 이 때문에 시멘틱 웹은 아직 개념도 제대로 잡히지 않은 단계에 있습니다.
하지만 마이크로포맷이 기계와 사람이 동시에 이해할 수 있는 정보를 제공한다는 개념을 통해서 시멘틱 웹의 첫걸음이 되고 있는 것은 분명합니다. 이를 통해, 앞으로 시멘틱 웹이 어떤 방식으로 구현되게 될지 지켜보는 것도 즐거운 일이 아닐까 싶습니다.

References :

이 포스트는 NHN WSG(Web Standardization Guide) 블로그와 네이버의 개인 블로그에 함께 연재되고 있습니다.

You may also like...

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

%d 블로거가 이것을 좋아합니다: