오픈 API를 활용한 매쉬업 가이드

오창훈

2000년 웹마스터로 IT 업계에 발을 들여놓은 10년차 개발자다. 2008년 매쉬업 경진대회, 2009 다음-구글 위젯 경진대회에서 수상했으며, RIA관련 세미나와 컨퍼런스에서 발표를 하고, 꾸준히 블로그나 Adobe RIA 공식 사이트에 기술문서도 기고한다. gseshop에서 테크니컬리더로 프론트의 신기술 도입과 적용, 최적화 작업에 관여했으며, 지금은 nhn의 UIT센터에서 플래시/플렉스를 활용해 웹애플리케이션을 개발하고 있다. 온라인에서 lovedev라는 닉네임으로 활동하면서 lovedev.tistory.com 블로그도 운영하고, ACC(Adobe Community Champion)로도 열심히 활동 중이다. 살아 숨쉬는 웹 서비스를 만드는 것을 목표로 매쉬업이나, 오픈 소셜에 많은 관심을 두고 연구 중이다.

01장 매쉬업, 시작해볼까?
1.1 매쉬업의 의미
1.2 매쉬업의 태동
1.3 국내외 매쉬업 현황
1.4 다양한 매쉬업 사례
1.5 매쉬업의 미래와 전망
1.6 매쉬업 체크리스트
1.7 오픈 API란?
1.7.1 오픈 API의 이점
1.7.2 오픈 API로 정보가 제공되지 않는다면?
1.8 매쉬업 기본기
1.8.1 Request와 Response의 이해
1.8.2REST
1.8.3 AJAX
1.8.4 JSON
1.8.5 자바스크립트
1.8.6 플래시와 플렉스
1.8.7 AIR 1.8.8 열정
1.9 매쉬업 개발환경 구성
1.9.1 Aptana IDE 설치하기
1.9.2 자바스크립트 프레임워크와 라이브러리 소개

02장 지도 API를 이용한 간단한 약도 만들기
2.1 네이버 지도 API
2.1.1 지도 만들기
2.1.2 주소로 좌표값 알아내기
2.1.3 지도 마커 만들기
2.1.4 지도에 설명 글 달기
2.2 각 서비스별 지도 API 비교와 분석
2.2.1 구글 지도 API의 특성
2.2.2 야후 지도 API의 특성
2.2.3 다음 지도 API의 특성
2.3 정리

03장 이미지 API 기초_이미지 검색기 만들기
3.1 네이버 이미지 검색 API
3.1.1 API 호출하기
3.1.2 이미지 검색기 만들기
3.2 다음 이미지 검색 API
3.2.1 API 호출하기
3.2.2 이미지 검색기 만들기
3.3 플리커 API
3.3.1 API 호출하기
3.3.2 이미지 검색기 만들기
3.4 포토버킷 API
3.4.1 OAuth 인증 방식의 이해
3.4.2 API 호출하기
3.4.3 이미지 검색기 만들기
3.5 정리

04장 이미지 API 응용_이미지 검색 플러그인 만들기
4.1 자바스크립트 객체화
4.2 통합 이미지 검색기 만들기
4.3 WYSIWYG 웹 에디터 플러그인 만들기
4.3.1 오픈에디터
4.3.2 이미지 통합 검색기를 플러그인으로 전환하기
4.4 HTML 페이지를 AIR 애플리케이션으로 전환하기
4.4.1 AIR 프로젝트
4.4.2 AIR 보안 모델
4.4.3 AIR 애플리케이션으로 전환하기
4.4.4 AIR 애플리케이션의 패키징과 배포
4.5 [도전 매쉬업] 플리커 API + 야후 지도 API
4.6 정리

05장 구글 차트 API를 이용한 동적 차트 만들기
5.1 라인 차트 만들기
5.1.1 라인 차트 API
5.1.2 간단한 라인 차트 만들기
5.1.3 라인 차트 꾸미기
5.1.4 순이익 대비 영업 달성률 차트 만들기
5.2 막대 차트 만들기
5.2.1 막대 차트 API
5.2.2 여러 종류의 막대 차트 만들기
5.2.3 수출입 실적 차트 만들기
5.3 원형 차트 만들기
5.3.1 원형 차트 API
5.3.2 학년별 비중 차트 만들기
5.4 버블 차트 만들기
5.4.1 버블 차트 API
5.4.2 프로젝트별 중요도/진행률 차트 만들기
5.5 복합 차트 만들기
5.6 차트 데이터와 차트 데이터 인코딩
5.7 [도전 매쉬업] 차트 생성기 만들기
5.8 정리

06장 동영상 탐색기 만들기
6.1 유튜브 동영상 검색 API
6.1.1 API 호출하기
6.1.2 동영상 탐색기 만들기
6.1.3 동영상 플레이어 컨트롤하기
6.1.4 그 밖의 API
6.2 [도전 매쉬업] 유튜브 미디어센터 만들기
6.2.1 기본 레이아웃 설계
6.2.2 유튜브 미디어센터 검색 영역 구현
6.2.3 SQLite를 활용한 플레이 리스트 구현
6.2.4 자동/랜덤 재생 기능 구현
6.2.5 미니 모드와 동영상 모드 구현
6.2.6 동영상 플레이어 만들기
6.3 정리

07장 사용자 인증 방식의 구현과 이해
7.1 사용자 인증 구현
7.1.1플리커 사용자 인증
7.1.2 미투데이 사용자 인증
7.2 [도전 매쉬업] 웹캠을 이용한 애플리케이션 웹캠포토 만들기
7.2.1 PC에 장착된 웹캠 연동하기
7.2.2 자바스크립트에서 액션스크립트 라이브러리 사용하기
7.2.3 파일 업로드를 위한 multipart/form-data 인코딩 구현 7.2.4 EncryptedLocalStore
7.3 정리

08장 블로그 편집기 만들기
8.1 개요
8.2 블로그 API
8.2.1 XML-RPC용 자바스크립트 라이브러리 만들기
8.2.2 XML-RPC Request 만들기
8.3 블로그 편집기 만들기
8.3.1구글 지도 플러그인 만들기
8.4 파일 드래그앤드롭 기능을 이용한 파일 첨부 기능 구현
8.5 문서 뷰어 기능 구현
8.5.1 문서 파일 업로드하기
8.5.2 iPaper 문서 뷰어 만들기
8.6 유튜브 동영상 플러그인 만들기
8.6.1 JSONP
8.6.2 플러그인 만들기
8.7 구글 번역 플러그인 만들기
8.7.1 구글 언어 API
8.7.2 간단한 한/영 호환 번역기 만들기
8.7.3 번역 가능한 언어와 번역한 언어의 표현 가능 여부 감지하기 8.7.4 구글 브랜드 달기
8.7.5 여러 언어가 지원되는 간단한 번역 플러그인 만들기
8.8 플러그인 세트 만들기
8.9 정리
8.10 총정리

부록 A 미투데이 알림이 만들기
A.1 미투데이 API
A.1.1 사용자 친구 리스트 가져오기
A.1.2 포스트 리스트 가져오기
A.1.3 코멘트 리스트 가져오기
A.1.4 그 밖의 API
A.2 알림이 애플리케이션 만들기
A.2.1 감시 리스트 만들기
A.2.2 알림 기능 구현
A.3 시스템 트레이 기능 구현
A.3.1 트레이 아이콘과 메뉴 만들기
A.3.2 트레이에서 열리는 알림창 구현

부록 B 어도비 AIR 도우미 유틸리티 소개
B.1 HTML 기반의 AIR 애플리케이션 소스 보기 구현
B.2 HTML 기반의 AIR 애플리케이션에서의 자바스크립트 디버깅
B.3 AIR 업데이트 프레임워크를 활용한 애플리케이션 자동 업데이트 기능 구현 B.4 Fiddler를 이용한 HTTP 통신 모니터링

★ 소개 ★

내용

- 네이버, 다음, 구글, 야후의 지도 API
- 네이버, 다음, 플리커, 포토버킷의 이미지 API
- 구글 차트 API, 유튜브 동영상 API
- 블로그 API, Scribd API, 구글 번역 API
- OAuth방식의 사용자 인증 방법, HTTP프로토콜
- 어도비 AIR 보안 샌드박스, 파일 API, 배포, 내장 데이터베이스 SQLite


구성

매쉬업을 하기 위해선 서비스와 UI기획, 객체 지향적 설계, 자유자재로 다룰 수 있는 스크립트 언어 등 여러 부분이 다양하게 요구된다. 이 책은 처음 매쉬업의 개념을 일러주어 다양한 사고와 기획을 할 수 있도록 한다. 그 다음 이해가 쉬운 HTML과 자바스크립트를 이용해 활용도와 확장성이 높은 Adobe AIR기반의 매쉬업 애플리케이션을 만들게 된다. 끝으로 여러 API를 매쉬업하면서 웹 프로젝트에서도 활용도가 높은 HTTP 프로토콜의 이해나 API의 사용자 인증, 암호화 같은 고급기술을 체계적으로 설명해줌으로써 궁극적으로 애플리케이션을 만드는 방법을 배울 수 있도록 단계적으로 구성되어 있다.

1부는 매쉬업을 위한 기초과정으로 매쉬업의 개념, 전망과 현황, 그리고 매쉬업을 하는 방법 등 매쉬업의 배경과 개념을 알아보고 간단하게 지도, 이미지 API를 활용해보고 간단한 애플리케이션을 만들면서 매쉬업의 탄탄한 기초를 다질 수 있도록 구성되어 있다.

1장 매쉬업이란?에서는 매쉬업의 의미와 시작된 배경, 매쉬업 현황 그리고 미래와 전망을 살펴보고 매쉬업할 때 꼭 알아야 할 주의사항을 소개한다. 이 외에 매쉬업의 전반적인 이해를 돕고자 오픈 API의 이해와 장점 그리고 책을 위한 필요한 사전 지식 및 준비 사항에 대해 알아본다.

2장 지도 API를 이용한 간단한 약도 만들기에서는 매쉬업에서 가장 많이 활용되는 네이버, 다음, 구글 야후 등 여러 지도API의 기본적인 이해와 사용방법을 알아보고, 간단한 지도를 만드는 것부터, 좌표 검색 방법, 마커 활용법 등을 알아보고 간단한 약도를 직접 만들면서 매쉬업 개발의 첫 걸음을 내딛게 된다.

3장 이미지 API 기초 이미지 검색기 만들기에서는 네이버, 다음, 플리커, 포토버킷 등의 이미지 검색API에 대해 알아보고 데이터를 활용해 다양한 API의 이미지 검색 애플리케이션을 만든다. 그리고 이미지 검색 API에서 사용되는 OAuth인증 방식도 다루면서 매쉬업의 기초를 다지게 된다.

2부는 매쉬업 응용코스로 3장에서 만든 이미지 검색기를 통합하면서 자바스크립트의 객체화에 대해 다루면서 시작하게 된다. 그리고 HTML기반의 Adobe AIR의 보안모델, 인증서, 패키징 방법, 배포 방법 등을 살펴보면서 Adobe AIR애플리케이션의 기초를 다진다. 또한 구글 API를 이용한 다양한 차트 생성 애플리케이션, 유튜브 API를 이용한 탐색기, API를 위한 사용자 인증방식을 이해하고 다루면서 Adobe AIR만의 여러 기능을 배우게 된다.
4장 이미지 API 응용 이미지 검색 플러그인 만들기에서는 이미지를 검색해 바로 편집기에서 활용할 수 있는 WIZWIG 웹 에디터 오픈에디터를 활용한 이미지 검색 플러그인을 구현하고 HTML페이지를 Adobe AIR 애플리케이션으로 탈바꿈하는 방법을 익히게 된다. Adobe AIR를 다루면서 Aptana IDE설치 방법과 사용법을 설명하고, AIR 보안 모델인 샌드박스에 대해 자세히 살펴보고, 샌드박스간 인터렉션 방법과 애플리케이션의 패키징부터 배포에 이르기까지 자세히 알아본다.

5장 구글 차트 API를 이용한 동적 차트 만들기에서는 구글 차트에 대해 분석하고 사용법을 익힌 다음 실무에서 자주 쓰이는 차트를 만드는 방법에 대해 살펴본다. 간단한 라인, 원형, 막대 차트부터 복잡한 버블차트, 복합 차트를 만들면서 차트 API의 원리와 데이터 인코딩 방법을 배우고 차트를 자동으로 만들어 주는 차트 생성 애플리케이션을 만든다.

6장 동영상 탐색기 만들기에서는 유튜브 API를 활용해 애플리케이션을 만들게 된다. 이 때 유튜브에서 제공하는 동영상 플레이어 API를 이용해 동영상 플레이어를 컨트롤하는 방법을 배우고, 기본 레이아웃의 기초적인 설계부터, 랜덤 재생이나 사이즈 조절 기능과 같은 서비스에는 없는 기능을 기획하고 구현을 하게 된다. 이 때 동영상 플레이리스트를 구현하면서 Adobe AIR에서 제공되는 SQLite 로컬데이터 베이스 사용방법을 익히고 , 유튜브에서 제공하는 Chromless 플레이어를 이용해 자기만의 동영상 플레이어를 만들면서 각종 테크닉들을 다룬다.

7장 사용자 인증방식의 구현과 이해에서는 플리커 사용자 인증방식, 미투데이 사용자 인증방식을 다루고 간단한 이미지 파일 업로드 애플리케이션을 만들어 본다. 이 때 HTTP Basic Authentication방식의 이해와 multipart/form-data 인코딩을 배우면서 HTTP프로토콜에 대해 체계적으로 배우게 된다. 그리고 웹캠을 활용한 매쉬업 애플리케이션을 만들면서 자바스크립트에서 액션스크립트의 라이브러리를 사용하는 방법을 익히고, 플래시와 자바스크립트가 공존하는 AIR 애플리케이션을 만들게 됨으로써 AIR와 플래시 그리고 자바스크립트의 관계에 대해 낱낱이 살펴보게 된다.

3부 실전 매쉬업 애플리케이션 만들기는 실전에 매쉬업을 적용하기 위한 방법을 배우는 과정으로, 그간 배운 API와 기술을 총 정리하고 집약해서 XML-RPC기반의 블로그 편집기를 만들게 된다. 실전인 만큼 Adobe AIR에서의 파일 객체를 다루는 방법이나 드래그 앤 드랍과 같은 고급기능을 원리부터 익히게 된다.

8장 블로그 편집기 만들기는 지금까지 다룬 모든 과정을 편집기의 기반으로 사용되는 오픈에디터의 플러그인을 만들면서 총정리하고 집약하게 된다. 블로그에 글을 작성하는 애플리케이션인 만큼 블로그 API로 사용되는 XML-RPC에 대해 자세히 살펴보고 단계적으로 블로그에 편집기능을 적용하면서 블로그 편집기의 기초 틀을 만든다. 그리고 편집기에 구글 지도를 넣을 수 있는 구글 지도 플러그인, Scribd API를 이용한 문서 뷰어 기능, 유튜브 동영상을 넣을 수 있는 유튜브 동영상 플러그인, 다국어도 편리하게 다룰 수 있는 구글 번역 플러그인 등 다양한 테크닉과 API를 총동원해 메타 블로그에 글을 작성하는 편집기 애플리케이션을 만든다. 또한 애플리케이션의 편의성을 위해 이미지 파일을 드래그해 넣으면 판별해서 파일이 자동으로 업로드되고 편집기에 파일을 판별해 용도별로 삽입되는 기능 등 Adobe AIR의 다양한 기능도 함께 다룬다.

부록 I 미투데이 알림이 만들기는 Adobe AIR의 시스템 트레이 아이콘을 활용하는 방법, 시스템 트레이에 툴팁을 띄우는 방법 등 알림기능 위해 구현하는 방법을 배우고 Adobe AIR에서 해상도를 컨트롤하는 방법, 애플리케이션 윈도우의 사용법 등 Adobe AIR만의 다양한 기술을 많이 다룬다.

부록II Adobe AIR 도우미 유틸리티 소개에서는 Adobe AIR 애플리케이션을 만들 때 꼭 필요한 유틸리티를 소개한다. HTML기반의 Adobe AIR 애플리케이션을 효과적으로 디버깅할 수 있는 AIRIntrospector활용법과 애플리케이션의 소스 탐색을 도와주는 AIRSourceViewer 사용법, 그리고 AIR Update Framework 활용해 애플리케이션을 자동으로 업데이트 할 수 있는 방법, 마지막으로 Fiddler를 이용해 HTTP 패킷을 모니터링하는 방법까지 애플리케이션 개발에 없어서는 안될 가장 중요한 방법을 소개한다.

대상

HTML과 자바스크립트 혹은 액션 스크립트를 다룰 줄 아는 사람이라면 누구든 쉽게 독자가 될 수 있으며, 매쉬업이나 Adobe AIR에 관심이 많은 독자라면 많은 기초부터 많은 기술을 탄탄하게 배울 수 있을 것이다. 특히 다음과 같은 사람들에게 많은 도움이 될 것이다.

- 일반 웹 개발자, 웹 기획자
- HTML을 다룰 줄 아는 개발자
- 자바스크립트를 아는 개발자
- 액션스크립트를 아는 개발자
- 매쉬업에 관심이 많은 개발자
- Adobe AIR 애플리케이션에 관심이 많은 개발자


★ 추천의 글 ★

근래에 들어 웹산업이 성숙해지는 가운데 새로운 아이디어를 찾기 위해 기업들은 자사의 데이터를 공개하고 있다. 프로슈머로서 서비스 이용자들의 왕성한 활동이 UGC라는 형태로 기업의 서비스에 기여하며, 기업의 컨텐츠를 활용해 또 다른 신규 컨텐츠로 재생산하는 선순환이 이뤄지고 있다. 따라서 기업이 모든 것을 제공하는 기존의 서비스 방식에서 기반 데이터와 도구를 제공하고 유저 또는 다른 기업을 통해 자신도 부가가치를 창출할 기회를 찾는 방향으로 변하고 있다.
『오픈 API를 활용한 매쉬업 가이드』는 정말 기다리던 책이다. 개인적으로 오픈API와 매쉬업이란 주제에 참여하고 있는 실무자로서 항상 많은 질문을 받곤 한다. ‘매쉬업이 뭐예요? 오픈API로 무얼 할 수 있죠?’ 그럴 때마다 차근차근 설명하곤 하지만 이런 갈증을 한번에 해결해줄 수는 가이드가 필요했다. 해외에서는 이미 오픈 API나 매쉬업에 대한 서적들이 많이 출간됐지만 그간 국내의 실정에 맞는 책은 없었다. 그러므로 이 책은 매쉬업을 통해 아이디어를 펼치고 싶은 기획자나 개발자들의 갖춰야 할 필독서라 할 수 있다.

오픈 API와 매쉬업을 기초부터 활용까지 알고 싶다면 이 책은 훌륭한 가이드가 될 것이다. WOW라고 탄성을 지르기에 충분히 멋진 책이다!

양주일 / NHN UIT 센터 센터장

매쉬업이라는 개념이 소개된 지 3년이 넘었지만 그 동안 국내에서는 매쉬업을 다루는 전문적인 서적이 없어 아쉬운 참에 오창훈님의 반가운 책을 만나게 되었습니다. 개방화의 물결을 타고 많은 웹사이트들이 경쟁적으로 자신들의 컨텐츠를 외부와 공유하기 시작했고 개발자들은 참여의 기