본문 바로가기

어설픈 프로그래밍 따라하기

어설픈 앱만들기1 - 01. 스마트폰에 폰갭(phonegap)으로 HelloWorld 앱 실행하기

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

※ 쉽게 따라하기 위해 내이티브앱이 아닌 웹앱(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앱의 모양을 조금 바꾸는 방법을 알아봐야 겠습니다.