PhoneGap Build – 폰갭으로 모든 플랫폼의 앱을 만들다.

모바일 앱 개발자라면 하이브리드 앱 프레임워크인 PhoneGap에 대해서 한번쯤은 들어 보셨을 겁니다. 폰갭은 HTML, CSS, Javascript등 웹에서 사용되는 기술들을 이용하여 앱을 만들 수 있습니다. 웹으로 만들어 지기 때문에 어떤 앱에서든지 사용이 가능한 멀티플랫폼 프레임워크입니다.

멀티플랫폼 프레임워크이지만 코드를 만들고 나서 각각의 플렛폼에 대해 각자 빌드를 해 주어야 합니다. 특히 아이폰 같은 경우는 아이맥이나 맥북이 아니면 빌드가 불가능 합니다. 즉, 코드는 멀티플랫폼이지만 실제 앱은 각자 플랫폼에 맞게 따로 만들어 져야 합니다.

이 불편함을 해소하기 위해 나온 것이 어도비의 PhoneGap Build입니다.

PhoneGap Build: https://build.phonegap.com/

폰갭빌드는 웹으로 자신의 코드를 전송하여 원격으로 빌드를 해주는 시스템입니다. 웹에서 코드를 업로드하거나 git repository를 이용하여 코드를 전송할 수 있고, 드림위버에서 직접 코드를 보낼 수 도 있습니다.

웹에서 새 앱을 생성하는 화면입니다. 앱 이름, 그리고 자신의 코드를 업로드 또는 git 저장소를 설정만 하면 간단하게 모든 플랫폼의 앱을 빌드할 수 있습니다.

Create 을 누르면 바로 빌드가 시작됩니다. 참 쉽죠?

빌드가 되는 화면입니다. 서버쪽에서 빌드가 진행되며 진행상황을 실시간으로 보여줍니다. 저는 아이폰 인증 없어서 아이폰쪽 빌드는 안 되는군요.

빌드가 완료된 모습입니다. 모든 플랫폼의 앱들을 다운 받아 볼 수 있고, 스마트폰으로 QR코드를 찍어 바로 접속하여 앱을 설치해 볼 수 있습니다.

드림위버 CS6 에서도 할 수 있습니다. 먼저 폰갭 패널을 엽니다. 폰갭 패널은 Site -> PhoneGap Build Service -> PhoneGap Build Service에서 열 수 있습니다. 단축키로 Ctrl + Alt + B로도 열수 있습니다.

처음 폰갭 빌드 패널을 열게 되면 로그인을 해야 합니다. 로그인을 해 줍시다. 사실 여기서 빌드하는 것은 웹에서 빌드하는 것도 똑 같은 방식입니다. 드림위버가 알아서 코드를 서버로 보내주고 서버 쪽에서 빌드가 진행됩니다.

빌드가 진행되는 모습입니다. 빌드가 완료되면 웹에서와 마찬가지로 다운로드 받아 볼 수 있고, QR코드로 집적 접속이 가능합니다. 또한 [→] 버튼을 누르면 앱을 에뮬레이터에서 바로 실행해 볼 수 도 있습니다.

지금까지가 폰갭 빌드를 이용한 멀티플랫폼 빌드 방법이었습니다. 모든 플랫폼에서의 빌드를 자동으로 해주니 굉장히 편합니다. 앞으로 PhoneGap의 발전은 계속 될 것 같군요.