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의 발전은 계속 될 것 같군요.

신고
  • 만사장땡 주소 수정/제거 답글달기 2012.08.27 09:48 신고

    안녕하세요.
    DW cs6에서 폰갭 서비스 로그인 하면은 "이 프로젝트 설정 파일을 찾지 못했습니다." 라고 나와 "새 프로젝트로 만들기>계속" 클릭했는데도 불구 하고 한참있다가 "서버 문제가 발생한 것 같습니다. 다시 시도하십시오."라는 오류 메세지가 나옵니다.

    혹시 해결방법 아시는지요?

    • Favicon of http://edoli.tistory.com 소리미아 에돌이 주소 수정/제거 2012.08.27 22:07 신고

      폰갭 빌드를 하기 위해서는 프로젝트 폴더에 config.xml파일이 필요합니다. config.xml에 대한 내용은 https://build.phonegap.com/docs/config-xml 에 가시면 보실 수 있습니다. Usage쪽에 보시면 기본적인 config.xml 파일의 내용을 보실 수 있습니다.

  • 고방 주소 수정/제거 답글달기 2013.09.16 14:30 신고

    zip 파일로 업로드했는데
    (zip 파일만들때 화면(html), 이랑 include 한 js 파일(jqeury 관련 js) 올렸습니다.)

    phone gap bilud 중에, hydration(error) 났는데 왜 어디서 났는지 모르겠네요...

  • index.html 주소 수정/제거 답글달기 2013.10.29 20:34 신고

    Error - No index.html found - You can fix this here

    이란 오류가 자꾸 뜹니다

    http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1070402&docId=183532304

    이글 보고 답변해주시면 안될까요?

비밀 댓글