Minicube.kr - 블로그닷컴 Ver 3.03

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 :
http://microformats.org/
http://wiki.mozilla.org/Microformats
http://microformats.org/wiki/Main_Page

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

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

우리나라의 인터넷 보급율은 세계적으로 봐도, 심지어 선진국에 비해서도 훨씬 높은 편입니다. 특히 초고속 인터넷은 더욱 그렇습니다.
다만, 네트워크 품질의 향상에 따라 국민 의식도 향상되었나? 하는 의문을 가진다면, 그건 아닌 것 같다고 대답하고 싶습니다. 국민의 지식수준에 대한 이야기는 아니고, 갑자기 발생한 이질적인 문화에 대해서 아직 적응 기간이 더 필요한 게 아닌가 싶기도 합니다.

사실 우리나라의 인터넷 환경은 전세계를 통틀어 매우 특이하죠. 인터넷과 컴퓨터가 전국 각지의 PC방을 통해 어디든지 연결되어 있지만 이만한 발전을 하도록 해준 원동력이 '스타크래프트'라는 일개 게임에 불과했다는 것, 소프트웨어의 저작권에 대한 의식이 거의 없다는 것, 협소한 국토면적으로 인해 인터넷 사용 인구는 세계적인 규모를 볼 때 매우 소규모인 점, 이성보다는 감성이 판단의 기준이 되는 경우가 많다는 점, 정(情)을 중요시하는 국민성, 모든 국가에서 점유율 1위를 해왔던 MS Word 가 유독 우리나라 시장에서만 2위라는 점, 구글이 그다지 인기가 없다는 것, 우리나라에선 대성공한 싸이월드 같은 수익모델이 해외에선 참패하고 있다는 점 등등 ...
예를 들어보면 수도 없이 들 수 있을 정도로 정말 우리나라 IT/인터넷 시장은 독특하지요.

세계적으로 성공한 IT 기업의 공통점이었던 Web 2.0 의 패러다임을 우리나라의 매우 특수한 환경에 적용하려면 어떻게 해야 할까요...?
Web 2.0 의 중요한 이념은 분명 참여, 공유, 개방 입니다. 그만큼 사용자의 참여가 중요하고, 사용자의 활발한 이용과 그 부산물인 따른 콘텐츠가 중요하다는 거죠.
그래서 IT 기업은 사용자가 원하는 Needs 를 정확히 캐치해서 그 Needs 를 최대한 만족스럽게 충족 시켜줄 플랫폼(or 사이트)를 만들어 주어야 합니다. 그리고 그 서비스의 사용성을 해치지 않는 선에서 수익 모델을 생각하고 그것의 효과가 나타날 때에 비로소 Web 2.0 기업은 돈을 벌 수 있게 되는 거죠.

그런데, 사용자가 대체 원하는 서비스가 무엇인가... 이 부분은 현재 우리나라에 나온 Web 2.0 서비스를 통틀어봐도 눈에 띄는 것이 없을 뿐더러 가장 어려운 질문이기도 합니다.
해외의 예를 들면 이베이, 구글, 위키피디아 등등... Web 2.0 모델은 많습니다만, 우리나라에 같은 서비스가 들어온다고 해도 그대로 적용되지가 않지요.


컴퓨터를 자주 쓰는 10~20대 남자이거나 IT 종사자는 따로 홍보하지 않아도 알아서 써보고 피드백을 해줍니다. 솔직히 기업 입장에서는 그들의 의견을 받을지언정 그들의 마음에 들도록 알아서 모실 필요는 없다고 봅니다. 오히려 파워 유저에 속하지 않고 전체 인터넷 인구의 99%를 차지할 지도 모르는 인터넷 사용자, 단지 네이버나 다음에서 지식인 검색 한번 해서 정보를 얻는 Light User 들의 방문과 클릭을 얻어내는 게 훨씬 어려울 거라 생각합니다.
그리고 Light User 를 위해, 사이트는 매우 가볍고 쓰기 쉽도록 해줘야 합니다. 그것을 위해서 개발자는 머리가 쥐어터지는 한이 있더라도요.

MS Surface Computing 에 관한 포스트에서 밝혔듯 컴퓨터는 두가지 형태로 갈라서서 발전하게 될 것 같습니다. 지금과 같이 키보드와 마우스 등을 갖춘 전통적인 형태는 서비스 제공자와 개발자를 위해... Surface Computing 을 지원하는 멀티미디어형 컴퓨터는 서비스를 이용하고자 하는 일반인을 위해서요. 위와 같은 일반인(Light User)을 위한 새로운 컴퓨터를 통해서 제공되는 편리한 서비스가 앞으로의 추세의 하나가 되지 않을까요?

다만 99%의 일반 사용자를 만족시켜주고 지속적으로 사용하게 할 서비스가 무엇인가... 그것은 제가 함부로 덤빌 수가 없는 영역이네요. ^^;; 물론 저도 한국의 웹서비스에 대해 여러가지 생각은 하고 있지만, 지금으로선 도움을 줄 뿐, 역시 서비스 기획자와 사용자의 영역이지요...

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

얼마 전 회사에서 진행했던 세미나 발표자료입니다. 웹페이지 속도를 개선할 수 있는 방법을 UI개발 시점에서 살펴본 것이구요. 이 발표자료의 원본은 2007년 6월 8일 영국 런던에서 있었던 @media 2007 conference 에서 Nate Koechley 라는 분이 High performance for Web sites - 14 Rules for faster pages 라는 주제로 발표하신 자료입니다.
웹페이지의 속도를 빠르게 하고 효율성을 높여줄 수 있는 14가지 룰과 그와 관련된 배경지식을 다루고 있구요. UI개발과 관련이 있지만, 서버사이드 스크립트 차원이나 서버 차원에서 다루어지는 것도 있습니다.

우선 제가 속한 팀이 UI개발 팀이기 때문에 팀 업무영역에 관련된 것들만 추려서 발표자료를 만들어서 발표했었구요, 실제 발표내용은 스크립트로 넣었으니 참조하세요.

여담이지만, 지금 이 발표자료는 국내 포털 내의 관련 팀들도 다 한번씩 리뷰를 거쳤다는 소문이 있군요. ㅋㅋㅋ

제작은 Office 97-2003을 위한 PPT 파일, 그리고 Office 2007을 위한 PPTX 파일로 구분하여 올렸습니다. 몰랐는데, Office 2007의 pptx 문서형은 각종 자료와 xml파일의 압축파일 같은 형태로 되어 있네요;;;

발표자료 - 효율적인 웹페이지 제작을 위한 기법 (97-2003) (1.9MB)
발표자료 - 효율적인 웹페이지 제작을 위한 기법 (2007) (0.6MB)

Nate Koechley's BLOG and current post
High Performance for web sites presentation for PPT (25MB)
High Performance for web sites presentation for PDF (3MB)

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.