Annotation이야기(2)

815206 Annotation이야기(2) - RDFa 871220 2008-03-21T07:39:06Z http://kwangsub.springnote.com/pages/815206 2008-02-14T23:55:56Z 오늘은 <a href="http://www.w3.org/TR/xhtml-rdfa-primer/" class="external newWindow" title="http://www.w3.org/TR/xhtml-rdfa-primer/">RDFa</a>에 대해 소개합니다. 시맨틱웹을 만드는데 필요한 것들이 무엇이 있을까 생각해본적이 있습니다. 이 팀블로그가 만들어지면서 이런저런 개념, 기술들을 나열해 봤습니다. 시맨틱웹을 저장, 표현, 검색이라는 큰 카테고리로 만들수 있다면 이번에 소개할 RDFa는 "표현"에 포함되는 내용입니다   <h3>#. RDF? RDFa?</h3> <h5>- RDF</h5> 그럼 RDF는 뭐지? RDFa는? (저 알파벳a는 머리를 긁고 있는 RDF의 모습이네요. ^^a;; 뭐지?a) 이 글을 읽는 분들은 RDF에 대한 기본 지식은 가지고 계실줄 믿습니다. 저는 RDF를 "웹상에서 활동하는/되어지는 객체들의 표현"이라고 말하고 싶습니다. 또 뜬구름잡는 고질병이 돋았나 하시는 분도 계시겠네요. 그럼 좀더 자세한 설명을 해보도록 하겠습니다. 예를 들어보죠! 요새 글에 태그다는 연습? 많이 해보셨죠? 블로그를 생각하면 뭐가 생각나나요? 헤어진 여자친구, 떼인 돈 이런거 말고, "블로그" 자체 속성을 보면 제목, 글쓴이, 배포날짜, 내용 이런것들을 나열할 수 있습니다. 이런 공통적인 것을 뽑아서 스팩으로 만들어 놓은것이 RSS입니다. RSS스팩을 보면 <item>,<title>,<link>,<category>,<author>,<pubDate>,<description>등의 항목들이 명시화되어 있습니다.  그럼 두번째 예제는 "친구"를 상상해 보세요...와~ 모두들 "이 사람 FOAF얘기할려고하는 구나!" 라고 생각하고 계시죠? 네 맞아요. FOAF은 "친구와 친구관계"를, SIOC은 "포럼"에 대한 표현을 RDF를 이용해 명세화 한 것들입니다. 지웅님께서 올린 "<a href="http://semantic.tistory.com/6" title="http://semantic.tistory.com/6" class="external newWindow">Semantic Vocabulary. 웹에 (쉽게) 의미를 부여하기.</a>"를 보시면 RDF를 이용한 Semantic Vocabulary들의 소개를 보실 수 있습니다.   <h5>- RDFa</h5> RDFa는 XHTML에서 FOAF, Dublin Core, Creative Commons등과 같은 Structured Data(Semantic Vocabulary)를 표현(연결)하기 위해 만들어진 스팩입니다. 주로 표현계층에서 사용되던 HTML의 엘리먼트에 Semantic Vocabulary엘리먼트들을 속성값으로 추가해줌으로서 브라우저에서 보는 , <div>같은 엘리먼트에 의미정보가 연결되는 것이죠. 이런 점에서 <a href="http://semantic.tistory.com/14" title="http://semantic.tistory.com/14" class="external newWindow">SHOE</a>가 뷰-데이터간의 연결이 결여된 점을 보완하고 있습니다. 눈에 보이는 문자와 의미정보가 그대로 연결되어 있는 셈입니다.   그럼 전통적인? HTML페이지를 보시죠. [code.1] <ol class="code"> <li><html>     <head><title>Semantic Team Blog Beer Party</title></head>     <body>             2011년 3월 20일, 오후 5시에 시맨틱 팀 블로그에서 맥주파티를 엽니다.                 행사의 정보는 <a href="http://example.org">이곳</a>을 통해 확인하실 수 있어요!</li> <li>        문의 사항이 있으시면 <a href="mailto:jo@example.org">email</a>을 통해 연락을 주세요!         </body> </html></li> <li>이 예제는 <a href="http://www.w3.org/TR/xhtml-rdfa-primer/">http://www.w3.org/TR/xhtml-rdfa-primer/</a> 에 나온 예제를 각색했습니다.</li> </ol>   시맨틱웹팀블로그에서 2011년에 맥주파티를 벌인다고 하네요. (그때까지 이 블로그가 건재하다면 정말 맥주한잔 해야겠는데요^^). 맥주 파티를 공지하기 위해 팀블로그를 통해 위와 같은 모임 정보를 올렸습니다. 우리들(사람들)이 위의 정보를 모니터를 통해 받아 보면 어떠한 정보들을 얻어 낼 수 있을까요? 먼저 이벤트에 대한 정보(이름, 장소, 시간)와 시맨틱 웹팀블로그에 대한 정보(연락처, 사이트주소)를 얻을수 있습니다. 어떻게요? 우린 글자를 읽어 그 뜻(Semantic)과 문맥(Context)를 이해 하기 때문이지요.    여기서 잠깐! 시맨틱웹이 뭐죠? 많고 많은 정의중에 데이터와 링크에 초점을 맞춘 정의는 이렇습니다. 이씨 아저씨(^^)가 말하길... <blockquote> "The Semantic Web isn't just about putting data on the web. It is about making links, so that a person or machine can explore the web of data. With linked data, when you have some of it, you can find other, related, data." @Tim-Berners Lee </blockquote> 보시면 사람, 기계가 웹에 내포되어 있는 데이터를 찾아(explore)낼 수 있게 하는 링크된 것들이라고 얘기하네요. 기존의 표현(Presentation)에 초점을 맞춘 HTML을 통해서도 사람들은 내포되어 있는 데이터, 행사 - 이름, 행사 - 위치, 행사 - 행위자등의 관계(link)를 찾아 낼 수 있습니다. 하지만 머신에서는 그러한 데이터를 찾아내려하거나 재사용을 하려면 뭔다 다른 다듬질을 필요로 하겠지요.   다시 예제로 돌아가서, 이벤트, 팀블로그에 대한 정보를 RDFa를 이용해 추가적인 다듬질이 필요없이, 데이터간의 연결 링크가 유지되도록 만들어진 XHTML을 살펴봅시다. [code.2] <ol class="code"> <li><?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns:cal="http://www.w3.org/2002/12/cal/ical#"       xmlns:contact="http://www.w3.org/2001/vcard-rdf/3.0#">   <head>   <title>맥주파티</title>  </head>   <body>   </li> <li>       2011년 3월 20일 오후 5시!!     시맨틱 블로그 팀에서     "맥주파티"       로 여러분을 초대합니다.   </li> <li> </li> <li>  행사의 정보는 <a rel="contact:org" href="http://semantic.tistory.com">이곳</a>을 통해 확인하실 수 있어요!    </li> <li>  문의 사항이 있으시면  <a rel="contact:email" href="mailto:kwangsub.kim@gmail.com">email</a>을 통해 연락을 주세요!</li> <li> </li> <li>  Semantic Team Blogger</li> <li>  김광섭 올림</li> <li> </body> </html></li> </ol>   상단 <html>엘리먼트의 속성값에 이 페이지에서 사용될 Semantic Vocabulary를 선언하고 있습니다. <ol class="code"> <li><html xmlns:cal="http://www.w3.org/2002/12/cal/ical#"       xmlns:contact="http://www.w3.org/2001/vcard-rdf/3.0#"></li> </ol> 이제 본문에서 CURIE형식으로 특정 , 등과 같은 엘리먼트에 Semantic Vocabulary를 연결할 수 있습니다.   실제 View와 의미정보를 연결하는 예제입니다. "2011년 3월 20일 오후 5시!!"라는 것은 "cal:dtstart"라는 속성과 연결이 되어 있습니다. 그리고, 그 "cal:dtstart"라는 속성은 "20110320T1700-0500"란 실제 값과 연결이 되어 있습니다. <ol class="code"> <li>    2011년 3월 20일 오후 5시!! </li> </ol>   [code.1]의 HTML가 내포하고 있는 의미정보를 RDFa를 이용해 [code.2]와 같이 명시적으로 의미정보를 연결해 이씨 아저씨가 얘기했던 It is about making links, so that a person or machine can explore the web of data 이 서서히 보여지는게 아닐까 생각해봅니다.   <h3># 어떤 장점?</h3> <h5>메타데이터의 재사용</h5> -"<a href="http://semantic.tistory.com/6" title="http://semantic.tistory.com/6" class="external newWindow">Semantic Vocabulary. 웹에 (쉽게) 의미를 부여하기.</a>"에 있듯이 많은 스팩들이 만들어지고 있습니다. 이런 스팩들이 나오는 이유가 무었일까요? 제 생각엔 대부분의 사람들이 인정하는 Vocabulary를 만들고 그 의미를 다시 사용할수 있게 하는데 있는것 같습니다. "contact"란 의미를 다른 곳에서 (재)사용해도 언제나 동일하다는 것이죠.   <h5>기기나 어플리케이션간의 데이터 교환 가능</h5> iMail을 통해 들어오는 메일중에 시간정보를 담고 있는 메일을 받아 보게 됩니다. 아래 스크린처럼 메일의 시간을  바로 iCal로 저장하면서  event를 만들수 있습니다. <img class="attachment" title="imail.png" src="/pages/815206/attachments/408282" alt="imail.png" /> 현재 iCal에서 제공하는 이 기능은 본문의 날짜데이터를 파싱해서 이벤트를 만들어주는 간단한 로직입니다. (한글날짜도 locale만 처리된다면 가능하겠죠) 이제 웹에서 이런 구조화된 데이터를 내 PC에 설치된 어플리케이션과 웹에서 혼용해 사용할 수 있을겁니다.   <h5>메타데이터를 이용한 검색 가능</h5> 요즘 블로그나 여타의 사이트에서도 "태그 검색"이란 기능을 거의 제공하고 있습니다. <tag>의 메타정보를 추출한것이지만 <contact:fn>, <contact:email>를 이용해 AAA@mail.com을 사용하는 AAA가 등록한 글들을 검색할 수 있을것입니다.   그 밖에 많은 서비스들이 만들어질 수 있겠지요. <a href="http://www.w3.org/TR/xhtml-rdfa-scenarios/" title="http://www.w3.org/TR/xhtml-rdfa-scenarios/" class="external newWindow">RDFa Use Cases</a>에 보시면 몇개의 시나리오를 더 보실 수 있습니다.     ps. <a href="http://www.ysearchblog.com/archives/000527.html" title="http://www.ysearchblog.com/archives/000527.html" class="external newWindow">Yahoo의 소식</a>을 듣고 가능한 서비스들을 머리속에 떠오르니 마냥 기분이 좋아졌습니다. 한편으로 팀블로거들도 자극을 받고 있답니다.~ 아자!     <a href="http://www.w3.org/TR/xhtml-rdfa-primer/">http://www.w3.org/TR/xhtml-rdfa-primer/</a><a href="http://www.w3.org/MarkUp/2008/ED-rdfa-syntax-20080125/"></a> <a href="http://www.w3.org/MarkUp/2008/ED-rdfa-syntax-20080125/"></a><a href="http://www.w3.org/MarkUp/2008/ED-rdfa-syntax-20080125/">http://www.w3.org/MarkUp/2008/ED-rdfa-syntax-20080125/</a> <a href="http://www.w3.org/TR/xhtml-rdfa-scenarios/">http://www.w3.org/TR/xhtml-rdfa-scenarios/</a>       http://kwangsub.myid.net/ http://kwangsub.myid.net/ 419