PhoneGap을 이용한 Hybrid App 개발하기

HTML + JavaScript + CSS로 만들어진 WebApp을 Market에 등록해서 Mobile이나 Pad에 Install한 다음 동작하게 하기 위해서 별도의 처리가 필요하다. 대표적인 방법은 Appspresso나 PhoneGap를 이용해서 WebApp을 감싸는 방법이 있다.

Appspresso는 국내 KTH라는 회사에서 개발 및 배포를 했지만 이제 더이상 상위 빌드를 배포하지 않는다고 한다. 개인적으로 잘 발전해 나가길 바라고 있었던지라 많이 아쉬움이 남는다.

PhoneGap는 Hybrid App에 대한 고민이 있는 사람이라면 누구나 알 수 있을만큼 국내외에 유명한 Moble Dev Framework다.  Adobe사에서 2011년 10월에 인수해서 Apache 라이센스 적용으로 Open Source 정책을 더욱 강화했고, 각종 추가 기능이 Plugin 형태로 개발되어 커뮤니티에 공유되고 있다.  더 상세한 설명을 PhoneGap 사이트에 방문해서 둘러보길 바란다.

그럼 PhoneGap(cordova)을 이용해서 어떻게 내가 만든 WebApp을 Mobile로 빌드할 수 있는지 Android를 기준으로 개발환경을 설정하고, 간단하게 Hello World를 출력하는 Hybrid App을 만들어 보도록 하겠다.

전체 과정에서 당연히 알고 있을 것으로 판단되는 부분은 설명하지 않았다. 혹 실행에 문제가 있거나 의문 사항이 있으면 질문하면 답변 드리도록 하겠다. 또한 명령어는 phonegap 대신 cordova 명령어를 사용해서 진행한다. 

1. Node.js 설치하기
PhoneGap 최신 버전을 설치하기 위해서는 파일을 다운 받아서 설치하는 것이 아니라 npm을 이용해서 설치하는 방법으로 바뀌었기 때문에 Node.js(http://nodejs.org/) 설치가 먼저 되어야 한다.

2. cordova 설치하기
Node.js가 설치되었다면 npm을 이용해서 cordova(phonegap)을 설치한다.

C:\> npm install -g cordova

3. JDK 설치하기
Java 개발자라면 누구나 설치되어 있을 것으로 판된되지만 혹 설치가 안되신 분들은 Oracle JDK Download(http://www.oracle.com/technetwork/java/javase/downloads/index.html) 사이트에서 JDK를 다운 받아서 설치하고, JDK의 bin 경로를 환경 변수에 추가한다.

4. Android SDK 다운 및 Path 설정
Android SDK(http://developer.android.com/sdk/index.html)를 웹사이트에서 다운 받아서 특정 폴더에 압축을 풀고, sdk > tools, sdk > platform-tools를 환경 변수에 추가한다.

5. Ant 다운 및 Path 추가
Android platform을 사용하기 위해서는 cordova를 이용해서 설치를 해줘야 하는데, 이때 Ant가 있어야 문제없이 설치가 된다. Ant apache 사이트에서 Ant를 다운받고 bin경로를 Path 환경변수에 등록한다.

6. cordova를 이용해서 프로젝트 설정
project 생성을 원하는 특정 폴더에 workspace 폴더를 만들고 cmd창에서 workspace 위치로 이동한 다음 아래 명령어를 수행한다.
프로젝트명에 hello를 입력했다. 각자 원하는 프로젝트명을 입력하면 된다.

D:\workspace cordova create hello com.hans.hello HelloWorld

7. Android platform을 추가
Android나 IOS로 빌드를 하기 위해서는 platform을 추가해야 한다.CMD에서 다섯째에 프로젝트를 생성한 위치로 이동 후에 아래의 명령어를 입력해서 android platform을 추가한다.

D:\workspace\hello cordova platform add android

혹 실행 후에 아래와 같은 에러가 발생하면 Android SDK Manager를 이용해서 새로운 android 버젼을 추가한다.

8. cordova를 이용해서 빌드

D:\workspace\hello cordova build

9. eclipse에서 Project 생성
cordova를 통해서 생성했던 hello 프로젝트를 선택해서 Project 를 구성한다.

10. Virtual Device 등록
Android Virtual Device가 등록이 안되어 있는 분들은 자신이 테스트할 단말을 별도 등록한다.

 11. Project 설정
 Exclude all:아래에 있는 두개의 설정을 삭제한다.

12. Index.html 편집 및 Project 실행
 assets > www > index.html 파일을 열어서 적절해 편집한 다음 Project를 실행한다.
 

이상으로 PhoneGap를 설정하는 방식과 간단히 Hello World를 감싸사 Hybrid App을 만들어 보았다. 필자는 간단히 index.html안에 Hello World를 출력하는 Hybrid App을 만들었지만 index.html 시작점으로 본인들이 원하는 App을 만들어 나가면 되겠다.