Mashup.OpenAPI2008.12.11 16:27

작년 매쉬업 대회 준비하면서 올린 파일인데, 오랜만에 보니 새롭게 느껴 지네요. 곧 매쉬업 대회 일정도 시작할것 같은데, Flash 로 매쉬업을 준비하시는 분들은 참고 하시기 바랍니다.   

오픈 API란 무엇인가요?

오픈 API(OpenAPI)란 자사의 API를 외부에 공개한 것으로 일반적으로 웹 서비스(Web Services)형태로 공개한 것을 말합니다. 위키피디어에서는 API를 "응용 프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있도록 만든 인터페이스"로 정의하고 있습니다.

즉, 원래는 운영체제나 언어가 제공하는 기능을 제어할 수 있는 인터페이스였으나 이를 웹서비스에서는 특정 서비스를 이용할 수 있는 인터페이스를 API라 지칭하였습니다. 또한 이것을 외부에서 사용할 수 있도록 공개한것이 오픈 API며, 웹 서비스의 개방지향적인 성격을 잘 나타내고 있습니다. 일반적으로 오픈 서비스 API, 웹 서비스 API등의 용어와 혼용하여 비슷한 의미로 사용되고 있습니다.  

이런 것이지요? ㅎㅎ 대표적으로 한국에서는 다음, 네이버, 옥션, 야후 등이 서비스를 하고 있습니다.  

 
  1. package yahweh.openapi
  2. {
  3.         import flash.system.System;
  4.         import flash.display.*;
  5.         import flash.events.*;
  6.         import flash.net.*;
  7.         import flash.xml.*;
  8.        
  9.                
  10.         public class ImageLoader extends EventDispatcher{
  11.                 private var mInfo:Object;// OpenAPI 를 쓰기 위한 준비 내용이 들어 있다.
  12.                 private var xmlInfo:Object;
  13.                 public var outXMLdata:XML;
  14.                        
  15.                 // constructor
  16.                 public function ImageLoader():void {// 초기화 시킨다.
  17.                                        
  18.                         mInfo={apiURL:"http://openapi.naver.com/search?target=image",
  19.                                         apiKey:"",          // 자신의 네이버 APIKEY 를 입력
  20.                                         query:"",
  21.                                         displayNum:10};
  22.                        
  23.                 }
  24.                
  25.                 // main function
  26.                 public function main_loadPage(_page:Number,_query:String):void {// 메인 페이지가 로드 될때 불러와 진다.
  27.                         var page = _page + 1;
  28.                         api_load(_query,page,mInfo.displayNum);
  29.  
  30.                 }
  31.                
  32.                 // API load function
  33.                 private function api_load(_query:String,_page:Number,_displayNum:Number):void {
  34.                         System.useCodePage = false;
  35.                         var page = _page*_displayNum;
  36.                         var loader:URLLoader=new URLLoader  ;
  37.                         loader.addEventListener(Event.COMPLETE,api_loadComplete);
  38.                         loader.addEventListener(IOErrorEvent.IO_ERROR,api_loadError);
  39.                         var requestURL=mInfo.apiURL + "&key=" + mInfo.apiKey + "&query=" +encodeURI(_query) + "&start=" + page + "&display=" + _displayNum;
  40.                         trace("requestURL = " + requestURL);
  41.                         var request:URLRequest=new URLRequest(requestURL);
  42.                         loader.load(request);
  43.                         //
  44.  
  45.                 }
  46.                 private function api_loadComplete(event:Event):void {
  47.                        
  48.                         trace("api load complete");
  49.                         var loader:URLLoader=URLLoader(event.target);
  50.                         var dataXML=new XML(loader.data);
  51.                         outXMLdata = dataXML;
  52.                         trace(dataXML);
  53.                         dispatchEvent(new Event(Event.COMPLETE));
  54.                         // 컨테이너에 연결 시킨다.
  55.                        
  56.                 }
  57.                 private function api_loadError(error:IOErrorEvent):void {
  58.                         trace("api load error");
  59.                                                
  60.                 }
  61.                                
  62.         }// End Class
  63. }

 

쿼리를 날리는 as 파일입니다. 제 api 키가 들어 있으니;; 무한 실행은 하지 마시고요;;

swf 를 올리니깐 인터넷상이라 그런지 이미지가 실시간으로 안불러와 지더군요. 소스 올릴테니 참고하세요. 

Posted by Flash 동강
Mashup.OpenAPI2008.12.11 13:18

우선 발급 받은 APIKEY 는 요청을 보낼 때 같이 보내게 됩니다. 

예를 들어 

http://openapi.naver.com/search?key=***&query=go&target=image&start=1&display=10   

위의 URL 에서 전달 하는 변수와 같이 image 검색을 위해서는 꼭 전달해야 되는 변수들이 존재 합니다.

 (출처 : http://openapi.naver.com/page.nhn?PageId=1_15 )
 
1. 요청 URL (request url)
   http://openapi.naver.com/search
2. 요청 변수 (request parameter)
요청 변수 설명
key string (필수) 이용 등록을 통해 받은 key 스트링을 입력합니다.
target string (필수) : image 서비스를 위해서는 무조건 지정해야 합니다. (image 검색 지정)
query string (필수) 검색을 원하는 질의, UTF-8 인코딩 입니다. (검색어)
display integer : 기본값 10, 최대 100

검색결과 출력건수를 지정합니다. 최대 100까지 가능합니다.

한번에 검색을 원하는 양 지정

start integer : 기본값 1, 최대 1000

검색의 시작위치를 지정할 수 있습니다. 최대 1000까지 가능합니다.

'플래시 를 검색 했다면 그 양은 엄청 많은 것입니다. 그때 검색한 양에서 어느부분 부터 출력을 해 줄것인가를 나타 냅니다.

sort string : sim (기본값), date 정렬 옵션입니다.
sim : 유사도순(기본값)
date : 날짜순
filter string : all (기본값), large,
midium, small
사이즈에 따른 필터 옵션입니다.
all : 전체 이미지(기본값)
large : 큰 이미지만 제공
medium : 중간 이미지만 제공
small : 작은 이미지만 제공

샘플 URL
   http://openapi.naver.com/search?key=test&query=go&target=image&start=1&display=10
 

우선 fla 파일을 만들고 Componnent 창에서 TextInput 을 Stage 에 올려 놓습니다. 그리고 name 을 input_txt 라 합니다. 그리고 난 후에 main 이라는 Document class 를 만들고, NaverImageApi 라는 as 파일을 만듭니다. 그냥 생성만 해 놓으시면 됩니다.  

그리고 main.as 와 fla 파일을 연결 합니다. (fla 파일의 Document class 를 main.as 로 지정 합니다. 이 과정을 모르신다면 이글을 참고 하세요. http://blog.naver.com/dongkang0626/130027969217  

이렇게 생성이 끝나고 TextInput 에 검색을 하면 해당 질의를 서버 측에 보내는 작업을 하기 위해 main.as 를 정리 하겠습니다.

 main.as
 
  1. package
  2. {
  3.         import flash.display.Sprite
  4.         import fl.events.ComponentEvent;
  5.        
  6.         public class main extends Sprite
  7.         {
  8.                 public function main()
  9.                 {
  10.                         input_txt.addEventListener(ComponentEvent.ENTER, onInputEnterhandler);
  11.                 }
  12.                 private function onInputEnterhandler(ev:ComponentEvent):void
  13.                 {
  14.                         trace("엔터");
  15.                        
  16.                 }
  17.                
  18.         }
  19.        
  20. }
  21.  

 ComponentEvent.ENTER 은 Component 에서 Enter 가 발생 하는지 감시해 주는 이벤트 입니다. KeyboardEvent 를 쓰는거에 비해 코드가 줄어 들지요.ㅎ 위와 같은 작업을 하면 input_txt 에 커서를 올려 놓고 Enter 를 쳤을때 "엔터" 가 출력 되는걸 확인할 수 있습니다.  

추가로 해 줘야 하는 부분은 이미지를 검색할 객체를 만들어 주는 부분 입니다. 위에서 만든 NaverImageAPI.as 를 가지고 검색 쿼리를  보낼 것 입니다. 그러기 위해서는 NaverImageAPI 객체를 생성합니다.

 
  1. package
  2. {
  3.         import flash.display.Sprite
  4.         import fl.events.ComponentEvent;
  5.        
  6.         public class main extends Sprite
  7.         {      
  8.                 private var imageloader:NaverImageApi;
  9.                 public function main()
  10.                 {
  11.                         imageloader = new NaverImageApi();
  12.                         input_txt.addEventListener(ComponentEvent.ENTER, onInputEnterhandler);
  13.                 }
  14.                 private function onInputEnterhandler(ev:ComponentEvent):void
  15.                 {
  16.                         trace("엔터");
  17.                 }
  18.                                
  19.         }
  20.        
  21. }

 main.as 에 대한 준비가 끝났습니다. 이제 검색 쿼리를 보내기 위해 NaverImageApi 클래스에 public function 을 선언하여 그 함수를 main.as 에서 사용하는 방식으로 코딩을 해 보겠습니 다.  

 NaverImageApi.as
 
  1. package
  2. {
  3.         import flash.display.*;
  4.         import flash.events.*;
  5.         import flash.net.*;
  6.         import flash.xml.*;
  7.        
  8.                
  9.         public class NaverImageApi extends EventDispatcher{
  10.                 private var mInfo:Object;// OpenAPI 를 쓰기 위한 준비 내용이 들어 있다.
  11.                                     
  12.                 // constructor
  13.                 public function NaverImageApi():void {// 초기화 시킨다.
  14.                                        
  15.                         mInfo={apiURL:"http://openapi.naver.com/search?target=image",
  16.                                         apiKey:"7ad7237d57e7290e8a136d05bfdda2dc",
  17.                                         query:"",
  18.                                         displayNum:10};
  19.                        
  20.                 }
  21.                
  22.                 // main function
  23.                 public function main_loadPage(_page:Number,_query:String):void {// 메인 페이지가 로드 될때 불러와 진다.
  24.                 }
  25.          }
  26. }

우선 mInfo Object 를 정의한 후 쿼리를 날리는데 필요한 변수들을 모아서 저장 합니다. 이때 query 는 input_txt 에서 불러서 쓸 것이기 때문에 빈칸으로 저장 합니다. 그리고 검색 쿼리를 날리기 위한 함수 main_loadPage 를 선언합니다. 여기에서 _page 를 선언 하는 이유 는 이미지 페이지 순서에 따라 다음 이미지나 이전의 이미지를 검색 하기 위한 변수 입니다.  

  1.                 public function main_loadPage(_page:Number,_query:String):void {
    // 메인 페이지가 로드 될때 불러와 진다.
  2.                         var page = _page + 1;
  3.                         api_load(_query,page,mInfo.displayNum);
  4.  
  5.                 }
  6.                
  7.                 // API load function
  8.                 private function api_load(_query:String,_page:Number,_displayNum:Number):void {
  9.                        
  10.                 }

main_loadPage 에 api_load 라는 함수를 콜하고 (검색어, 페이지, 검색갯수) 를 넘겨 줍니다. api_load 함수에서는 이들 변수를 받아와서 URLLoader 를 이용하여 쿼리를 서버측에 보내게 됩니다. 

  1. private function api_load(_query:String,_page:Number,_displayNum:Number):void {
  2.                        
  3.                         var page = _page*_displayNum;
  4.                         var loader:URLLoader=new URLLoader  ;
  5.                         loader.addEventListener(Event.COMPLETE,api_loadComplete);
  6.                         loader.addEventListener(IOErrorEvent.IO_ERROR,api_loadError);
  7.                         var requestURL=mInfo.apiURL + "&key=" + mInfo.apiKey + "&query=" +encodeURI(_query) + "&start=" + page + "&display=" + _displayNum;
  8.                        
  9.                         var request:URLRequest=new URLRequest(requestURL);
  10.                         loader.load(request);
  11.                         //
  12.  
  13.                 }

 URLLoader 와 Loader 의 사용법은 비슷하니 URLLoader 를 모르시는 분은 Loader 라고 생각하셔도 무방 합니다. 
로드가 끝났을때의 이벤트와 api_loadComplete , 에러가 났을때의 이벤트 api_loadError 를 설정한 뒤에 requestURL 으로 위에서 보았던 image 쿼리를 보내는 방식에 맞게  ( http://openapi.naver.com/search?key=test&query=go&target=image&start=1&display=10 )

load 합니다 위에서 mInfo 를 정의한 이유는 requestURL 때문 이었습니다. 

load 가 끝나면

  1. private function api_loadComplete(event:Event):void {
  2.                        
  3.                         trace("api load complete");
  4.                         var loader:URLLoader=URLLoader(event.target);
  5.                         outXMLdata = new XML(loader.data);
  6.                         trace(outXMLdata);              
  7.                         dispatchEvent(new Event(Event.COMPLETE));
  8.                         // 컨테이너에 연결 시킨다.
  9.                        
  10.                 }

이 함수가 실행 되어 보낸 퀴리에 해당 하는 xml 데이터를 받아 오게 됩니다. 그리고 main 함수에 쿼리전송에 대한 응답이 완료 되었다는 것을 알리기 위해  dispatchEvent(new Event(Event.COMPLETE)); 를 사용하여 main 에서 접근 할 수 있도록 정의해 줍니다.

dispatchEvent 를 통해 main 에서 NaverImageApi class 의 이벤트에 대한 접근이 가능해 졌습니다. dispatcherEvent 를 모르시면

이 글을 참고 하세요 http://blog.naver.com/dongkang0626/130031128965 

main.as 는 조금만 수정 하면 됩니다.

 main.as
 
  1. package
  2. {
  3.         import flash.display.Sprite
  4.         import fl.events.ComponentEvent;
  5.        
  6.         public class main extends Sprite
  7.         {      
  8.                 private var imageloader:NaverImageApi;
  9.                 public function main()
  10.                 {
  11.                         imageloader = new NaverImageApi();
  12.                         imageloader.addEventListener(Event.COMPLETE, onLoaderComplete);
  13.                         input_txt.addEventListener(ComponentEvent.ENTER, onInputEnterhandler);
  14.                 }
  15.                 private function onInputEnterhandler(ev:ComponentEvent):void
  16.                 {
  17.                         trace("엔터");
  18.                 }
  19.                 private function onLoaderComplete(ev:Event):void
  20.                 {
  21.                         trace("로드끝");
  22.                        
  23.                 }
  24.                
  25.         }
  26.        
  27. }

 imageloader 에 dispatchEvent 를 걸었으니 addEventListener(Event.COMPLETE, function ) 으로 이벤트를 받아 올 수 있습니다.  

이제 xml 을 받아 오는 모든 작업이 완료 되었습니다. main.as 에 대한 완성 코드는 위와 같고, NaverImageApi.as 에 대한 완성 코드는 다음과 같습니다.

 NaverImageApi.as
 
  1. package
  2. {
  3.         import flash.system.System;
  4.         import flash.display.*;
  5.         import flash.events.*;
  6.         import flash.net.*;
  7.         import flash.xml.*;
  8.        
  9.                
  10.         public class NaverImageApi extends EventDispatcher{
  11.                 private var mInfo:Object;// OpenAPI 를 쓰기 위한 준비 내용이 들어 있다.
  12.                 public var outXMLdata:XML;
  13.                        
  14.                 // constructor
  15.                 public function NaverImageApi():void {// 초기화 시킨다.
  16.                                        
  17.                         mInfo={apiURL:"http://openapi.naver.com/search?target=image",
  18.                                         apiKey:"7ad7237d57e7290e8a136d05bfdda2dc",
  19.                                         query:"",
  20.                                         displayNum:30};
  21.                        
  22.                 }
  23.                
  24.                 // main function
  25.                 public function main_loadPage(_page:Number,_query:String):void {// 메인 페이지가 로드 될때 불러와 진다.
  26.                         var page = _page + 1;
  27.                         api_load(_query,page,mInfo.displayNum);
  28.  
  29.                 }
  30.                
  31.                 // API load function
  32.                 private function api_load(_query:String,_page:Number,_displayNum:Number):void {
  33.                        
  34.                         var page = _page*_displayNum;
  35.                         var loader:URLLoader=new URLLoader  ;
  36.                         loader.addEventListener(Event.COMPLETE,api_loadComplete);
  37.                         loader.addEventListener(IOErrorEvent.IO_ERROR,api_loadError);
  38.                         var requestURL=mInfo.apiURL + "&key=" + mInfo.apiKey + "&query=" +encodeURI(_query) + "&start=" + page + "&display=" + _displayNum;
  39.                        
  40.                         var request:URLRequest=new URLRequest(requestURL);
  41.                         loader.load(request);
  42.                         //
  43.  
  44.                 }
  45.                 private function api_loadComplete(event:Event):void {
  46.                        
  47.                         trace("api load complete");
  48.                         var loader:URLLoader=URLLoader(event.target);
  49.                         var dataXML = new XML(loader.data);
  50.                         outXMLdata = dataXML;
  51.                        
  52.                         dispatchEvent(new Event(Event.COMPLETE));
  53.                         // 컨테이너에 연결 시킨다.
  54.                        
  55.                 }
  56.                 public function get xml():XML
  57.                 {
  58.                         return outXMLdata;
  59.                        
  60.                 }
  61.                 private function api_loadError(error:IOErrorEvent):void {
  62.                         trace("api load error");
  63.                                                
  64.                 }
  65.                                
  66.         }// End Class
  67. }

추가된 사항은 get xml() 을 이용하여 받아온 xml 을 접근 하기 위해 함수를 만들었다는 점입니다. 아차! main.as 에서 검색 했을때 NaverImageApi 에 있는 함수를 출력해 주는 부분을 깜박 했네요.  

  1. private function onInputEnterhandler(ev:ComponentEvent):void
  2.                 {
  3.                         trace("엔터");
  4.                         imageloader.main_loadPage(1,input_txt.text);
  5.                 }

검색의 1page 에 해당하는 부분을 로드해 줍니다.

 main.as
 
  1. package
  2. {
  3.         import flash.display.Sprite
  4.         import flash.events.Event;
  5.         import fl.events.ComponentEvent;
  6.        
  7.         public class main extends Sprite
  8.         {      
  9.                 private var imageloader:NaverImageApi;
  10.                 public function main()
  11.                 {
  12.                         imageloader = new NaverImageApi();
  13.                         imageloader.addEventListener(Event.COMPLETE, onLoaderComplete);
  14.                         input_txt.addEventListener(ComponentEvent.ENTER, onInputEnterhandler);
  15.                 }
  16.                 private function onInputEnterhandler(ev:ComponentEvent):void
  17.                 {
  18.                         trace("엔터");
  19.                         imageloader.main_loadPage(1,input_txt.text);
  20.  
  21.                 }
  22.                 private function onLoaderComplete(ev:Event):void
  23.                 {
  24.                         trace("로드끝");
  25.                        
  26.                 }
  27.                
  28.         }
  29.        
  30. }

 그럼 검색을 해 볼까요? 

위와 같이 이미지 정보를 포함한 xml 이 로드 됩니다. 이 정보들을 이용해서 Loader 를 통해 이미지를 불러 올 수도 있고 여러 가지 재미난 작업들을 할 수 있습니다. 

flickr 이미지 api 를 이용한 예 http://www.pimpampum.net/phrasr/?id=10772

 

Papervision3D 를 이용한 이미지 검색 ( 검색어를 입력 하세요. )

매쉬업에 관심을 가지게 된 계기는 얼마 안되었지만, 하면 할 수록 재미있고 신기 한것들을 만들 수 있는것 같습니다. 물론 직접 서비스가 되는 것도 가능 합니다. 앞으로 여러 매쉬업 하는 방법에 대해 소개 하면서 Flash 를 이용한 매쉬업 관련 컨텐츠가  많이 나왔으면 하는 바램입니다.

Posted by Flash 동강
Mashup.OpenAPI2008.12.11 13:13

웹 2.0 이다. Openapi 라 해서 매쉬업 컨텐츠를 만들어야 된다는 말이 여기 저기에서 나오고 있습니다. 하지만 정작 매쉬업이 어떤 의미를 가지고 있는지에 대해 모르시는 분들이 많은것 같아서, 간단하게 Flash 로 만들어 보는 매쉬업 이라는 주제로 이야기를 해 볼까 합니다.

 우선 매쉬업 이란? 출처 : http://mashupkorea.com/2008/faq

매쉬업(Mashup)이란 여러 데이타 소스들을 가지고 한개이 웹 페이지를 구성하거나, 여러 기능을 하나의 어플리케이션에서 제공하도록 만드는 것을 말합니다. 여러 데이터 소스들은 Daum과 같은 오픈 API를 제공하는 회사에서 RSS, XML 등의 데이터 형식으로 가져오게 됩니다. 매쉬업은 이용하면 축적된 데이터 없이도 창의적인 서비스를 빠르게 만들어 볼 수 있습니다. 사용자들에게는 한번에 여러 서비스를 이용할 수 있도록 도와 줍니다.

매쉬업 서비스는 이미 만들어져 있는 여러 서비스들을 섞어 만들게 됩니다. 대개 웹 서비스를 처음 만들때는 축적된 기반 데이터가 없는 것이 일반적입니다. 따라서 매쉬업 서비스를 만든다는 것은 기존 서비스 제공자들이 제공하는 데이터 기반 위에 독특하고 창의적인 아이디어나 서비스를 여러 가지 각도로 실험해 볼 수 있습니다. 이를 통해 초기 비용을 절감할 수 있습니다.

또한 매쉬업은 자신이 만든 핵심 서비스에 부가 기능으로 기존 회사들의 API를 사용할 수 있습니다. 이렇게 함으로서 핵심 서비스에만 집중할 수 있게 해 줍니다. 해외에서는 기존 API 제공 회사와 3rd Party가 비지니스적으로 유기적인 관계를 맺고 다양한 매쉬업 사례가 나오고 있습니다.   

요약해서 말하면, 이미 기업에서 만든 공개한 API  여러개를 믹스해서 새로운 컨텐츠를 만드는 것을 의미 합니다. 예를 들어 기존에 부동산 사이트 에서는 간단하게 텍스트로 된 주소와 이미지 밖에 제공 되지 않았지만 구글 맵이나 네이버 맵을 연동하여 위치를 정확하게 보여 주어 사용자의 편의를 높이는 컨텐츠를 만들 수 있습니다.   

그러면 제공 되는 Openapi 는 어떤 것들이 있는가? 굉장히 많습니다. 대한민국에서 제공 되는 api 는 네이버api다음api을 중심으로한 검색 API 가 주를 이루지만, 구글에서 제공 하는 api 만 해도 굉장히 많고 다양한 종류가 있다는 것을 알 수 있습니다.   

이런 Openapi 를 어떻게 Flash 로 이용하는 것인가?

이용 하는 방법은 여러가지가 존재 하고 있지만, 기본적으로 api 를 제공 하고 있는 서버에 요청을 보내고 그 요청에 대한 응답을 받는 형식과(REST방식),  블로그에 글 쓰기 와  같은 서버 측에 xml 파일을 전송하여 서버에 데이터를 저장하는 XML-RPC 방법이 주로 사용 됩니다. 여기에서 제가 다룰 내용은 REST 방식을 이용한 검색 부분 입니다.  

앞으로의 진행을 수월하게 따라 가기 위해서는 Actionscript3.0 에서의 XML 클래스와 Loader 클래스에 대한 이해가 필요 합니다. Loader 클래스에 대한 내용, XML 클래스에 대한 내용은 레퍼런스를 참고하세요.  

우선 사용할 API 는 네이버의 이미지검색 API 입니다. 이 API 를 사용하기 위해서는 http://openapi.naver.com/register.nhn 에서 API 사용 KEY 를 받으셔야 합니다.  

API KEY 까지 받으셨다면 다음 글 부터 시작해 보겠습니다.

Posted by Flash 동강
Portfolio2008.12.11 12:59

 

Yahweh Mini Bible . Mashup
2008. 1

 

다음 블로그 API 와 네이버 지도 그리고 AIR 를 이용한 Yahweh Minibible

 

성경 공부를 위한 설치형 프로그램으로 자신의 블로그에 글을 쓰므로 사람들과의 생각 공유 뿐만 아니라, 지도에서 사람들의 위치를 알 수 있어 단지 자신만의 블로그 생활이 아니라, 지역 사람들과의 교류의 용도로 사용할 수 있는 프로그램 입니다. 프로그램 자체 내장의 성경 DB 를 사용하여, 어떤 성경 구절을 읽고 그 해당 구절에 포스팅 하는 기능을 제공합니다. 

 

 

 

 

 

제작 하면서

 이 프로젝트중 제가 맡은 역할은 콘텐츠의 기반이 되는 Actionscript 3.0 로 각각의 제공되는 Openapi를 구현하고 조합하는 역할이었습니다. AIR 라는 RIA기반의 어플리케이션이 그 당시에는 beta 버전이었고, 기존에 있던 자료들이 있지 않아 고생을 많이 했지만, 브라우저 안에서 종속된 프로그램이 아닌, 사용자에게 더 편하게 다가갈 수 있는 프로그램을 만들어 보자라는 생각으로 제작을 하였습니다. 그 결과 감사하게도 ‘특별상(다음 블로그 API 상)’을 받게 되었고 그 덕분에 가장 값진 방학을 보낼 수 있었습니다. 저는 한 가지 일을 시작하면 그 일이 마무리 될 때 까지 그 일에만 집중하는 성격을 가지고 있습니다. 이 성격이 저에게는 양날의 검이 된 경우도 있었지만, 책임감 이라는 커다란 선물을 안겨 주었습니다. 남이 시켜서 하는 일이 아닌 내가 그 일에 열정을 가지고 맡은 바 책임을 다하면 그 열정은 엄청난 시너지 효과를 내어 더욱 좋은 결과를 낼 수 있다는 것을 이 대회를 통해서 알게 되었습니다.

'Portfolio' 카테고리의 다른 글

i tree  (0) 2008.12.11
Yahweh mini bible  (0) 2008.12.11
Who is 'dongkang'?  (0) 2008.12.11
BookSearch  (0) 2008.12.11
Posted by Flash 동강
Mashup.OpenAPI2008.12.11 12:37

2007년에 매쉬업 경진대회를 준비 하고 컨퍼런스와 엑스포 등등 여러 행사를 구경 다닌지가 어그제 같은데 벌써 5월 입니다. 2007년 출품작들과 수상작들 그리고 해외 매쉬업을 보면서 이것 저것 아이디어를 생각해 보았는데, 역시,,,, 잘 생각나지 않았던건, 웹이라는 공간 자체가 이미 없는것 없는 찾아 보면 이미 있던 것들 뿐이라 더 그랬는지도 모르겠습니다.  

오랜만에 매쉬업 공식 사이트(http://mashupkorea.org/) 에 방문하니 2009 년 매쉬업에 대한 포스팅이 올라 와서 그에 자극을  받아 '내가 본 2007-2008 매쉬업 경진 대회' 라는 글을 써 볼까 한다. 2008 매쉬업 컨퍼런스에 참가 했을 당시 2007 년 대상 수상작인 '거침없이 글짓기' 에 대한 프리젠테이션이 있었다. 


웹이 라는 광대한 DB 를 최대한 활용한 누구나 그 DB 를 사용하겠다는 생각을 하지만, 이런 식으로 사용 하겠다는  생각이나 할 수 있을까? 실제로 서비스로 내 놓아도 손색없을 정도의 아이디어와 실용성을 자랑 하였다.  입이 쩍~! 다만 속도의 문제가 있었지만, 매쉬업 이란 이런 것이로 구나 하는 생각을 들게 한 작품이었다. 단순한 아이디어 지만, 영어 공부 도우미 라는 많은 사람들이 원하는 영작도우미라는 아이디어에서 시작해서 웹이라는 거대한 DB 를 활용한 최고의 작품이었다.

 2007 대한민국매쉬업 경진대회 우수상
네이버 카페 플생사모(http://cafe.naver.com/flashdev.cafe) 에서 스카야마 라는 아이디로 활동중인 서희만 군 적은 나이임에도 불구 하고 Flash 에 대한 열정과 새로운 것에 대한 열정은 남들에게 뒤지지 않아 보인다.  

Lump Of Thought 역시, 매쉬업이라는 키워드를 잘 맞추고 있다. '무엇을 보여 주는가?' 와 함께 '어떻게 보여 주는가? ' 에 초점을 두어 사용자들의 시각을 자극한다. 검색의 특징중 하나인 '연관검색' 에 최대한 촛점을 맞춰서 자신의 검색한 대상에 대한 연관된 대상을 지속적으로 이어 나갈 수 있게 해 놓았다. Flash 로 만들어져 서비스 뿐만 아니라, UI 에도 많이 신경쓴게 보이는 작품 이었다.  

2008 대한민국 매쉬업 경진대회 우수상
Daum Devday 때 같이 프로젝트 하면서 알게된 NAuction 을 만드신 오창훈 님 (http://lovedev.tistory.com)

 

 매쉬업 작품을 출품하기 전에 플생사모에 미리 올라온 NAuction 을 보고 기가 죽어서 시무룩 해 있던게 생각난다. 기존 쇼핑 사이트의 복잡한 페이지 이동과, 리뷰가 빈약한 점을 최대한 공약한 NAuction metoday 와 연동하여 해당 상품에 대한 리뷰를 미투데이에 작성하여 구매의 편리함을 더 해 주고 있다. AIR 라는 데스크톱 어플리케이션이라는 특징을 활용하여, 사람들에게 지름신을 내려 주시는 Flex 기반(?) 매쉬업 작품이었다.  

2008 대한민국 매쉬업 경진대회 장려상


1회 , 2회 연속 수상에 빛나는 이태호 님의 Text Grinder 개인적인 생각으로 2008 출품 작중 가장 뛰어난 퀄러티를 자랑하고 있다. 다만,,,,,, 기능이 너무 많아 뭐가 뭔지 모르겠다는 단점이 있다.;;;;  (이태호님 죄송;; ) 기억에 남은 기능중 하나는 검색을 하여 검색된 문서를 자신이 소장할수 있게 HTML 로 저장할 수 있다. 

같은 학교 선배가 만든 Bookmate , 서울시내에 있는 도서관 통합검색 뿐만 아니라

 
도서관에 있는 도서 정보를 제공하고 종고 거래 서비스를 할수 있게 되어 있다. 도서 구매의 목적이 아니라 서울시에 있는 도서관에 대한 도서정보를 간편하게 검색하는건 물론이고, UI 적인 편안함도 제공한다. 

2008 년 대한민국 매쉬업 경진대회 대상작 aFeeLog , 본선에 진출하고 aFeeLog 를 만든 선배에게 '장려상이나 타면 다행이죠' 라고


말 했었는데, 설마 설마... 대상을 타 버렸다. 기존에 블로그에 있는 음악들을 블로그 파싱을 통해 음원만 끌어 오는 방법으로 음악 서비스를 제공한다. 또한 사용자들의 참여로 인해 날씨에 따른 감성이 축적되고 그 축적된 DB 는 감성에 맞는 추천음악을 제공할수 있게 만들어 놓았다.  

2008 년 대한민국 매쉬업 경진대회 특별상 '다음 블로그 API 상' - Yahweh


기독교 인들을 대상으로한 성경 공부 프로그램이다. 로컬 DB 안에 저장되어 있는 성경으로 성경책이 필요 없으며 각 성경 구절에 대한 자신의 생각을 적는 큐티(?) 라는 기독교인이 성경 공부 하는 작업을 할수 있다. 자신의 생각을 적는 곳은 자신의 다음 블로그에 기록이 된다. 또한 개인 사용자들은 자신의 주소를 프로그램에 입력함으로서 어느 지방에 누가 이런 생각을 적었는지 알수 있으며, 즉석만남(?) 도 가능 할것 같다는 생각을 하며 만들었다.  

2007-2008 년 출품작은 무수히 많았지만 지극히 개인적으로 기억에 남는 것들을 정리해 보았다. 이번 대회를 통해 놀랄 만한 아이디어도 볼수 있었고, 퀄러티도 느낄 수 있었다. 그리고 무엇 보다 열정을 느낄수 있었다. 많은 행사를 통해 Openapi 와 매쉬업을 전달해 주신 대회 관계자분들께 감사하단 말을 드리고 싶다.   

또한 행사가 끝난지는 오래 되었지만, 숭실대학교 미디어학부에서 2008 매쉬업 경진대회 '대상' 과 '특별상' 이 모두 나왔다는게 자랑 스럽다. 2009년 새로운 매쉬업 경진대회를 기대하며, 그때 까지 아이디어 구상을...ㄷㄷㄷ

Posted by Flash 동강
Review2008.12.11 12:09
대한민국 웹 2.0 트렌드
카테고리 경제/경영
지은이 김상범 (행복한나무, 2007년)
상세보기

이 책을 읽으면 블로그를 한번 해 봐야 겠다는 생각을 들게 한다. 오대리의 웹 2.0 체험기를 통해 웹 2.0 에 대해 설명하고 그와 관련해서 블로그의 기능 중심으로 이야기를 만들어 나가고 있다. ‘블로그가 웹 2.0 이냐?’ 사람들에게 아주 오해를 사기에 충분한 문장이다. 책을 처음 읽었을 때 이 책이 제대로 웹 2.0을 표현하고 있는 건지 의문을 가지게 만든 문장이었으니 말이다. 사람들 사이에서 웹 2.0 이라는 단어가 오르락내리락 하고 정말 웹 2.0 은 뭘까 라는 궁금증이 생긴다. 웹 2.0 이란 뭘까?

웹 2.0 이라는 말이 나오기 이전에 시맨틱웹 이라는 차세대 웹을 가리키는 용어가 먼저 사용되었다고 한다. 이 시맨틱웹이란 인공지능 강화로 자동화가 강화된 웹으로 볼 수 있다. 이 용어의 창시자인 팀 버너스 리는 ‘시맨틱 웹은 현재 웹의 확장으로 잘 정의된 의미를 제공함으로써 사람과 컴퓨터가 좀 더 협력을 잘 할 수 있는 웹 이라고 말하고 있다. 이 시맨틱 웹의 구현되고 있는 과정에서 웹 2.0 이라는 용어가 나오게 되었다. 웹 2.0이라는 용어 또한 오라일리 미디어(O'Reilly Media)의 부사장인 데일 도허티(Dale Dougherty) 처음 제안 하였다. 이 용어는 오라일리와 미디어 라이브 인터내셔널의 컨퍼런스 브레인스토밍 세션에서 시작되었는데, 이때 데일 도허티는 닷컴 붕괴 이후 살아남은 회사들의 공통점과 웹에 일종의 전환점을 찍은 닷컴붕괴를 표현하는 말로 웹2.0 이라 부르는 것이 어떠냐고 제안했고, 이때 웹 2.0 컨퍼런스가 탄생했다고 한다. 이러한 시멘틱웹이 나오는 과정의 일부분을 웹 2.0이라 정의 하고 있다.

웹 2.0 은 ‘개방’, ‘공유’, ‘참여’ 을 모토로 하고 있다. 그리고 책에서는 이 모토를 통해서 ‘블로그가 웹 2.0이다’ 라는 주장을 하고 있다. 어느 정도 맞는 이야기 이지만, ‘웹 2.0 의 한 부분에 블로그가 있다’ 는 문장으로 바꿔주고 싶다. 대한민국의 웹 2.0 트렌드로 블로그라는 사용자 개인 서비스를 내세우고 있지만, 과거에 싸이월드가 처음 나왔을 때만큼의 힘을 못 가지고 있는 실정이다. 많은 사람들이 블로그를 사용하고 블로그에 자신이 만든 콘텐츠를 올리고 있지만 그 양은 적다. 우선 콘텐츠를 만드는 것 자체가 시간을 많이 소비 하게 되는 것뿐만 아니라, 싸이월드에서 개인만의 공간을 만들어 가고, 친구들과의 안부를 묻거나 사진을 공유 하거나 하는 용도로 밖에 쓰지 않은 사람들이 블로그로 넘어와서 좀 더 개인적인 공간을 꾸미고, 자신의 지식을 공유해 나가는 장소로 블로그는 뛰어난 능력과 힘을 가지고 있지만 정작 사용자의 의식 수준이나 블로그를 왜 해야 되는지 의문을 가지고 있는 사용자들도 많이 있다. 블로그 안에 존재 하는 콘텐츠의 질적인 면에서도 블로그가 예전의 싸이월드와 같은 힘을 못 발휘 하게 하는 이유가 되고 있다. 블로그를 가지고 있는 사용자는 많이 있지만, 정작 자신의 만든 콘텐츠를 업로드 하는 것이 아니라. RSS 스크랩 형식으로 블로그를 운영하고 있는 사용자들이 많다. 더구나 이러한 스크랩 문화는 저작권 문제를 야기 하고 있다. 그렇다면 어떻게 해야 웹 2.0을 이해하고 올바르게 사용할 수 있을까?

책에서 말하고 있듯이 블로그는 웹 2.0 자체라고 비유 할 수 있을 정도로 개방, 공유, 참여라는 모토를 모두 내장하고 있다. 이 말은 블로그 라는 포장지 안에 웹 2.0 기술을 포장할 수 있다는 말이지 그 이상은 아니 라는 생각이 든다. 웹 2.0 이라는 용어가 생겨나고 사용자들의 눈은 날로 높아만 가고 있다. 그냥 인터넷 브라우저만 실행 시키면 알아서 검색을 해주고 정보를 찾아 가는데 거치는 절차의 최소화를 바라고 있다. 시맨틱웹이 원하는 방향이 이런 것이 겠지만 무엇이 이를 가능하게 만들어 줄 것인가? 그런 의미에서 나온 용어가 매쉬업 일 것이다. 매쉬업이라는 콘텐츠를 만들어 나가는 것을 지칭 하는 용어 자체가 웹 2.0 보다는 시맨틱웹의 의미와 많이 닮아 있다. 하지만 매쉬업이 앞으로 웹 2.0 환경을 구축해 나가고 새로운 콘텐츠를 창조 해 나가는데 일등 공신이 될 것이라 생각 한다. 이 책에서는 블로그에 적용된 매쉬업을 통해서 블로그의 발전 가능성을 매우 높게 보고 설명하고 있다. 마찬 가지로 블로그 밖에서도 웹 2.0 의 변화를 실제로 직접 느낄 수 있는 분야가 매쉬업이 적용된 분야가 될 것이다.  

이러한 용어들과 함께 그에 따른 기술들도 웹 2.0 트렌드를 부추기고 있다. 하지만 아무리 기술이 발전해 나가고 웹 트렌드가 진보해 나간다고 해도 그것을 사용하는 사용자의 의식 수준이 뒷받침 해주지 않으면 결국 웹 2.0 도 제자리 걸음을 할 것이고, 블로그 역시 싸이월드와 같은 쇠퇴기를 걷게 될 것이다. 더 이상 쇼핑몰을 새롭게 창업하여 거대한 수익을 올릴 수 있는 때는 지났다. 웹은 점점 더 커질 것이고, 더 이상 컴퓨터 브라우져 안에 한정된 공간으로서의 의미는 사라져 가고 있다. 일상 곳곳에 웹이 침투 하고 있고, 그 웹은 2.0이라는 변화의 시간을 걷고 있다. 이 변화가 끝날 무렵에는 새로운 변화가 다시 한 번 우리를 놀라게 할 것이라 생각된다. 변화를 올바르게 이해하고 참여 하는 것이 우리의 역할이 아닌가 생각해 본다.


Posted by Flash 동강