INTERNET 10 - mm.sookmyung.ac.krmm.sookmyung.ac.kr/~sblim/lec/xml-adv/internet_chap10.pdf · 츠에 의미를 부여하여 시맨틱웹으로 발전해 가는 디딤돌이 되는

웹2.0 서비스의 구현기술

10CHAPTER

INTERNET

10.1 콘텐츠 유통을 위한 RSS 기술

10.2 콘텐츠 출판을 위한 블로그(Blog)와 팟캐스팅(Podcasting)

10.3 시맨틱웹으로 발전하는 태깅과 마이크로포맷

10.4 웹 인터페이스의 진화, RIA와 Ajax

10.5 오픈 API와 매쉬업 서비스

실습 Lab.6 블로그 제작

실습 Lab.7 매쉬업 서비스 활용

366

10웹2.0 서비스의 구현기술

C H A P T E R

참여, 공유, 개방이라는 특징을 가지고 있는 웹 2.0 서비스는 웹의 발전과 함께

진화해 왔다. 이제 웹 2.0 서비스는 플랫폼으로서의 웹 환경에서 사용자들의 집

단지성을 활용하여 콘텐츠를 제공하고 공유할 수 있게 되었다. 이러한 웹 2.0 환

경에서 사용되는 기술은 개별적인 특정 기술의 분류가 아니라 끊임없이 진화하고

있는 웹 발전의 연장선상에서 유기적으로 연계되고 비즈니스 측면에서 활용된 복

합적인 기술들을 지칭한다.

이 장에서는, 콘텐츠 유통 채널의 혁명을 가져온 RSS 기술과 콘텐츠의 웹 출

판 및 공유를 가능케한 블로그 및 팟캐스팅 기술을 소개한다. 그리고 기존의 콘텐

츠에 의미를 부여하여 시맨틱웹으로 발전해 가는 디딤돌이 되는 태깅와 마이크로

포맷을 설명하고, 웹 애플리케이션에서 인터페이스 개발을 편리하게 해주는 웹

클라이언트의 RIA 기술을 설명한다. 마지막으로 웹 서비스의 개발 방법에 진화를

가져온 오픈 API에 기반한 매쉬업 기술을 소개한다.

10.1 콘텐츠 유통을 위한 RSS 기술

기존의 웹 콘텐츠는 생산자가 일방적으로 자신의 홈페이지에 게시를 해 놓거나

이메일로 전송을 해 주면 이를 받아 해석을 하는 과정을 거쳤다. 이 경우에 언제

어느 콘텐츠가 새로이 갱신되었는지 파악하는 것은 매우 어려우며 또한 웹문서에

는 다양한 형식의 콘텐츠가 사용되므로 더더욱 갱신 여부나 그 내용을 파악하기

에 많은 수고가 필요하였다. 이 절에서는 이러한 콘텐츠의 유통에 혁신을 가져온

웹2.0 서비스의 구현기술 CHAPTER

367

10

RSS 기술을 소개하도록 한다.

10.1.1 데이터 유통채널의 변화와 RSS의 등장

콘텐츠 신디케이션(Contents Syndication)이란 콘텐츠 생산자(Contents

Provider)가 제공하는 콘텐츠를 다른 수요자에게 연결해주는 온라인 콘텐츠의 배

급 및 유통을 위한 중개사업을 말한다. 주로 웹에서 콘텐츠를 공급하는 웹 신디케

이터(Web Syndicator)는 콘텐츠를 직접 생산하지 않지만 우수한 웹 콘텐츠를 수

집하여 콘텐츠 혹은 요약정보를 다른 여러 웹사이트 운영자에게 제공함으로써 콘

텐츠가 유통되도록 한다.

영화유통의 예를 보면, 배급업체가 영화의 판권을 제작업체로부터 사들여 동

영상 형식으로 변경한 후 여러 종류의 영화감상 혹은 VOD 사이트 운영자에게 판

매하여 영화배급을 하게 된다. 대표적으로 활용되고 있는 또 다른 사례로는 뉴스

의 공급이 있다. 신문사나 방송사 등 언론사에서 제작한 뉴스가 일정한 포맷으로

저장되어 각종 유통사에 배급이 되고 있다. 따라서 일반 사용자는 언론사 사이트

뿐만 아니라 포털사이트에서 제공되는 뉴스나 검색 결과 등에서 뉴스정보를 접할

수 있게 되었다.

이와 같이 콘텐츠 신디케이션의 유통 환경이 변함에 따라 콘텐츠를 공급하고

배급하는 유통 채널에도 변화가 요구되었다. 온라인 웹 환경에서 공급되는 콘텐

츠는 무수히 많으므로 단순히 웹사이트에 게시하는 것만으로는 사용자에게 정보

가 충분히 전달될 수 없으므로 새로운 콘텐츠에 대한 정보를 일반 사용자에게 별

도로 제공해 주어야 한다. 지금도 많이 사용되고 있는 이메일이나 메시징 방식에

서 정기적으로 정보를 제공받기 위해서는 사용자의 메일 주소를 일단 등록한다.

등록한 후에는 필요로 하지 않는 정보도 같이 포함된 정보를 제공받아 그 중에서

필요한 정보만 추려내야 한다. 메일의 경우에는 개인메일과 스팸메일도 포함되어

있어서 필요한 콘텐츠 정보만 골라내는 것도 귀찮은 작업이 될 수 있다. 이러한

문제점을 극복하고 사용자가 원하는 정보만을 적절한 시기에 손쉽게 제공 받거나

찾아 볼 수 있도록 하기 위하여 웹피드(Web Feed) 개념이 등장하였다.

콘텐츠 신디케이션을 위한 웹피드의 핵심 요소는 콘텐츠의 정보를 사용자에게

전달하기 위한 피드라는 개념의 웹문서 파일 형식이다. 현재 가장 널리 사용되는

368

INTERNET소셜미디어 시대의 인터넷 이해

형식으로는 RSS가 있으며, 여기에는 제공하고 있는 콘텐츠의 목록 및 개요 등 관

련 정보를 포함하고 있다. 해당 웹사이트에서 정기적으로 콘텐츠 정보를 제공받

기 원하는 사용자는 웹피드의 주소를 자신의 구독기에 등록을 하여 최신 정보를

제공받을 수 있다. 콘텐츠 구독기는 등록된 웹 사이트의 피드 파일에서부터 주기

적으로 갱신된 정보만을 찾아와서 보여줌으로써 사용자가 손쉽게 새로운 정보만

을 접할 수 있게 된다. 그림 10.1에서는 이메일과 웹피드를 이용하여 콘텐츠를 배

포하는 방식을 비교하여 보여주고 있다.

웹사이트 웹사이트 웹사이트웹사이트

콘텐츠구독기

콘텐츠요청

주소등록

요약 정보

웹피드

웹피드주소

웹사이트

웹피드

웹사이트

웹피드

메일함개인메일

메일주소등록

콘텐츠,뉴스레터발송

스펨메일

(a) 이메일을 이용한 배포 방식 (b) 웹피드에 의한 배포 방식

RSS는 ‘RDF Site Summary’ 혹은 ‘Really Simple Syndication’ 등의 이름을

지칭하며 웹사이트에서 콘텐츠의 갱신 정보를 요약하여 게시해주는 웹피드의 표

준형식 중 하나로서 뉴스, 비디오, 음악, 블로그 등의 배포에 널리 사용되고 있다.

RSS 문서는 콘텐츠의 요약 정보와 메타데이터를 포함하고 있으며 표준 XML 파

일 형식을 따르므로 콘텐츠 신디케이션에서 여러 사람이 공유하는 데 유리하다.

콘텐츠 제작자는 유통방법에는 신경쓰지 않고 새로운 콘텐츠가 추가될 때 RSS 피

드의 정보만 새로운 내용으로 갱신해 주면 된다.

사용자는 원하는 사이트의 갱신정보를 콘텐츠 구독기를 사용하여 한군데에서

받아볼 수 있으며, 콘텐츠 구독기로는 별도의 RSS 리더(RSS Reader) 혹은 웹브

라우저 내의 RSS 피드 기능을 이용하면 된다. 사용자는 원하는 사이트에서 제공

하고 있는 RSS 버튼을 통해 RSS 파일 주소를 자신의 리더에 등록하면서(①) 콘

텐츠 구독을 시작하게 된다. RSS 리더는 등록된 주소의 RSS 피드 내용을 점검하

여 새로 갱신된 정보만을 요청하여(②) 화면에 보여준다. 결국 사용자는 모든 사

이트를 직접 방문하여 새로운 내용이 있는지 점검할 필요가 없이 RSS 리더가 등

그림 10.1

이메일 배포와 웹피드 배포의 차이


369

10

록된 피드 주소로부터 갱신된 내용만을 취합해 줌으로써(③) 갱신된 정보를 볼 수

있다. 이 때 갱신된 콘텐츠의 내용을 보기 원하는 경우에는 연결되어 있는 링크로

부터 직접 방문하여 내용을 볼 수 있다(④). 그림 10.2는 RSS의 기본적인 작동 개

념을 보여주고 있다.

콘텐츠 공급자 콘텐츠 소비자

링크

②새로 업데이트된 콘텐츠 정보 요청

스케줄링을 통해주기적으로 반복

①등록

④원하는 경우다운로드

③갱신 정보 전달

웹사이트 콘텐츠구독기

RSS

10.1.2 RSS의 발전 과정과 작동 원리

RSS는 1990년 중반 마이크로소프트에서 전통적인 미디어 데이터의 정보를 인

터넷 채널을 통해 배포하기 위하여 CDF(Channel Definition Format)를 XML

문서형식으로 정하여 사용하였다. 한편 애플 컴퓨터에서는 관리를 위한 정보인

메타데이터 개념을 표현하는 Apple MCF(Meta Contents Framework)을 개발

하였으나, 담당자가 넷스케이프로 이직하면서 MCF를 발전시켜 XML에 기반한

RDF(Resource Description Framework)를 개발하였다. RDF는 일반적인 메타

데이터 표현언어인데 온톨로지 표현 등에 사용되어 시맨틱웹(Semantic Web)의

발전에도 기초가 되고 있다. 다음 코드는 RDF를 이용하여 책에 대한 메타데이터

를 표현한 예이다.

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:dc="http://purl.org/dc/elements/1.1/" >

<rdf:Description rdf:about="http://en.wikipedia.org/wiki/Steve_Jobs">

<dc:title>Steve Jobs</dc:title>

<dc:publisher>Lim Media</dc:publisher>

</rdf:Description>

</rdf:RDF>

최초의 RSS 피드 파일 형식은 1999년 넷스케이프 사에서 XML 기반의 RDF

그림 10.2

RSS의 기본 개념

370


로 표현한 것으로 RSS(RDF Site Summary 혹은 Rich Site Summary) 버전 0.9

로 통칭된다. 한편 새로운 RSS 형식을 개발하기 위한 공개그룹인 RSS-DEV 워

킹그룹에서 2000년에 RDF에 기반하여 메타데이터 표현을 명확히 한 RSS 1.0을

발표하였다. 이에 반해 UserLand에서는 그간의 0.9 버전을 지속적으로 발전시

켜 2002년에 RSS의 최종판인 RSS(Really Simple Syndication) 2.0을 발표하였

다. 이들 두 가지 버전은 서로 호환이 되지 않는 전혀 다른 형식이므로 RSS 버튼

에 버전을 표기하거나 혹은 RSS 리더가 버전을 구분하여 읽도록 하고 있다. 또한

웹컨소시엄에서는 웹피드의 표준화를 위해 Atom이라는 명칭의 파일 형식을 개발

하여 2003년 Atom 1.0을 발표하였으나, 예상과는 달리 그리 널리 사용되지 않고

RSS 1.0, RSS 2.0, 그리고 Atom 1.0이 혼재되어 사용되고 있다.

가장 널리 사용되고 있는 RSS 2.0의 경우 RSS 피드 파일의 구성은 채널

(<channel>)과 아이템(<item>) 정보로 구성되어 있다. <channel>은 일종의 사이

트에 대한 헤더 정보인데 어느 사이트에서 만들어졌는지, 전체 제목이 무엇인지,

어떤 사이트인지 설명을 하는 등의 정보를 가지고 있다. 채널에서 꼭 필요한 요소

로는 <title>, <link>, <description>이 있다. 즉, 그 채널의 이름이 무엇인지 설명

하고, RSS 채널을 받아온 사이트의 URL을 표시하며, 채널에 어떤 내용이 들어

있는지 설명을 한다. 그 외에도 16가지의 부가적인 요소가 있다. <item>은 사용

자가 읽으려는 각각의 글 자체에 대한 요약 정보가 들어있는 것으로, 피드에 들어

있는 아이템은 각각 <title>과 <description>을 갖고 있어야 한다. 그 외의 요소는

콘텐츠의 URL정보가 들어있는 <link> 요소 등 7가지의 부가적인 요소가 있다.

다음은 w3schools라는 사이트에서 제공하는 RSS 피드 파일의 사례이다.

그림 10.3

RSS 피드 버튼


371

10

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<item>

<title>RSS Tutorial</title>

<link>http://www.w3schools.com/rss</link>

<description>New RSS tutorial on W3Schools</description>

</item>

<item>

<title>XML Tutorial</title>

<link>http://www.w3schools.com/xml</link>

<description>New XML tutorial on W3Schools</description>

</item>

</channel>

</rss>

채널 정보

아이템 정보

아이템 정보

콘텐츠의 갱신 정보를 RSS 피드로 제공하고자 하는 웹사이트에서는 RSS 피드

를 제공한다는 사실과 피드의 주소를 RSS 버튼으로 표시해 두어야 한다. 다음의

예는 전자신문의 경우로서 RSS 피드를 제공하는 버튼이 있는 화면이다. 한 사이

트에서 콘텐츠의 구분에 따라 여러 개의 RSS 피드를 제공하여 콘텐츠의 구독을

더욱 편리하게 해주고 있다.

RSS 리더는 RSS 피드를 읽어주는 프로그램으로, 웹페이지를 보기 위해 웹

브라우저를 이용하듯이 RSS 피드의 내용을 보기 위해 리더를 이용하는 것이다.

RSS 리더를 사용하려면 우선 콘텐츠 공급 사이트에서 제공하는 RSS 피드의 주소

그림 10.4

RSS 피드 버튼과 RSS 피드 주소

372


를 가져와서 등록을 한다. RSS 리더에서는 등록된 주소 목록을 스케줄링에서 설

정한 대로 주기적으로 방문하여 피드에 새로운 내용이 있는지 확인해야 한다. 이

를 위해 해당하는 사이트의 웹서버는 새로운 콘텐츠 정보를 XML형식의 RSS 피

드를 제공하고, RSS 리더는 RSS 피드를 파싱하여 그 결과를 사용자가 볼 수 있

는 형태로 화면에 출력한다.

일반적으로 RSS 리더로는 Google Reader, My Yahoo, Bloglines, 국내에서

는 한RSS 등이 많이 사용되고 있다. 최근 웹브라우저에서도 RSS 피드의 리더 기

능을 지원하여 별도의 RSS 리더를 이용하지 않고도 웹브라우저에서 제공하는 기

능을 이용하여 RSS 피드를 볼 수 있다. 다음 그림은 한RSS 리더를 통하여 뉴스

피드를 제공받는 경우와 웹브라우저에서 뉴스 피드를 확인하는 화면이다. 웹피드

에서 제공하는 콘텐츠를 직접 방문하여 접속해 본 경우에는 방문 사실을 표시해

주어 편리하게 확인할 수 있다.

(a) 한RSS를 이용하는 경우 (b) 웹브라우저를 이용하는 경우

10.1.3 RSS의 장점과 활용 분야

RSS 피드를 이용하면 콘텐츠 신디케이션에서 여러 가지 장점이 생긴다. 우선

사용자 입장에서 선택적인 콘텐츠 구독이 가능해진다. 사용자가 원하는 주제나

원하는 사이트에서만 피드를 제공받으므로 무작위로 제공하는 콘텐츠 정보의 홍

수에서 벗어날 수 있다. 또한 동시에 여러 채널의 피드를 구독해 볼 수 있으므로

빠르고 편리하게 콘텐츠 정보를 제공 받으며, 과거의 구독 기록도 보관할 수 있

다. 그리고 피드내 링크를 통해 자동으로 콘텐츠와 연동이 되며, 표준화된 웹피드

형식을 사용하므로 결과적으로 콘텐츠의 재사용성이 증가하게 된다.

그림 10.5

RSS 리더에서 피드 내용 보기


373

10

콘텐츠 신디케이션에서 웹피드를 활용하고 있는 대표적인 사례는 앞서 언급한

뉴스 서비스나 주기적으로 변경되는 정보를 제공하는 사이트에서 많이 사용되고

있다. 지속적으로 음악이나 멀티미디어 콘텐츠를 배포하는 팟캐스팅에서도 RSS

기술이 핵심이며 콘텐츠의 상품거래 정보, 날씨나 환율정보 제공, 이벤트 정보 제

공, 기업 홍보 등 다양한 분야의 웹사이트에서 웹피드를 제공하고 있다. 콘텐츠

출판에 활용되는 블로그에도 RSS 피드 기능을 활용하여 독자들이 구독해 보는 데

편리하도록 해주고 있다.

RSS 피드는 콘텐츠 신디케이션뿐만 아니라 광고 삽입을 통해 기업 홍보 및 마

케팅 수단으로도 활용될 수 있으며, 일정 공유라든지 쿠폰 발행 등의 애플리케이

션에서도 활용될 수 있다. RSS 피드의 또 다른 주요 활용 분야는 교육 콘텐츠 분

야이다. 이러닝 교재를 RSS 피드를 통하여 지속적으로 제공받을 수도 있으며, 학

교에서 공지사항이나 과제 제출도 RSS 피드를 통해 효율적으로 관리될 수 있다.

최근에는 검색 엔진에서 RSS 피드를 별도로 검색하기도 하며, 모바일 환경에서

RSS 피드 기능을 연동하여 다양한 앱을 선보이고 있다.

10.2 콘텐츠 출판을 위한 블로그(Blog)와 팟캐스팅(Podcasting)

웹 환경에서 각자의 사이트에 올려놓은 콘텐츠는 누구나 쉽게 접근이 용이하

다. 초기의 웹사이트에서 자신의 소개나 홍보의 목적으로 홈페이지에 정보를 제

공하던 수준에서 더 나아가 최근의 웹사이트에서는 자신의 콘텐츠를 널리 알리고

남들이 구독하도록 하는 수준으로 발전하고 있다. 블로그 사이트가 콘텐츠 퍼블

리싱을 위해 활발히 운영되고 있으며, 앞 절에서 소개한 RSS 피드 기술이나 이를

이용한 팟캐스팅 기술이 퍼블리싱 효과를 더욱 높여주고 있다.

10.2.1 블로그의 개념과 작동 원리

블로그(Blog)라는 개념은 1997년 11월 존 바거(John Barger)가 www.robot-

wisdom.com이라는 웹사이트를 만들면서 처음 사용하였는데, web과 log(기록)라

는 단어를 합쳐서 Blog라고 부른 것이다. 블로그는 작성자인 블로거(Blogger)가

알리고 싶은 생각이나 주장 같은 것을 웹페이지에 일기처럼 적어 놓고, 다른 사람

374


도 볼 수 있게 나열해 놓은 글들의 모음이다. 여러 사람이 글을 작성하고 공유하

는 게시판과는 달리 한 사람이나 소수의 사람만이 글을 게시하며 다른 사람은 게

시된 글을 읽기 쉽도록 나열 해 준다. 이와 같은 작업이 콘텐츠를 남들에게 알리

는 과정이므로 일반적으로 콘텐츠 출판(Contents Publishing)이라고 하며, 때로

는 인터넷을 통해 기존 미디어에 못지않은 힘을 발휘할 수 있어서 ‘1인 미디어’라

는 호칭으로 부르기도 한다.

인터넷 게시판에서 진화한 텍스트 블로그에는 댓글 기능과 트랙백 기능이 있

어서 블로거와 독자 사이의 의사소통 방법이 더욱 다양해졌다. 또한 앞 절에서 소

개한 RSS 피드 기능을 적용하면 독자들이 손쉽게 블로그를 구독해 볼 수 있어서

블로그의 사용이 더욱 증가하였다. 모바일 환경에서는 문자 메시지 기능을 이용

한 블로그 서비스도 인기리에 사용되고 있으며, 대표적인 서비스로 트위터가 널

리 사용되고 있다. 모바일 블로그는 짧은 길이의 글을 게시한다고 해서 마이크로

블로그라고 부르고 있다. 또한, 초기의 블로그는 단순히 텍스트 글만 올리고 댓글

을 다는 기능만 있었지만, 점차 발전하여 멀티미디어 자료를 포함하도록 진화하

고 있다. 사진을 주로 올리는 포토블로그(Photoblog), 음악 파일을 다루는 mp3

블로그, 동영상 위주인 비디오블로그(Videoblog 혹은 Vlog), 음악을 포함하여 모

든 스트리밍 미디어를 다루는 팟캐스팅 등이 서비스되고 있다.

블로그의 작동 원리를 이해하기 위하여 우선 블로그의 구성요소를 살펴보자.

그림 10.6에서 보듯이 블로거가 작성한 글인 엔트리가 있고, 독자들은 이들 엔트

리의 글을 보고 댓글을 작성하거나 트랙백으로 원격 댓글을 작성한다. 그리고 정

기적으로 구독하고 싶으면 RSS 피드를 이용한다. 블로그의 작동과정은 다음과

같다.

1) 엔트리(Entry) 작성

블로그를 운영하는 사용자인 블로거가 자신의 생각이나 의견, 전문 지식을 글

로 표현하여 가장 기본 단위인 엔트리를 작성하여 자신의 블로그에 올린다. 이

때 최근에 올린 글이 가장 상단에 위치한다. 각각의 엔트리는 하나의 독립적인

HTML 파일로 작성되며, 이 페이지가 가지는 고유한 링크 주소를 고유링크 혹은

퍼머링크라고 한다.


375

10

2) 댓글(Reply) 달기

다른 사람이 블로그에 올라온 글을 보고 글 밑에 간단하게 몇 줄로 댓글 혹은

덧글을 달 수 있다. 블로그는 언제나 다른 사람이 들어와 글을 볼 수 있으나 누가

그 글을 보았는지는 알 수가 없지만 댓글로 방문기록을 남길 수 있다. 물론 댓글

을 달지 않는다면 글을 본 사람을 추적하기는 어렵다.

3) 트랙백(Trackback)으로 연결하기

트랙백은 원격(Remote) 댓글로서 블로그에 올라온 글을 읽은 사람이 글에 대

한 의견 혹은 추가적으로 설명하고 싶은 사항을 자신의 블로그에 작성을 하는 것

이다. 블로거는 블로그에 올라온 글의 트랙백 URL을 공개하며, 독자는 자신의 의

견이나 추가 사항을 자신의 블로그에 작성을 하고 트랙백 핑(Ping)을 보내어 서로

의 블로그가 링크로 연결되도록 한다.

4) RSS 피드로 구독하기

RSS 피드는 독자가 원하는 글을 선택적으로 구독할 수 있으며, 새 글이 게시될

때 바로 볼 수 있다. RSS를 활용하여 블로그 콘텐츠를 효율적으로 배포할 수 있

다는 장점이 있다.

댓글

트랙백

트랙백 핑

RSS 구독

글(엔트리) <퍼머링크>

댓글

트랙백의 원리를 자세히 이해하기 위하여 다시 살펴보자. A가 자신의 블로그에

글을 작성한다고 하자. 이 때, A는 트랙백 주소를 공개한다. B가 그 글을 보고 글

에 대한 의견을 쓰고 싶다면 A의 트랙백 URL을 이용하여 자신의 블로그에 글을

그림 10.6

블로그의 작동 원리

376


작성한다. 그리고 자신이 그 글에 대해 댓글을 달았다고 트랙백 핑을 보내어 A에

게 알려준다. 트랙백 핑은 title(글의 제목), excerpt(글의 초록), url(글의 URL 주

소), blog_name(블로그의 이름)의 4개 매개변수를 전달한다. 이렇게 트랙백을 이

용한다면 A와 B는 서로 연결되는 링크가 만들어진다. 즉, 서로 다른 블로그끼리

커뮤니케이션을 할 수 있는 소통의 한 방법인 것이다. 트랙백은 서로 연결될 수

있다는 장점이 있지만 일방적인 푸시(Push) 형태이므로 원본 글이 삭제되어도 트

랙백은 남아있다는 단점이 있다.

블로그A 블로그B

고유 트랙백 주소 A의 트랙백 주소

트랙백 핑

일반적으로 사용되고 있는 블로그의 종류에는 가입형과 설치형의 두 가지 유형

이 있다. 가입형 블로그는 포털사이트에서 운영하는 블로그 서비스나 블로그 전

문 웹사이트의 블로그 서비스를 이용하는 것이다. 서비스 업체에서 블로그의 저

장 공간이나 편집 도구 등을 모두 제공하고 있으므로 사용자는 회원으로 가입하

기만 하면 수월하게 블로그를 운영할 수 있다. 또한 서비스에서 운영해주는 커뮤

니티 형성이나 콘텐츠 배포를 공유할 수 있어서 방문자 수를 쉽게 증가시킬 수 있

는 장점도 있다. 그러나 정해진 레이아웃을 사용해야 하는 등 가입한 블로그 서비

스에 종속되므로 사용자가 자유롭게 꾸미고 사용하는 데에는 제한이 있다. 네이

버, 다음, 야후, 구글 등 대부분의 포털사이트에서 블로그 서비스를 운영하며, 국

내의 전문 블로그 서비스로는 티스토리, 이글루스, 블로거닷컴 등이 있다.

설치형 블로그는 자신의 서버에 블로그 편집 소프트웨어를 설치하여 운영하는

것이다. 서버를 직접 운영하거나 웹호스팅 업체의 서비스에 자신의 계정을 설치

하여 운영할 수 있다. 블로그 레이아웃과 다양한 기능을 사용자가 자유롭게 구성

할 수 있으며, 자신의 자료를 스스로 백업하여 블로그 서비스 운영자와 무관하게

관리할 수가 있다. 그러나 설치형 블로그는 웹에 대한 전반적인 지식이 가지고 자

그림 10.7

트랙백의 원리


377

10

신이 서버를 관리하여야 하며, 또한 방문자 수를 늘리는 것을 스스로 해결해야 한

다. 대표적인 설치형 블로그 프로그램으로는 텍스트큐브, 워드프레스, 텍스타일,

무버블타입 등이 있다.

10.2.2 아이튠즈(iTunes)와 팟캐스팅(Podcasting)

팟캐스팅은 방송국이나 기업, 개인 등의 콘텐츠 공급자가 오디오 방송, 예를 들

어 뉴스, 스포츠중계, 음악 토크쇼, 토론회 등의 프로그램을 mp3와 같은 미디어

파일로 제작하여 웹사이트에 포스팅하는 방법을 지칭한다. RSS를 이용해서 정기

적 혹은 새로운 내용의 미디어 파일이 올라올 때마다 자동으로 구독할 수 있도록

함으로써 방송을 전달하는 방법으로 이루어진다.

팟캐스팅(Podcasting)이라는 용어는 애플의 mp3 플레이어인 아이팟(iPod)과

브로드캐스팅(Broadcasting)의 합성어로 이루어져 있다. 팟캐스팅 개념은 2001

년부터 시작하였으나, 그 후 아이팟이 널리 알려지면서 2004년 처음으로 아이팟

+캐스팅이라는 용어가 사용되기 시작하였으며, 현재도 애플의 팟캐스팅 소프트

웨어인 아이튠즈(iTunes)가 가장 많이 사용되고 있다. 물론 팟캐스팅 개념은 아

이팟뿐만 아니라 PC나 모바일 기기를 포함한 모든 디지털 미디어 플레이어에서

적용 가능하다. 최근에 국내에서 화제를 모으고 있는 ‘나꼼수’도 팟캐스팅의 대표

적인 사례이다. 그림 10.8은 팟캐스팅에서 가장 많이 사용되는 RSS 리더인 아이

튠즈의 실행화면과 팟캐스팅 로고를 보여주고 있다.

팟캐스팅의 작동과정을 살펴보자. 팟캐스팅의 저자를 팟캐스터(Podcaster)라

부르며, 팟캐스터가 제작한 파일을 에피소드(Episode)라고 한다. 이러한 에피소

그림 10.8

아이튠즈(iTunes) 실행화면과 팟캐스팅 로고(출처: www.apple.com)

378


드에 대한 요약 정보를 포함하고 있는 웹피드를 처리해주는 RSS 리더를 팟캐쳐

(Podcatcher) 혹은 수집기(Aggregator)라고 부른다. 먼저 팟캐스터가 녹음한 오

디오 파일을 mp3 파일로 변환하여 생성한 에피소드를 서버에 업로드하고 RSS

파일의 정보를 갱신한다. 청취자는 원하는 팟캐스트를 지속적으로 받아보도록 구

독 신청을 하면 RSS 주소가 등록되어 정기적으로 갱신되는 파일들을 자동으로

다운로드 받을 수 있다. 다운로드된 파일들은 디지털 미디어 플레이어(컴퓨터,

mp3, 휴대폰 등)가 컴퓨터와 연결되었을 때 자동으로 동기화되고 저장되어 언제

어디서나 오디오 콘텐츠를 감상할 수 있다. 그림 10.9에서 팟캐스팅의 작동 과정

을 보여주고 있다.

MP3

음악,동영상 콘텐츠

iTunes

iPod

RSS 2.0 Update 되면자동으로 수신

등록

전송

팟캐스팅으로 구독이 가능한 이유는 RSS 포맷인 팟캐스트(Podcast) 파일 안

에 실제 오디오 파일을 다운로드할 수 있는 URL 주소가 기술되어 있어서 자

동으로 다운로드할 수 있기 때문이다. 팟캐스팅을 실행하기 위해 RSS 파일의

<enclosure> 요소에 전송할 오디오 정보를 기록한다. <enclosure> 요소는 RSS

2.0 사양이며, 콘텐츠에 첨부된 파일 정보를 기술할 때 사용한다. 다음 소스 코드

가 실제로 사용되는 팟캐스트 파일의 사례이다.

<?xml version="1.0" encodina="UTF-8"?>

<rss xmlns:itunes="http:/www.itunes.com/dtds/podcast-1.0.dtd" version="2.0">

<channel>

<title>All About Everything</title>

<link>http:/www.example.com/podcasts/everything/index.html</link>

<language>en-us</language>

<copyright>℗ & © 2005 John Doe & Family</copyright>

<itunes:subtitle>A show about everything</itunes:subtitle>

<ituenes:author>John Doe</itunes:author>

그림 10.9

팟캐스팅 작동 과정


379

10

<itunes:summary>All About Everything is a show about everything.</itunes:summary>

<description>All About Everything is a show about everything.<description>

<itunes:owner>

<itunes:name>John Doe</itunes:name>

<itunes:email>[email protected]</itunes:email>

</itunes:owner>

<itunes:image href="http://example.com/podcasts/everything/All.jpg" />

<itunes:category text="Technology">

<itunes:category text="Gadgets"/>

</itunes:category>

<itunes:category text="TV & Film"/>

<item>

<title>Shake Shake Shake Your Spices</title>

<itunes:author>John Doe</itunes:author>

<itunes:subtitle>A short primer on table spices<itunes:subtitle>

<itunes:summary>This week we talk about salt and pepper shakers, and overall aesthetics.

Come and join the narty'</itunes:summary>

<enclosure url="http://example.com/podcasts/everything/AllEpisode3.m4a" length="8727310"

type="audio/x-m4a"/>

<guid>http://example.com/podcasts/archive/aae20050615.m4a</guid>

<pubDate>Wed, 15 Jun 2005 19:00:00 GNT</pubDate>

<itunes:duration>7:04</itunes:duration>

<itunes:keywords>salt, pepper, shaker, exciting</itunes:keywords>

</item>

</channel>

</res>

팟캐스팅이 기존의 미디어 특히 라디오와 구분되는 특징은 무엇보다도 스트리

밍 대신 다운로드가 가능해지고, 청취를 위해 휴대용 디지털기기를 이용하게 됨

에 따라 시간과 공간의 제약을 벗어나서 언제 어디서나 소비자가 원하는 디지털

콘텐츠를 감상할 수 있다는 점이다. 또한 저비용으로도 제작이 가능하여 기업뿐

아니라 개인 및 소규모 그룹 등 누구나 제작하고 배포할 수 있기 때문에 다양한

팟캐스트가 제공되고 있다. 또한 2005년 애플에서 비디오 아이팟을 출시하면서

보드캐스팅(Vodcasting) 역시 널리 서비스되고 있다. 오디오 파일만 제공하던 팟

캐스팅에서 한 단계 진화하여 비디오 파일도 제공하므로 Video와 Podcasting을

합성하여 Vodcasting이라고 한다.

팟캐스팅의 활용분야로는 음악 감상 이외에도 광고나 홍보에 많이 사용되며,

380


교육 및 뉴스 제공 분야에도 많이 활용되고 있다. 최근 일부 기업에서는 팟캐스팅

을 광고와 고객의 의견수집 창구로 이용하는 등 마케팅 수단으로 적극 활용하고

있다. 팟캐스트 구독 현황은 고객의 관심 성향을 정확하게 반영하기 때문에 맞춤

형 광고 제작 등 개인화 서비스가 가능해진다. 또한 교육 목적으로도 많이 활용하

고 있는데 언제 어디서나 사용자가 원하는 시간에 오디오를 청취할 수 있다는 특

징이 있어 팟캐스팅을 이용한 교육은 효과적이다. MIT, 퍼듀, 스탠포드 등의 대

학에서는 열린 강좌(Open Course)의 팟캐스트를 학생들에게 제공하여 구독할 수

있게 한 사례도 있다.

10.3 시맨틱웹으로 발전하는 태깅과 마이크로포맷

웹의 창시자인 팀 버너스리가 제안하고 현재 웹컨소시엄에서 표준화 작업을 진

행 중인 시맨틱웹(Semantic Web)은 웹문서 내의 정보나 리소스에 의미를 부여하

자는 것이다. 주로 정보간 혹은 정보와 자원 사이의 관계와 의미 정보를 표현하고

이를 처리하는 온톨로지 혹은 토픽맵 기술을 개발하고 있으나, 아직 시맨틱웹의

실현은 시간이 더 필요하다는 판단이다. 이러한 시맨틱웹으로 발전하는 길목에

태깅 기술이 집단지성을 활용하는 데 사용되고 마이크로포맷이 정보 교환시 추가

적인 의미 전달에 활용되고 있다.

10.3.1 문서에 의미를 줄 수 있는 소셜 태깅

(1) 태그와 소셜 태깅

태그(Tag)란 웹문서 또는 자료에 그와 연관된 정보나 키워드 정보를 ‘꼬리표’처

럼 덧붙여 놓아서 정보를 분류하거나 검색 하는 등 여러 가지 부가적인 기능이 가

능하도록 해주는 일종의 메타데이터이다. 웹에 있는 모든 종류의 자료에 태그 형

태로 의미정보를 부착할 수 있으며 태그를 다는 행위를 태깅(Tagging)이라고 한

다. 팀 버너스리는 시맨틱웹을 “정보에 잘 정의된 의미를 부여하고 컴퓨터와 사람

이 더욱 협력하여 일할 수 있는 웹의 확장 개념”이라고 설명하고 있다. 즉, 태그는

콘텐츠의 내용을 요약하거나 대표할 수 있는 키워드인데 컴퓨터와 사람이 같이


381

10

이해하고 협력할 수 있는 시맨틱웹의 발전과정이라고도 할 수 있다.

일반적으로 태그의 길이에는 제한이 없으며, 문서 내에서 단어, 문장, 이미지

등 어떤 구성요소에도 붙일 수 있다. 특히, 사진이나 동영상 등 텍스트가 아닌 멀

티미디어로 제작된 콘텐츠의 경우 키워드 검색이 불가능하지만 태그를 붙여 키

워드 검색이 가능해지도록 할 수 있다. 또한 콘텐츠 저작자뿐만 아니라 콘텐츠를

이용하는 일반 사용자들도 태그를 달고 공유할 수 있으며, 이런 경우 소셜 태깅

(Social Tagging)이라고 한다.

예를 들어 그림 10.10과 같은 이미지를 벚꽃, 봄, 꽃길이라는 태그를 달아 사진

게시판에 등록했다. 이 사진을 감상한 다른 사용자가 여행, 벚나무, 추억이라는

자신이 연상한 키워드를 태그로 달 수 있다. 이와 같이 다양한 사용자들이 자신이

원하는 대로 태그를 달아 공유함으로써 일반적인 분류체계와는 다르게 이 정보에

대하여 다양한 측면에서 연관성을 보여줄 수 있다. 비교적 자유로운 형태로 태그

를 기록하고, 이렇게 제공된 정보는 손쉽게 검색되거나 분류될 수 있으며 다른 정

보와 엮여서 정보 네트워크의 형성이 가능해진다.

사용자 1

벚꽃 봄 꽃길

사용자 2

여행 벚나무 추억

사용자 3

데이트 벚꽃축제

플리커(www.flickr.com)는 소셜태깅으로 가장 유명한 이미지 공유사이트로

제일 먼저 웹 2.0 기술을 구현하여 서비스를 개시한 사이트 중 하나이다. 플리커

는 태그를 통한 이미지 분류와 검색을 제공한다. 그림 10.11과 같은 화면에서 사

용자는 이미지를 업로드하며 이미지에 대한 간략한 설명과 함께 태그를 직접 입

력하며, 또한 위치정보의 태그도 적절한 인터페이스를 통해 편리하게 부착하고

검색할 수 있다.

그림 10.10

이미지에 소셜 태깅을 적용한 예

382


(a) 태그 작성 화면 (b) 위치정보 태그의 활용

(2) 폭소노미

이와 같은 소셜 태깅은 여러 사용자가 사용하게 되면 집단지성을 통해 미

리 정해지지 않은 분류체계인 폭소노미(Folksonomy)나 태그 구름(Tag Cloud)

의 실현이 가능해진다. 폭소노미는 대중을 의미하는 ‘folk’와 분류법을 의미하는

‘taxonomy’가 합쳐져 만들어진 신조어로 대중에 의한 분류 시스템을 의미한다.

기존에 우리에게 익숙한 계층구조의 카테고리 분류방식인 택소노미(Taxonomy)

에서는 전문가가 미리 정해놓은 분류체계에 맞추어 하나의 리소스에 하나의 카테

고리만 적용할 수 있으며, 적당한 카테고리가 존재하지 않을 때에는 정확하게 분

류될 수 없다. 반면에 사용자 다수의 태깅을 통해 분류하는 폭소노미는 미리 정해

진 카테고리 없이 태그의 집단지성에 의해 분류되므로 기존에 정확한 분류가 가

능하지 않거나 혹은 새로운 분야에 속하는 자료도 분류될 수 있다. 더욱이 하나의

자료에 여러 개의 태그를 붙일 수 있으므로 활용 목적에 따라 다수의 카테고리로

분류될 수 있다.

이와 같이 웹2.0 환경에서 다중 사용자의 태깅을 이용한 폭소노미는 다양한 자

료를 분류할 수 있는 새로운 방법으로 널리 활용되고 있으며, 다음과 같은 장점이

있다.

• 집단지성에 의한 분류로 원하는 자료를 찾기 쉽다. 비슷한 사고를 가진 사람이

라면 미리 정해진 분류를 학습하지 않고도 경험을 바탕으로 원하는 자료를 찾

그림 10.11

플리커에서 이미지에 소셜 태깅을 적용한 예


383

10

을 수 있다.

• 한 번 본 자료를 다시 찾기 쉽다. 분류 명칭이 정확하지 않아도 유사한 키워드

로 찾아 갈 수 있으며, 여러 개의 태그를 붙일 수 있어서 그 중에 하나로 찾아

갈 수 있다.

• 많은 양의 자료를 관리하는 데 효율적이다. 사용자의 모든 요구사항을 편견없이

반영하며, 끊임없이 변화하고 새로이 발전해 나가는 자료도 쉽게 분류할 수 있다.

폭소노미에 의한 분류는 정해진 체계가 없는 만큼 카테고리 태그를 잘 찾아 볼

수 있도록 해야 한다. 특히 현재 검색한 카테고리와 유사한 카테고리를 제시해 준

다면 원하는 자료를 더욱 쉽게 찾아갈 수 있다. 태그들의 관계를 시각적으로 표

현하는 데에는 여러 가지 방법이 있으나 태그 구름(Tag Cloud)이 가장 널리 사용

되고 있다. 태그 구름은 그림 10.12에서 보듯이 태그를 2차원 공간 상에 연관도나

중요도에 따라 배치하고 글자의 크기나 색상 등에 변화를 주어, 관련이 있는 태그

로 쉽게 옮겨갈 수 있도록 해준다. 많은 사이트에서 인기 태그를 태그 구름 형태

로 제공해 주고 있으며, 이를 통하여 어떤 정보가 많은 관심을 주목 받고 있는지

도 알아보고 검색할 수 있다.

10.3.2 마이크로포맷

(1) 마이크로포맷의 목적

웹 언어인 HTML은 원래부터 다양한 형태의 정보를 포함한 문서를 표현하

고 이를 웹브라우저에 보여주기 위해 만들어졌다. 그러나 웹의 발전에 따라 문서

를 구조화하고 특정한 의미를 부여하거나 추가적인 정보를 교환하기에는 HTML

그림 10.12

태그 구름의 예(출처: 위키피디아, 다음)

384


의 기능이 부족하다는 지적에 따라 시맨틱웹에 대한 연구를 활발히 진행하고 있

다. 이러한 해결책의 하나로 HTML 문서 내에 포함하여 사용하는 마이크로포맷

(Microformat)이 제안되었으며 기술적으로 태깅보다 시맨틱웹에 더 접근되어 있

다. 마이크로포맷은 HTML 문서 내에서 특정 부분에 간단한 의미를 표현하여 포

함시키는 방법으로 주소록, 사회적 관계, 일정공유, 위치정보의 표현 등 다양한

용도로 활용되고 있다.

마이크로포맷은 테크노라티(Technorati)사에서 처음 제안한 것으로 HTML 문

서의 요소에서 class 속성을 사용하여 정보 간의 관계나 추가적인 의미를 표현하

여 전달하면 이를 약속한 대로 해석하여 활용하자는 것이다. class 속성 이외에

요소 사이의 링크에 대한 연결 관계를 설명하는 rel 속성이나 역 링크 관계를 설명

하는 rev 속성을 이용하면 더 다양한 의미를 표현할 수 있다. 마이크로포맷의 장

점은 HTML 문서 내에 포함하여 간단하게 의미를 표현하여 전달할 수 있다는 점

이외에 기존의 사용하던 다른 포맷이나 규격을 마이크로포맷 형태로 변경하여 그

대로 활용할 수 있다는 장점도 갖고 있다.

(2) 마이크로포맷 활용사례: hCard, geo

우선 연락처 정보를 표현하는 hCard의 활용사례를 보도록 하자. HTML 문서

에서 마이크로포맷의 사용없이 이름과 개인정보를 다음과 같이 표현할 수 있다.

<div>

<div>임순범</div>

<div>숙명여자대학교</div>

<div>02-710-9424</div>

<a href="http://www.sm.ac.kr/">http://www.sm.ac.kr/</a>

</div>

여기에서는 모든 정보가 단지 <div> 요소로 구분만 되어 있을 뿐이며 이름이나

소속기관, 연락처 등을 구분할 수는 없다. 이 때 hCard 마이크로포맷을 적용하

여 class 속성에 의미를 구분하여 표현할 수 있다. hCard 포맷에서는 다음의 코드

에서와 같이 “vcard”라는 클래스의 <div> 요소 내에서 class 속성에 이름의 경우

‘fn’, 소속은 ‘org’, 전화번호는 ‘tel’이라고 값을 적어 주어서 어느 태그가 어떤 정


385

10

보를 가지고 있는지 구분할 수 있다.

<div class="vcard">

<div class="fn">임순범</div>

<div class="org">숙명여자대학교</div>

<div class="tel">02-710-9424</div>

<a class="url" href="http://www.sm.ac.kr/">http://www.sm.ac.kr/</a>

</div>

모바일 환경에서 많이 사용되는 위치기반정보도 geo 마이크로포맷을 이용하여

위도와 경도 정보를 다음과 같이 표현할 수 있다.

강남구청역의 위치는 <span class="geo">

북위 <span class="latitude">37.517</span>,

동경 <span class="longitude">127.041</span>

</span>입니다.

(3) 소셜미디어에서의 활용: XFN

현재 많은 사람들의 관심이 집중되고 있는 소셜네트워크에서도 사람들 사이에

서 벌어지는 다양한 행위나 그 관계를 표현하기 위하여 마이크로포맷이 사용되고

있다. 그 중에 많이 사용되는 포맷이 XFN(XHTML Friends Network)으로 하이

퍼링크를 이용해 인간관계를 표현하자는 것이 목적이다. 소셜네트워크 서비스 내

에서 사람들을 표현하는 웹페이지 간의 링크를 설정할 때 사람 간의 개인적 관계

를 하이퍼링크의 rel 속성으로 표현해 주도록 하였다. 사람 간의 다양한 관계에 대

하여 유형별 프로파일을 표 10.1과 같은 규격으로 정하고 있으며, 이 규격에서 유

형별로 해당하는 속성 값을 선택하여 표현할 수 있도록 하였다.

386


관계 유형 관계

교우 관계(하나만 선택)

contact : 접촉할 수단을 아는 사람

acquaintance : 서로 인사나 짧은 대화가 있어왔던 사람

friend : 친구. 알고 있는 동료나 동향인

물리적 관계 met : 실제로 만난 적이 있는 사람

지리적 관계(하나만 선택) co-resident : 공통 거주자. 같은 (길)거리에 있는 사람

neighbor : 근방에 사는 이웃

직업상 관계co-worker : 동업자 혹은 직장 동료

colleague : 같은 학문/활동 분야에 몸 담고 있는 사람

가족(하나를 선택)

child : 친자 혹은 양자, 또는 보호자 관계인 사람

parent : child의 역관계. 부모

sibling : 공통된 부모를 가진 사람. 형제, 자매, 남매

spouse : 결혼한 사람. 배우자

kin : 상대적으로 확장된 가족의 일원으로 간주되는 사람. 친척

XFN을 통해 작성자는 자신이 읽은 블로그가 어떤 친구(실제 만남이 있었거나,

혹은 다른 관계)에 속하는지 표현할 수 있다. XFN 관계 형식은 순서에 상관이 없

으며, 블로그 모임이나 링크 페이지에 인간관계를 덧붙이며 블로그의 일반적인

특징이 되어가고 있다. 이와 같은 관계를 이용하여 다음과 같이 블로그 서비스에

서 인간관계를 표현할 수 있으며, 이러한 인간관계는 그림 10.13과 같은 간단한

저작 인터페이스를 통하여 손쉽게 작성하여 사용할 수 있다.

<a href="http://www.jerryis.com/tt" rel="friend met colleague">제리</a>

<a href="http://www.pixie.co.kr" rel="acquaintance met">픽사</a>

<a href="http://www.jennifer.pe.kr" rel="child">임주은</a>

그림 10.13

XFN 로고 및 편집기 화면

표 10.1

XFN 관계 프로파일의 일부(출처: 위키피디아)


387

10

앞에서 설명한 바와 같이 마이크로포맷은 HTML 문서 내에서 특정부분의 의미

를 추가하여 정보를 교환하는 데 널리 사용되고 있다. 그 중에서 현재 많이 활용

되고 있는 포맷으로는 이메일로 주소나 명함을 교환하는 hCard, 일정을 공유하는

hCalendar, 이력서 정보를 교환하는 hResume, 리뷰정보를 표현하는 hReview,

위치정보를 표현하는 geo, 그리고 소셜 미디어 환경에서 관계 정보를 표현하는

XFN, XOXO, xFolk 등의 다양한 포맷들이 만들어져 활용되고 있다. 실제 트워

터에서도 문서 내에 트위터의 대화를 표현하는 고유의 마이크로포맷을 정의하고

사용하고 있다.

<body class=" user-style-shseo1215 logged-in ">

<div id="doc">

<div id="top-stuff">

<div id="banners" style="clear:both"><noscript>

<div class="banner-outer">

<div class="banner">

...

<div class="tweet-row">

<div class="tweet-text js-tweet-text">전곡항의 sunset (@ 전곡 마리나항) [pic]:

<a data-expanded-url="http://4sq.com/p15GqY"

class="twitter-timeline-link" href="http://t.co/w3tqG0j2" rel="nofollow"

class="twitter-timeline-link">4sq.com/p15GqY</a>

</div>

</div>

10.4 웹 인터페이스의 진화, RIA와 Ajax

기존의 웹 애플리케이션은 웹브라우저에서 응답속도가 늦고 데스크톱 애플리

케이션에 비해 조작성이 떨어지는 단점이 있었다. 웹 클라이언트에서 이러한 단

점을 극복하고자 리치 인터넷 애플리케이션( RIA; Rich Internet Application) 기

술이 발전되었다. 어도비의 플렉스, 마이크로소프트의 실버라이트, 선마이크로시

스템즈의 자바 FX 등의 기술이 개발되었고, 현재 웹 클라이언트의 애플리케이션

개발을 위해서는 Ajax가 널리 사용되고 있다.

그림 10.14

트위터에서 마이크로포맷의 사용

388


10.4.1 RIA의 등장 배경과 발전 방향

1990년대 후반 웹 기술이 큰 폭으로 발전하면서 선풍적인 인기를 끌자 많은 개

발사들이 기존의 기업용 애플리케이션을 웹으로 전환하는 경우가 많이 발생하였

다. 기존의 데스크톱 애플리케이션은 화면 구성이 자유롭고 사용하기 편한 사용

자 인터페이스를 제공하고 있었으나 웹브라우저 기반의 애플리케이션은 인터넷

트래픽으로 인해 응답속도가 늦고 HTML 언어의 제약으로 자유로운 인터페이스

를 구현하기 힘들었다. 웹 애플리케이션의 장점을 유지하면서도 이러한 웹브라우

저 기반 인터페이스의 단점을 개선하기 위하여 리치 인터넷 애플리케이션(RIA;

Rich Internet Application) 기술이 등장하였다.

즉, 웹브라우저 기반의 애플리케이션은 별도의 설치가 필요없이 배포가 가능하

고, 서버에서 제공하는 웹 서비스와 연동이 가능하면서도 데스크톱 애플리케이션

의 사용자 경험(UX)을 제공해 주는 것을 목표로 하는 기술을 의미한다. 최근 구

글을 통해 다양한 애플리케이션들이 선보이면서 웹의 장점과 풍부한 사용자 인터

페이스를 적용한 브라우저 확장기술에 대한 개발이 지속적으로 진행되었다.

2000년 10월 미국의 시장조사기관인 포레스트 리서치에서 ‘X-인터넷’이란 개

념을 발표하면서 여러 회사에서 웹 환경의 사용자 인터페이스 기술에 관심을 가

지고 개발하기 시작하였다. 리치 인터넷 애플리케이션이라는 용어는 2002년 매

크로미디어의 플래시 제품 백서에 처음으로 등장하였다. 이후 어도비에서 개발한

플래시 기반의 플렉스(Flex), 마이크로소프트의 실버라이트(Silverlight), 선마이

크로시스템즈의 자바 FX 등이 리치 인터넷 애플리케이션 기술을 주도하기 위한

각축을 벌였으며, 그 발전과정은 그림 10.15와 같다.

포레스트 리서치X-인터넷2000년

X-인터넷 & RIA국내 도입2003년

어도비플렉스22006년

어도비 AIRMS 실버라이트 2.02008년

2002년RIA어도비 플래시

2007년MS 실버라이트선 자바 FX

2005년Ajax

그러나 이들 기술들은 많은 장점에도 불구하고 표준 기술이 아니며 따라서 표

준 웹브라우저 환경이 아닌 자신들의 고유한 플랫폼을 기반으로 실행된다는 단점

을 가지고 있다. 특히, Ajax 개념이 널리 사용되고 HTML5가 등장하면서 RIA 시

그림 10.15

RIA 기술의 발전 과정(자료참조: KRG)


389

10

장의 상황은 또 다시 바뀌었다. HTML 언어의 한계점에서 시작하였지만 HTML5

에서 풍부한 사용자 인터페이스 기능을 제공하면서 이전에 웹에서 불가능했던 많

은 작업들이 가능해졌기 때문이다. 또한 Ajax와 HTML5는 웹표준을 근거로 하

고 있으므로 많은 개발사들이 리치 클라이언트 애플리케이션 개발을 위해 Ajax와

HTML5를 많이 적용하고 있는 경향이다.

10.4.2 Ajax의 개념 및 특징

Ajax(Asynchronous Javascript And XML)는 대화식 웹 애플리케이션에서 자

바스크립트와 XML을 이용하고 비동기 통신방식에 기반하여 풍부한 사용자 인터

페이스를 구현하기 위한 기술이다. 2005년 2월 제임스 가렛(Jesse James Garrett)

이 Adaptive Path라는 잡지에 발표한 에세이 “Ajax: A New Approach to Web

Application”에서 그 명칭이 유래되었다. Ajax는 새로이 개발하여 발표된 기술이 아

니라 그동안 웹 클라이언트의 애플리케이션 개발을 위해 발전하였던 기술을 총칭한

것이다. 제임스 가렛은 에세이에서 Ajax를 다음 기술들의 조합이라고 설명하고 있다.

• 표준언어 XHTML과 CSS를 이용한 표현 기술: 표준화된 기술을 이용하여 웹브

라우저에 독립적인 사용자 인터페이스의 표현이 가능하다.

• DOM을 이용한 동적인 화면 구성과 상호작용: 동적으로 웹페이지의 콘텐츠를

변경하거나 페이지의 구성요소와 상호작용이 가능하다.

• XML과 XSLT를 이용한 데이터 교환 및 데이터 처리: 표준기술을 이용하여 데

이터를 교환하고 원하는 형태로 변환하여 표현할 수 있다.

• XHR(XMLHttpRequest)를 이용한 비동기 데이터 통신: 서버와의 비동기 통신

을 이용하여 효율적인 인터페이스 구현이 가능하다.

• 이해하기 쉬운 자바스크립트 언어를 이용하여 모든 것을 통합 제어한다.

즉, Ajax는 ‘Asynchronous + JavaScript + CSS + DOM + XML + XSLT +

XMLHttpRequest’의 7가지 개념이 통합된 것으로 비동기 데이터 교환방식으로

표준화된 기술을 이용하여 사용자 인터페이스를 표현하였으며 구현이 손쉬운 자

바스크립트 언어를 사용한 점이 특징이다. 특히, Ajax 애플리케이션 모델에서는

390


웹서버 측의 데이터 처리 로직과 클라이언트 측의 사용자 인터페이스 로직을 분

리한 점과 이들 간에 데이터 교환을 비동기 방식으로 통신하는 점이 가장 큰 핵심

기술이다.

그림 10.16에서 보듯이 기존의 웹 애플리케이션 모델에서는 사용자가 요청할

때마다 웹서버에서 데이터를 처리한 후 응답 페이지를 HTML과 CSS로 작성하여

클라이언트로 보내준다. 반면에 Ajax 애플리케이션 모델에서는 처리 결과에서 필

요한 데이터만 HTML이 아닌 가벼운 형태의 XML 데이터로 전송하고 이를 클라

이언트에서 받아서 결과 페이지를 작성하게 되어있다. 이를 위해서 클라이언트

측에 HTML과 CSS 및 자바스크립트를 처리해주는 Ajax 엔진이 필요하다. 이와

같은 방식에서는 데이터의 전송량이 대폭 감소함에 따라 데이터 처리속도와 사용

자 인터페이스의 입출력 반응속도가 현저하게 증가하게 된다. 대표적인 사례로

검색엔진의 검색어 입력창에서 매 글자 입력할 때마다 제시어가 바뀌는 검색어

추천 기능이 있다.

웹브라우저

웹브라우저

Ajax 엔진

웹 서버 웹 서버

(a) 기존 웹 애플리케이션 모델 (b) Ajax 웹 애플리케이션 모델

데이터저장소, 후처리,기존의 시스템에서 처리

데이터저장소, 후처리,기존의 시스템에서 처리

사용자 인터페이스

사용자 인터페이스

서버측 시스템 서버측 시스템

HTML+CSS 데이터결과 페이지 작성

JavaScript call

HTTP 요청

HTML+CSS 데이터

HTTP 요청

가벼운 형태의XML 데이터

다음의 특징으로는 ‘Asynchronous’ 개념의 비동기 통신을 함으로써 웹 사용자

인터페이스가 편리하게 된다는 점이다. 이전의 웹 애플리케이션에서는 사용자가

서버에 데이터 처리 요청을 하면 서버에서 처리 결과를 브라우저에 돌려보낼 때

그림 10.16

Ajax 애플리케이션의 데이터 통신 모델(출처: 제임스 가렛, Adapt ive Path)


391

10

까지 아무런 작업을 할 수 없다. 예를 들어, 기존의 검색 엔진에서 검색 요청을 하

거나 상거래 사이트에서 예금 거래를 할 경우 사용자가 요청하고 나서 처리 결과

를 기다린 후 다음 작업을 하게 된다. 그러나 Ajax 애플리케이션 모델에서는 사용

자가 데이터를 입력하면 브라우저 내에 있는 Ajax 엔진이 이를 받아서 서버로 전

송한다. 이 때 서버에서 데이터를 처리하는 동안 Ajax 엔진은 처리 결과를 기다리

고 브라우저에서는 사용자의 다음 작업을 처리할 수 있다. 이렇게 되면 사용자가

서버에 요청한 처리 결과를 다 받기 전에 다른 작업을 병행할 수가 있어서 웹 인

터페이스가 다양하고 편리한 기능을 제공할 수 있게 된다. 대표적인 사례로 구글

지도가 있다. 지도에서 위치를 이동하거나 확대 및 축소를 할 때 요청한 지도의

이미지가 전부 도착되기 전에 비동기적으로 처리해 주므로 지도를 스크롤하거나

다른 작업을 진행할 수 있다.

클라이언트

시간

서버

사용자 작업

서버측 처리 서버측 처리

데이터전송

데이터전송

데이터전송

데이터전송

사용자 작업 사용자 작업

클라이언트

Ajax 엔진

브라우저

시간

서버

사용자 작업

서버측 처리 서버측 처리 서버측 처리

데이터전송

입력

출력 출력

입력

데이터전송

데이터전송

데이터전송

데이터전송

데이터전송

(a) 기존의 웹 애플리케이션 모델 (b) Ajax 웹 애플리케이션 모델

(동기식) (비동기식)

10.4.3 Ajax의 구현 사례

(1) 검색 제시어 기능

Ajax 엔진을 사용한 웹 애플리케이션의 대표적인 사례로 검색 제시어 혹

은 검색어 추천 기능이 있다. 이해를 돕기 위하여 사용자가 네이버 검색에서

‘web programming’을 검색한다고 하자. 이전의 검색엔진에서는 사용자가 ‘web

programming’이라는 단어를 입력하고 나서 검색을 요청하면 서버에 검색 결과를

HTML 페이지로 만들어 브라우저로 보내준다. 그러나 제시어 혹은 단어 추천 기

능에서는 낱말을 다 입력하기 전에 추천 단어 목록을 입력창 아래쪽에 보여준다.

그림 10.18에서 보는 바와 같이 사용자가 검색 창에 ‘Aj’글자를 입력하면 ‘Aj’로

그림 10.17

Ajax 애플리케이션의 비동기 처리 모델(출처: 제임스 가렛, Adaptive Path)

392


시작하는 단어가 보여지고, 그 다음으로 ‘a’ 글자를 입력하면 이번에는 ‘Aja’으로

시작하는 단어를 보여진다. 이런 방식으로 사용자는 원하는 단어의 글자를 끝까

지 다 입력하지 않아도 제시어 중에서 선택하여 사용할 수 있다. 이 때 서버에서

는 검색 창의 HTML 페이지를 모두 작성하여 보내주는 것이 아니라 단어 목록만

XML 형태의 텍스트 데이터로 전송하므로 전송량이 매우 감소한다. 또한 브라우

저에서는 전체 페이지를 갱신하지 않고 제시어 창만 갱신함으로써 인터페이스의

반응속도를 증진시킬 수 있다.

(a) ‘Aj’ 입력 (b) ‘Aja’ 입력

(2) 지도 이미지의 비동기 처리

다음의 사례로 구글 지도를 보자. 지도 사용자는 수시로 지도를 확대 축소하거

나 이동시키려고 할 것이다. 이 때 서버에서는 해당하는 지도의 이미지를 매번 보

내주어야 한다. 이미지는 텍스트보다 데이터 용량이 크므로 네트워크 속도가 높

다 하더라도 사용자가 매우 빈번히 지도를 이동시킬 때에는 빠른 속도로 요청에

반응하기에는 약간 무리가 따른다. 이전의 웹 애플리케이션 모델에서는 지도를

이동시킬 때 이미지를 모두 다운로드 받고 나서 또 이동시켜야 하므로 조작성이

많이 떨어졌다.

그러나 Ajax 웹 애플리케이션 모델에서는 지도의 이미지를 전부 다운로드 받기

전에 다음 작업을 실행한다. 그림 10.19(a)에서 지도를 확대하려는 경우에 지도

이미지가 모두 도착하지 않았을 경우 그림 10.19(b)처럼 보여준다. 그림 10.19(b)

는 확대하려는 부분의 지도 이미지가 없어서 회색으로 처리한 경우이다. 물론 이

화면은 매우 잠깐 동안만 보여지며 이미지를 다 받으면 정상적인 지도 이미지를

그림 10.18

검색어 추천 기능 사례


393

10

보여주게 된다. 그림 10.19(c)에서는 또 다시 확대를 하였는데 이번에는 회색으로

보여주지 않고 새로 받기 전의 이미지를 이용하여 단순히 확대하여 보여 주는 방

법을 사용하였다. 화면에서 지도의 일부분의 글자와 이미지가 커진 것을 볼 수 있

다. 역시 지도 이미지를 다 받으면 정상적으로 보여준다. 이와 같이 지도 이미지

를 모두 받기 전에 사용자가 요청하는 작업을 비동기적으로 처리해 주므로 사용

자 인터페이스의 사용성은 더욱 향상될 수 있었다.

(a) 확대하기 전의 지도 (b) 일단 회색 처리 (c) 일단 이미지 확대 처리

10.5 오픈 API와 매쉬업 서비스

현재 웹2.0 서비스의 대표적인 기업인 구글, 유튜브, 페이스북 등의 웹사이트

에서는 자신의 주요 서비스에 대해 API를 공개함으로써 다른 사이트에서는 이들

기능을 이용하여 손쉽게 새로운 서비스를 개발하여 제공하고 있다. 웹2.0 애플리

케이션에서 주요한 특징 중에 하나가 웹서비스에 기반한 오픈 API(Open API)와

이들 API를 조합하여 새롭게 개발하는 매쉬업(Mashup) 서비스를 제공한다는 것

이다. 현재 많은 웹 사이트에서 다양한 API를 공개하고 있으며 이를 이용하여 새

로운 사이트를 손쉽게 구축할 수 있다.

10.5.1 오픈 API와 매쉬업 서비스의 개념

오픈 API란 ‘Open Application Programming Interface’의 약자로 자신의 웹

사이트에서 일부 서비스 기능을 남들이 사용할 수 있도록 API 형태로 공개한 것

그림 10.19

지도 확대에 대한 비동기 처리 사례

394


을 말한다. API라는 것은 다른 응용 프로그램을 개발할 때 해당 모듈을 쉽게 사용

할 수 있도록 해주는 개발환경으로서 보통 라이브러리 형태나 이를 활용할 수 있

는 규약 형태로 제공된다. 오픈 API는 기존의 API 개념을 웹사이트에 확장한 것

으로 유명 사이트에서 공개한 API를 이용하여 손쉽게 자신의 사이트에서 원하는

웹서비스 기능을 이용할 수 있도록 만든 것이다.

복잡한 프로그램을 제작하지 않고도 오픈 API를 이용한 가벼운 프로그래밍으

로 검색 기능이나 지도 기능 등을 자신의 사이트에서 손쉽게 이용할 수 있게 되었

다. 구글 검색이나 구글 맵스는 자신의 API를 공개하여 여러 웹사이트에서 기능

을 부가하여 사용함으로써 더 풍부한 서비스를 제공하고 있다. 오픈 API를 제공

하면 서비스 자체의 활용도가 높아지면서 서비스가 더욱 활성화되어 트래픽 증가

로 이어진다. 또한 오픈 API를 이용하여 구축한 결과 유지보수가 쉬워질 뿐 아니

라 기업간의 제휴나 서비스 공유가 용이해진다.

매쉬업(Mashup)이라는 것은 감자를 으깨어 여러 가지 재료를 섞은 요리를 만

드는 것처럼 인터넷에서 제공되고 있는 서로 다른 서비스를 조합하여 새로운 웹

서비스 또는 애플리케이션을 만들어 내는 것이다. 매쉬업은 기존의 웹사이트의

오픈 API를 이용하고 이들 서비스를 공유할 수 있다는 점에서 개방과 공유를 기

반으로하는 웹2.0 환경의 핵심 기술이라고 할 수 있다. 또한, 매쉬업 서비스 개발

은 공개된 API를 이용하므로 개발비용이 매우 적고 가볍게 프로그래밍할 수 있다

는 장점이 있다.

최초의 매쉬업으로 알려진 서비스는 폴 레이드매처(Paul Rademacher)가 몇주

일 만에 개발한 하우징맵(HousingMaps)이라는 웹사이트로서 구글의 지도와 크

레이그리스트(Craigslist)의 부동산 정보를 연동하여 지도의 해당 위치에 부동산

정보가 표시되도록 하였다. 처음부터 구글에서 API 정보를 제공한 것이 아니라

폴 레이드매처가 구글 지도 서비스를 분석하여 지도 위에 정보를 표시한 것이었

으며, 오히려 구글이 그를 채용하여 구글 지도의 API를 공개하도록 하였다. 이것

을 계기로 구글을 비롯한 여러 웹사이트에서 API를 공개하였고 이후 오픈 API 제

공과 매쉬업 서비스 개발이 활성화되었다.


395

10

(a) Craigslist의 부동산 정보

(b) 구글 지도

(c) 하우징맵

➞

10.5.2 매쉬업 서비스의 종류

현재 구글 지도뿐 아니라 구글 검색, 유튜브의 비디오, 플리커의 이미지 제공,

아마존의 상품검색 및 구매 기능 등 매우 다양한 오픈 API가 제공되고 있다. 오픈

API를 이용하여 구현되는 매쉬업 서비스로는 지도, 검색, 이미지나 비디오 제공,

쇼핑 등의 분야에서 많이 제공되고 있다. 최근에는 트위터나 페이스북 등 소셜미

디어의 API를 이용하여 이들과 연동한 매쉬업 웹서비스 및 모바일 앱이 많은 관

심을 끌고 있다. 그림 10.21은 매쉬업에 관련된 여러 가지 정보를 제공하는 사이

트로 유명한 prgrammableweb.com에서 집계한 자료로서 많이 이용된 오픈 API

와 많이 구현된 매쉬업 사이트의 유형의 통계 결과를 보여주고 있다.

mapping (27%)

deadpool (14%)

search (10%)

social (10%)

photo (7%)

shopping (7%)

video (6%)

travel (5%)

music (5%)

mobile (4%)

ProgrammableWeb.com 01/20/13

GoogleMaps (38%)

Twitter (12%)

YouTube (10%)

Flicker (9%)

Amazon (6%)

Facebook (6%)

Twilio (5%)

LastFM (3%)

EBay (3%)

Google (2%)

ProgrammableWeb.com 01/20/13

(a) 많이 이용된 상위 10개 오픈 API (b) 많이 구현된 상위 10개 매쉬업 유형

그림 10.20

하우징맵(HousingMaps)의 매쉬업 사례

그림 10.21

많이 이용된 오픈 API 와 매쉬업 유형(출처: ProgrammableWeb.com)

396


(1) 구글 API

매쉬업 서비스에서 가장 많이 활용되는 구글에서는 표 10.2와 같이 다양한 오

픈 API를 제공하고 있다. 구글에서 제공하는 지도 API를 이용하면 매쉬업 사이트

에서도 지도를 자유로이 조작하고 지도 위에 지형지물의 위치를 표시할 수 있다.

구글 캘린더 API를 이용하여 캘린더에 일정을 표시하고 여러 사람이 공유하는 등

의 일정관리 서비스를 구현할 수 있다. 최근 구글에 합병된 유튜브에서도 다른 사

이트에서 유튜브의 비디오 및 플레이어를 사용할 수 있도록 오픈 API를 제공하

고 있다. 또한 대표적인 이미지 제공 사이트인 플리커에서도 사진을 공유할 수 있

도록 사진의 메타데이터 정보와 사진 업로드 방법에 대한 정보를 API로 제공하고

있다.

A제공하는 API 종류 API 설명

구글 애드센스 API웹사이트에 광고를 게재하여 사용자와 사용자의 웹사이트 방문자에 대

한 수익을 생성한다.

구글 검색 API 구글 검색창 및 검색 결과를 사용자의 사이트에 표시한다.

구글 웹로그 분석 웹사이트 트래픽에 대한 데이터를 수집하고 보고 분석할 수 있다

구글 캘린더 API 구글 캘린더용 일정, 캘린더 및 가젯을 만들고 관리한다.

구글 차트 API 웹페이지에 차트를 동적으로 삽입한다.

구글 주소록 API 응용 프로그램으로 사용자 연락처를 보여주고 수정할 수 있다.

구글 지도 API 구글의 대화식 지도와 사이트의 데이터를 통합한다.

다음의 사례는 ‘iGuide.travel’이라는 여행안내 사이트로서 대부분의 기능을 다

른 사이트에서 제공하는 오픈 API를 이용하여 매쉬업으로 구축하였다. 중간의 광

고는 구글 애드센스 API를 이용하였으며, 지도는 구글 지도 API를 이용하여 매쉬

업 사이트를 구축하였다. 아래쪽의 호텔검색 기능과 왼쪽의 정보안내 및 검색 기

능은 ‘bookingwiz.com’ 사이트에서 제공하는 검색 기능 API를 이용하였다.

표 10.2

구글에서 제공하는 대표적인 오픈 API(출처: code.google.com)


397

10

구글 애드센스

bookingwiz.com

bookingwiz.com

bookingwiz.com

구글 지도

(2) 소셜 미디어 API

최근 많은 사람들의 관심이 집중되고 있는 여러 소셜미디어 사이트에서도 오

픈 API를 제공하여 다양한 매쉬업 서비스가 가능해지고 있다. 페이스북의 경우

2007년에 오픈 API를 공개한 이후 사용자가 급증하였고, 공개 후 6개월 만에 수

만개의 애플리케이션이 개발되었다고 한다. 페이스북이나 트위터에서 제공하

고 있는 모든 서비스 및 데이터까지 제공하므로 다른 홈페이지 사이트에 연동하

는 것 이외에도 이를 활용한 다양한 애플리케이션 서비스가 개발되고 있다. 대표

적인 사례 중 하나로 소셜미디어에서 다른 사람과의 관계도를 보여주는 서비스

가 있다. 그림 10.23에서 첫 번째는 페이스북에서 친구관계를 보여주는 소셜그래

프이고, 두 번째는 친구들과 교신을 한 횟수까지 보여준다. 세 번째는 링크드인

(LinkedIn)에서 친구관계를 보여주는 소셜지도이다.

(a) 페이스북에서 친구관계 (b) 페이스북 교신 횟수 (c) 링크드인에서

(소셜그래프) 친구관계

그림 10.22

매쉬업 사례: iGu ide.travel

그림 10.23

소셜미디어 API를 이용한 매쉬업 서비스(출처: 페이스북, 링크드인)

398


(3) 국내에서 제공하는 API

국내에서도 네이버나 다음 등 대형 포털사이트를 중심으로 오픈 API를 제공하

고 있다. 네이버의 경우 지도, 검색, 카페, 미투데이, 이외에 기타 여러 가지 기능

에 대한 오픈 API를 제공하여 다양한 매쉬업 서비스를 제작할 수 있다. 다음에서

도 지도 API, 검색 및 쇼핑 등 콘텐츠 데이터 제공 API, 블로그나 카페 등 인증이

필요한 API 등 다양한 오픈 API를 제공하며 네이버와 공동으로 매쉬업 경진대회

를 개최하고 있다. 그림 10.24는 네이버와 다음에서 제공하는 오픈 API 공식 홈

페이지로 다양한 API의 소개와 사용법을 제공하고 있다.

(a) 네이버 오픈 API 홈페이지 (b) 다음 오픈 API 홈페이지

10.5.3 매쉬업 사이트 구축 사례

여기서는 오픈 API를 이용하여 새로운 서비스를 개발하는 방법을 배워보기로

한다. 네이버에서 제공되는 다양한 오픈 API 중에서 지도와 컨트롤을 내 사이트

에 포함시키는 간단한 예제를 통해 오픈 API를 이용한 매쉬업 기법을 배워보자.

우선 오픈 API를 이용하기 위해서는 API 키를 발급받아야 한다. 일부 서비스는

API 키를 요구하지 않지만 대부분의 오픈 API는 과부하 등의 서비스 관리를 위

하여 API 키를 발급받아야 사용할 수 있다. 네이버의 경우 API 이용등록 페이지

(http://dev.naver.com/openapi/register)에서 지도 API 키를 발급받을 수 있

다. 지도키를 발급받은 후 지도를 화면에 보여주는 것은 간단한 자바스크립트 코

드만으로도 가능하다.

다음의 코드는 지정한 위치의 지도를 화면에 출력하고, 줌 컨트롤을 표시하

기 위한 코드이다. ①지도 API를 사용하기 위해 네이버에서 제공하는 스크립트

그림 10.24

네이버와 다음의 오픈 API 홈페이지


399

10

를 헤드에 포함시키며, 이때 key의 인자로 지도 API키를 입력한다. 그리고 ②지

도를 출력할 컨테이너를 설정한다. 여기서는 <div> 요소를 사용하였고 아이디를

‘testMap’으로 설정하였다. 다음으로 ③위치객체와 ④지도객체를 생성하고 컨테

이너에 삽입한다. 지도객체를 생성할 때는 지도를 출력할 때 필요한 여러 가지 속

성을 인자로 전달한다. 각 인자에 대한 설명은 코드에 설명문으로 포함시켰다. 여

기에 손쉽게 지도를 확대, 축소하기 위해 ⑤줌 컨트롤 객체를 추가하였다. 다음의

그림 10.25는 이 코드를 실행한 결과 화면이다. 네이버 지도 API에서는 줌 컨트롤

이외에도 일반 및 위성 등의 지도 타입을 선택할 수 있으며, 자전거 도로의 표시,

실시간 교통 현황, 지도 위에 마커 표시 등 다양한 기능을 지도에 추가할 수 있다.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>OpenAPI Map Test - Zoom Control </title>

<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0

&key=f32441ebcd3cc9de474f8081df1e54e3"> // ① 오픈 API 호출 - API 키 </script>

</head>

<body>

<div id="testMap" style="border:1px solid #000; width:700px; height:400px; margin:20px;

display:block;"></div> 

<script type="text/javascript">

var oPoint = new nhn.api.map.LatLng(37.5010226, 127.0396037); // ③ 위치 생성

nhn.api.map.setDefaultPoint('LatLng');

oMap = new nhn.api.map.Map('testMap', // ④ "testMap" 태그에 지도 객체 생성 및 속성 인자 전달

point : oPoint, // 지도 중심점의 좌표

zoom : 10, // 초기 줌 레벨은 10으로 둔다.

enableWheelZoom : true, // 마우스 휠 동작으로 지도를 확대/축소할지 여부

enableDragPan : true, // 마우스로 끌어서 지도를 이동할지 여부

enableDblClickZoom : false, // 더블클릭으로 지도를 확대할지 여부

mapMode : 0, // 지도 모드(0: 일반지도, 1: 겹침지도, 2: 위성지도)

minMaxLevel : [ 1, 14 ], // 지도의 최소/최대 축척 레벨

size : new nhn.api.map.Size(500, 400) // 지도의 크기

);

var mapZoom = new nhn.api.map.ZoomControl(); // ⑤ 줌 컨트롤 선언

mapZoom.setPosition(left:80, bottom:40); // 줌 컨트롤 위치 지정

oMap.addControl(mapZoom); // 줌 컨트롤 추가.

</script>

</body>

</html>

400


(a) 기본 지도에 줌 컨트롤 추가 (b) 범례, 마커, 교통상황 등 각종 정보 추가

그림 10.25

네이버 오픈 API 사이트의 지도 API 사용 예제(출처: 네이버개발자센터)


401

10

실 습 Lab. 6 블로그 제작

블로그는 ‘웹상에 기록하는 일지’로 정의할 수 있다. 직접 게시판 형식의 미니

홈페이지에 자신의 관심사에 따라 자유롭게 칼럼이나 일기, 기사 등을 올리는 웹

사이트인 블로그는 대표적인 1인 미디어로 꼽힌다. 또한 웹상의 가상현실 속에서

정보를 공유하거나 생각이 같은 사람들이 모여서 공통의 관심사에 관해 얘기를

나눌 수 있는 모임방을 개설할 수도 있다. 이런 기능 때문에 블로그를 소셜미디어

로 구분하기도 한다.

이러한 블로그를 운영하기 위해서는 무엇보다 블로거 자신이 꾸준히 흥미를 가

지고 관리해 나갈 수 있는 주제의 선택이 중요하다. 또한 단순히 본인만을 위한

정보의 공간이 아니라면 다른 방문자들이 방문해 흥미를 느낄 수 있도록 블로그

를 구성하고 게시할 포스트의 내용을 잘 선택해야 한다. 방문자와의 소통은 블로

그를 운영하는 데 있어서 꾸준히 업데이트하게 하는 활력이 되기 때문이다. 이번

실습을 통하여 블로그를 직접 개설하여 나만의 블로그를 구축해보자.

1. 블로그 기획하기

1) 어디에 블로그를 만들 것인지 결정한다. 블로그는 그 형태에 따라 가입형,

절충형, 설치형으로 나뉜다. 본 실습에서는 가입형인 네이버 블로그 서비스

를 이용한다.

2) 본인의 블로그 주제를 선정한다. 꾸준히 이끌어 나갈 수 있는 주제이면서도

스스로 흥미를 잃지 않고, 방문자들과 소통할 수 있는 주제를 선택하는 것이

중요하다.

3) 선택한 주제 아래 특화된 자신만의 테마를 정하고, 블로그의 메뉴 카테고리

를 구성한다.

2. 네이버 블로그 접속하기

1) 네이버 계정에 로그인 후 나타나는 아이콘 메뉴 중 [바로가기]를 선택한다.

2) 메뉴 아래의 경로에서 [내 블로그]를 선택하면, 네이버 블로그에 만들어 놓

402


은 내 블로그의 첫 페이지 화면이 나타난다.

(a) 내 블로그 접속하기 (b) 내 블로그 첫 페이지

3. 블로그 설정 및 꾸미기

1) 그림 L6-1(a)의 내 블로그 시작 화면에서 좌측 상단 박스의 [관리] 메뉴를

선택하면 블로그의 속성을 설정하는 관리 화면이 나타난다.

2) [기본 정보 관리]-[블로그 정보]를 선택한다. 블로그 정보 수정 페이지에서

제목, 별명, 사진 등을 입력하고 [확인]을 클릭하면 내 블로그 화면이나 블로

그 시작 화면에 입력한 정보를 확인할 수 있다.

3) 관리 화면에서 [꾸미기 설정]-[스킨 선택]을 클릭한 후, [아이템 팩토리 바

로가기]를 클릭하면 그림 L6.2(a)와 같은 아이템 팩토리가 나타난다. 여기서

원하는 스킨 디자인을 선택하여 그림 L6.2(b)와 같이 확인한 후, [아이템 담

기]를 클릭하고 [스킨 바로 적용]을 선택한다.

(a) 원하는 스킨 선택 (b) 선택한 스킨 바로 적용

그림 L6.1

네이버 블로그 시작하기

그림 L6.2

아이템 팩토리에서 스킨 선택하기


403

10

4. 블로그 메뉴 구성하기

1) [관리]-[메뉴·글관리]-[블로그메뉴]를 선택한다. 그리고 기본 설정으로 만

들어져 있는 ‘게시판’의 이름 등 여러 가지 설정을 원하는 대로 변경한다(그

림 L6.3(a)).

2) [카테고리 추가] 버튼을 선택하면 새 카테고리가 생성되며, 바로 새로운 이

름을 입력하거나 오른쪽 설정에서 이름을 변경한다. 상위 카테고리를 선택

한 후 [카테고리 추가] 버튼을 다시 눌러 세부 카테고리를 추가한다(그림

L6.3(b)).

3) 앞서 기획한 메뉴구성에 따라 블로그를 구성한다.

(a) 블로그 메뉴 설정 바꾸기 (b) 카테고리 구성하기

5. 블로그 포스팅하기

1) 포스팅할 내용을 구상하고 해당 자료를 준비한 후 [포스팅 쓰기] 버튼을 누

른다. 카테고리를 선택하여 포스팅 제목을 입력한다. 본문 입력 창에 텍스트

를 삽입해 포스팅을 작성할 수 있으며, 삽입하고자 하는 위치에 사진이나 동

영상을 선택해 미디어를 삽입한다(그림 L6.4(a)).

2) 이미지의 경우 간단히 [사진] 메뉴를 통해 자신이 가지고 있는 이미지를 선

택하여 삽입한다. 삽입 시 그림 L6.4(b)와 같이 간단한 편집기능을 제공하

며, 하단의 [올리기]를 통해 이미지 삽입이 완료된다.

그림 L6.3

블로그 메뉴 구성하기

404


(a) 포스팅 제목 작성하기 (b) 이미지 삽입하기

3) 동영상의 경우 그림 L6.5(a)에서와 같이 파일을 선택한 후 그냥 올리기를 하

거나 간단히 편집하여 업로드할 수 있다. 최근에는 다양한 동영상 관련 SNS

들이 활성화되고 있어 직접 블로그에 업로드하는 방식보다는 동영상을 업로

드한 곳의 링크를 주로 사용한다. 이 경우 [링크 걸기]를 선택하고 소스코드

또는 URL를 입력하여 간단히 동영상을 포스팅에 삽입할 수 있다.

4) 각종 파일을 첨부할 경우 간단히 [파일] 메뉴를 통해 업로드가 가능하며, [음

악] 메뉴를 통해 포스트에 음악을 삽입할 수 있는데 내가 가지고 있는 음악

아이템에서 선택을 하든지 아니면 네이버 뮤직에서 음악을 선택할 수 있다.

5) 네이버 블로그에서는 지도나 투표, 일정, 그림을 쉽게 삽입하여 사용할 수

있도록 메뉴를 제공하고 있으므로 이를 통해 보다 다양한 포스팅을 구성할

수 있다.

6) 네이버 블로그에서는 부가적으로 포스팅에 대한 다양한 설정이 가능하다.

그림 L6.5(b)에서 보듯이 블로그 포스팅이 적절히 검색자에게 노출될 수 있

도록 하는 태그 달기 및 포스팅의 공개설정 등을 할 수 있다.

그림 L6.4

텍스트와 이미지 포스팅하기


405

10

(a) 동영상 삽입하기 (b) 태그 달기 및 설정하기

실습 과제

1. 특정 주제를 정한 후 해당 분야의 인기 블로그를 검색하여 3곳 이상을 방문하

여 블로그 화면을 갈무리하라.

2. 자신의 블로그를 개설하여 꾸며보고 자기소개 페이지를 포스팅하라.

3. 앞서 개설한 자신의 블로그에 RSS를 연동하여 해당 페이지를 업데이트해보라.

그림 L6.5

동영상 포스팅 및 설정하기

406


실 습 Lab. 7 매쉬업 서비스의 활용

매쉬업은 서로 다른 웹사이트의 콘텐츠를 조합하여 새로운 목적의 콘텐츠와 서

비스를 창출하는 서비스이다. 웹서비스 업체들이 공개한 오픈 API를 기반으로 독

자적인 인터페이스나 콘텐츠를 직접 작성한다. 오픈 API는 네이버, 다음, 아마존

(amazon), 플리커(flickr), 구글(google), 딜리셔스(del.icio.us) 등 많은 기업에서

제공하고 있다. 최근에는 데이터의 소유자나 독점자 없이 누구나 손쉽게 데이터

를 생산하고 공유할 수 있도록 한 사용자 참여 중심의 인터넷 환경 시대로 접어들

면서 매쉬업 서비스는 더욱 주목받고 있다.

플리커는 2004년 2월에 시작한 태그 기반의 사진 공유 사이트로, 오픈 API를

통해 사진을 쉽게 올리고 편집이 가능한 사진 공유 서비스를 이용할 수 있다. 이

후 야후에 합병되어 야후 계정이나 페이스북, 구글의 계정으로도 로그인이 가능

하다. 다음의 실습에서는 플리커(http://www.flickr.com/)의 오픈 API를 이용하

여 이미지를 검색해보자.

1. 플리커 매쉬업 시작하기

1) 플리커에서 제공하는 API를 이용하기 위해서 API 키와 암호 등의 정보가 필

요하며, 플리커의 API 서비스 페이지(http://www.flickr.com/services/api)

에서 [App 제작]-[API 키 가져오기]를 선택하여 API 키와 암호를 받는다.

(a) 플리커 API 키 가져오기 (b) 플리커 공개 API 메소드 목록

그림 L7.1

플리커 API 사용하기


407

10

2) 플리커 오픈 API를 사용하여 호출 규약을 선택하고, 메소드 및 인수를 지정

하는 요청을 보내서 포맷된 응답을 받게 된다. 웹 기반의 응용프로그램이 사

용자를 인증할 때는 다음과 같은 형식의 URL을 사용한다.

http://flickr.com/services/auth/?api_key=[api_key]&perms=[perms]&api_sig=[api_sig]

3) 플리커 검색 요청 형식에는 REST, XML-RPC, SOAP 방식이 있다. 이

중에서 단순한 HTTP GET 또는 POST를 사용하는 REST를 사용해보자.

flickr.test.echo 서비스를 요청하려면 다음과 같이 호출하면 된다.

http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value

4) JSON을 사용할 경우, 기본적으로 요청을 받기 위한 URL과 그 결과로 결과

화면을 구성할 수 있으며 다음과 같이 사용한다.

http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value&format=json

2. 플리커 매쉬업 서비스 실습하기

1) 플리커 API에서는 Activity, Blogs, Auth, Collection, Favorite, Search,

People, Geo 등의 다양한 API 메소드를 지원한다. 예를 들어, 사진검색 API

에 필요한 메소드는 flickr.photo.search이고, 여기에 사용되는 속성으로는

format(JSON), api_key, text(검색어), per_page(페이지 당 가져올 결과

수) 등이 있다. 다음의 URL로 검색을 하게 되면, 플리커에서는 검색 결과가

담긴 JSON 객체를 반환해준다.

“http://api.flickr.com/services/rest/?method=” + options.method + “&

format=” + options.format + “&api_key=” + options.api_key + “&text=” +

options.text + “&per_page=” + options.perpage

2) 개인이 받은 api_key와 flickr.photos.getRecent API를 사용하여 최근 사

408


진 10개를 검색하는 메소드를 사용하여 반환된 JSON 객체를 확인해보자.

http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_ke

y=#0b3da7fe4b14b614f56787cab04eb785#&per_page=&page=1&format=json

3) 반환된 JSON 객체로 결과 이미지를 구성한다. 각각의 요소는 page(현재 페

이지), pages(총 페이지), perpage(페이지 당 가져오는 건의 개수), total(전체

건의 개수), photo(가져온 이미지의 정보), stat(성공/실패 여부)를 말한다.

4) 이를 이용하여 다음과 같은 웹페이지를 제작해보자.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

<head>

<title>Flickr 최신 사진 검색 실습하기</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=EUC-KR”>

<script type=”text/javascript”>

var count= 0; //몇 개를 가져올지 텍스트 박스에 있는 값으로 설정

var httpRequest = null;

//XMLHttpRequest 객체 생성 메소드

function getXMLHttpRequest() {

if (window.ActiveXObject) {

try { return new ActiveXObject(“Msxml2.XMLHTTP”);

} catch (e) {

try { return new ActiveXObject(“MicrosoftxXMLHTTP”);

} catch (e1) { return null; }

}

} else if (window.XMLHttpRequest) { return new XMLHttpRequest();

} else { return null; }

}

그림 L7.２

반환된 JSON 객체


409

10

// 요청 보내는 메소드: url=주소 , params=전달할 파라미터 목록,

// callback=콜백함수(요청한 URL에서 응답이 오면 콜백함수가 실행된다.),

// method=get 방식인지 post 방식인지 선택

function sendRequest(url, params, callback, method) {

httpRequest = getXMLHttpRequest();

var httpMethod = method ? method : ‘GET’;

if (httpMethod != ‘GET’ && httpMethod != ‘POST’) {

httpMethod = ‘GET’;

}

var httpParams = (params == null || params == ‘’) ? null : params;

var httpUrl = url;

if (httpMethod == ‘GET’ && httpParams != null) {

httpUrl = httpUrl + “?” + httpParams;

}

httpRequest.open(httpMethod, httpUrl,true);

httpRequest.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);

httpRequest.onreadystatechange = callback;

httpRequest.send(httpMethod == ‘POST’ ? httpParams : null);

}

//최근의 사진을 가져옴

function getRecent(){

count=document.getElementById(“count”).value;

var params=

“method=flickr.photos.getRecent&api_key=0b3da7fe4b14b614f56787cab04eb785

&per_page=”+count+”&page=1&format=json”;

sendRequest(“http://api.flickr.com/services/rest/”,params,callBackGetRecent,”GET”);

}

function callBackGetRecent(){

if(httpRequest.readyState==4){

if(httpRequest.status==200){

var list=httpRequest.responseText;

list = list.substring(13,list.length); //텍스트에서 “jsonFlickrApi”.라는 문자열 제거

var jsonValue = eval(list);// 텍스를 객체로 만든다.

tagList = jsonValue.photos.photo; //만들어진 객체에서 태그들을 뽑아 배열에 저장

var url = “”;

var htmlTag =

“<div class=’vsDetails’><p class=’vsThumbnail’><span class=’photo_container pc_m’> <img

id=’primary_photo_img’ src=’http://farm”+tagList[0].farm+ “.static.flickr.com/”+tagList[0].

server+”/”+tagList[0].id+”_”+tagList[0].secret+”.jpg’ width=’240’ height=’160’ class=’pc_

img’ /></span></p></div>”

htmlTag += “<div class=’vsThumbs’><div id=’setThumbs’ class=’clearfix’>”;

410


//이미지 개수대로 보여주기

for(var i = 0; i< count ; i++){

url = “http://farm”+tagList[i].farm+”.static.flickr.com/”+

tagList[i].server+”/”+tagList[i].id+”_”+tagList[i].secret+”.jpg”;

htmlTag += “<img src=”+url+” width=’75’ height=’75’ class=’pc_img’ >”;

}

htmlTag += “</div></div>”;

var d = document.getElementById(“ViewSet”);

d.innerHTML=htmlTag;

}}}

</script>

</head>

<body>

<p align=”center”> <font size=4 color=blue> | 플리커 최신 사진 | </font> </p>

<form name=”f”>

<p align=”center”> 개수 :

<input type=”text” value=”30” id=”count” size=”5”/>

<input type=”button” value=”최신사진” onclick=”getRecent();”/>

</p>

</form>

<div id=”ViewSet” align=”center”> </div>

</body>

</html>

5) 작업한 매쉬업 웹페이지를 실행하면 다음과 같은 화면을 확인할 수 있다.

그림 L7.３

플리커 API 매쉬업 결과


411

10

실습 과제

1. 구글 지도 API에서는 구글 지도 웹페이지(http://maps.google.com)와 같이

지도를 조작하고 다양한 서비스를 통해 지도에 콘텐츠를 추가할 수 있는 여러

유틸리티를 제공하고 있다. 구글 지도 API를 사용하여 자신의 웹페이지에 구

글 지도를 포함해본다.

2. 네이버 오픈 API를 사용하면 자신의 웹페이지에 네이버 지도를 삽입하거나,

다양한 위치 기반 애플리케이션을 만들 수 있다. http://developer.naver.

com/wiki/pages/JavaScript 페이지를 참고하여 네이버 지도 API를 사용한

웹페이지를 작성해본다.

412


참고문헌

IT융합 시대의 멀티미디어배움터 2.0, 수정판, 최윤철, 임순범, 생능출판사, 2013.2

2012 한국인터넷백서, 한국인터넷진흥원, 2012

웹2.0 이노베이션, 오가와히로시 외, 브라이언&컴퍼니, 2006

당신은 웹2.0 개발자입니까?, 박지강, 한빛미디어, 2007

웹2.0 프로그래밍 꼭 알아야 할 18가지 이야기, 에릭 블리스트 외, 디지털미디어리서

치, 2008.4

“웹2.0 기술 현황 및 전망”, 전종홍, 이승윤, 전자통신동향분석 제21권 제5호,

2006.10

“RDF Site Summary (RSS) 1.0”, http://web.resource.org/rss/1.0/

“RSS 2.0 Specification”, RSS Advisory Board, http://www.rssboard.org/rss-

specification

“Resource Description Framework (RDF)”, W3C, http://www.w3.org/RDF/

“블로그 시작, 어느 Blog를 선택해야하는가? 설치형 블로그와 가입형 블로그”,

http://www.think-tank.co.kr/93

“웹2.0 환경에서의 태깅기술 동향”, 이강표, 김두남, 김형주, 정보과학회지, 2007.10

“시맨틱 웹을 향한 첫 걸음 ‘마이크로포맷’”, 월간 마이크로소프트, 2007.9, http://

www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_

id=31619

“Microformats”, MozillaWiki, http://wiki.mozilla.org/Microformats

“RIA(Rich Internet Application) 최신 동향”, 전자정보센터, 전자부품연구원,

2009.7

“Ajax: A New Approach to Web Applications”, Jesse James Garrett,

Adaptive Path, 2005.2, http://www.adaptivepath.com/ideas/essays/

archives/000385.php

“네이버 OpenAPI 개발가이드”, 네이버개발자센터, http://dev.naver.com/

openapi/tutorial

10.1.2절 RSS 예제, http://www.w3schools.com

[그림 10.4] 전자신문, http://www.etnews.co.kr/

[그림 10.5] 한RSS, http://www.hanrss.com/


413

10

[그림 10.8] 아이튠즈와 팟캐스팅, http://www.apple.com

10.2.2절 예제, http://www.itunes.com

[그림 10.11(a)] 플리커 태그 작성기, http://www.flickr.com/photos/24342113@

N03/2309177235/sizes/o/in/photostream/

[그림 10.11(b)] British Journal of Photography, http://www.bjp-online.com/

british-journal-of-photography/report/1645326/location-pending

[그림 10.13] XFN 1.1 Creator, http://gmpg.org/xfn/creator

[그림 10.15] KRG, http://www.krgweb.com/default/

[그림 10.16], [그림 10.17] Ajax, James Garrett, Adaptive Path, http://www.

adaptivepath.com/ideas/essays/archives/000385.php

[그림 10.20] HousingMaps, http://www.housingmaps.com

[그림 10.21] ProgrammableWeb.com, http://www.programmableWeb.com

<표 10.2> 구글 오픈 API, http://code.google.com

[그림 10.22] 매쉬업 사례 iGuide.travel, http://aroundguides.com/

[그림 10.23(a)] 페이스북 소셜그래프, https://apps.facebook.com/myfnetwork/

[그림 10.23(b)] 페이스북 터치그래프, https://apps.facebook.com/myfnetwork/

[그림 10.23(c)] 링크드인 소셜지도, http://inmaps.linkedinlabs.com/

[그림 10.24(a)] 네이버 오픈 API 홈페이지, http://dev.naver.com/openapi/

[그림 10.24(b)] 다음 오픈 API 홈페이지, http://dna.daum.net/apis/

[그림 10.25] 네이버지도 API 예제, http://dev.naver.com/openapi/apis/map/

414


연습문제

01 RSS는 콘텐츠 유통에 혁신을 가져왔다. RSS는 정기적으로 콘텐츠 정보를 제공

받기 원하는 웹피드의 주소를 자신의 구독기에 등록하여 최신 정보를 제공받는

다. 이메일을 이용한 콘텐츠 배포 방식과 웹피드에 의한 콘텐츠 배포 방식을 비

교하여 설명하라.

02 RSS는 xml에 기반하며 RSS 2.0의 경우 <channel>과 <item> 정보로 구성된다.

<channel>과 <item>에 대하여 설명하라. 또, 필요한 엘리먼트는 무엇이 있는지

나열하라.

03 RSS 피드를 이용하면 콘텐츠 신디케이션에서 여러 가지 장점이 생긴다. RSS 피

드를 통한 장점에 대하여 조사하라.

04 최근의 웹사이트에서는 자신의 콘텐츠를 널리 알리고 남들이 구독하도록 하는

수준으로 발전하고 있다. 인터넷 게시판에서 진화한 블로그의 종류에는 어떤 것

이 있는가?

05 블로그의 작동은 엔트리작성, 댓글달기, 트랙백으로 연결하기, RSS 피드로 구독

하기 등의 과정을 통한다. 블로그의 작동 원리를 그림을 통해 설명하라.

06 일반적으로 사용되는 블로그의 종류에는 가입형과 설치형의 두 가지 유형이 있

다. 두 유형의 특징을 설명하고 사례를 열거하라.

07 팟캐스팅은 오디오 콘텐츠를 mp3와 같은 미디어파일로 제작하여 웹사이트에 포

스팅하는 방법을 지칭한다. 팟캐스팅의 작동 과정에 대하여 설명하라.

08 팀 버너스리는 시맨틱웹을 “정보에 잘 정의된 의미를 부여하고 컴퓨터와 사람이

더욱 협력하여 일할 수 있는 웹의 확장 개념”으로 설명한다. 웹은 태깅과 마이크

로포맷을 통하여 시맨틱웹으로 발전하고 있다. 여기에서 말하는 태그와 소셜 태

깅, 마이크로 포맷이란 무엇인지 설명하라.

09 소셜네트워크에서도 마이크로포맷이 사용되고 있으며, XFN 포맷이 많이 사용

된다. XFN의 목적은 무엇인지 설명하라.

10 Ajax는 대화식 웹 애플리케이션에서 자바스크립트와 XML을 이용한 비동기 통


415

10

신방식을 이용하여 풍부한 사용자 인터페이스를 구현하기 위한 기술이다. Ajax

는 어떤 기술들의 조합인지 설명하고, Ajax의 예로는 어떤 것이 있는지 설명

하라.

11 웹 2.0에서 주목받는 서비스 중의 하나인 매쉬업 서비스란 무엇이며, 이를 위해

Open API가 왜 필요한지 설명하라. 그리고 Open API를 제공하고 있는 웹사이

트를 조사하여 열거하라.

Documents

INTERNET 10 - mm.sookmyung.ac.krmm.sookmyung.ac.kr/~sblim/lec/xml-adv/internet_chap10.pdf · 츠에 의미를 부여하여 시맨틱웹으로 발전해 가는 디딤돌이 되는