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

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

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


지난 글 ( 어설픈 앱만들기1 - 01. 스마트폰에 폰갭(phonegap)으로 HelloWorld 앱 실행하기 ) 에서는  PhoneGap Hello World 예제 소스를 압축해서 http://build.phonegap.com 사이트에서 쉽게 안드로이드 앱을 빌드해서 폰에 설치하는 것을 해봤습니다.


※ 이 글에서 하는거

- 앱 모양을 쉽게 만들기 위해 사용할 템플릿을 고릅니다.

- Hello World예제에 위에서 고른 템플릿을 적용합니다.

- 브라우저에서 앱을 확인하면서 가위바위보 게임을 만들어 봅니다.



1. 지난 번에 다운받고 빌드해본  Hello World 예제는 빈 화면에 이미지만 있는 간단한 화면이었습니다.

이 소스를 앱과 같은 형태로 보이도록 만들기 위해서는 HTML과 CSS로 직접 모양을 만들어가는 방법도 있습니다만,

여기선 jquery mobile bootstrap Theme 를 사용해서 쉽게 모양을 만들어 봅니다.

소스 : https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme


위 소스 url 페이지로 접속하면, 오른쪽 하단에서 소스를 다운받을 수 있습니다.




2. 소스를 다운로드 받아서 압축을 풀면 위 파일 목록을 볼 수 있습니다.





3. 지난번에 다운받아놓은 Hellp World 소스에서 index.html 파일을 jquery mobile bootstrap 의 index.html을 참고하여 수정합니다.

[index.html 파일수정 내용 보기]





4. Hello World 소스의 www폴더에  [jQuery-Mobile-Bootstrap-Theme] 폴더의 themes 폴더를 복사합니다.




5. 브라우저에서 index.html파일을 열어봅니다.





6. 디자인을 수정해보겠습니다.

수정하는 김에 간단한 가위바위보 게임을 만들어봐야 겠습니다. 제목을 "가위바위보"로 바꾸고, 가위 바위 보 3개의 버튼을 넣고, 승/패를 표시하는 텍스트 필드를 2개 넣겠습니다.

[index.html 파일 수정 보기]




게임이라 부르기 부끄럽군요. ^^ 

나머지는 있던 소스를 복사해서 만들었구요. 

승, 패, 승률 아래 들어간 텍스트 폼은 jquery mobile api document 의 Forms부분을 참고했습니다. 넣고 싶은 컨트롤의 아래 보면 "View Source"버튼을 클릭하면 해당 소스가 팝업으로 표시됩니다. 소스 내용을 더블클릭 하면 복사할 수 있습니다.




7. 만들려고 하니 다른 컨트롤들도 보여 화면을 조금 더 수정했습니다. 앱이 낸 결과를 보여주는 텍스트를 추가하고, 버튼을 그룹으로 묶인 걸로 수정했습니다.

[index.html 파일수정 보기]




8. 다음은 자바스크립트를 추가하여 버튼을 동작하게 합니다.

[index.html 파일수정 보기]


모양도 살짝 수정했습니다.

음 많이 부족하지만, 연습삼아 만들어 본 가위, 바위, 보 게임을 만들어봤습니다.

[소스 다운로드]




9. 그럼 빌드도 해서 폰에서도 해볼까요!

소스를 압축해서 http://build.phonegap.com 에서 빌드했습니다.

폰에 다운로드 후 설치했습니다.( 설치가 안되면 전에 설치했던 앱을 지우고 다시 설치해보세요. )



앗 앱을 실행하니 모양이 이상하네요.


viewport 설정이 틀렸나봅니다.

[index.html 파일 수정 보기]


[안드로이드 앱 다운받기]


제대로 나오네요. 

몇번 해봤습니다만, 승률이 낮네요 ^^

LG Gpro에서 실행했습니다. 다른건 어떨지 모르겠습니다.



지난 시간에 다운받은 Hello World 예제 소스를 수정해서 jquery mobile bootstrap template를 적용하고, 간단한 가위, 바위, 보 게임을 만들어봤습니다.

다음엔 뭘 만들어볼까요. ~~~








Posted by 감자전

댓글을 달아 주세요