• 검색 결과가 없습니다.

INTER NET - 숙명여자대학교

N/A
N/A
Protected

Academic year: 2023

Share "INTER NET - 숙명여자대학교"

Copied!
52
0
0

로드 중.... (전체 텍스트 보기)

전체 글

(1)

웹2.0 서비스의 구현기술

10

CHAPTER

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

10.2 콘텐츠 출판을 위한 블로그(Blog)와 팟캐스팅(Podcasting) 10.3 시맨틱웹으로 발전하는 태깅과 마이크로포맷

10.4 웹 인터페이스의 진화, RIA와 Ajax 10.5 오픈 API와 매쉬업 서비스 실습 Lab.6 블로그 제작 실습 Lab.7 매쉬업 서비스 활용

(2)

웹2.0 서비스의 구현기술

참여, 공유, 개방이라는 특징을 가지고 있는 웹 2.0 서비스는 웹의 발전과 함께 진화해 왔다. 이제 웹 2.0 서비스는 플랫폼으로서의 웹 환경에서 사용자들의 집 단지성을 활용하여 콘텐츠를 제공하고 공유할 수 있게 되었다. 이러한 웹 2.0 환 경에서 사용되는 기술은 개별적인 특정 기술의 분류가 아니라 끊임없이 진화하고 있는 웹 발전의 연장선상에서 유기적으로 연계되고 비즈니스 측면에서 활용된 복 합적인 기술들을 지칭한다.

이 장에서는, 콘텐츠 유통 채널의 혁명을 가져온 RSS 기술과 콘텐츠의 웹 출 판 및 공유를 가능케한 블로그 및 팟캐스팅 기술을 소개한다. 그리고 기존의 콘텐 츠에 의미를 부여하여 시맨틱웹으로 발전해 가는 디딤돌이 되는 태깅와 마이크로 포맷을 설명하고, 웹 애플리케이션에서 인터페이스 개발을 편리하게 해주는 웹 클라이언트의 RIA 기술을 설명한다. 마지막으로 웹 서비스의 개발 방법에 진화를 가져온 오픈 API에 기반한 매쉬업 기술을 소개한다.

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

기존의 웹 콘텐츠는 생산자가 일방적으로 자신의 홈페이지에 게시를 해 놓거나 이메일로 전송을 해 주면 이를 받아 해석을 하는 과정을 거쳤다. 이 경우에 언제 어느 콘텐츠가 새로이 갱신되었는지 파악하는 것은 매우 어려우며 또한 웹문서에 는 다양한 형식의 콘텐츠가 사용되므로 더더욱 갱신 여부나 그 내용을 파악하기 에 많은 수고가 필요하였다. 이 절에서는 이러한 콘텐츠의 유통에 혁신을 가져온

(3)

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

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

콘텐츠 신디케이션(Contents Syndication)이란 콘텐츠 생산자(Contents Provider)가 제공하는 콘텐츠를 다른 수요자에게 연결해주는 온라인 콘텐츠의 배 급 및 유통을 위한 중개사업을 말한다. 주로 웹에서 콘텐츠를 공급하는 웹 신디케 이터(Web Syndicator)는 콘텐츠를 직접 생산하지 않지만 우수한 웹 콘텐츠를 수 집하여 콘텐츠 혹은 요약정보를 다른 여러 웹사이트 운영자에게 제공함으로써 콘 텐츠가 유통되도록 한다.

영화유통의 예를 보면, 배급업체가 영화의 판권을 제작업체로부터 사들여 동 영상 형식으로 변경한 후 여러 종류의 영화감상 혹은 VOD 사이트 운영자에게 판 매하여 영화배급을 하게 된다. 대표적으로 활용되고 있는 또 다른 사례로는 뉴스 의 공급이 있다. 신문사나 방송사 등 언론사에서 제작한 뉴스가 일정한 포맷으로 저장되어 각종 유통사에 배급이 되고 있다. 따라서 일반 사용자는 언론사 사이트 뿐만 아니라 포털사이트에서 제공되는 뉴스나 검색 결과 등에서 뉴스정보를 접할 수 있게 되었다.

이와 같이 콘텐츠 신디케이션의 유통 환경이 변함에 따라 콘텐츠를 공급하고 배급하는 유통 채널에도 변화가 요구되었다. 온라인 웹 환경에서 공급되는 콘텐 츠는 무수히 많으므로 단순히 웹사이트에 게시하는 것만으로는 사용자에게 정보 가 충분히 전달될 수 없으므로 새로운 콘텐츠에 대한 정보를 일반 사용자에게 별 도로 제공해 주어야 한다. 지금도 많이 사용되고 있는 이메일이나 메시징 방식에 서 정기적으로 정보를 제공받기 위해서는 사용자의 메일 주소를 일단 등록한다.

등록한 후에는 필요로 하지 않는 정보도 같이 포함된 정보를 제공받아 그 중에서 필요한 정보만 추려내야 한다. 메일의 경우에는 개인메일과 스팸메일도 포함되어 있어서 필요한 콘텐츠 정보만 골라내는 것도 귀찮은 작업이 될 수 있다. 이러한 문제점을 극복하고 사용자가 원하는 정보만을 적절한 시기에 손쉽게 제공 받거나 찾아 볼 수 있도록 하기 위하여 웹피드(Web Feed) 개념이 등장하였다.

콘텐츠 신디케이션을 위한 웹피드의 핵심 요소는 콘텐츠의 정보를 사용자에게 전달하기 위한 피드라는 개념의 웹문서 파일 형식이다. 현재 가장 널리 사용되는

(4)

형식으로는 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

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

(5)

록된 피드 주소로부터 갱신된 내용만을 취합해 줌으로써(③) 갱신된 정보를 볼 수 있다. 이 때 갱신된 콘텐츠의 내용을 보기 원하는 경우에는 연결되어 있는 링크로 부터 직접 방문하여 내용을 볼 수 있다(④). 그림 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의 기본 개념

(6)

로 표현한 것으로 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 피드 버튼

(7)

<?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 피 드 주소

(8)

를 가져와서 등록을 한다. 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 리더에서 피드 내용 보기

(9)

콘텐츠 신디케이션에서 웹피드를 활용하고 있는 대표적인 사례는 앞서 언급한 뉴스 서비스나 주기적으로 변경되는 정보를 제공하는 사이트에서 많이 사용되고 있다. 지속적으로 음악이나 멀티미디어 콘텐츠를 배포하는 팟캐스팅에서도 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)가 알리고 싶은 생각이나 주장 같은 것을 웹페이지에 일기처럼 적어 놓고, 다른 사람

(10)

도 볼 수 있게 나열해 놓은 글들의 모음이다. 여러 사람이 글을 작성하고 공유하 는 게시판과는 달리 한 사람이나 소수의 사람만이 글을 게시하며 다른 사람은 게 시된 글을 읽기 쉽도록 나열 해 준다. 이와 같은 작업이 콘텐츠를 남들에게 알리 는 과정이므로 일반적으로 콘텐츠 출판(Contents Publishing)이라고 하며, 때로 는 인터넷을 통해 기존 미디어에 못지않은 힘을 발휘할 수 있어서 ‘1인 미디어’라 는 호칭으로 부르기도 한다.

인터넷 게시판에서 진화한 텍스트 블로그에는 댓글 기능과 트랙백 기능이 있 어서 블로거와 독자 사이의 의사소통 방법이 더욱 다양해졌다. 또한 앞 절에서 소 개한 RSS 피드 기능을 적용하면 독자들이 손쉽게 블로그를 구독해 볼 수 있어서 블로그의 사용이 더욱 증가하였다. 모바일 환경에서는 문자 메시지 기능을 이용 한 블로그 서비스도 인기리에 사용되고 있으며, 대표적인 서비스로 트위터가 널 리 사용되고 있다. 모바일 블로그는 짧은 길이의 글을 게시한다고 해서 마이크로 블로그라고 부르고 있다. 또한, 초기의 블로그는 단순히 텍스트 글만 올리고 댓글 을 다는 기능만 있었지만, 점차 발전하여 멀티미디어 자료를 포함하도록 진화하 고 있다. 사진을 주로 올리는 포토블로그(Photoblog), 음악 파일을 다루는 mp3 블로그, 동영상 위주인 비디오블로그(Videoblog 혹은 Vlog), 음악을 포함하여 모 든 스트리밍 미디어를 다루는 팟캐스팅 등이 서비스되고 있다.

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

그림 10.6에서 보듯이 블로거가 작성한 글인 엔트리가 있고, 독자들은 이들 엔트 리의 글을 보고 댓글을 작성하거나 트랙백으로 원격 댓글을 작성한다. 그리고 정 기적으로 구독하고 싶으면 RSS 피드를 이용한다. 블로그의 작동과정은 다음과 같다.

1) 엔트리(Entry) 작성

블로그를 운영하는 사용자인 블로거가 자신의 생각이나 의견, 전문 지식을 글 로 표현하여 가장 기본 단위인 엔트리를 작성하여 자신의 블로그에 올린다. 이 때 최근에 올린 글이 가장 상단에 위치한다. 각각의 엔트리는 하나의 독립적인 HTML 파일로 작성되며, 이 페이지가 가지는 고유한 링크 주소를 고유링크 혹은 퍼머링크라고 한다.

(11)

2) 댓글(Reply) 달기

다른 사람이 블로그에 올라온 글을 보고 글 밑에 간단하게 몇 줄로 댓글 혹은 덧글을 달 수 있다. 블로그는 언제나 다른 사람이 들어와 글을 볼 수 있으나 누가 그 글을 보았는지는 알 수가 없지만 댓글로 방문기록을 남길 수 있다. 물론 댓글 을 달지 않는다면 글을 본 사람을 추적하기는 어렵다.

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

트랙백은 원격(Remote) 댓글로서 블로그에 올라온 글을 읽은 사람이 글에 대 한 의견 혹은 추가적으로 설명하고 싶은 사항을 자신의 블로그에 작성을 하는 것 이다. 블로거는 블로그에 올라온 글의 트랙백 URL을 공개하며, 독자는 자신의 의 견이나 추가 사항을 자신의 블로그에 작성을 하고 트랙백 핑(Ping)을 보내어 서로 의 블로그가 링크로 연결되도록 한다.

4) RSS 피드로 구독하기

RSS 피드는 독자가 원하는 글을 선택적으로 구독할 수 있으며, 새 글이 게시될 때 바로 볼 수 있다. RSS를 활용하여 블로그 콘텐츠를 효율적으로 배포할 수 있 다는 장점이 있다.

댓글

트랙백 트랙백 핑 RSS 구독

글(엔트리)

<퍼머링크>

댓글

트랙백의 원리를 자세히 이해하기 위하여 다시 살펴보자. A가 자신의 블로그에 글을 작성한다고 하자. 이 때, A는 트랙백 주소를 공개한다. B가 그 글을 보고 글 에 대한 의견을 쓰고 싶다면 A의 트랙백 URL을 이용하여 자신의 블로그에 글을

그림 10.6 블로그의 작동 원리

(12)

작성한다. 그리고 자신이 그 글에 대해 댓글을 달았다고 트랙백 핑을 보내어 A에 게 알려준다. 트랙백 핑은 title(글의 제목), excerpt(글의 초록), url(글의 URL 주 소), blog_name(블로그의 이름)의 4개 매개변수를 전달한다. 이렇게 트랙백을 이 용한다면 A와 B는 서로 연결되는 링크가 만들어진다. 즉, 서로 다른 블로그끼리 커뮤니케이션을 할 수 있는 소통의 한 방법인 것이다. 트랙백은 서로 연결될 수 있다는 장점이 있지만 일방적인 푸시(Push) 형태이므로 원본 글이 삭제되어도 트 랙백은 남아있다는 단점이 있다.

블로그

A B 블로그

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

트랙백 핑

일반적으로 사용되고 있는 블로그의 종류에는 가입형과 설치형의 두 가지 유형 이 있다. 가입형 블로그는 포털사이트에서 운영하는 블로그 서비스나 블로그 전 문 웹사이트의 블로그 서비스를 이용하는 것이다. 서비스 업체에서 블로그의 저 장 공간이나 편집 도구 등을 모두 제공하고 있으므로 사용자는 회원으로 가입하 기만 하면 수월하게 블로그를 운영할 수 있다. 또한 서비스에서 운영해주는 커뮤 니티 형성이나 콘텐츠 배포를 공유할 수 있어서 방문자 수를 쉽게 증가시킬 수 있 는 장점도 있다. 그러나 정해진 레이아웃을 사용해야 하는 등 가입한 블로그 서비 스에 종속되므로 사용자가 자유롭게 꾸미고 사용하는 데에는 제한이 있다. 네이 버, 다음, 야후, 구글 등 대부분의 포털사이트에서 블로그 서비스를 운영하며, 국 내의 전문 블로그 서비스로는 티스토리, 이글루스, 블로거닷컴 등이 있다.

설치형 블로그는 자신의 서버에 블로그 편집 소프트웨어를 설치하여 운영하는 것이다. 서버를 직접 운영하거나 웹호스팅 업체의 서비스에 자신의 계정을 설치 하여 운영할 수 있다. 블로그 레이아웃과 다양한 기능을 사용자가 자유롭게 구성 할 수 있으며, 자신의 자료를 스스로 백업하여 블로그 서비스 운영자와 무관하게 관리할 수가 있다. 그러나 설치형 블로그는 웹에 대한 전반적인 지식이 가지고 자

그림 10.7 트랙백의 원리

(13)

신이 서버를 관리하여야 하며, 또한 방문자 수를 늘리는 것을 스스로 해결해야 한 다. 대표적인 설치형 블로그 프로그램으로는 텍스트큐브, 워드프레스, 텍스타일, 무버블타입 등이 있다.

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)

(14)

드에 대한 요약 정보를 포함하고 있는 웹피드를 처리해주는 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>&#x2117; &amp; &#xA9; 2005 John Doe &amp; Family</copyright>

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

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

그림 10.9 팟캐스팅 작동 과정

(15)

<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>john.doe@example.com</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 &amp; 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이라고 한다.

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

(16)

교육 및 뉴스 제공 분야에도 많이 활용되고 있다. 최근 일부 기업에서는 팟캐스팅 을 광고와 고객의 의견수집 창구로 이용하는 등 마케팅 수단으로 적극 활용하고 있다. 팟캐스트 구독 현황은 고객의 관심 성향을 정확하게 반영하기 때문에 맞춤 형 광고 제작 등 개인화 서비스가 가능해진다. 또한 교육 목적으로도 많이 활용하 고 있는데 언제 어디서나 사용자가 원하는 시간에 오디오를 청취할 수 있다는 특 징이 있어 팟캐스팅을 이용한 교육은 효과적이다. MIT, 퍼듀, 스탠포드 등의 대 학에서는 열린 강좌(Open Course)의 팟캐스트를 학생들에게 제공하여 구독할 수 있게 한 사례도 있다.

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

웹의 창시자인 팀 버너스리가 제안하고 현재 웹컨소시엄에서 표준화 작업을 진 행 중인 시맨틱웹(Semantic Web)은 웹문서 내의 정보나 리소스에 의미를 부여하 자는 것이다. 주로 정보간 혹은 정보와 자원 사이의 관계와 의미 정보를 표현하고 이를 처리하는 온톨로지 혹은 토픽맵 기술을 개발하고 있으나, 아직 시맨틱웹의 실현은 시간이 더 필요하다는 판단이다. 이러한 시맨틱웹으로 발전하는 길목에 태깅 기술이 집단지성을 활용하는 데 사용되고 마이크로포맷이 정보 교환시 추가 적인 의미 전달에 활용되고 있다.

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

(1) 태그와 소셜 태깅

태그(Tag)란 웹문서 또는 자료에 그와 연관된 정보나 키워드 정보를 ‘꼬리표’처 럼 덧붙여 놓아서 정보를 분류하거나 검색 하는 등 여러 가지 부가적인 기능이 가 능하도록 해주는 일종의 메타데이터이다. 웹에 있는 모든 종류의 자료에 태그 형 태로 의미정보를 부착할 수 있으며 태그를 다는 행위를 태깅(Tagging)이라고 한 다. 팀 버너스리는 시맨틱웹을 “정보에 잘 정의된 의미를 부여하고 컴퓨터와 사람 이 더욱 협력하여 일할 수 있는 웹의 확장 개념”이라고 설명하고 있다. 즉, 태그는 콘텐츠의 내용을 요약하거나 대표할 수 있는 키워드인데 컴퓨터와 사람이 같이

(17)

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

일반적으로 태그의 길이에는 제한이 없으며, 문서 내에서 단어, 문장, 이미지 등 어떤 구성요소에도 붙일 수 있다. 특히, 사진이나 동영상 등 텍스트가 아닌 멀 티미디어로 제작된 콘텐츠의 경우 키워드 검색이 불가능하지만 태그를 붙여 키 워드 검색이 가능해지도록 할 수 있다. 또한 콘텐츠 저작자뿐만 아니라 콘텐츠를 이용하는 일반 사용자들도 태그를 달고 공유할 수 있으며, 이런 경우 소셜 태깅 (Social Tagging)이라고 한다.

예를 들어 그림 10.10과 같은 이미지를 벚꽃, 봄, 꽃길이라는 태그를 달아 사진 게시판에 등록했다. 이 사진을 감상한 다른 사용자가 여행, 벚나무, 추억이라는 자신이 연상한 키워드를 태그로 달 수 있다. 이와 같이 다양한 사용자들이 자신이 원하는 대로 태그를 달아 공유함으로써 일반적인 분류체계와는 다르게 이 정보에 대하여 다양한 측면에서 연관성을 보여줄 수 있다. 비교적 자유로운 형태로 태그 를 기록하고, 이렇게 제공된 정보는 손쉽게 검색되거나 분류될 수 있으며 다른 정 보와 엮여서 정보 네트워크의 형성이 가능해진다.

사용자 1

벚꽃 봄 꽃길

사용자 2

여행 벚나무 추억

사용자 3

데이트 벚꽃축제

플리커(www.flickr.com)는 소셜태깅으로 가장 유명한 이미지 공유사이트로 제일 먼저 웹 2.0 기술을 구현하여 서비스를 개시한 사이트 중 하나이다. 플리커 는 태그를 통한 이미지 분류와 검색을 제공한다. 그림 10.11과 같은 화면에서 사 용자는 이미지를 업로드하며 이미지에 대한 간략한 설명과 함께 태그를 직접 입 력하며, 또한 위치정보의 태그도 적절한 인터페이스를 통해 편리하게 부착하고 검색할 수 있다.

그림 10.10

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

(18)

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

(2) 폭소노미

이와 같은 소셜 태깅은 여러 사용자가 사용하게 되면 집단지성을 통해 미 리 정해지지 않은 분류체계인 폭소노미(Folksonomy)나 태그 구름(Tag Cloud) 의 실현이 가능해진다. 폭소노미는 대중을 의미하는 ‘folk’와 분류법을 의미하는

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

기존에 우리에게 익숙한 계층구조의 카테고리 분류방식인 택소노미(Taxonomy) 에서는 전문가가 미리 정해놓은 분류체계에 맞추어 하나의 리소스에 하나의 카테 고리만 적용할 수 있으며, 적당한 카테고리가 존재하지 않을 때에는 정확하게 분 류될 수 없다. 반면에 사용자 다수의 태깅을 통해 분류하는 폭소노미는 미리 정해 진 카테고리 없이 태그의 집단지성에 의해 분류되므로 기존에 정확한 분류가 가 능하지 않거나 혹은 새로운 분야에 속하는 자료도 분류될 수 있다. 더욱이 하나의 자료에 여러 개의 태그를 붙일 수 있으므로 활용 목적에 따라 다수의 카테고리로 분류될 수 있다.

이와 같이 웹2.0 환경에서 다중 사용자의 태깅을 이용한 폭소노미는 다양한 자 료를 분류할 수 있는 새로운 방법으로 널리 활용되고 있으며, 다음과 같은 장점이 있다.

집단지성에 의한 분류로 원하는 자료를 찾기 쉽다. 비슷한 사고를 가진 사람이 라면 미리 정해진 분류를 학습하지 않고도 경험을 바탕으로 원하는 자료를 찾

그림 10.11

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

(19)

을 수 있다.

한 번 본 자료를 다시 찾기 쉽다. 분류 명칭이 정확하지 않아도 유사한 키워드 로 찾아 갈 수 있으며, 여러 개의 태그를 붙일 수 있어서 그 중에 하나로 찾아 갈 수 있다.

많은 양의 자료를 관리하는 데 효율적이다. 사용자의 모든 요구사항을 편견없이 반영하며, 끊임없이 변화하고 새로이 발전해 나가는 자료도 쉽게 분류할 수 있다.

폭소노미에 의한 분류는 정해진 체계가 없는 만큼 카테고리 태그를 잘 찾아 볼 수 있도록 해야 한다. 특히 현재 검색한 카테고리와 유사한 카테고리를 제시해 준 다면 원하는 자료를 더욱 쉽게 찾아갈 수 있다. 태그들의 관계를 시각적으로 표 현하는 데에는 여러 가지 방법이 있으나 태그 구름(Tag Cloud)이 가장 널리 사용 되고 있다. 태그 구름은 그림 10.12에서 보듯이 태그를 2차원 공간 상에 연관도나 중요도에 따라 배치하고 글자의 크기나 색상 등에 변화를 주어, 관련이 있는 태그 로 쉽게 옮겨갈 수 있도록 해준다. 많은 사이트에서 인기 태그를 태그 구름 형태 로 제공해 주고 있으며, 이를 통하여 어떤 정보가 많은 관심을 주목 받고 있는지 도 알아보고 검색할 수 있다.

10.3.2 마이크로포맷

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

웹 언어인 HTML은 원래부터 다양한 형태의 정보를 포함한 문서를 표현하 고 이를 웹브라우저에 보여주기 위해 만들어졌다. 그러나 웹의 발전에 따라 문서 를 구조화하고 특정한 의미를 부여하거나 추가적인 정보를 교환하기에는 HTML

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

(20)

의 기능이 부족하다는 지적에 따라 시맨틱웹에 대한 연구를 활발히 진행하고 있 다. 이러한 해결책의 하나로 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’이라고 값을 적어 주어서 어느 태그가 어떤 정

(21)

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

<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과 같은 규격으로 정하고 있으며, 이 규격에서 유 형별로 해당하는 속성 값을 선택하여 표현할 수 있도록 하였다.

(22)

관계 유형 관계

교우 관계(하나만 선택)

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 관계 프로파일의 일 부(출처: 위키피디아)

(23)

앞에서 설명한 바와 같이 마이크로포맷은 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

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

(24)

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년

어도비 플렉스2 2006년

어도비 AIR MS 실버라이트 2.0 2008년

2002년 RIA 어도비 플래시

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

Ajax

그러나 이들 기술들은 많은 장점에도 불구하고 표준 기술이 아니며 따라서 표 준 웹브라우저 환경이 아닌 자신들의 고유한 플랫폼을 기반으로 실행된다는 단점 을 가지고 있다. 특히, Ajax 개념이 널리 사용되고 HTML5가 등장하면서 RIA 시

그림 10.15

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

(25)

장의 상황은 또 다시 바뀌었다. 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 애플리케이션 모델에서는

(26)

웹서버 측의 데이터 처리 로직과 클라이언트 측의 사용자 인터페이스 로직을 분 리한 점과 이들 간에 데이터 교환을 비동기 방식으로 통신하는 점이 가장 큰 핵심 기술이다.

그림 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 애플리케이션의 데 이터 통신 모델(출처: 제 임 스 가 렛 , A d a p t i v e Path)

(27)

까지 아무런 작업을 할 수 없다. 예를 들어, 기존의 검색 엔진에서 검색 요청을 하 거나 상거래 사이트에서 예금 거래를 할 경우 사용자가 요청하고 나서 처리 결과 를 기다린 후 다음 작업을 하게 된다. 그러나 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)

(28)

시작하는 단어가 보여지고, 그 다음으로 ‘a’ 글자를 입력하면 이번에는 ‘Aja’으로 시작하는 단어를 보여진다. 이런 방식으로 사용자는 원하는 단어의 글자를 끝까 지 다 입력하지 않아도 제시어 중에서 선택하여 사용할 수 있다. 이 때 서버에서 는 검색 창의 HTML 페이지를 모두 작성하여 보내주는 것이 아니라 단어 목록만 XML 형태의 텍스트 데이터로 전송하므로 전송량이 매우 감소한다. 또한 브라우 저에서는 전체 페이지를 갱신하지 않고 제시어 창만 갱신함으로써 인터페이스의 반응속도를 증진시킬 수 있다.

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

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

다음의 사례로 구글 지도를 보자. 지도 사용자는 수시로 지도를 확대 축소하거 나 이동시키려고 할 것이다. 이 때 서버에서는 해당하는 지도의 이미지를 매번 보 내주어야 한다. 이미지는 텍스트보다 데이터 용량이 크므로 네트워크 속도가 높 다 하더라도 사용자가 매우 빈번히 지도를 이동시킬 때에는 빠른 속도로 요청에 반응하기에는 약간 무리가 따른다. 이전의 웹 애플리케이션 모델에서는 지도를 이동시킬 때 이미지를 모두 다운로드 받고 나서 또 이동시켜야 하므로 조작성이 많이 떨어졌다.

그러나 Ajax 웹 애플리케이션 모델에서는 지도의 이미지를 전부 다운로드 받기 전에 다음 작업을 실행한다. 그림 10.19(a)에서 지도를 확대하려는 경우에 지도 이미지가 모두 도착하지 않았을 경우 그림 10.19(b)처럼 보여준다. 그림 10.19(b) 는 확대하려는 부분의 지도 이미지가 없어서 회색으로 처리한 경우이다. 물론 이 화면은 매우 잠깐 동안만 보여지며 이미지를 다 받으면 정상적인 지도 이미지를

그림 10.18

검색어 추천 기능 사례

(29)

보여주게 된다. 그림 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

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

(30)

을 말한다. API라는 것은 다른 응용 프로그램을 개발할 때 해당 모듈을 쉽게 사용 할 수 있도록 해주는 개발환경으로서 보통 라이브러리 형태나 이를 활용할 수 있 는 규약 형태로 제공된다. 오픈 API는 기존의 API 개념을 웹사이트에 확장한 것 으로 유명 사이트에서 공개한 API를 이용하여 손쉽게 자신의 사이트에서 원하는 웹서비스 기능을 이용할 수 있도록 만든 것이다.

복잡한 프로그램을 제작하지 않고도 오픈 API를 이용한 가벼운 프로그래밍으 로 검색 기능이나 지도 기능 등을 자신의 사이트에서 손쉽게 이용할 수 있게 되었 다. 구글 검색이나 구글 맵스는 자신의 API를 공개하여 여러 웹사이트에서 기능 을 부가하여 사용함으로써 더 풍부한 서비스를 제공하고 있다. 오픈 API를 제공 하면 서비스 자체의 활용도가 높아지면서 서비스가 더욱 활성화되어 트래픽 증가 로 이어진다. 또한 오픈 API를 이용하여 구축한 결과 유지보수가 쉬워질 뿐 아니 라 기업간의 제휴나 서비스 공유가 용이해진다.

매쉬업(Mashup)이라는 것은 감자를 으깨어 여러 가지 재료를 섞은 요리를 만 드는 것처럼 인터넷에서 제공되고 있는 서로 다른 서비스를 조합하여 새로운 웹 서비스 또는 애플리케이션을 만들어 내는 것이다. 매쉬업은 기존의 웹사이트의 오픈 API를 이용하고 이들 서비스를 공유할 수 있다는 점에서 개방과 공유를 기 반으로하는 웹2.0 환경의 핵심 기술이라고 할 수 있다. 또한, 매쉬업 서비스 개발 은 공개된 API를 이용하므로 개발비용이 매우 적고 가볍게 프로그래밍할 수 있다 는 장점이 있다.

최초의 매쉬업으로 알려진 서비스는 폴 레이드매처(Paul Rademacher)가 몇주 일 만에 개발한 하우징맵(HousingMaps)이라는 웹사이트로서 구글의 지도와 크 레이그리스트(Craigslist)의 부동산 정보를 연동하여 지도의 해당 위치에 부동산 정보가 표시되도록 하였다. 처음부터 구글에서 API 정보를 제공한 것이 아니라 폴 레이드매처가 구글 지도 서비스를 분석하여 지도 위에 정보를 표시한 것이었 으며, 오히려 구글이 그를 채용하여 구글 지도의 API를 공개하도록 하였다. 이것 을 계기로 구글을 비롯한 여러 웹사이트에서 API를 공개하였고 이후 오픈 API 제 공과 매쉬업 서비스 개발이 활성화되었다.

(31)

(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 와 매 쉬 업 유 형 ( 출 처 : P r o g r a m m a b l e W e b . com)

(32)

(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)

수치

그림 10.4
그림 10.5
그림 10.6 블로그의 작동 원리
그림 10.7 트랙백의 원리
+7

참조

관련 문서

기존 리보일러 스트리핑 혼성 공정은 고온 재생으로 인한 TEG 손실 및 열분해, TEG의 지속적 보충, 재생 시 많은 에너지 소비 등의 단점을 가지고 있다.  .. 본 연구에서는

촉매는 타르 감소뿐만 아니라 암모니아 같은 질소함유 화합물을 감소시키는데 매우 효과적 인 것으로 알려지고 있다 또한 반응기의 수정 또한 생산 가스의 품질을 향상시키는데