※ 이 글은 앱을 만들어보고는 싶지만, 직업으로 하고 싶지는 않은 정도의 사람이 쉽게(?) 앱만들기를 체험해보는 내용입니다.

※ 쉽게 따라하기 위해 내이티브앱이 아닌 웹앱(PhoneGap 이용)으로 만듭니다.

※ 학교에서 소프트웨어 교육을 강조해서 그런지, 학생들에게 앱만드는거 가르쳐줄 수 있냐고 가끔 묻는 사람이 있어 만들기 시작했습니다.


※ 이 글에서 하는거

- 폰갭(PhoneGap)도 설치형이 있지만, 여기선 설치가 필요없는 폰갭 웹사이트(https://build.phonegap.com/)에서 빌드해서 앱을 만듭니다.

- PhoneGap과 adobe.com에 가입합니다.

- HelloWorld 예제를 다운받아, 폰갭 웹사이트에서 앱을 빌드합니다.

- 만들어진 HelloWorld 앱을 안드로이드 폰에 설치하고 실행합니다.



1. 웹브라우저를 열고, 폰갭 웹사이트(http://build.phonegap.com)로 접속합니다. 상단 오른쪽 [Sign up]을 클릭합니다.

- 아이디가 이미 있는 분은 [Sign in]으로 로그인 하신 후, 9번으로 이동하시면 됩니다.

- 예전에 PhoneGap웹사이트에 가입하셨던 분은 adobe.com 아이디와 연결을 해야 하네요. 잘 안되시면 그냥 새로운 계정을 만드세요.




2.  폰갭 계정의 종류가 설명되어 있습니다. 일단 무료계정을 사용할 예정입니다. 하단으로 스크롤 한 후, [free]를 클릭합니다.

- free의 경우, private 한 앱을 1개 만들 수 있습니다. github를 이용하면 여러 개도 빌드 가능합니다.




3. Adobe ID와 로그인을 공유하네요. 중간에 보면 "Get an Adobe ID" 를 클릭합니다.



4. 회원 정보를 입력하신 후, 체크박스를 클릭하고, [SIGN UP]를 클릭합니다.
- 비밀번호 조건이 까다롭네요. (대소문자 모두 포함, 숫자 또는 기호 반드시 포함, 8자리 이상)




5. 약관에 동의합니다.(내용은 잘 읽어보세요 ^^) 앞에 체크박스를 체크하고 [ACCEPT]를 클릭합니다.




6. 이메일 확인 절차가 있습니다. 위에 4번에서 입력한 이메일주소로 확인메일이 발송됩니다. 도착한 메일을 열고 "this verification link"를 클릭합니다.




7. 이메일 확인절차가 완료되었습니다.




8. http://adobe.com 으로 가시면 로그인 됐습니다. 




9. 폰갭 웹사이트(http://build.phonegap.com) 으로 이동합니다. 로그인 하기 위해 오른쪽 상단 [Sign in]을 클릭합니다.




10. 로그인 하기 위해 [Sign in with Adobe ID]을 클릭합니다.




11. 로그인되면 오른쪽 상단에 회원정보가 표시되고, 앱을 빌드하는 화면으로 이동합니다.




12. 다른 브라우저를 열고, 폰갭 예제소스 사이트( https://github.com/phonegap/phonegap-start )로 접속합니다. 오른쪽 중간에 [Download ZIP]을 클릭하여 HelloWorld 예제 소스 샘플을 다운로드 합니다.




13. 11번에서 로그인한 폰갭 웹사이트를 열고, [private]탭을 누른 후, 오른쪽에 [Upload a zip file]버튼을 클릭하여, 12번에서 다운로드한 zip파일을 업로드 합니다.




14. 파일이 업로드 되고 있습니다.




15. zip파일이 업로드 되면 오른쪽 하단에 [Ready to build]를 클릭합니다.




16. 빌드가 끝나면 왼쪽에 OS아이콘이 표시되고 색깔이 바뀝니다. 빌드에 성공하면 안드로이드 아이콘이 파란색으로 바뀝니다.

- 빨간색 아이콘은 에러가 난거구요. 파란색이 빌드에 성공한 겁니다.

- 아이콘을 클릭하면 apk 파일을 다운로드 할 수 있습니다. 다운로드한 apk파일을 안드로이드폰에서 실행하면 앱이 설치됩니다.

- 다운받아서 이메일로 보낸 후, 안드로이드 폰에서 다운받아도 되고, 오른쪽에 QR코드를 검색하면 자동으로 apk파일을 다운로드 합니다.




17. build 한 HelloWorld-debug_날짜.apk 파일을 폰에 다운로드 했습니다. 다운로드한 파일을 클릭합니다.




18. 보안 때문에 Google Play 스토어에서 다운로드한 앱만 설치된다고 하네요. [설정]을 눌러 보안설정을 수정합니다.

- 안드로이드 기기마다 보안 설정 메뉴가 조금 다를 수 있습니다. LG GPro 캡쳐화면 입니다.




19. [출처를 알 수 없는 앱]을 클릭합니다.




20. [허용]을 클릭합니다.

- 보안 설정을 변경한 후, 아무 앱이나 설치하면 보안에 취약할 수 있습니다.(작업 후 다시 설정을 되돌려 놓으세요)




21. "한번만 허용" 체크를 해제하고 [확인]을 클릭합니다.

- 계속 설치할꺼라서 "한번만 허용"을 해제했습니다. 한번만 하실 분은 체크하셔도 괜찮습니다.




22. 보안 설정을 수정했습니다. "출처를 알 수 없는 앱"이 "허용"으로 수정되었습니다.




23. 17번에서 폰에 다운로드한 파일을 다시 클릭하면 설치가 시작됩니다. 하단의 [다음]을 클릭합니다.




24. 하단에 [설치]를 클릭하면 Hello World 앱 설치가 시작됩니다.




25. 앱 설치가 완료되었습니다. [열기]를 클릭하면 앱이 실행됩니다.




26. 앱이 실행되었습니다. 폰갭 로고가 있는 첫화면만 있는 앱입니다. 




27. 바탕화면을 보니 앱 아이콘이 보입니다. 클릭하면 다시 앱이 실행됩니다.




폰갭 웹사이트에서 예제 소스를 쉽게 빌드하는 방법을 알아봤습니다.

다음에는 Hello World앱의 모양을 조금 바꾸는 방법을 알아봐야 겠습니다.






Posted by 감자전

댓글을 달아 주세요

  1. 2015.09.09 19:04 Address Modify/Delete Reply

    비밀댓글입니다

    • 감자전 2015.09.09 19:10 신고 Address Modify/Delete

      안드로이드는 아무것도 없이 빌드가 되지만요. ios 는 certificate 파일이 있어야 빌드가 된다고 합니다.
      음 살짝 복잡해보여서 안했습니다만, 곧 시도해보고 설명 올려보겠습니다 ^^