실전! 하이브리드 앱 개발을 위한 폰갭 프로그래밍

아이폰이 발표되면서 모바일 세상이 통째로 바뀌고, 뒤이어 안드로이드가 합세하면

서 모바일 제조업체의 운명마저 바꿔 놓았습니다. 지난 몇 년간 이런 엄청난 변화의

한가운데서 개발자는 새로운 언어를 배우고 자기가 만든 애플리케이션을 앱스토어에

서 직접 판매해서 수익을 얻을 수 있다는 사실에 새로운 전의(!)를 불태웠습니다. 아

이폰과 안드로이드의 등장은 이처럼 개발자의 의지를 불태우는 좋은 기회가 되었을

뿐더러 새로운 창업의 열기도 다시 뜨겁게 만드는 긍정적인 효과를 보여줬습니다.

기업의 입장에서 본다면 스마트폰이 대세가 된 환경에서 자기 회사가 제공하는 서비

스를 스마트폰을 통해 더 확산하고 새로운 소비자를 만들어낼 수 있을 뿐 아니라 모

바일의 실시간, 즉시성이라는 특성을 잘 이용하면 기존의 서비스를 더욱 확대할 절호

의 기회라 생각할 것입니다. 많은 서비스의 사례를 살펴봐도 스마트폰 환경을 적극적

으로 활용하고 접목하는 서비스와 그렇지 못한 서비스의 운명은 극명하게 대비되고

있습니다.

이렇게 아이폰과 안드로이드가 기업의 서비스를 확대할 수 있는 기회를 제공하지만

개발자 입장에서 보면 아이폰 애플리케이션을 개발하기 위해 Objective-C를 알아

야 하고 안드로이드용 애플리케이션을 개발하기 위해서는 자바를 공부해야 하는 수

고가 뒤따르는 것이 사실입니다. 또 기업 입장에서는 각 플랫폼별로 별도의 애플리케

이션을 유지하는 것은 비용 측면에서 이중의 투자를 해야 하는 것이 현실입니다.

폰갭은 HTML5, CSS, 자바스크립트와 같은 상대적으로 쉬운 웹 기술을 이용해 아

이폰, 안드로이드, 윈폰, 블랙베리, 웹오에스, 심비안뿐 아니라 삼성 바다용 애플리케

이션까지 동시에 만들어낼 수 있는 하이브리드 앱 프레임워크입니다. 이러한 하이브

리드 앱 프레임워크는 개발자가 좀 더 손쉽게 다양한 플랫폼을 지원하는 애플리케

이션을 빠른 시간 내에 만들어낼 수 있을뿐더러 기업 입장에서도 원소스 멀티유즈

(one source, multi use)를 실현하기 때문에 유지보수 비용을 획기적으로 절감

할 수 있습니다. 또한 개발자나 기업이 기술이 아니라 사용자에게 제공하려는 서비스

의 본질에 좀 더 집중할 수 있는 기회를 제공하기도 합니다.

올해부터는 이미 많은 분들이 이야기하듯 HTML5가 또 한 번 모바일 비즈니스의

변화를 가져올 거라고 예측하고 있습니다. HTML5의 확산은 또한 하이브리드 앱

프레임워크의 기술에도 많은 영향을 주고 이 영향은 곧바로 개발자와 IT 업계에 다

시 한번 변화를 일으킬 것으로 생각합니다. 그리고 폰갭이 그러한 변화의 중심에 있

을 것입니다.

개발자들에게 새로운 환경과 기술의 등장은 개발자 본연의 전의를 불태우는 계기가

되기도 하지만 가끔은 "아, 또야? 이번엔 또 뭐냐?"라는 걱정 반 근심 반의 한숨이 가

슴속 깊은 곳에서 터져 나올 수도 있을 것입니다. 하지만 다행스럽게도 폰갭을 포함

한 대부분의 하이브리드 앱 프레임워크는 HTML5. CSS, 자바스크립트같은 비교적

쉬우면서도 조금은 고전적인 기술을 사용한다는 측면에서 오히려 개발자들이 쉽게

접근할 수 있을 것입니다. 더군다나 이렇게 익숙한(!) 기술로 개발한 코드로 수많은

플랫폼을 동시에 지원할 수 있다니 더더욱 다행입니다. 새로운 플랫폼이 등장하더라

도 플랫폼에 대한 지원은 프레임워크 개발자나 개발사에서 하게 될 것이고 애플리케

이션 개발자는 그저 이미 개발된 코드를 조금 다듬기만 하면 될 테니 새로운 플랫폼

을 이해하고 똑같은 앱을 다시 개발하는 에너지를 쏟아붓지 않아도 될 것입니다. 따

라서 개발자라면 하이브리드 앱 프레임워크 기술을 “이 또한 지나가리라!”라고 여기

며, 놓쳐버리지 말고 적극적으로 기술의 장점을 파악하고 실무에 적용해보는 노력을

기울이길 당부합니다.

이 책이 이러한 개발자의 노력에 작은 도움이 되길 바랍니다.

처음 폰갭을 접하고 책이 나오도록 동기를 부여해 주셨고, 저는 폭풍 집필을 선언했

건만, 폭풍 집필은 온데간데없고 오히려 폭풍 교정을 해주신 위키북스 식구들께 감사

드립니다. 과중한 업무에도 회사를 위해 열심히 일하고 있는 트루모바일 식구 모두에

게 항상 감사한 마음을 가지고 있습니다. 특히 새로운 하이브리드 앱 프레임워크를

개발하고 이제 마무리 단계에 들어간 WApplE 팀원에게 하이브리드 프레임워크의

미래는 밝다는 것을 말해두고 싶습니다.

마지막으로 항상 옆에서 말없이 응원해주는 아내와 아빠의 폭풍 집필을 위해 조용히

안 까불고 안 괴롭혀준(!), 아빠의 책보다는 샤이니 오빠의 새 앨범을 더 기다리는 딸

과 아빠 책 열 권보다는 천체 망원경이 더 갖고 싶은 아들에게 사랑한다는 말을 전합

니다.

저에게 영감을 준 모든 개발자 선배님과 후배들께 이 책을 바칩니다.

저자 정우진

01소개

모바일 웹앱? 하이브리드 앱? …………………………………………………… 15

하이브리드 앱 개발을 위한 폰갭 소개 …………………………………………… 22

이 책의 구성 ………………………………………………………………………… 23

02폰갭 내려받기 및 설치

폰갭 내려받기 ………………………………………………………………………… 25

iOS용 개발환경 설정 ……………………………………………………………… 28

안드로이드용 개발 환경 설정 ……………………………………………………… 40

03폰갭에서 지원하는 API

폰갭 API 요약 ……………………………………………………………………… 56

폰갭 API 예제 - 모바일 앱 만들기 ……………………………………………… 57

단말기 정보(Device) ……………………………………………………………… 71

단말기 정보 API 및 관련 객체 ………………………………………………… 71

단말기 정보 API 사용 예 ……………………………………………………… 73

카메라(Camera) …………………………………………………………………… 77

카메라 API 및 관련 객체 ……………………………………………………… 77

카메라 API 사용 예 ……………………………………………………………… 80

위치 정보(Geolocation) ………………………………………………………… 87

위치 정보 API 및 관련 객체 …………………………………………………… 87

위치 정보 API 사용 예 ………………………………………………………… 91

가속도 센서(Accelerometer)…………………………………………………… 99

가속도 센서 API 및 관련 객체 ………………………………………………… 99

가속도 센서 API 사용 예 ……………………………………………………… 101

캡처(Capture) ……………………………………………………………………… 108

캡처 API 및 관련 객체 ………………………………………………………… 108

캡처 API 사용 예 ………………………………………………………………… 114

방향 정보(Compass)……………………………………………………………… 121

방향 정보 API 및 관련 객체 …………………………………………………… 121

Compass API 사용 예 ………………………………………………………… 126

네트워크 연결(Connection) …………………………………………………… 135

네트워크 연결 API 및 관련 객체 ……………………………………………… 135

네트워크 연결 API 사용 예 …………………………………………………… 136

연락처(Contacts) ………………………………………………………………… 141

연락처 API 및 관련 객체 ……………………………………………………… 141

연락처 API 사용 예 ……………………………………………………………… 150

파일(File) …………………………………………………………………………… 159

파일 시스템 객체, 파일 시스템 접근의 시작 ………………………………… 159

디렉터리 객체……………………………………………………………………… 160

디렉터리 내용 읽기 ……………………………………………………………… 167

파일 객체…………………………………………………………………………… 168

개별 파일 정보 객체 ……………………………………………………………… 173

개별 파일 내용 읽기 및 쓰기 …………………………………………………… 174

파일 전송하기 …………………………………………………………………… 179

파일 API 사용 예 ………………………………………………………………… 183

미디어(Media) ……………………………………………………………………… 192

미디어 API 및 관련 객체 ……………………………………………………… 192

미디어 API 사용 예 ……………………………………………………………… 197

알림(Notification) ………………………………………………………………… 208

알림 API 및 관련 객체 ………………………………………………………… 208

알림 API 사용 예 ………………………………………………………………… 210

저장소(Storage) …………………………………………………………………… 217

저장소 API 및 관련 객체 ……………………………………………………… 217

저장소 API 사용 예 ……………………………………………………………… 224

04이벤트

폰갭이 지원하는 이벤트 …………………………………………………………… 230

이벤트 처리 예제 …………………………………………………………………… 236

05폰갭 플러그인

폰갭 플러그인 소개 ………………………………………………………………… 240

iOS용 플러그인 설치 절차 ………………………………………………………… 243

안드로이드용 플러그인 설치 방법 ………………………………………………… 244

차일드브라우저 플러그인 설치 및 사용 예 ……………………………………… 246

iOS용 차일드브라우저 플러그인 설치 ………………………………………… 246

안드로이드용 차일드브라우저 플러그인 설치 ………………………………… 252

차일드브라우저 플러그인 메서드 ……………………………………………… 259

06폰갭을 이용한 SNS 인증 및 매쉬업 개발

트위터 매쉬업 애플리케이션 개발 ………………………………………………… 262

트위터의 oAuth 인증 절차 …………………………………………………… 267

jsOAuth와 차일드브라우저를 이용한 트위터 인증 구현 ………………… 269

jsOAuth 자바스크립트 라이브러리 …………………………………………… 269

차일드브라우저를 이용한 인스타그램 oAuth 인증 방법 ……………………… 279

07폰갭을 이용한 하이브리드 앱 실전 개발

페이스북 커넥트 플러그인을 이용한 페이스북 인증 …………………………… 290

안드로이드용 페이스북 커넥터 플러그인 적용하기 ………………………… 293

아이폰용 페이스북 커넥터 플러그인 적용하기 ……………………………… 304

Photo Onit!의 기능 및 구현 …………………………………………………… 313

Photo Onit! 동작 흐름 …………………………………………………………… 315

Photo Onit! 프로젝트 폴더 구성 및 소스 파일 ……………………………… 316

Photo Onit! 소스코드 …………………………………………………………… 319

Photo Onti! 서버 스크립트 소스코드 ………………………………………… 367

08애플 앱스토어 등록 및 판매 절차

애플 앱스토어 등록 준비 …………………………………………………………… 369

Xcode에서 시작 이미지(Launch Images) 변경 ………………………… 369

애플리케이션 아이콘 변경 ……………………………………………………… 370

애플리케이션 이름 변경 ………………………………………………………… 370

애플 앱스토어 등록 절차 …………………………………………………………… 371

09안드로이드 마켓 등록 및 판매 절차

안드로이드 마켓 등록을 위한 준비 ……………………………………………… 390

애플리케이션 이름 변경 ………………………………………………………… 390

패키지 이름 변경 ………………………………………………………………… 391

화면 세로 모드만 지원하기 ……………………………………………………… 394

애플리케이션 론처 아이콘 바꾸기 ……………………………………………… 395

안드로이드 마켓 등록 절차 ………………………………………………………… 396

One more thing... …………………………………………………………… 408

15 01 장 _ 소개

모바일 웹앱? 하이브리드 앱?

아이폰이 처음 등장한 직후에 비하면 조금 진정된 듯하지만 아직도 많은 개발자가 새로운 기술

의 등장에 열광하고, 공부하고 사업으로까지 연결하는 열풍이 불고 있다. 하지만 iOS와 안드로

이드, 그리고 윈도폰으로 이어지는 새로운 스마트폰 운영체제와 그에 따른 새로운 기술의 등장

으로 개발자의 수고는 줄지 않고 있다. 이처럼 다양한 스마트폰 운영체제의 등장과 더불어 웹

기술 분야에서도 HTML5, CSS3 등의 더욱 혁신적이고 표준화된 기술이 나오고 있으며 스마트

폰 환경과 웹 기술의 접목으로 더 다양한 기술이 만들어지고 있다.

개발자들은 이런 새로운 기술을 따라가기조차 버겁겠지만 피할 수 없으면 어쩌랴, 즐길 수밖에!

모바일 환경에서 다양한 운영체제와 웹 기술이 등장하면서 최근 모바일 애플리케이션 개발에

적용하는 여러 가지 개발 방법론, 프레임워크, 툴킷에 대한 논의가 활발해지고 있는 가운데 가

장 많이 거론되고 있는 단어는 아마도 모바일 웹앱과 하이브리드 앱일 것이다. 그런데 모바일

웹앱과 하이브리드 앱 이야기를 듣다 보면 이 두 용어를 섞어 쓰거나 가끔은 서로 어떻게 구분

소개

01

16 실전 ! 하이브리드 앱 개발을 위한 폰갭 프로그래밍

해야 할지 애매할 때가 잦다. 이것은 서로 같은 기술을 기반으로 하기 때문이기도 한데 먼저 이

애매한 모바일 웹앱과 하이브리드 앱을 구분해 보자.

모바일 웹앱을 간단히 정의하면 “그냥 웹페이지”다

모바일 웹앱은 HTML과 CSS, 자바스크립트를 이용해 웹 브라우저에서 보이는 웹페이지를 만

든 것이다. 그런데 이 웹페이지를 모바일에 최적화한 크기로 만들었다면 일단 모바일 웹앱이라

고 할 수 있다. 여기에 HTML5에서 지원하는 하드웨어 정보 접근 기능(위치 정보 등)을 이용하

면 좀 더 네이티브 앱과 모습이 비슷해질 수 있다. 또한 아이폰, 안드로이드의 웹 브라우저에

서는 바탕화면에서 웹페이지로 바로가기를 만드는 기능을 제공하므로 아이콘을 지정하고 바탕

화면에 웹페이지 바로가기를 만든다면 더욱 네이티브 앱처럼 보일 것이다. 물론 모바일 웹앱을

좀 더 네이티브 앱처럼 보이게 하려면 iOS나 안드로이드에서 제공하는 주소 표시줄을 없애는

것을 비롯해 아이콘을 지정하고, 확대를 금지하며 HTML5에서 제공하는 새로운 기능을 적절

히 활용한다면 웹페이지의 특성은 더욱 사라져 보이고 네이티브 앱과의 차이가 거의 없어질 것

이다.

모바일 웹앱의 예로 아이폰용 사파리로 유튜브(http://www.youtube.com)에 접속해보자.

[그림 1-1] 아이폰용 사파리로 유튜브에 접속한 화면

17 01 장 _ 소개

[그림 1-2] 선택 메뉴(홈 화면에 추가)

유튜브에 접속하면 그림 1-1처럼 모바일용 유튜브 사이트

에 접속하고 화면 아래쪽에 “휴대전화에 웹 애플리케이션

설치: 화살표를 터치한 다음 ‘홈 화면에 추가’ 합니다.”라는

알림 박스가 표시된다. 이 설명에 따라 화살표를 터치하면

선택 메뉴가 나온다

[그림 1-3] 홈에 추가 화면(제목 수정)

여기서 “홈 화면에 추가”를 선택하면 홈 화면에 표시될 제목

을 수정할 수 있는 화면이 나온다.


[그림 1-4] 홈 화면에 추가된 유튜브

아이콘

아이콘과 함께 표시될 제목을 선택한 후 “추가” 버튼을 터

치하고 홈 화면을 확인해 보면 유튜브 아이콘이 마치 다른

네이티브 앱과 똑같이 표시된다.

[그림 1-5] 홈 화면의 아이콘을 터치

해서 접속한 유튜브

이 아이콘을 터치해서 실행해 보면 사파리에서 URL을 입력

해서 접속했던 유튜브 사이트로 바로 접속되는 것을 볼 수

있다.

19 01 장 _ 소개

[그림 1-6] OPENAPPMKT 모바일

웹앱

이처럼 모바일 웹앱은 모바일에 최적화된 웹페이지라고 간

단히 정의할 수 있다. 이러한 모바일 웹앱은 iOS, 안드로이

드와 같은 스마트폰 운영체제에 종속적이지 않고 이미 웹사

이트를 보유하고 있다면 쉽게 모바일화할 수 있으므로 많은

사이트가 모바일 웹앱을 개발 및 지원하고 있다.

이런 모바일 웹앱만을 모아 별도의 오픈마켓을 운영하기도

한다. 모바일 브라우저로 http://openappmkt.com에 접

속해보자.

[그림 1-7] OPENAPPMKT 웹앱을

실행한 화면)

유튜브에 접속했을 때처럼 홈 화면에 추가하는 방법이 표시

된다. 마찬가지로 홈 화면에 추가하고 접속해 보면 이 사이

트에서 모아 둔 모바일 웹앱이 표시된다.


여기에 모아놓은 모바일 웹앱 가운데 원하는 웹앱을 선택해서 실행해 보길 바란다.

이처럼 모바일 웹앱은 아이폰이나 안드로이드용 네이티브 앱과는 다르게 앱스토어나 앱마켓을

통하지 않고도 사용자가 원하는 서비스를 직접 제공할 수 있으므로 새로운 모바일 웹앱 생태계

가 생겨날 가능성도 많다고 볼 수 있다.

그럼 하이브리드 앱은 뭘까? 하이브리드(hybrid)라는 말 속에 웹 기술과 네이티브 앱 기술을

혼용해서 개발한다는 의미가 포함돼 있다.

하이브리드 앱은 “웹 기술을 이용해 만든 모바일 앱”이라고 정의할 수 있다.

여기서 모바일 웹앱과 하이브리드 앱의 차이는 뭘까? 바로 “모바일 앱”을 만든다는 것이다. 모

바일에 최적화된 웹페이지를 만든 게 아니라 모바일에서 다른 앱과 똑같이 실행되는 네이티브

앱을 만드는 것이다. 하이브리드 앱의 UI는 HTML, CSS, 자바스크립트 등의 웹 기술을 이용해

만들고 모바일 기기의 고유 기능은 폰갭(PhoneGap), 앱스프레소(Appspresso)와 같은 프레

임워크가 제공하는 자바스크립트 API를 이용해 제공할 수 있다. 이런 프레임워크는 각 모바일

운영체제에서 동작하는 네이티브 앱으로 패키징할 수 있는 기능을 제공하므로 Objective-C

로 만든 아이폰 앱이나 자바로 만든 안드로이드 앱처럼 실행되는 네이티브 앱을 만들 수 있고

또 앱스토어나 안드로이드 마켓에 등록해 판매할 수도 있다.

정리하자면 하이브리드 앱은 웹 기술을 이용해 네이티브 앱을 만드는 기술이다.

하이브리드앱을 하나의 소스코드로 다양한 모바일에 적용할 수 있는 앱(원 소스 멀티 유즈,

One Source Multi Use : OSMU)이라고 정의할 때도 있는데 이 말도 틀리지는 않다. 많은 하

이브리드 앱 프레임워크가 하나의 소스를 여러 개의 모바일 플랫폼용 앱으로 패키징하는 기능

을 제공하기 때문이다.

21 01 장 _ 소개

그럼 모바일 앱을 플랫폼별로 네이티브 앱이 아니라 하이브리드 앱으로 개발하면 어떤 장점이

있을까?

•앱기능의대부분을HTML,CSS,자바스크립트와같은웹기술을활용해구현하므로네이티브앱보

다비교적쉽게구현할수있다.

•하나의소스를다양한운영체제에서동작하게할수있으므로시간/개발비용이대폭줄어든다.

•유지보수비용도위와같은이유로줄어든다.

•이미모바일웹앱을보유한경우,손쉽게하이브리드앱을만들수있다.

하지만 아직 하이브리드 앱 기술을 쉽게 적용하지 못하는 이유는 대부분 실행 속도 때문이다.

현재 아이폰, 안드로이드에서 하이브리드 앱을 개발한 뒤 실행하면 속도 문제를 현저하게 느낄

수 있다. 하지만 속도 문제는 언제나 그렇듯 하드웨어의 비약적인 발전과 함께 빠른 시간 내에

해소될 것이다. 또한 모바일 브라우저에서 사용하고 있는 웹킷(Webkit)의 성능 향상, 프레임

워크의 최적화와 같은 노력이 지속해서 이뤄지고 있으므로 이러한 단점이 더는 하이브리드 앱

의 장점을 막는 장벽이 되지는 않을 것이다.


하이브리드 앱 개발을 위한 폰갭 소개

폰갭(PhoneGap)은 최근에 어도비에 인수된 캐나다의 니토비(Nitobi)사에서 개발/배포하는

하이브리드 앱 개발 프레임워크로, 각종 프레임워크 가운데 가장 폭넓게 사용되고 있고 가장

많은 개발자를 확보한 프레임워크다. 그 이유는 HTML5, CSS, 자바스크립트와 같은 웹 기술

로 네이티브 앱을 개발할 수 있는 기능을 제공할뿐더러 오픈소스로 개발되고 있으며, 기본적으

로 지원하는 API와 기능 이외에도 사용자가 필요한 기능을 직접 플러그인 형태로 추가할 수 있

는 유연성을 제공하기 때문이다.

폰갭은 폰갭 홈페이지(http://www.phonegap.com)에서 더 많은 정보를 얻을 수 있다.

[그림 1-8] 폰갭 홈페이지

23 01 장 _ 소개

이 책의 구성

이 책은 독자가 아이폰, 안드로이드, 폰갭을 처음 접한다고 가정하고 다음과 같은 사항을 최대

한 쉽게 익힐 수 있게 했다.

•폰갭의개념과설치방법

•아이폰,안드로이드폰갭SDK설치방법

•폰갭이지원하는이벤트와API이해

•폰갭플러그인의설치방법

•차일드브라우저플러그인을이용한트위터,인스타그램인증방법

•폰갭을이용한애플리케이션개발실전

•개발된애플리케이션을마켓에등록하고판매하는방법

다른 책을 참고하지 않더라도 아이폰과 안드로이드 개발 환경의 설치부터 애플리케이션의 등

록 및 판매 단계까지 따라할 수 있게 구성했다. 또한 예제 프로그램이나 실제 등록할 수 있는

앱을 만들 때 사용한 자바스크립트도 초보자가 쉽게 이해할 수 있는 수준의 기술을 사용하고자

노력했고 jQuery나 jQuery Mobile 또는 구글 검색 엔진을 통해 쉽게 구할 수 있는 오픈소스

라이브러리를 많이 이용했다. 자바스크립트, HTML, CSS 등의 전문가라면 좀 더 효율적이고

빠르게 동작할 수 있는 기술을 사용할 수 있으리라고 본다.

이 책의 각 장의 내용은 다음과 같다.

1장: 모바일 웹앱과 하이브리드 앱의 차이점을 설명하고 폰갭을 살펴본다.

2장: 폰갭을 내려받는 방법과 개발 환경설정 방법을 설명한다.

3장: 폰갭이 지원하는 API를 설명한다.

4장: 폰갭이 지원하는 이벤트를 설명한다. 3장과 4장은 API에 대해 언제든 필요할 때 찾아서 참

고할 수 있게 레퍼런스 가이드 형식으로 구성했다. 특히 3, 4장을 설명하면서 각 API와 이벤트를

이용한 간단한 기능을 테스트할 수 있는 예제 애플리케이션을 폰갭과 jQuery Mobile을 사용해서

개발해본다.

5장: 폰갭의 플러그인 설치 및 사용법을 설명한다.


6장: 플러그인 중에서 차일드브라우저를 이용한 트위터와 인스타그램의 인증 절차를 살펴본다.

트위터, 인스타그램의 인증 및 매쉬업 애플리케이션을 개발하는 절차를 살펴보는 것은 최근 개발

하는 애플리케이션의 많은 부분에서 이와 같은 SNS 서비스와의 연동을 매우 중요하게 요구할 때

가 잦기 때문이다.

7장: 실제 폰갭을 적용해 간단한 애플리케이션을 개발한다.

8장, 9장: 아이폰 앱스토어와 안드로이드 마켓에 폰갭으로 개발한 애플리케이션을 판매하기 위해

등록하는 과정을 설명한다.

이 책에서는 아이폰 개발이 맥 OS에서만 할 수 있기 때문에 개발 환경을 맥 OS를 기준으로 한다.

아이폰, 안드로이드만을 대상으로 애플리케이션을 개발한다면 맥 OS만이 동시에 개발할 수 있는

환경이고 윈도폰 애플리케이션도 함께 개발하려면 윈도 7 이상의 환경이 필요하므로 맥 OS와 윈

도 7을 모두 갖춰야만 동시에 개발할 수 있다. 안드로이드 앱 개발은 맥이나 윈도에서 모두 할 수

있으므로 어떤 운영체제를 사용 중이든 개발 환경을 구성하는 절차나 방법은 같다.

25 02 장 _ 폰갭 내려받기 및 설치

폰갭 내려받기

폰갭의 배포 버전은 폰갭 홈페이지(http://www.phonegap.com)에서 내려받을 수 있다. 홈

페이지 오른쪽 상단의 다운로드 버튼을 누르면 자동으로 가장 최신 버전의 폰갭을 내려받을 수

있고 폰갭을 사용하는 데 필요한 추가 정보 링크를 안내해 준다.

[그림 2-1] 폰갭 다운로드 페이지

폰갭 내려받기 및 설치

02


내려받은 파일(이 책에서는 phonegap-1.5.0 RC1 버전을 사용하였다.)의 압축을 풀면 문서

폴더와 lib 폴더가 있는데 lib 폴더 아래에 모바일 운영체제별로 폴더가 구분돼 있다.

[그림 2-2] 내려받은 폰갭 파일의 구성

폰갭은 1.5.0부터 Cordova라는 명칭을 사용하기 시작했다. 따라서 파일명이 기존에

phonegap에서 cordova로 바뀐 것이 많다. 이 책에서 별도의 설명을 하지 않더라도 cordova

로 시작하는 명칭은 기존 phonegap이 바뀐 것으로 이해하길 바란다.

폴더 구성을 보면 현재 지원하고 있는 모바일 운영체제를 확인할 수 있으며, 지원하는 운영체

제는 다음과 같다.

•iOS •안드로이드

•삼성바다 •블랙베리

•심비안 •HP웹오에스

•윈도폰

내려받은 폰갭의 개발 환경을 설정하는 방법은 폰갭 홈페이지의 “Developers > Getting

Started” 페이지에 운영체제별로 설명돼 있다.


[그림 2-3] 폰갭 설치 안내 페이지

이 책에서는 이 페이지의 설명을 참고해 iOS와 안드로이드 개발 환경을 설정하는 방법을 살펴

보겠다.


iOS용 개발환경 설정

1단계. Xcode 설치

애플 개발자 센터(http://developer.apple.com)의 iOS Dev Center에서 Xcode를 내려받

아 설치한다. 또는 애플 맥 앱스토어에서도 내려받을 수 있다.

[그림 2-4] 애플 개발자 센터

Xcode를 내려받아 설치하더라도 유료 개발자 프로그램에 가입하지 않았다면 시뮬레이터 환

경에서만 앱 개발을 할 수 있다. 따라서 아이폰, 아이패드, 아이팟 터치 등 iOS 단말기에서 실

제 동작하는 앱을 개발하거나 앱스토어에서 앱을 판매하고자 할 때는 반드시 유료 개발자 프로

그램에 가입해야 한다.


2단계. 폰갭 설치

폰갭 홈페이지에서 내려받은 폰갭의 lib/iOS 폴더에 있는 Cordova-1.5.0.dmg 파일을 더블

클릭해 실행한다. Cordova- 뒤의 숫자는 버전에 따라 다를 수 있다.

[그림 2-5] iOS용 폰갭 파일의 구성

구성 파일 중 Cordova-1.5.0.pkg를 더블 클릭해서 실행한다.

[그림 2-6] 폰갭 소개


폰갭 소개 화면이 나오면 “계속”을 눌러 설치 과정이 끝날 때까지 진행한다.

[그림 2-7] 폰갭 설치 완료

모든 설치 과정이 완료되면 위와 같이 설치 성공 안내와 폰갭에 대한 간략한 설명이 나온다. 이

단계까지 정상으로 진행했다면 “닫기”를 클릭해 종료한다. 이제 iOS를 위한 폰갭 개발 환경 설

정이 끝났다.

iOS용 폰갭 개발 환경이 정상적으로 설정됐는지 확인하기 위해 간단한 프로젝트를 만들어

보자.

3단계. 폰갭 기반 프로젝트 만들기

Xcode를 실행한 후 File > New > New Project… 메뉴를 차례로 선택해 “Choose a template

for your new project:” 화면이 나오면 “Cordova-based Application”을 선택한다.


[그림 2-8] 폰갭 기반 iOS 프로젝트 만들기

“Choose options for your new project:” 화면에서 “Product Name”에 새로 만들 프로젝

트의 이름을 입력하고 “Company identifier”를 입력한다. “Company identifier”에는 보통

회사의 도메인명을 역순으로 기록한다. “Next” 버튼을 눌러 저장할 폴더를 지정하면 해당 폴더

아래에 “Product Name”에 입력했던 이름의 폴더가 생기고 그 아래에 관련 파일이 생성된다.

[그림 2-9] 프로젝트 선택 사항 입력


프로젝트 생성이 완료되면 생성된 프로젝트가 표시된다.

[그림 2-10] 폰갭 기반 iOS 프로젝트

4단계. 시뮬레이터에서 실행하기

첫 번째 프로젝트가 만들어진 상태에서 일단 실행해 보자. Xcode의 “Scheme”에서 실행하고

자 하는 타겟을 “iPhone 4.3 Simulator” 또는 “iPhone 5.0 Simulator”로 설정하고 시뮬레이

터로 실행한다.


[그림 2-11] 애플리케이션 실행 타겟 설정

좌측 상단의 Run 버튼을 눌러 프로젝트를 실행해 보자. 컴파일 과정을 거쳐 시뮬레이터가 실

행되면서 다음과 같은 화면이 나올 것이다.

[그림 2-12] 폰갭 기반 애플리케이션을 실행한 화면

개발 환경을 정상적으로 구성하고 바로 실행하면 그림 2-12와 같은 오류가 발생한다. 오류는

발생했지만 이런 결과가 나왔다면 개발 환경은 정상적으로 설치되고 동작한다고 봐도 된다. 다

만 www 폴더와 index.html이 제대로 구성돼 있지 않을 뿐이다.


5단계. www 폴더 추가하기

이전 단계를 거쳐 폰갭용 프로젝트가 생성되고 바로 프로젝트를 실행하면 www 폴더가 생성

된다. 이 www 폴더에 애플리케이션에 필요한 HTML, CSS, 자바스크립트 파일이 들어가야

한다. 이 www 폴더와 그 아래에 필요한 파일이 모두 있어야 에러 없이 동작할 수 있다.

프로젝트 화면의 왼쪽 창에서 프로젝트명(예: CordovaHello)에 마우스를 위치시키고 오른

쪽 버튼을 클릭해 “Show in Finder”를 선택한다. Finder 화면이 뜨면 바로 www 폴더가 있

는 것을 볼 수 있을 것이다. 이 폴더와 폴더에 있는 index.html과 cordova-1.5.0.js 파일은

폰갭 프로젝트를 실행하면 자동으로 생성되고 복사된다. Finder에서 www 폴더를 삭제한 후

Xcode에서 다시 프로젝트를 실행해보면 www 폴더가 생성되는 것을 볼 수 있다.

[그림 2-13] 폰갭 기반 프로젝트에 생성된 www 폴더와 파일

www 폴더를 마우스로 드래그해 Xcode 프로젝트 정보 화면의 프로젝트에 떨어뜨리면 그림

2-15와 같은 화면이 나온다.


[그림 2-14] www 폴더를 프로젝트에 추가

[그림 2-15] www 폴더를 추가하기 위한 옵션


그림 2-15와 같은 옵션이 나타나면 “Copy items into destination group’s folder (if

needed)” 항목은 선택하지 말고 “Create folder references for any added folders” 항목을

선택한 후 Finish를 눌러 완료한다. 이제 www 폴더가 프로젝트 정보 화면에 나타난다.


www 폴더를 프로젝트에 추가한 후 Run 버튼을 다시 눌러 프로젝트를 실행하면 그림 2-16

과 같은 실행 화면이 나온다.

[그림 2-16] 폰갭 애플리케이션 실행 성공

iOS용 폰갭은 이처럼 데모를 위한 index.html 파일을 자동으로 생성해 준다. 따라서 별도로

index.html에 코드를 작성하지 않아도 앱을 실행할 수 있다.


7단계. 외부 서버 접속을 위한 화이트리스트 추가

6단계에서 실행한 애플리케이션의 “Getting Started Guide” 링크를 터치해 보자. 아마 아무

런 반응도 하지 않을 것이다.

iOS용 폰갭은 생성된 애플리케이션에서 네트워크를 통한 외부 서버 접속을 허용하기 위해 접

속하고자 하는 서버의 도메인을 화이트리스트에 추가해야 한다.

프로젝트의 “Supporting Files” 그룹에 있는 Cordova.plist를 열어 “ExternalHosts” 항목에

“+”를 눌러 추가를 선택하고 애플리케이션이 접속하고자 하는 도메인을 입력한다. 예제에서

는 폰갭의 문서 페이지에 연결하기 위해 이 페이지가 있는 도메인인 http://docs.phonegap.

com 을 ExternalHosts에 “docs.phonegap.com”으로 추가한다. 만약 한 도메인의 여러 서

브 도메인에 연결해야 할 때(이 책의 후반부에서 설명하는 트위터 인증 절차에서 접속하는 도

메인이 여기에 해당한다) 모든 서브 도메인을 지정하기 귀찮다면 “*.phonegap.com”과 같이

지정해도 되고 전체 도메인 접근을 허용하려면 “*”만 지정해도 된다.

[그림 2-17] PhoneGap.plist의 화이트리스트 추가

화이트리스트를 추가한 후 프로젝트를 다시 실행해 “Getting Started Guide” 링크를 다시 터

치하면 사파리를 이용해 폰갭 문서 페이지에 정상적으로 접속하는 모습을 확인할 수 있다.


[그림 2-18] 화이트리스트를 추가한 후 “Getting Started Guide” 링크를 터치한 결과

8단계. iOS디바이스에서 실행하기

iOS 단말기에서 폰갭을 기반으로 만들어진 애플리케이션을 올리고 실행하려면 앞서 이야기한

바와 같이 유료 개발자 계정 가입과 Build 옵션 설정을 꼭 해야 한다. 가입 절차와 설정 절차가

꽤 까다로운 편이지만 단말기에서 개발된 애플리케이션의 실행뿐 아니라 앱스토어에 앱을 올

리고 판매할 생각이라면 꼭 필요하다.

iOS 단말기를 USB 케이블로 연결하고 Xcode의 “Scheme” 버튼을 누르면 연결된 단말기의

이름이 표시된다.


[그림 2-19] Xcode의 Scheme에 표시되는 iOS 단말기

표시되는 iOS 단말기 이름을 실행 타겟으로 선택하고 Run 버튼을 눌러 다시 실행한다. 잠시

후 단말기에서 시뮬레이터에서 실행했던 화면과 같은 화면이 나타난다. 단말기의 홈 버튼을 눌

러 홈 화면으로 나가보면 폰갭의 기본 아이콘이 지정된 애플리케이션이 등록된 모습을 볼 수

있다.

[그림 2-20] 아이폰에 등록된 폰갭 기반 앱

여기까지 확인했다면 이제 iOS용 폰갭 애플리케이션을 개발할 준비가 모두 끝났다. 프로젝트

를 생성하고 실행하는 과정은 새로운 프로젝트를 시작할 때마다 반복해야 하는 과정이므로 잘

익혀 둬야 한다.


안드로이드용 개발 환경 설정

1단계. 안드로이드 개발 환경 내려받기 및 설정

안드로이드용 폰갭 애플리케이션을 개발하려면 안드로이드 애플리케이션을 개발하는 데 필요

한 개발 환경이 설정돼 있어야 한다. 안드로이드 개발자 사이트(http://developer.android.

com)에서 안드로이드 개발에 필요한 정보를 얻을 수 있다.

[그림 2-21] 안드로이드 개발자 사이트

안드로이드 개발자 사이트의 “SDK” 페이지(http://developer.android.com/sdk)로 가면

SDK를 내려받을 수 있고 개발 환경을 설정하는 절차가 설명돼 있다. 이 절차에 따라 이클립스

와 안드로이드 SDK, ADT 플러그인을 설치한다.


[그림 2-22] 안드로이드 개발 환경 내려받기 및 설치 안내 페이지

처음 안드로이드 개발을 시작하는 초보자를 위해 간단히 안드로이드 개발 환경 설정에 대해 설

명하겠다(자세한 절차와 주의 사항은 안드로이드 개발자 페이지를 참고하기 바란다).

1.이클립스를내려받아설치한다(http://eclipse.org/downloads).안드로이드개발자페이지에서는

EclipseClassic버전을설치하길권장한다.

2.http://developer.android.com/sdk페이지에서안드로이드SDK를내려받아압축을푼다.

3.이클립스를실행한후“Help>InstallNewSoftware”메뉴를차례로선택한다.“Workwith…”오

른쪽의“Add…”버튼을누르고Name에“AndroidADT”,Location에https://dl-ssl.google.com/

android/eclipse를입력하고“OK”를눌러완료한다


[그림 2-23] 안드로이드 ADT 설치

4.잠시후화면에나오는소프트웨어목록에서“AndroidDDMS”와“AndroidDevelopmentTools”를

선택후“Next”버튼을누르고설치과정을완료한다.

5.이클립스의“Eclipse>Preferences”을눌러“Android”카테고리를선택한다음,“SDKLocation”에

미리내려받아압축을풀어둔SDK의경로를입력하고“OK”를눌러환경설정을종료한다.

[그림 2-24] 이클립스 환경 설정


6.이클립스의“Window>AndroidSDKManager”메뉴를실행하고안드로이드개발자문서에서권장

한개발도구를설치한다.

7.이클립스의“Window>AVDManager”메뉴를실행하고“New…”버튼을눌러안드로이드가상장

치(VirtualDevice)를만든다.Name에는가상장치의이름을입력하고이가상장치에서지원하는

안드로이드버전과SDCard의용량,화면해상도등을설정하고“CreateAVD”로가상장치를설정

한다.

[그림 2-25] 안드로이드 가상 장치 생성

2단계. 안드로이드용 폰갭 파일 확인

폰갭 홈페이지에서 내려받은 폰갭 파일의 압축을 풀고 Android 폴더에 있는 파일을 이용해 개

발 환경을 설정한다.


[그림 2-26] 안드로이드용 폰갭 파일 구성

안드로이드용 개발 환경은 iOS와 달리 폰갭 개발 환경을 자동으로 설정하는 툴이 포함돼 있지

않다. 따라서 프로젝트를 생성할 때마다 아래의 절차를 수동으로 진행해야 한다.

3단계. 새로운 프로젝트 만들기

안드로이드용 개발 환경을 설정했다면 이클립스를 실행하고 “File > New > Android Project”

메뉴를 차례로 선택해 새 프로젝트를 생성한다.

[그림 2-27] 안드로이드 프로젝트 생성


먼저 그림 2-27의 새로운 프로젝트 생성 창에서 프로젝트 이름을 입력하고 “Next >”를 누

른다.

[그림 2-28] 안드로이드 프로젝트 생성 (지원하는 OS 최소 버전 선택)

그림 2-28 빌드 타겟 설정 화면이 나오는데 새로운 프로젝트가 지원하는 안드로이드 OS의 최

소 버전을 결정한다. 안드로이드 2.2 (프로요) 버전을 선택하면 아마 대부분의 안드로이드 단

말기를 지원할 수 있을 것이다. 버전을 선택한 후 “Next >” 버튼을 누른다.

[그림 2-29] 안드로이드 프로젝트 생성 (애플리케이션 패키지 식별 이름)


그림 2-29의 애플리케이션 정보 입력 창에서 “Package Name”을 설정해야하는데 보통 회사

도메인을 반대 순서로 입력하고 마지막에 프로젝트 이름을 입력하면 된다.

4단계. 폴더 추가하기

“Package Explorer” 영역의 프로젝트를 대상으로 마우스 오른쪽 버튼을 클릭한 후 “New >

Folder”를 선택해 프로젝트 루트 폴더에 다음과 같은 두 개의 새로운 폴더를 만든다.

•/libs

•/assets/www

[그림 2-30] 추가된 폴더

5단계. 자바스크립트 파일 복사

폰갭 홈페이지에서 내려받은 폰갭 패키지의 android 폴더에 있는 cordova-1.5.0.js 파일을 /

assets/www로 복사한다(취향에 따라 /assets/www 폴더에 서브 폴더를 만들고 복사해도 된

다. 단, 소스에서 이 서브 폴더를 고려해 경로를 설정해야 한다).

파일을 이클립스로 드래그 앤 드롭해서 추가할 수 있는데, 이때는 그림 2-31과 같이 파일을 복

사할 것인지 파일은 그냥 두고 링크만 연결할 것인지 선택하는 창이 나온다. 프로젝트를 독립

적으로 구성하려면 “Copy files”를 선택한다.


[그림 2-31] 안드로이드용 파일 추가

6단계. jar 파일 복사하기

cordova-1.5.0.jar 파일을 /libs 폴더로 복사한다. 복사하는 방법은 5단계에서 자바스크립트

파일을 복사하는 과정과 같다.

7단계. xml 폴더 복사

xml 폴더를 /res로 복사한다. 7단계까지 완료한 후 이클립스 프로젝트의 구조는 그림 2-32와

같다.

[그림 2-32] 안드로이드 프로젝트 구성


안드로이드 프로젝트 개발에 필요한 폰갭 파일을 복사하는 과정은 모두 끝났고 이제 파일 몇

가지를 수정해야 한다.

8단계. 프로젝트 메인 자바 파일 수정하기

이클립스에서 프로젝트를 생성하면 /src 폴더에 프로젝트 메인 자바 파일(이 예제에서는

CordovaHelloActivity.java)이 생성돼 있는데 이 파일을 폰갭에 맞게 수정해야 한다. 이 파일

은 /src 폴더에서 찾을 수 있다.

이 자바 파일을 더블 클릭해 다음과 같이 내용을 수정한다.

•클래스가Activity가아닌DroidGap을확장하도록변경한다(extends구문에서Activity대신

DroidGap을지정).

•setContentView();를super.loadUrl("file:///android_asset/www/index.html");로변경한다.

•importorg.apache.cordova.*;을추가한다.

•importandroid.app.Activity;를삭제한다.

[그림 2-33] 자바 파일 수정


9단계. jar 파일 추가하기

여기까지 진행하고 프로젝트를 보면 여러 가지 에러가 표시되는데, 이것은 cordova-1.5.0.jar

를 발견하지 못해 발생한 에러다. 이를 해결하려면 /libs 폴더에서 마우스 오른쪽 버튼을 클릭

한 후 “Build Paths > Add to Build Paths”를 선택한다.

[그림 2-34] jar 파일 추가를 위한 빌드 패스 설정

이제 이전에 표시되었던 에러들이 모두 없어진다.

10단계. AndroidManifest.xml 수정하기

프로젝트의 AndroidManifest.xml 파일에서 마우스 오른쪽 버튼을 클릭한 후 Open with >

Text Editor를 선택해 파일을 연다. android:versionName="x.x">을 찾아 그 아래쪽에 다음

의 퍼미션을 복사해서 붙여넣는다. 일단 모든 퍼미션을 설정하고 실제 앱을 개발할 때 불필요

한 퍼미션은 삭제하면 된다.

<supports-screens

android:largeScreens="true"


android:normalScreens="true"

android:smallScreens="true"

android:resizeable="true"

android:anyDensity="true"

/>

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.VIBRATE" />

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

<uses-permission android:name="android.permission.READ_PHONE_STATE" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.RECEIVE_SMS" />

<uses-permission android:name="android.permission.RECORD_AUDIO" />

<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

<uses-permission android:name="android.permission.READ_CONTACTS" />

<uses-permission android:name="android.permission.WRITE_CONTACTS" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.GET_ACCOUNTS" />

<uses-permission android:name="android.permission.BROADCAST_STICKY" />

<uses-feature android:name="android.hardware.camera">

<uses-feature android:name="android.hardware.camera.autofocus">

퍼미션 설정이 완료됐으면 <activity android:name= ....> 태그 내부에 다음 내용을 추가한다.

android:configChanges="orientation|keyboardHidden"

AndroidManifest.xml 파일에 적용된 그림 2-35를 잘 보고 정확한 위치에 내용을 추가해야

한다.


[그림 2-35] AndroidManifest.xml 파일 수정

이제 안드로이드용 폰갭 애플리케이션을 위한 개발환경 설정이 완료됐다. 이 과정은 폰갭 애플

리케이션을 개발할 때 매번 반복해야 하는 과정이다.

11단계. index.html 만들기

안드로이드용 폰갭 애플리케이션의 소스는 /assets/www에 위치해야 하며, 일반적인 웹 페이

지 개발과 마찬가지로 index.html로부터 시작한다. 아래 코드는 화면에 Hello World를 표시


하는 앱의 index.html이다. 자바스크립트 파일인 cordova-1.5.0.js를 포함해야 하는 것에 유

의한다. 파일명의 1.5.0은 버전을 의미하고 실제 내려받은 폰갭 버전에 맞게 입력한다.

<!DOCTYPE HTML>

<html>

<head>

<title>PhoneGap</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>


index.html을 저장하고 메뉴의 “Run>Run”을 선택한다. 처음 애플리케이션을 실행한다면 그

림 2-36과 같이 실행 타겟을 설정하는 창이 나오고 “Android Application”을 선택한다.

[그림 2-36] 시뮬레이터에서 실행하기


이클립스는 어떤 안드로이드 가상 장치(AVD : Android Virtual Device)를 사용할지 물어본

다. 아직 AVD가 없다면 해상도 등을 지정해 새로운 가상 장치를 만들 수 있다. 가상 장치를 선

택해 안드로이드 시뮬레이터가 실행되고 그림 2-37과 같이 표시되면 정상적으로 설치되고 애

플리케이션이 만들어진 것이다.

[그림 2-37] 안드로이드 시뮬레이터에서 실행한 모습

안드로이드 시뮬레이터는 실행되는 데 상당히 오랜 시간이 걸린다. 안드로이드 환경을 설정하

고 처음 시뮬레이터를 띄웠다면 시뮬레이터를 강제로 종료하지 말고 기다려 보기 바란다.

13단계. 안드로이드 단말기에서 실행하기

지금까지 만든 앱을 안드로이드 단말기에서 실행하려면 먼저 단말기의 “환경설정>응용프로그

램>개발” 메뉴에서 “USB 디버깅”을 설정해야 한다.


[그림 2-38] 개발 중인 앱을 실행하기 위한 안드로이드 설정

안드로이드 단말기의 설정이 완료되면 안드로이드 폰을 USB로 연결한다. 그런 다음 Run >

Run As > Android Application을 차례로 선택한다. 안드로이드 실행 타겟을 자동으로 설정

하지 않았다면 다음 화면과 같이 애플리케이션을 어떤 단말기 또는 어떤 가상 장치에서 실행할

지 선택할 수 있다.

[그림 2-39] 애플리케이션을 실행할 타겟 선택


안드로이드 단말기가 여러 개 연결돼 있다면 실행할 단말기를 선택하고 “OK” 버튼을 누른다.

이제 애플리케이션이 지정한 안드로이드 단말기에서 실행될 것이다.

[그림 2-40] 안드로이드 단말기에서 실행한 결과

이제 폰갭을 이용해 안드로이드 앱을 개발할 준비가 끝났다. 안드로이드 개발 환경을 한 번도

사용해 보지 않은 사람이라도 안드로이드 개발자 사이트와 이 페이지에서 설명한 절차를 잘 따

라 한다면 큰 어려움 없이 개발 환경을 구축할 수 있을 것이다.

실전! 하이브리드 앱 개발을 위한 폰갭 프로그래밍

Documents