한이음 IT 멘토링프로젝트 Android App 개발가이드 (2) - Google Maps 와 GPS 를연동한 Android App 개발 - Ver 1.02 (Update )

Transcription

1 한이음 IT 멘토링프로젝트 Android App 개발가이드 (2) - Google Maps 와 GPS 를연동한 Android App 개발 - Ver 1.02 (Update )

2 프롤로그 본개발가이드는한이음 IT 멘토링프로젝트를수행하는학생들에게 개발에대한기본적인가이드를지원하여, 역량향상에도움을주기 위해작성되었습니다. 한이음 IT멘토링제도는학생과교수, 기업전문가인 IT멘토가팀을이루어현업 IT 실무기술이반영된프로젝트를수행하는인재양성프로그램입니다. 주최 / 미래창조과학부 주관 / 정보통신산업진흥원, 한국정보산업연합회 본개발가이드에서는 Eclipse와 ADT를활용하여 Android App을개발하는것을실습합니다. 또한 Google Maps JavaScript API v3와 WebView, GPS 센서등을이용하여직접개발한 App을에뮬레이터나실제스마트폰에서실행할수있도록합니다. 주의 본개발가이드는미래창조과학부의출연금등으로수행한사업결과입니다. 본개발가이드의내용을외부자료로활용할경우 한이음 IT멘토링프로젝트개발가이드 임을밝혀야합니다. 집필에도움을주신운영위원회위원및한이음 IT 멘토분들께감사드립니다

3 Google Maps 와 GPS 를연동한 Android App 개발 목차보기 프롤로그 2 Part 1. 개발환경설치와간단한샘플 App 제작 JDK 다운로드와설치 Eclipse 설치 ADT(Android Development Tools) 설치 에뮬레이터설정및실행 샘플프로젝트생성, Hello World! 실제 Android Device에서실행 코드수정 42 Part 2. Google Maps 와 WebView, GPS 연동을통한 App 개발 Eclipse 설정 Google API를사용하기위한 Google API 키발급 Google Maps JavaScript API v3으로웹어플리케이션만들기 새로운 Activity를만들고 WebView를이용하여 Google Map 띄우기 GPS와연결하여현재위치를표시하고, 나의이동경로표시하기 스마트폰에 App을담아서야외에서직접실행시켜보기 85 에필로그 86 준비물 개발 : 인터넷이가능한 Window 기반 PC 또는 Mac 등의컴퓨터테스트 : Android Device( 스마트폰 ) 과 USB Cable ( 이두가지가없어도개발환경과같이설치되는에뮬레이터만으로도테스트는가능합니다. 다만, 실제 Device에비하여실행속도가느리므로, 원활한개발을위해실제 Device 사용을권장합니다.) - 3 -

4 Part 1. 개발환경설치와간단한샘플 App 제작 Part1에서는 Android App을개발하기위하여필요한 3가지, JDK(Java SE Development Kit) 와 Eclipse, 그리고 Google에서제공하는 Android App 개발용툴인 Eclipse Plug-in, ADT(Android Development Tools) 를설치하고, 샘플 App을실행하여에뮬레이터나실제스마트폰 (Android Device) 에서구동시켜보는것을따라해가며학습합니다 JDK 다운로드와설치 Android 개발언어가 Java 기반으로되어있지만, 여기서설치하는 Java는 Android App 개발을위한 Java가아니라, IDE( 통합개발환경, Integrated Development Environment) 인 Eclipse를구동하기위한 Java입니다. Eclipse가 Java로개발되어있고, JVM(Java Virtual Machine) 위에서구동되기때문에 Eclipse를실행하기위해서는꼭 Java(JDK와 VM) 가설치되어있어야합니다. ( 이후모든설치과정은 Mac에서도거의유사하게적용됩니다.) 먼저, 다음링크를클릭합니다. [ 그림 1-1] Java 다운로드페이지 위 [ 그림 1-1] 과같이 Java 를다운로드할수있는페이지가열립니다. 내 PC 에맞는버전의 Java 를다운로드하면되는데, 일반적으로윈도우기반 PC 에서 32bit 버전과 64bit 버전이분리되어있으니다음 [ 그림 1-2] 와같이자신의 PC 버전을미리확 인합니다

5 [ 그림 1-2] 내 PC 의유형을확인하는방법 [ 그림 1-1] 의붉은색부분을클릭하면다음 [ 그림 1-3] 과같은페이지로이동합니다. 여 기서 Accept License Agreement 를선택하여라이선스에동의를한후자신의 PC 유형에 맞는버전을선택하여 JDK(Java SE Development Kit) 을다운로드합니다. [ 그림 1-3] 라이선스동의및 JDK(Java SE Development Kit) 다운로드페이지 - 5 -

6 [ 그림 1-4] 다운로드완료된 JDK 설치파일 다운로드완료된 JDK 설치파일을실행하여다음 [ 그림 1-5], [ 그림 1-6] 과같은순서로 JDK 설치를마무리합니다. [ 그림 1-5] JDK 설치 [ 그림 1-6] JDK 설치완료 - 6 -

7 1-2. Eclipse 설치 Eclipse는 Android 개발뿐아니라 JAVA를시작으로 C/C++, PHP, Python 등수많은언어와환경을지원하는오픈소스기반의통합개발환경입니다. Eclipse 자체는개발환경이공통적으로가지고있어야할기능만을포함하여에디터를기반으로만들어져있으며다양한언어와환경에사용될수있도록제 3자 (3rd Party) 가제작한 Plug-in과연동이가능하도록되어있습니다. 후에설치할 ADT도 Android 개발을위해 Google이모든개발환경을개발할필요없이 Eclipse 기반의 Plug-in만제공하면 Android 개발이가능합니다. 이런확장성으로인하여 Eclipse가실무에서많이사용되며, 계속하여테스트, 배포, 형상관리등을위한편리한툴들이추가적으로개발되고있습니다. Eclipse를전문적으로다루는것은본가이드의범위를벗어나기에여기서는이것으로설명을마치도록하겠습니다. 앞으로개발을진행하며 Eclipse의사용에많이익숙해지시고, 서적이나인터넷을통해공개된정보가많으니참고하시면되겠습니다. 이제설치를시작하겠습니다. 먼저, 다음링크를클릭합니다. [ 그림 1-7] Eclipse 다운로드페이지 위의 [ 그림 1-7] 에서붉은색부분을클릭하여안정화된가장최신버전을다운받도록합니다. 현재 (2014년 6월 10일 ) 기준으로 Eclipse Kepler SR2가안정화된최신버전입니다. 이는수시로업데이트될수있으나, 설치방법이간단하므로한번익숙해지면크게달라지는부분은없을것입니다. (Android가음식의이름으로버전별로이름을붙이는것과유사하게 Eclipse는천체와관련된이름을붙입니다. :D) - 7 -

8 [ 그림 1-8] Eclipse 압축파일다운로드 위의 [ 그림 1-8] 의붉은색부분을클릭하여 Eclipse 압축파일을다운로드합니다. [ 그림 1-9] Eclipse 압축해제 적당한곳으로파일을옮기고압축을해제합니다. Eclipse 는설치형프로그램이아니라서 압축을해제하는것만으로실행이가능합니다. 기억하기쉬운장소에압축을푸는것이좋 습니다.( 여기서는 C 드라이브아래에풀도록하겠습니다.) [ 그림 1-10] Eclipse 실행파일 - 8 -

9 위의 [ 그림 1-10] 에서 Eclipse 실행파일을볼수있습니다. 바탕화면에바로가기아이콘을만들어두면편하게실행을시킬수있습니다. 처음으로 Eclipse를실행시키면다음 [ 그림 1-11] 과같은창이나타납니다. 우리가개발할프로젝트의파일들을어디에저장할지를물어보는것입니다. 변경해도되지만일단 OK 버튼을클릭하여그대로사용하겠습니다. (Use this as the default and do not ask again을체크하면다시시작할때이창을띄우지않고동일한값을계속사용합니다.) [ 그림 1-11] Eclipse 의 Workspace 설정화면 이렇게해서 Eclipse 설치를완료하면다음 [ 그림 1-12] 와같은첫화면이나타납니다. [ 그림 1-12] Eclipse 실행화면 - 9 -

10 1-3. ADT(Android Development Tools) 설치 앞에서말씀드렸던바와같이 ADT 는 Google 에서제공하는 Android App 개발용툴인 Eclipse Plug-in 입니다. 설치도 Eclipse 상에서진행됩니다. 다음그림들을순서대로따라하며설치를진행하도록하겠습니다. [ 그림 1-13] ADT 설치화면 (Help -> Install New Software... 클릭 ) [ 그림 1-14] ADT 설치화면 (Add... 버튼클릭 )

11 다음 [ 그림 1-15] 와같은창이뜨면 ADT 와다음링크를입력한후 OK 를클릭합니다. [ 그림 1-15] ADT 다운로드경로입력 다음 [ 그림 1-16] 과같이 Developer Tools 를선택한후 Next> 를클릭합니다. [ 그림 1-16] Developer Tools 를선택

12 [ 그림 1-17] ADT 설치항목에대한상세화면 ADT 설치항목에대한상세화면입니다. Next> 를클릭하여다음으로진행합니다. [ 그림 1-18] ADT 설치항목에대한라이선스동의 위의 [ 그림 1-18] 과같이라이선스동의를체크한후 Finish 를클릭하여설치를시작합니 다. ( 라이선스동의를선택하지않으면 Finish 버튼이활성화되지않습니다.)

13 [ 그림 1-19] ADT 다운로드진행화면 [ 그림 1-20] 보안경고창 (OK 를클릭하여계속진행합니다.) [ 그림 1-21] Yes 를클릭하면 Eclipse 를자동으로재시작합니다

14 [ 그림 1-22] SDK 위치정보오류화면 위의 [ 그림 1-22] 와같이 Android SDK의위치가 Preferences에없다는오류창이나타나지만, 놀라지마시고 Close를클릭하여닫고, Android SDK 다운로드및설치를위해다음으로진행합니다. ( 이미 ADT를설치한적이있다면위의과정이나타나지않을수도있습니다. 이때는 Google에서 Android SDK를직접다운받아설치하시면됩니다.) [ 그림 1-23] SDK 설정화면 위의 [ 그림 1-23] 은어떤 SDK 를설치할지결정하는화면입니다. 최신버전을사용하도록 기본값그대로 Next 를클릭하여넘어갑니다. ( 이전에 ADT 나 SDK 를설치한적이있다면 [ 그림 1-23], [ 그림 1-24] 가나오지않고바로 [ 그림 1-25] 로넘어갈수있습니다.)

15 [ 그림 1-24] 사용통계전송동의화면 사용통계전송동의를마지막으로 Android SDK 설치를위한설정을마무리합니다. Finish 를클릭하여다음으로진행합니다. [ 그림 1-25] Android SDK Manager Fetching

16 [ 그림 1-26] Android SDK 라이선스동의화면 위의 [ 그림 1-26] 과같이 Accept License 를선택해야설치를진행할수있습니다. 선택후 Install 을클릭하여 Android SDK Tools 다운로드및설치를진행합니다. [ 그림 1-27] Android SDK Tools 다운로드진행화면

17 [ 그림 1-28] Android SDK Tools 다운로드완료 다운로드가완료되었습니다. Open SDK Manager 를클릭하여 SDK 설치를진행합니다. SDK Manager 는 Eclipse 실행후에도언제든지실행시킬수있습니다. 즉, SDK 의추가나 제거를언제든지자유롭게수행할수있습니다. [ 그림 1-29] Android SDK Manager 실행화면

18 [ 그림 1-30] Android SDK Manager 에서설치할패키지선택 기본적으로 Tools 와 Extras 는모두선택하고, 나머지는 Target 으로삼은 Android 버전에 따라선택적으로설치합니다. 여기서는최신버전인 4.4.2( 킷캣 ) 와 4.2.2( 젤리빈 ), 그리고하위호환성검증을위해, 아직 많이사용되고있는 2.3.3( 진저브레드 ) 을설치하겠습니다

19 [ 그림 1-31] Android SDK Manager 라이선스동의화면 [ 그림 1-32] Android SDK Manager 라이선스동의화면 라이선스에동의하면각패키지의 X 표시가없어지며 Install 버튼이활성화됩니다. Install 버튼을클릭하여다음으로진행합니다

20 [ 그림 1-33] Android SDK 설치진행화면 Install XX packages... 버튼을클릭하면앞서선택한패키지가 [ 그림 1-33] 과같이설치됩니다. 단, 에뮬레이터와같은일부패키지는동시에설치되지않습니다. 다음 [ 그림 1-34] 와같이선택한패키지가한번에모두설치되지는않습니다. Install XX packages... 버튼을클릭하여아직설치되지않은나머지패키지도마저설치합니다. [ 그림 1-34] Android SDK 추가설치화면

21 이후, 위와마찬가지로 Accept License 선택후설치진행합니다. Install X packages 가몇번반복되며, 마찬가지방법으로나머지패키지를설치합니다. [ 그림 1-35] Android SDK 추가설치진행화면 Android ADT 와 SDK 설치가완료되었습니다. 이후, Eclipse 를꼭다시실행시켜주어야합니다. 그렇지않으면다음절에서진행할에 뮬레이터설정시 Target 시스템의이미지가보이지않습니다. [ 그림 1-36] Android ADT 와 SDK 설치가완료된 Eclipse 실행화면

22 1-4. 에뮬레이터설정및실행 ADT 는실제 Android Device 가없어도개발이가능하도록가상의 Device 인에뮬레이터를 제공합니다. 이번절에서는에뮬레이터를설정하고실행하는방법에대하여학습합니다. 다음 [ 그림 1-37] 과같이 Workbench 를클릭하여개발환경으로진입합니다. [ 그림 1-37] Eclipse 실행화면에서 Workbench 를클릭 [ 그림 1-38] Android Virtual Device Manager 실행 위의 [ 그림 1-38] 과같이좌측에서 6 번째아이콘을클릭하면에뮬레이터설정을위한 Android Virtual Device Manager 가실행됩니다

23 [ 그림 1-39] Android Virtual Device Manager 실행화면 위의 [ 그림 1-39] 와같이 New... 버튼을클릭하여새로운에뮬레이터를생성합니다. [ 그림 1-40] Android Virtual Device Manager 실행화면 위의 [ 그림 1-40] 과같이붉은색박스안의내용을설정합니다. 우선 Android 4.4.2( 킷캣 ) 의에뮬레이터를설정하겠습니다. ( 기존버전의 ADT와구성이약간다릅니다.) 그런데, 제일하단의설명중붉은박스를보면메모리를 768M( 상황별로다를수있습니다.) 이하로설정하라는문구가나옵니다. 그렇지않으면메모리부족으로인하여에뮬레이터가정상적으로실행되지않습니다

24 [ 그림 1-41] 에뮬레이터의메모리옵션 따라서위의 [ 그림 1-41] 과같이메모리를기본값이아닌앞서제시된값이하로맞춥니 다. 여기서는 768Mb 보다작게 700 으로설정하겠습니다. 각자의상황에맞게조절하시면 됩니다. OK 를클릭하면에뮬레이터생성이완료됩니다. [ 그림 1-42] 에뮬레이터생성완료 위의 [ 그림 1-42] 와같이생성된에뮬레이터를선택하고 Start 버튼을클릭합니다. 그러면, 다음의 [ 그림 1-43] 과같은 Launch Option 창이나타납니다

25 [ 그림 1-43] Launch Option Launch 버튼을클릭하면다음의 [ 그림 1-44] 와같이에뮬레이터생성을시도합니다. [ 그림 1-44] Start Android Emulator

26 [ 그림 1-45] 에뮬레이터시작중 실제로 Android Device가부팅되는것과동일하게시간이많이소요되므로기다립니다. 만약에뮬레이터의 Device 화면표시영역에 android 같은표시없이검은색화면만나타난다면에뮬레이터의설정을잘못한것입니다. 에뮬레이터의해상도를너무높게잡거나, CPU 설정이잘못된경우, 메모리설정이잘못된경우, 안드로이드버전과 Target Device의조합이잘못된경우등이런현상이발생할수있습니다. 앞의설정과정에서옵션을변경해가며시행착오를겪다보면에뮬레이터를성공적으로띄울수있습니다. [ 그림 1-46] 에뮬레이터부팅완료 OK 버튼은처음실행할때만나타납니다. 이후실행부터는나타나지않습니다. OK 버튼을클릭하면다음 [ 그림 1-47] 과같이홈화면이나타납니다

27 [ 그림 1-47] 홈화면 [ 그림 1-48] 두번째부팅화면 ( 잠금화면 ) 에뮬레이터를다음에실행시키면 [ 그림 1-48] 처럼, 앞서보았던 OK 버튼이나타나지않 고익숙하게봐왔던안드로이드의잠금화면이나타납니다

28 그런데, 실제로에뮬레이터를실행시켜보면화면크기가생각보다크다는것을느끼실수있습니다. 간혹에뮬레이터의크기가너무커서화면을꽉채우거나, 밖으로일부영역이잘려나가기도합니다. 그럴때는다음 [ 그림 1-49] 와같이에뮬레이터의화면크기를적당하게축소시킬수있습니다. [ 그림 1-49] 에뮬레이터화면크기를실제크기와비슷하게맞추는설정 [ 그림 1-50] 크기가적당히조절된에뮬레이터의모습

29 4.4.2( 킷캣 ) 의에뮬레이터생성이완료되었습니다 ( 젤리빈 ) 는여러분이직접에뮬레이터를생성해보시기바랍니다. 다음은 Android 2.3.3( 진저브레드 ) 에뮬레이터생성방법입니다. 앞서설명드렸던방법과동일하므로별다른설명없이그림으로만이어가겠습니다. [ 그림 1-51] Android 2.3.3( 진저브레드 ) 에뮬레이터설정화면 [ 그림 1-52] Android 2.3.3( 진저브레드 ) 에뮬레이터실행

30 [ 그림 1-53] Android 2.3.3( 진저브레드 ) 부팅중 [ 그림 1-54] Android 2.3.3( 진저브레드 ) 홈회면

31 1-5. 샘플프로젝트생성, Hello World! 이제, ADT 가기본적으로생성하는 Android App 프로젝트를에뮬레이터에서실행해보고, 간단하게변경도해보겠습니다. 이번절을통해코드상으로만존재하던 App 을실제로실 행시켜보는성취감을맛볼수있을것입니다. 다음과정을순서대로따라가며프로젝트를생성해보겠습니다. [ 그림 1-55] 메뉴선택 (File -> New -> Other) [ 그림 1-56] Wizard 선택 (Android -> Android Application Project -> Next 클릭 )

32 [ 그림 1-57] 새로운 Application 설정화면 아직은이름을기입하지않은상태라 X표시와함께, Next나 Finish 버튼은비활성화상태입니다. Application 이름에 BigProject 를, Package Name에 org.hanium.bigproject 를입력합니다. Package Name은협업에서프로젝트를모듈단위로배포할때사용되며, 일반적으로회사의도메인과프로젝트이름을따서만듭니다. 협업을위한소스배포시에도 Package Name의구조가그대로계층적디렉터리형태로만들어지기때문에소스관리및배포가체계적이고편리합니다. 마지막으로테마는 None을선택하고 Next를클릭하여다음으로넘어갑니다. [ 그림 1-58] Application 기본정보입력

33 [ 그림 1-59] 프로젝트설정 ( 기본값그대로 Next 클릭 ) [ 그림 1-60] 아이콘설정 ( 기본값그대로 Next 클릭 ) 다양한해상도에대응할수있는아이콘이준비되어있습니다. 이미지를제작하여자신만의 아이콘을만들수있지만여기서는디폴트아이콘을그대로사용하겠습니다. [ 그림 1-61] Activity 생성 Android 에서 Activity 는활성화된프로세스를의미합니다. 여기서는 Activity 의다양한형태 를선택할수있습니다. 지금은 [ 그림 1-61] 처럼 Blank Activity 를선택하고다음으로진행 합니다

34 [ 그림 1-62] Activity 의이름과기본 Layout 설정 기본값을그대로사용합니다. 이전버전의 ADT에서는 fragment_main이존재하지않았기때문에 activity_main과 MainActivity에서디자인과이에대한코드를작성했지만, 최신버전의 ADT에서는 activity_main과 fragment_main을분리하였고, UI 작업은 fragment_main에서진행하게됩니다. 화면전환최적화 ( 부드러운화면전환 ) 등, UI 구성에유연성을가져오기위해개정되었다고하니따르는것이유리하겠습니다. Finish 버튼을클릭하여프로젝트생성을완료합니다. 다음페이지의 [ 그림 1-63] 과같은화면이나타날것입니다. < 여기서잠깐!!! 기본적인 java 파일과 xml 파일이생성되지않나요???> 간혹앞장의 [ 그림 1-61] 처럼 Blank Activity를선택했을때프로젝트생성후기본적으로생성되는파일들 (MainActivity.java, activity_main.xml, 매니페스트파일과리소스파일등 ) 이생성되지않는경우가있습니다. ADT와 SDK의버전이맞지않을경우또는이전버전의 Eclipse와 Plug-in을사용할경우이런현상이발생할수있습니다. 이럴경우다음두가지중의한가지방법을사용합니다. 1. Eclipse와 ADT, SDK를개발가이드에따라완전히새로설치합니다. 2. 바로앞의과정에서 Blank Activity가아닌 Empty Activity를선택한후, 앞으로 fragment_main.xml과 PlaceholderFragment Class의 oncreateview Method에해야하는작업을 activity_main.xml, MainActivity Class의 oncreate Method에작업합니다. 2번방법의경우, 앞으로가이드를진행하며그때그때추가설명드리도록하겠습니다. 앞으로 <activity_main에작업하는경우 > 라고표시하는경우는 2번방법의경우입니다. fragment_main.xml과 PlaceholderFragment Class, activity_main.xml과 MainActivity Class 두가지경우중한가지를자신의상황에맞게선택하여따라가시면됩니다

35 [ 그림 1-63] 프로젝트생성완료 App 실행을위해 [ 그림 1-63] 처럼붉은색박스안의 Run BigProject 를클릭해봅니다. 하지만아무반응이없을것입니다. 이는현재 UI 구성파일인 fragment_main.xml( 또는 activity_main.xml) 이선택되어있기때문입니다. [ 그림 1-64] 프로젝트실행 소스코드가들어있는 MainActivity.java를 [ 그림 1-64] 처럼엽니다. ( 왼쪽영역 Package Explorer 의 BigProject -> src -> org.hanium.bigproject -> MainActivity.java 를펼쳐더블클릭 ) 그상태에서붉은색박스안의 Run BigProject를클릭합니다

36 [ 그림 1-65] Run As: 어떤방식으로실행할지결정 위의 [ 그림 1-65] 와같이 Android Application 을선택한후 OK 를클릭합니다. [ 그림 1-66] 에뮬레이터에서 BigProject App 실행 만약 App이실행되지않는다면에뮬레이터에서 BigProject App을찾아직접실행시켜도됩니다. 그런데, 4.4.2와 4.2.2의에뮬레이터를모두설치하였는데, 가장하위버전인 에뮬레이터가자동으로선택되어실행되었습니다. 이는 에뮬레이터를제일마지막에생성했기때문입니다

37 그럼, 실행시마다에뮬레이터를선택할수있도록실행설정을변경하여보겠습니다. [ 그림 1-67] Run BigProject 우측역삼각형아이콘클릭후 Run Configurations... 선택 [ 그림 1-68] Target 탭선택후 Always prompt to pick device 클릭, Apply -> Run 이제부터는 Run BigProject 아이콘을클릭하면, 에뮬레이터또는연결되어있는디바이스, 혹은현재실행중인에뮬레이터를선택할수있는 Android Device Chooser 창이뜹니다. 특히현재에뮬레이터가실행중인동안에는오랜시간이걸리는부팅과정없이현재선택된에뮬레이터를통해바로변경된 App을다시실행할수있어편리합니다

38 [ 그림 1-69] Android Device Chooser 위의 [ 그림 1-69] 와같이 Launch a new Android Virtual Device 를선택후 Android 버전의에뮬레이터를선택합니다. 이제 OK 를클릭하여에뮬레이터를실행시킵니다. [ 그림 1-70] 에뮬레이터실행

39 1-6. 실제 Android Device 에서실행 이제실제 Device 를연결해보겠습니다. 보유하고있는스마트폰의제조사홈페이지에서 USB 드라이버를다운받아설치합니다. ( 경우에따라 PC 를재부팅하거나 Eclipse 를재시작시켜야할수도있습니다.) 만약 Android Device 의설정중, 확인되지않은 App( 개발중인 App) 의실행을막는옵션 이설정되어있다면이를먼저해제합니다. 드라이버설치가완료되면 USB 케이블과 Android Device 를연결한후다음 [ 그림 1-71] 과같이 Open Perspective 버튼을클릭한후 [ 그림 1-72] 와같이 DDMS 를선택합니다. [ 그림 1-71] Open Perspective 버튼클릭 [ 그림 1-72] DDMS(Dalvik Debug Monitor Service) 선택

40 다음 [ 그림 1-73] 과같이우측 Devices 탭에연결되어있는 Android Device 가보입니다. [ 그림 1-73] DDMS 에서보이는 Android Device DDMS 를닫거나 Eclipse 오른쪽위부분의 Java 버튼을눌러다시돌아옵니다. 이제, 다시아래 [ 그림 1-74] 와같이 Run BigProject 버튼을클릭합니다. Choose a running Android device 를선택한후, Android Device 을선택합니다. [ 그림 1-74] Android Device 선택

41 [ 그림 1-75] Android Device 에서 App 실행 위의 [ 그림 1-75] 에서처럼 OK 를클릭, Android Device 에서직접 App 을실행시킵니다. [ 그림 1-76] Android Device 에서실행된 BigProject App

42 1-7. 코드수정 지금까지개발환경을설치하고 ADT 가기본적으로제공하는프로젝트를빌드하여에뮬레이 터와실제 Android Device 에서실행시켜보았습니다. 이제기본적으로제공하는파일들을 살펴보며조금씩수정을하여 App 이어떻게바뀌는지보겠습니다. 다음 [ 그림 1-77] 은 MainActivity.java 의모습입니다. [ 그림 1-77] MainActivity.java ( 프로젝트생성방식에따라다를수있음. 44 Page 참고 ) Android App이시작되면가장먼저 MainActivity Class의 oncreate Method가실행됩니다. 보통 Method 이름앞에 on이라는접두사가붙으면개발자가직접호출할수있는기능이아니라 App의시작이나종료, 사용자의터치등특정상황에반응하여자동적으로실행되는기능을하는 Method입니다. 아울러 set이라는접두사가 Method 이름앞에붙으면값을입력하여내부상태를변화시키고, get이라는접두사는현재내부상태 ( 오브젝트의내부변수등 ) 나객체 ( 직접만든 Class 의 Object나시스템객체 ) 등을얻어내는기능을합니다. 여러분이특정기능을하는 Method를만들때도이렇게일반적으로통용되는 Naming 규칙을따라줘야같이개발하는개발자들이 Method 이름을보고오해할소지가줄어들게됩니다. 꼭접두사뿐만아니더라도 Method의이름을결정하는것은매우중요한일입니다. 여러분이팀원들과같이프로젝트를진행할때, Method의이름이나 Signature( 리턴값 + Method 이름 + Parameter로이뤄지는 Method 정의의형태 ) 는팀원들과충분히상의하여협의를통해정하는것이좋습니다

43 다음은기본적으로제공하는 MainActivity.java 의코드전체입니다. package org.hanium.bigproject; import android.support.v7.app.actionbaractivity; import android.support.v7.app.actionbar; import android.support.v4.app.fragment; import android.os.bundle; import android.view.layoutinflater; import android.view.menu; import android.view.menuitem; import android.view.view; import android.view.viewgroup; import android.os.build; public class MainActivity extends ActionBarActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); if (savedinstancestate == null) { getsupportfragmentmanager().begintransaction().add(r.id.container, new public boolean oncreateoptionsmenu(menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.main, menu); return public boolean onoptionsitemselected(menuitem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getitemid(); if (id == R.id.action_settings) { return true; return super.onoptionsitemselected(item); /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment { public PlaceholderFragment() public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { View rootview = inflater.inflate(r.layout.fragment_main, container, false); return rootview; [ 코드 1-1] MainActivity.java oncreate Method는 App 이처음시작할때호출되며 activity_main을로드하고, PlaceholderFragment Method를추가하며 PlaceholderFragment Method는 fragment_main 을로드합니다. 시중의 Android 개발서적은 oncreate Method와 activity_main에서작업을시작하도록설명되어있습니다. 하지만이제, 이전버전의 ADT와는다르게개발자는 PlaceholderFragment Method와 fragment_main에코드를추가하게됩니다. oncreateoptionmenu Method 는메뉴가생성될때, onoptionitemselected Method 는메뉴 가선택되었을때실행되므로각각메뉴에대한초기화작업, 메뉴선택에대한반응에관 계된코드를추가하면됩니다

44 <activity_main 에작업하는경우 > 다음과같이 MainActivity.java 와 activity_main.xml 만생성되고, 내용도약간다릅니다. [MainActivity.java] package org.hanium.bigproject; import android.app.activity; import android.os.bundle; import android.view.menu; import android.view.menuitem; public class MainActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main);

45 다음은 BigProject -> res -> layout 밑에있는 activity_main.xml의디자인화면입니다. 편집창하단의 Graphical Layout 탭을선택하면 [ 그림 1-77] 과같은그래픽기반의 UI 설정화면을, activity_main.xml과같이파일이름으로된탭을선택하면 [ 코드 1-2] 와같은 XML 코드편집화면이나타납니다. [ 그림 1-77] activity_main.xml 의 Graphical Layout 탭 <FrameLayout xmlns:android=" xmlns:tools=" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="org.hanium.bigproject.mainactivity" tools:ignore="mergerootframe" /> [ 코드 1-2] activity_main.xml 전체화면의 layout은 FrameLayout으로되어있습니다. 구성요소 (UI 컴포넌트 ) 가화면전체를차지하는 FrameLayout 이외에도일렬로추가배치하는 LinearLayout, 상하좌우같은상대적배치를이용하는 RelativeLayout, 그리고 HTML처럼테이블을이용하여컴포넌트를배치하는 TableRayout이있습니다. 바로다음에설명할 fragment_main에서 Button이나 TextView 등의컴포넌트를자유롭게배치하고, Layout 유형을변경해가며실제로실행을시켜보면그차이를쉽게알수있습니다. Layout마다배치를위한설정방법이약간씩다르고, 경우에따라잘못된배치설정으로오류가발생하기도합니다. 연습을통해각차이를익히시기바랍니다. 또, 절대적인좌표와크기를직접입력하기보다는 Layout 을통해 UI 를알맞게배치하는연 습을해야, 다양한해상도에동일하게대응하는 App 을개발할수있다는것을유의해주시 기바랍니다

46 다음은 activity_main.xml 과같은위치에있는 fragment_main.xml 의디자인화면입니다. 구성은 activity_main 과유사합니다. [ 그림 1-78] fragment_main.xml 의 Graphical Layout 탭 <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingbottom="@dimen/activity_vertical_margin" android:paddingleft="@dimen/activity_horizontal_margin" android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" tools:context="org.hanium.bigproject.mainactivity$placeholderfragment" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> </RelativeLayout> [ 코드 1-3] fragment_main.xml (<activity_main 에작업하는경우 > activity_main.xml) activity_main.xml과는다르게기본적으로 TextView가하나추가되어있습니다. 크기는 TextView 안에담겨있는콘텐츠의크기 ( 문자열의길이와높이 ) 만큼자동으로조절하는 wrap_content로되어있습니다. match_parent로변경하면폭이나높이를꽉차게그립니다. 그밖에도크기설정에관련된다양한 Option이존재하므로직접변경해가면서그차이를익히시기바랍니다. TextView 안의 로지정이되어있습니다. 안에원하는문자열을직접입력할수도있지만, App의문자열은수시로변경될가능성이많기때문에한곳에서관리하는것을권장합니다. 이를위하여 res -> values 밑에 는 strings.xml 안에있는 hello_world라는그무엇을가리키도록한다는뜻입니다

47 그럼 strings.xml 을열어보겠습니다. [ 그림 1-79] strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">bigproject</string> <string name="hello_world">hello world!</string> <string name="action_settings">settings</string> </resources> [ 코드 1-4] strings.xml 역시, 하단의탭을이용하여 GUI 기반의편집화면과 Text 기반의편집화면을전환할수 있습니다. 가 [ 코드 1-4] 의 hello_world 를가리키고있 고, 그값은 Hello world! 로설정되어있다는것을보실수있습니다. 그럼, hello_world 의문자열을한번변경해보겠습니다. <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">bigproject</string> <string name="hello_world"> 한이음 BIG 프로젝트 </string> <string name="action_settings">settings</string> </resources> [ 코드 1-5] strings.xml 변경 Hello world! 를 한이음 BIG 프로젝트 로변경하였습니다

48 참고로, 에뮬레이터에서는한글이깨지는경우가많아버튼에 BIG 만표시되지만, 실제 Device 에서는한글도잘표시됩니다. 변경한김에 TextView도 Button으로변경해보겠습니다. Android에서는 TextView도 Button 도, 그리고다른컴포넌트들도같은조상인 View를상속받았기때문에위치 / 크기설정이나텍스트설정등많은부분이동일합니다. 따라서 TextView를아래붉은색부분과같이단순히 Button으로변경하는것만으로도버튼으로바꿔서표시할수있습니다. 아래와같이 fragment_main.xml 의 TextView 를 Button 으로변경합니다. <activity_main 에작업하는경우 > 에는 activity_main.xml 을동일한방법으로수정합니다. <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingbottom="@dimen/activity_vertical_margin" android:paddingleft="@dimen/activity_horizontal_margin" android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" tools:context="org.hanium.bigproject.mainactivity$placeholderfragment" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> </RelativeLayout> [ 코드 1-6] fragment_main.xml 변경 (<activity_main 에작업하는경우 > activity_main.xml) [ 그림 1-80] 변경사항저장및빌드, 실행 위의 [ 그림 1-80] 과같이변경내용을저장한후탭을 MainActivity.java 등의 Java 코드 편집부분으로이동합니다. 그리고 Run BigProject 를클릭하여실행시킵니다

49 [ 그림 1-81] 에뮬레이터선택 에뮬레이터를선택하고 OK 를클릭하면다음과같이선택된버전의에뮬레이터가실행됩니 다. [ 그림 1-82] 에뮬레이터로부팅한후잠금해제를한홈화면

50 실제 Android Device 에서와마찬가지로 App 을클릭하여실행합니다. 에뮬레이터에서의클 릭은실제 Device 에서의터치와같은동작을합니다. [ 그림 1-83] 에뮬레이터에서 BigProject App 실행 앞서말씀드린바와같이한글이깨지기때문에 한이음 BIG 프로젝트 가다표시되지않 고, 중간의 BIG 만표시됩니다. 하지만실제 Device 에서는한글이정상적으로표시됩니다. 조금더나아가, 간단하게버튼이동작하도록코드를추가하도록하겠습니다. <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingbottom="@dimen/activity_vertical_margin" android:paddingleft="@dimen/activity_horizontal_margin" android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" tools:context="org.hanium.bigproject.mainactivity$placeholderfragment" > <Button android:id="@+id/btnstart" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> </RelativeLayout> [ 코드 1-7] fragment_main.xml 변경 (<activity_main 에작업하는경우 > activity_main.xml) 위의 [ 코드 1-7] 과같이 Button 에 ID 를지정합니다. 여기서는 Button 의 ID 를 btnstart 로 하겠습니다. 는 View 에 id 를추가하겠다는의미입니다

51 이제 MainActivity.java 에 Button 동작에대한코드를추가하도록하겠습니다. package org.hanium.bigproject; import android.content.context; import android.view.view; import android.view.view.onclicklistener; import android.widget.button; import android.widget.toast;... 중략... public class MainActivity extends ActionBarActivity {... 중략... public static class PlaceholderFragment extends Fragment { private Context _context = null;... public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { View rootview = inflater.inflate(r.layout.fragment_main, container, false); _context = rootview.getcontext(); Button btnstart = (Button) rootview.findviewbyid(r.id.btnstart); btnstart.setonclicklistener(new OnClickListener() { public void onclick(view v) { Toast.makeText(_context, "Button Click!!!", Toast.LENGTH_SHORT).show(); ); return rootview; [ 코드 1-8] MainActivity.java 위의 [ 코드 1-8] 의붉은색밑줄부분을추가합니다. <activity_main에작업하는경우 > 에는아래와같이 MainActivity의 oncreate를수정합니다. 또한이벤트핸들러를 Graphical Layout에서추가하는방법을알고있다면, 익숙한방식으로하셔도됩니다. 또한 import는직접 Typing 하지않고도빨간색 X 표시 ( 오류표시 ) 를클릭하거나오류부분에마우스버튼을 Role Over 시켜추가할수도있습니다. package org.hanium.bigproject; import android.content.context; import android.view.view; import android.view.view.onclicklistener; import android.widget.button; import android.widget.toast; public class MainActivity extends Activity { private Context _context = protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); _context = getapplicationcontext(); Button btnstart = (Button) findviewbyid(r.id.btnstart); btnstart.setonclicklistener(new OnClickListener() { public void onclick(view v) { Toast.makeText(_context, "Button Click!!!", Toast.LENGTH_SHORT).show(); );

52 Context는 Application의상태를저장할수있는객체입니다. Android에서간단하게잠깐떴다사라지는메시지인 Toast를띄우기위해서 Context 객체가필요합니다. rootview의 getcontext Method(MainActivity의 oncreate에서는 getapplicationcontext) 를호출하여 Context 객체를얻어옵니다. Context 객체를얻는방법은호출하는위치에따라서조금씩다르니참고하시기바랍니다. _context 앞에 _ 를붙인이유는 Class 내부의멤버변수임을나타내기위함입니다. Naming 규칙은정해진것이없으므로팀과협의하여정하거나, 이미있는팀의코드컨벤션을준수하되, 일반적으로많이통용되는방식을따르는것이좋습니다. 다음은 Button을조작하기위해 ID를통해참조값을얻어오는부분입니다. Button btnstart = (Button) rootview.findviewbyid(r.id.btnstart); 이렇게하면 btnstart 을통해 ID 가 btnstart 인 Button 을조작할수있습니다. (MainActivity 의 oncreate 에서는 rootview 없이바로 findviewbyid 호출 ) ID 와객체의이름은달라도상관없습니다만, 편의상같은이름으로하였습니다. btnstart.setonclicklistener(new OnClickListener() {... 부분은버튼을클릭하였을때자동으로실행될이벤트핸들러 ( 어떤상황에반응하여자동으로실행되는 Method) 를등록하는부분이며여기서는 onclick으로하였습니다. 이렇게하면버튼을클릭할때마다 onclick Method가자동으로호출됩니다. 이벤트핸들러인 onclick Method 안에서는다음과같이토스트메시지를띄웁니다. Toast.makeText(_context, "Button Click!!!", Toast.LENGTH_SHORT).show(); Parameter로는앞서생성한 Context 객체와표시할문자열, 그리고토스트메시지가노출되는시간을설정합니다. Toast.LENGTH_SHORT는짧게, Toast.LENGTH_LONG 길게 Toast 메시지를띄웁니다. 내부적으로는상수형태로되어있지만개발시편의와코드가독성을위해서, 이와같이상수를식별하기편한이름으로미리정의해놓고사용하는기법을많이사용하게됩니다. 다음 [ 그림 1-84] 는위의변경사항을실행하여테스트한화면입니다. [ 그림 1-84] 에뮬레이터에서의실행모습 ( 좌 ) 과실제 Device 에서의실행모습 ( 우 )

53 앞서말씀드렸던바와같이실제 Device 에서는한글이깨지지않고 한이음 BIG 프로젝트 가모두잘표시되는것을볼수있습니다. 이것으로 Part 1 을마치도록하겠습니다. 개발환경을설치하고에뮬레이터와실제 Device 을이용하여간단하게나마실제구동되는 App 을직접빌드해보면서많은자신감을얻으셨길바랍니다. fragment_main.xml 이나경우에따라 activity_main.xml 에이런저런컴포넌트도추가해보고 Layout 이나컴포넌트의배치와크기를다양한방법과옵션으로바꿔보시기바랍니다. 아울러 PlaceholderFragment 의 oncreateview Method 나 MainActivity Class 의 oncreate Method 에이벤트핸들러나이런저런코드들을추가해보면서간단한동작들을시험해보면 개발실력을늘리는데좋은경험이될것입니다. 또한, 오류가생기거나실행이잘되지않을때는가이드를다시한번찬찬히읽어보시거나, 책이나인터넷검색을통해원인을찾고직접해결해보는것도좋은공부가될수있습니다. 주위의팀원이나친구, 멘토기술사님들이나필자의도움을받아도되지만스스로한번해결을시도해보는것과무작정물어보는것은경험과학습측면에서많은차이가생깁니다. 이점을염두에두시고, 꾸준히학습을하시길바랍니다. Part 2 에서는우리가만드는 App 안에웹기반의 Google Map 을띄워보고, 나의이동경로 를그리는 App 을제작해가면서좀더재미있는학습을하도록하겠습니다

54 Part 2. Google Maps 와 WebView, GPS 연동을통한 App 개발 Part2에서는 Google Maps JavaScript API v3를이용하여지도와위치를표시하는웹어플리케이션을만들어보고, 이를 Android App 안에 WebView를이용하여심어보도록하겠습니다. 이를통하여 Google이제공하는 Open API를사용하기위한절차와응용방법을맛볼수있을것입니다. 또한 GPS와의연동을통하여실시간으로나의이동경로를표시하는기능을추가하도록하겠습니다. 본가이드에서설명하는 App 은실습을위해제작된 App 이기때문에완벽한품질의개발 결과물은아닙니다. 하지만여러분스스로의연습과꾸준한학습을통하여충분히상용수 준의 App 으로끌어올릴수있을것이라고믿습니다. 본가이드를통하여 Android 개발의전체적인과정을한번밟아보고, 본가이드에서제시 하는 App 의문제점을스스로보완하거나, 더많은기능을스스로추가할수있는능력을 기를수있는, 학습의출발점으로삼았으면합니다. 그럼본격적으로실습을시작하도록하겠습니다 Eclipse 설정 이제부터코드의양이많아지므로몇가지설정을통하여 Eclipse 를좀더쓰기편하게변 경하도록하겠습니다. 우선아래와같은과정을통하여 Editor 에라인수를표시하도록하 겠습니다. [ 그림 2-1] 환경설정을위한 Preferences 실행 (Window -> Preferences)

55 [ 그림 2-2] 라인수표시 (General -> Editors -> Text Editors -> Show line numbers) 다음은 Eclipse의실행속도를높이기위한설정최적화를진행하겠습니다. Eclipse 실행파일과같은위치의 eclipse.ini 파일을메모장이나텍스트에디터로열고다음부분을편집한다. (Mac에서는 eclipse.ini가직접보이지않습니다. Eclipse 실행파일을오른쪽버튼으로클릭하여패키지내용보기로들어가면 eclipse.ini가보입니다.) -Dosgi.requiredJavaVersion=1.6 -Xms40m -Xmx512m 위의부분을찾아아래와같이변경합니다. -Dosgi.requiredJavaVersion=1.8 -Xms1024m -Xmx2048m 시스템마다메모리의양이다르므로적당하게설정합니다. PC 의물리적메모리가 4GB 이므로 Xms 는전체메모리의 1/4 인 1GB, Xmx 는 1/2 정도인 2GB 를할당하였습니다. 그리고우리가설치한자바의버전이 1.8 이므로, Dosgi.requiredJavaVersion 은 1.8 로변경 합니다. Java 의버전은 cmd 나 console 을실행시키고 java version 이라는명령으로확인 가능합니다. (Dosgi.requiredJavaVersion 의값은자신의버전에맞춰설정합니다.)

56 2-2. Google API 를사용하기위한 Google API 키발급 다음은 Google Maps 를개발하기위한튜토리얼사이트입니다. 하지만현재 (2014년 6월 10일 ) 접속을하면설명과링크, 사이트의내용, API 버전이상이합니다. 설명이최신이아닌이전버전으로되어있으므로내용만참고하고, 실습은다음설명대로따라가며진행합니다. ( 튜토리얼이나 API의구성은언제든변경될수있으나, 사용법은거의동일하므로아래순서대로진행되지않을경우검색을통하여내용을참고하시면됩니다.) 이제부터 Google API 키를발급받아보도록하겠습니다. 이키가자신의 App에심어져있어야 Google Maps와같은 Google API를사용할수있습니다. (Google API는무료도있고유료도있습니다. 사용량에비례하므로실습과일반적인개발에서는충분히무료로사용이가능합니다. :D) 다음링크를클릭합니다. 이후로그인을하면다음과같은화면이나타납니다. [ 그림 2-3] Google Developers Console 이전에만들어놓았던프로젝트가하나보이는데, 여러분이이전에 Google API 를사용해본 적이없다면생성된프로젝트정보가없을것입니다. Create Project 를클릭합니다

57 [ 그림 2-4] 새로운프로젝트생성화면 [ 그림 2-5] 새로운프로젝트이름입력 위의 [ 그림 2-5] 와같이 PROJECT NAME 에 BigMaps 라고입력합니다. 마음에드는이름 으로임의로생성해도문제없습니다. PROJECT ID 는자동으로생성됩니다. Create 버튼을 클릭합니다

58 [ 그림 2-6] 새로운프로젝트생성중 하단의 See all activity를클릭하면 BigMaps 생성정보를, 좌측메뉴의 Projects를클릭하면생성된아래 [ 그림 2-7] 과같이프로젝트리스트를볼수있습니다. 프로젝트생성에시간이걸릴수있습니다. 이럴때는좌측메뉴의 Projects를한번더클릭하면새로생성된프로젝트가보입니다. [ 그림 2-7] BigMaps 프로젝트생성완료

59 위의 [ 그림 2-7] 에서 BigMaps 를클릭하면아래 [ 그림 2-8] 화면으로이동합니다. [ 그림 2-8] BigMaps 프로젝트관리화면 APIs&auth 를클릭하고그하단의 APIs 를클릭하여아래 [ 그림 2-9] 화면으로이동한후 Google Maps JavaScript API v3 를사용가능하도록 OFF 버튼을클릭합니다. [ 그림 2-9] APIs&auth -> APIs

60 Google Maps JavaScript API v3 이아래 [ 그림 2-10] 과같이 ON 으로변경됩니다. [ 그림 2-10] Google Maps JavaScript API v3 활성화 이제 API 키를발급받도록하겠습니다. 아래 [ 그림 2-11] 과같이 APIs & auth -> Credentials 를클릭합니다. [ 그림 2-11] Google API 키발급화면

61 Public API access 항목의 Create new Key 를클릭하면아래 [ 그림 2-12] 와같은창이뜹 니다. Browser key 를클릭하여다음으로진행합니다. [ 그림 2-12] Public API access Key 생성화면 Text 입력창은그대로두고 Create 버튼을클릭합니다. Text 창은해당 API 호출을특정 도메인에서만호출가능하도록제한하는역할을합니다. [ 그림 2-13] Browser key 생성화면

62 Google API 키발급이완료되었습니다. 뒤이어나올, 웹어플리케이션개발에사용해야하니잘복사해둡니다. ( 아니면나중에복사할수있도록웹브라우저를그냥띄워놓으셔도됩니다.) [ 그림 2-14] Browser key 발급완료

63 2-3. Google Maps JavaScript API v3 으로웹어플리케이션만들기 이제 Google Mpas 기능의웹어플리케이션을만들기위하여다음과정을따라가도록하겠 습니다. 다음 [ 그림 2-15] 의 BigProject -> assets 를마우스오른쪽버튼으로클릭합니다. [ 그림 2-15] BigProject -> assets [ 그림 2-16] 파일생성메뉴 위의 [ 그림 2-16] 처럼 New -> Other 를선택하여파일생성을위한대화상자를띄웁니다

64 [ 그림 2-17] 파일생성을위한대화상자 위의 [ 그림 2-17] 처럼 General -> File 선택후 Next> 를클릭합니다. [ 그림 2-18] 파일이름입력 위의 [ 그림 2-18] 처럼 File name 란에 maps.html 을입력후 Finish 를클릭합니다

65 [ 그림 2-19] maps.html 을띄운 Eclipse 내장브라우저 maps.html이생성되면이파일을보여주는 Eclipse 내장브라우저가자동으로뜹니다. maps.html을편집하기위해 maps.html을오른쪽마우스버튼으로클릭합니다. 그리고 Open With -> Text Editor을선택합니다. 그러면 maps.html을편집할수있는 Text Editor가뜹니다. 아래 [ 그림 2-20] 과같이 maps.html에코드 [2-1] 을입력합니다. [ 그림 2-20] maps.html 을편집할수있는 Text Editor

66 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% body { height: 100%; margin: 0; padding: 0 #map_canvas { height: 100% </style> <script type="text/javascript" src=" 앞서 _ 발급받은 _ 키를 _ 여기에 _ 복사해 _ 넣으세요 &sensor=true"> </script> <script type="text/javascript"> var _map = null; var _lastpos = null; function initialize() { var arr_param = getparameter(); setmap(arr_param[0], arr_param[1], arr_param[2], arr_param[3]); function getparameter() { var parameter = location.search; var arr_param = null; if(parameter!= null && parameter!= "") arr_param = parameter.substring(1).split(","); else arr_param = new Array(); if(arr_param[0] == null arr_param[0] == "") arr_param.push(" "); if(arr_param[1] == null arr_param[1] == "") arr_param.push(" "); if(arr_param[2] == null arr_param[2] == "") arr_param.push("16"); if(arr_param[3] == null arr_param[3] == "") arr_param.push("0"); return arr_param; function setmap(latitude, longitude, zoom, type) { type = getmaptype(type); var mapoptions = { center: new google.maps.latlng(number(latitude), Number(longitude)),// , ), zoom: Number(zoom),//8, maptypeid: type ; _map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions); setmarker(createpoly(), mapoptions.center); //_lastpos = mapoptions.center; function getmaptype(type) { var ret; if(type == 'ROADMAP' type == "0") ret = google.maps.maptypeid.roadmap; else if(type == 'SATELLITE' type == "1") ret = google.maps.maptypeid.satellite; else if(type == 'HYBRID' type == "2") ret = google.maps.maptypeid.hybrid; else if(type == 'TERRAIN' type == "3") ret = google.maps.maptypeid.terrain; else ret = google.maps.maptypeid.roadmap; return ret; function createpoly() { var polyoptions = { strokecolor: '#000000', strokeopacity: 1.0, strokeweight: 3 var poly = new google.maps.polyline(polyoptions); poly.setmap(_map); return poly; function setmarker(poly, pos) { var path = poly.getpath(); path.push(pos); var marker = new google.maps.marker({ position: pos, title: '#' + path.getlength(), map: _map ); function setpath(latitude, longitude, zoom, type) { var currpos = new google.maps.latlng(number(latitude), Number(longitude)); if(_lastpos!= null) { var flightplancoordinates = [ _lastpos, currpos ]; var flightpath = new google.maps.polyline({ path: flightplancoordinates, strokecolor: "#FF0000", strokeopacity: 1.0, strokeweight: 2 ); flightpath.setmap(_map); _lastpos = currpos; _map.setcenter(_lastpos); </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> [ 코드 2-1] maps.html

67 [ 앞서 _ 발급받은 _ 키를 _ 여기에 _ 복사해 _ 넣으세요 ] 부분에이전절에서발급받은 Google API 키를복사하여대체합니다. 이제 Eclipse의내장브라우저를통하여 maps.html을실행시켜봅니다. 만약브라우저를닫았다면 maps.html을오른쪽마우스버튼으로클릭합니다. 그리고 Open With -> Web Browser로다시실행할수있습니다. [ 그림 2-21] maps.html 실행화면 maps.html 에기본위치가필자가일하고있은누리꿈스퀘어의위도와경도로되어있어해 당하는위치의지도가표시됨을볼수있습니다. 이제원하는위치의위 / 경도를입력하여지도를이동시켜보겠습니다. 웹브라우저로 로접속하여원하는지역을검색한후, 지도의원하 는공간을클릭하면왼쪽상단에위도와경도가희미하게표시됩니다. [ 그림 2-22] 위 / 경도알아내기

68 위도와경도를다음과같이 maps.html 뒤에 Parameter 로넘깁니다. (xxx 부분은사용자마다다릅니다.) file:///xxx/workspace/bigproject/assets/maps.html? , 위의위도와경도는필자가살고있는집의위도와경도입니다. 실행시켜보면다음 [ 그림 2-23] 과같이해당위 / 경도에해당하는지도가표시되는것을볼 수있습니다. (Parameter 부분에공백이들어가면안됩니다.) [ 그림 2-23] 위 / 경도를 Parameter 로넘긴모습 다음은확대 / 축소값을 Parameter 로넘겨보겠습니다. 허용되는값은 1~21 입니다. 값이클수록확대되어보입니다. file:///xxx/workspace/bigproject/assets/maps.html? , ,18 [ 그림 2-24] 확대 / 축소값을 Parameter 로넘긴모습

69 다음은지도의타입을 Parameter 로넘겨보겠습니다. 허용되는값은 0~3 또는 ROADMAP, SATELLITE, HYBRID, TERRAIN 입니다. 다음과같이 1 또는 SATELLITE 를입력하면위성사진모양의지도가표시됩니다. file:///xxx/workspace/bigproject/assets/maps.html? , ,18,1 [ 그림 2-25] 지도의타입으로 1 또는 SATELLITE 를입력 아래그림들을보면서각지도의타입이어떻게보이는지보겠습니다. [ 그림 2-26] 2 또는 HYBRID, 위성사진 + 정보 [ 그림 2-27] 3 또는 TERRAIN, 지형표시

70 2-4. 새로운 Activity 를만들고 WebView 를이용하여 Google Map 띄우기 이제앞절에서만든웹어플리케이션을 Android App에심어보도록하겠습니다. 우선웹어플리케이션을표시할새로운 Activity를만들겠습니다. 다음그림들을따라가며실습을진행하도록하겠습니다. ( 아래그림들처럼 fragment_main.xml을복사해서 mymap_activity.xml을만들어도되고, New -> File응이용하여 [ 코드 2-2] 처럼 mymap_activity.xml을새로생성하셔도됩니다.) [ 그림 2-28] fragment_main.xml 을복사 ( 오른쪽마우스버튼으로클릭후 Copy) [ 그림 2-29] layout 폴더에붙여넣기 ( 오른쪽마우스버튼으로클릭후 Paste)

71 [ 그림 2-30] 복사할파일이름을설정하는화면 [ 그림 2-31] mymap_activity.xml 로파일이름설정후 OK 클릭 이렇게하면 layout 안에 mymap_activity.xml이생성됩니다. New -> Other... -> XML -> XML File로 mymap_activity.xml을직접생성해도되지만, 기존파일을변경하는것이수월하므로이미만들어져있는 fragment_main.xml을복사한후수정을하도록하겠습니다

72 [ 그림 2-32] mymap_activity.xml 수정화면 <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <WebView android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> [ 코드 2-2] mymap_activity.xml 위의 [ 코드 2-2] 와같이 mymap_activity.xml 을수정합니다. 붉은색밑줄부분이수정할 코드부분입니다. WebView 를 Activity 에추가하면웹화면을띄울수있습니다. 웹화면이 Activity 의전체화면을차지하도록 match_parent 옵션을사용합니다. [ 그림 2-33] mymap_activity.xml 을등록하기위해 AndroidManifest.xml 을엽니다

73 위의 [ 그림 2-33] 처럼 AndroidManifest.xml 탭을선택하여편집화면으로들어갑니다. [ 그림 2-34] AndroidManifest.xml 편집화면 아래 [ 코드 2-3] 과같이붉은색밑줄부분을위의 [ 그림 2-34] 처럼코드상에추가합니다. <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=" package="org.hanium.bigproject" android:versioncode="1" android:versionname="1.0" > <uses-sdk android:minsdkversion="8" android:targetsdkversion="19" /> <uses-permission android:name="android.permission.internet"/> <application android:allowbackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/apptheme" > <activity android:name="org.hanium.bigproject.mainactivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> <activity android:name=".mymapactivity"></activity> </application> </manifest> [ 코드 2-3] AndroidManifest.xml 위의 [ 코드 2-3] 처럼 App 내에서인터넷접근을위해권한을설정하고, 새로생성된 mymap_activity.xml 을로드하기위해만들 Class 인 MyMapActivity 를설정합니다

74 이제 MyMapActivity Class 코드를작성하기위한 MyMapActivity.java 파일을생성합니다. [ 그림 2-35] MyMapActivity.java 파일을생성하기위한메뉴선택 BigProject -> src -> org.hanium.bigproject 를오른쪽마우스버튼으로클릭합니다. 그리고 New -> Class 을클릭하면아래 [ 그림 2-36] 과같이대화상자가뜹니다. [ 그림 2-36] MyMapActivity 입력후 MyMapActivity.java 파일생성을위해 Finish 클릭

75 [ 그림 2-37] 새롭게생성된 MyMapActivity.java 파일 package org.hanium.bigproject; import android.os.bundle; import android.support.v4.app.fragmentactivity; import android.webkit.webview; public class MyMapActivity extends FragmentActivity { private WebView _webview; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.mymap_activity); _webview = (WebView) findviewbyid(r.id.webview); _webview.getsettings().setjavascriptenabled(true); _webview.loadurl("file:///android_asset/maps.html"); [ 코드 2-4] MyMapActivity.java 위의 [ 코드 2-4] 와같이 MyMapActivity.java를작성합니다. MyMapActivity Class의 oncreate Method 안에서 mymap_activity를로드합니다. 그리고 WebView를통하여앞서만든 maps.html을 file:///android_asset/maps.html 과같은주소로불러들입니다. Target Device 마다경로가다를수있으므로절대경로가아닌이와같은상대경로를써야실제 Device 뿐아니라어디서도정상적으로작동합니다. 다음코드는웹어플리케이션안에작성되어있는 JavaScript 가실행되도록허용합니다. _webview.getsettings().setjavascriptenabled(true); 다음으로, 새로운 MyMapActivity 와 mymap_activity 를띄우기위해 MainActivity 를수정합니 다. 이미만들어놓은버튼을수정하여버튼을클릭하면새로운창이뜨도록하겠습니다

76 package org.hanium.bigproject; import android.content.intent;... 중략... public class MainActivity extends ActionBarActivity {... 중략... /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment {... public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { View rootview = inflater.inflate(r.layout.fragment_main, container, false); _context = rootview.getcontext(); Button btnstart = (Button) rootview.findviewbyid(r.id.btnstart); btnstart.setonclicklistener(new OnClickListener() { public void onclick(view v) { //Toast.makeText(_context, "Button Click!!!", Toast.LENGTH_SHORT).show(); Intent myintent = new Intent(v.getContext(), MyMapActivity.class); startactivity(myintent); ); return rootview; [ 코드 2-5] MainActivity.java 또는 Empty Activity 를생성하여 <activity_main 에작업하는경우 > 다음과같이 MainActivity Class 의 oncreate Method 를수정합니다. <activity_main 에작업하는경우 > package org.hanium.bigproject; import android.content.intent;... 중략... public class MainActivity extends Activity { private Context _context = protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); _context = getapplicationcontext(); Button btnstart = (Button) findviewbyid(r.id.btnstart); btnstart.setonclicklistener(new OnClickListener() { public void onclick(view v) { //Toast.makeText(_context, "Button Click!!!", Toast.LENGTH_SHORT).show(); Intent myintent = new Intent(v.getContext(), MyMapActivity.class); startactivity(myintent); );

77 onclick Method 안에서 Toast 메시지를띄우던부분을 // 로주석처리하거나삭제하고, 대신다음과같은코드를추가하여버튼클릭시 MyMapActivity Class 가불리도록합니다. Intent myintent = new Intent(v.getContext(), MyMapActivity.class); startactivity(myintent); 위의 Intent 는호출하는상황을 Android 에넘겨지능적으로판단한후적당한동작을취하 도록하는메커니즘입니다. 전화번호를입력하면다이얼이, 웹주소를입력하면기본브라 우저가뜨는등의동작을수행하는중요한기능을수행합니다. 여기서는우리가직접만든 Class 를넣었으므로 Class 를불어새창을띄우는동작을할 것입니다. Intent 를사용하기위하여다음코드처럼 Intent 를 Import 합니다. import android.content.intent; 마지막으로 strings.xml 을열어 한이음 BIG 프로젝트 를 Maps Start!!! 로변경합니다. 그리고에뮬레이터를실행시키면다음 [ 그림 2-38] 과같이 App 이실행됩니다. [ 그림 2-38] Map 기능이추가된 App 실행

78 2-5. GPS 와연결하여현재위치를표시하고, 나의이동경로표시하기 Android Device 의 GPS 센서의값을실시간으로읽어들여앞서만든웹어플리케이션에 넘기면, 실시간으로나의위치와이동경로를표시할수있도록 maps.html 을만들어놓았 습니다. 이러한기능을추가하며이번절을마지막으로실습을마무리하게됩니다. MyMapActivity.java 를열어다음붉은색부분의코드를추가하도록하겠습니다. package org.hanium.bigproject;... 중략... import android.location.location; import android.location.locationlistener; import android.location.locationmanager; import android.content.context; import android.widget.toast; public class MyMapActivity extends FragmentActivity { private WebView _webview; private int _zoom = 17; private int _type = 0; //0:ROADMAP, 1:SATELLITE, 2:HYBRID, 3:TERRAIN public void oncreate(bundle savedinstancestate) {... 중략... startlocationservice(); private void setpath(double latitude, Double longitude, int zoom, int type) { _webview.loadurl("javascript:setpath(" + latitude + ", " + longitude + ", " + zoom + ", " + type + ")"); private class GPSListener implements LocationListener { public void onlocationchanged(location location) { String msg = "Latitude : " + location.getlatitude() + "\n Longitude : " + location.getlongitude(); Toast.makeText(getApplicationContext(), msg, Toast.LENGTH_SHORT).show(); setpath(location.getlatitude(), location.getlongitude(), _zoom, _type); public void onproviderdisabled(string provider) { public void onproviderenabled(string provider) { public void onstatuschanged(string provider, int status, Bundle extras) { private void startlocationservice() { LocationManager manager = (LocationManager) getapplicationcontext().getsystemservice(context.location_service); GPSListener gpslistener = new GPSListener(); long mintime = 3000; float mindistance = 0; manager.requestlocationupdates(locationmanager.gps_provider, mintime, mindistance, gpslistener); Toast.makeText(getApplicationContext(), "GPS 검색중...", Toast.LENGTH_LONG).show(); [ 코드 2-6] MyMapActivity.java 에코드추가

79 setpath Method 는앞서만들어놓았던웹어플리케이션의동일한이름의함수, setpath 를 호출합니다. 해당 JavaScript 함수는이전위치에서현재위치까지붉은색선을그리는기능을합니다. GPSListener Class는 LocationListener 인터페이스를구현하며, 현재위치가변경될때마다자동으로호출되는 onlocationchanged Method를구현합니다. onlocationchanged에서 setpath를호출하므로, 위치가변경될때마다마지막위치에서현위치까지붉은색선을그리게됩니다. startlocationservice Method 는 GPS 에대한시스템객체를얻어와 GPS 를검색하고 GPS 서비스를시작하는역할을합니다. oncreate Method 에서는마지막에 startlocationservice Method 를호출, MyMapActivity 가 생성됨과동시에지금까지구현한기능을시작하도록합니다. 마지막으로 GPS 접근이가능하도록 Manifest 에권한을추가합니다. 앞의 [ 그림 2-33], [ 그림 2-34], [ 코드 2-3] 을참고하여다음 [ 코드 2-7] 과같이수정합 니다. <?xml version="1.0" encoding="utf-8"?>... 중략... <uses-permission android:name="android.permission.internet"/> <uses-permission android:name="android.permission.access_fine_location"/>... 중략... </manifest> [ 코드 2-7] AndroidManifest.xml 에권한코드추가 이제에뮬레이터를실행시키면다음 [ 그림 2-39] 와같이 App 이실행되지만, 현재의위치 를표시하지는못합니다. 이는에뮬레이터에는 GPS 를수신하는기능이없기때문입니다. [ 그림 2-39] App 실행

80 에뮬레이터에서 GPS의기능을테스트하기위해다음 [ 그림 2-40] 과같이 DDMS를사용하겠습니다. DDMS를열고왼쪽 Devices 영역에서현재실행중인에뮬레이터를선택한후, 오른쪽작업영역에서 Emulator Control 탭을선택합니다. 그러면 Device에 GPS가수신하는것과같이위 / 경도를전송할수있습니다. [ 그림 2-40] DDMS 를이용한 GPS 기능테스트 ( 에뮬레이터연결시에만활성화 ) 그럼이제위의 [ 그림 2-40] 의하단붉은색박스영역에다음 [ 그림 2-41] 과같이값을입력해보도록하겠습니다. 여기서는필자의집위 / 경도인 과 을입력해보겠습니다. Send를클릭합니다. ( 에뮬레이터를사용할때만입력란이활성화됩니다. 실제 Device 연결시에는활성화되지않습니다.) [ 그림 2-41] 위 / 경도값을에뮬레이터로전송한화면 위의 [ 그림 2-41] 의좌측에뮬레이터에해당위치가중앙에표시되는것이보입니다

81 이제위 / 경도를조금씩변경시키며위치이동에따라어떻게이동경로가표시되는지보도 록하겠습니다. 다이아몬드를한번그려볼까요? [ 그림 2-42] 과 을입력 [ 그림 2-43] 과 을입력 [ 그림 2-44] 과 을입력

82 이제아래 [ 그림 2-45] 처럼원래처음입력했던좌표를입력하면아래 [ 그림 2-46] 과같 이마름모가완성됩니다. [ 그림 2-45] 처음좌표인 과 을입력 [ 그림 2-46] 에뮬레이터에서마름모완성

83 마지막으로, 시작위치를표시하는마커를삽입해보겠습니다. 아래 [ 그림 2-47] 처럼 DDMS 를 Close 하거나, Java 버튼을클릭하여작업화면으로다시 돌아옵니다. [ 그림 2-47] DDMS 에서작업화면으로돌아오기 maps.html 편집창을열어다음과같이코드를추가합니다. <!DOCTYPE html> <html> <head>... 중략... function setpath(latitude, longitude, zoom, type) { var currpos = new google.maps.latlng(number(latitude), Number(longitude)); if(_lastpos!= null) { var flightplancoordinates = [ _lastpos, currpos ]; var flightpath = new google.maps.polyline({ path: flightplancoordinates, strokecolor: "#FF0000", strokeopacity: 1.0, strokeweight: 2 ); flightpath.setmap(_map); else { setmarker(createpoly(), currpos); _lastpos = currpos; _map.setcenter(_lastpos); </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> [ 코드 2-8] maps.html 에코드추가 이미마커를그릴수있는 Method인 setmarker를만들어놓았으므로, 적당한위치에서호출을해주기만하면됩니다. 위의붉은색부분은마지막위치를나타내는변수인 _lastpos가 null일때, 즉처음시작시에실행되므로, 위의붉은색부분과같이코드를추가하면처음시작위치에마커를그릴수있습니다

84 에뮬레이터로실행을시켜보면아래 [ 그림 2-48] 과같이시작위치에붉은색마커가표시 됩니다. [ 그림 2-48] 시작위치에마커를표시한모습 이제모든실습을마쳤습니다. 그런데, 개발을진행한실내에서는창문쪽으로바짝붙지않는이상 GPS 수신이불가능한경우가대부분입니다. 우리가개발한 App을실제 Android Device에담아 GPS 수신이가능한야외에서테스트를해보도록하겠습니다

85 2-6. 스마트폰에 App 을담아서야외에서직접실행시켜보기 다음그림들은필자가출근길에직접스마트폰에서실행시킨화면을캡처한이미지입니다. GPS가꺼져있다면 GPS를켜고, GPS 수신이가능한장소에서, BigProject App을실행시켜보겠습니다. ( 화면을회전시키면경로가초기화되므로테스트하는동안은자동화면회전을꺼둡니다.) [ 그림 2-49] 도보후버스로갈아타고지하철역까지이동한경로 [ 그림 2-50] 다양한유형의지도로본화면 ( 왼쪽부터위성, 위성 + 라벨, 지도 + 지형 )

86 에필로그 지금까지실습을통하여 App 을만들어보고, 에뮬레이터나실제스마 트폰에서구동시켜보는것을따라하며학습을하였습니다. 여기까지 오시느라수고많으셨습니다. 앞서말씀드린바와같이본가이드에서제시한 App 은학습을위하여만들어진 App 이라, 상용수준의 App 과비교하기에는여러가지문제점이있습니다. 여기서, 몇가지문제점을제시하고여러분스스로그문제를해결해나갈수있도록숙제 로남기도록하겠습니다. 1. 위치정보를저장하는기능이없기때문에화면회전시지도가다시그려지며, 지금까지표시했던경로가사라집니다. 2. 시작시 GPS 기능이켜져있지않을경우이를감지하지못합니다. 3. 종료시 GPS를제어하는시스템객체를해제또는반납하지않기때문에 Toast 메시지가남아있는경우가있습니다. 4. 짧은간격의실시간위치탐색으로인하여배터리가많이소모되는문제가있습니다. 5. GPS가수신되지않는실내에서위치탐색이불가능합니다. 6. 그밖의여러가지상황의오류에대한처리가없습니다. 위와같은문제를여러분께서스스로학습을하며추가해나가다보면, 보다멋진 App 이완 성되지않을까기대해봅니다. 원래본가이드에서제시하고자했던 App은 Google Play Service 모듈의 Google Maps Android API v2를이용한 App 개발이었습니다. 그런데새로운 ADT와의궁합문제인지제대로실행되지않아 JavaScript를이용한 Google Maps JavaScript API v3으로변경하여제작하게되었습니다. 또한다른센서들을이용한만보기기능, SQLite를이용한위치정보저장등을목표로하였습니다. 가이드의품질에대해서도아쉬움이많이남고, 시간관계상모든기능을담을수없었던 점이안타깝습니다만여러분께서위의기능을필자보다더뛰어난능력을길러멋지게추가 해주시리라믿습니다. 좋은프로그램으로학생들에게 IT에대한소중한경험의장을마련해주신미래창조과학부와정보통신산업진흥원, 정보산업연합회관계자분들, 여러가지어려운현실속에서도미래를위해열정을쏟아내고계시는한이음의대학생멘티분들, 학생들을위해여많은시간과노력을열정적으로베풀어주고계시는멘토기술사님들과기술사님의가족분들께진심으로감사의마음을전합니다. 컴퓨터시스템응용기술사박찬혁