지난화에서는 어떤 작업을 했는가
지난화에서는 Node를 이용해서 카카오 API를 호출해 보았다. 그리고 호출된 데이터를 네이버 클라우드 플랫폼 위의 우리 서버에, Strapi가 만들어준 API를 이용해서 DB에 저장하였다.
이번화에서는
- Android 앱에 카카오맵을 띄우고,
- 서버에 저장된 지도좌표를 이용해서 카카오맵 위에 마커를 찍을 것이다.
Android 프로젝트를 만들자
Android 프로젝트를 만드는 법은 모두 알 것이라고 생각하고 생략하겠다. 원하는 서비스에 맞게 프로젝트를 구성해주자. 전체 패키지명을 꼭 메모장에 저장해 놓자
KakaoDevelopers에서 Android 프로젝트를 등록하자
KakaoDevelopers로 접속하고 로그인한다. 오른쪽 상단의 내 이름을 클릭하면 내애플리케이션이라는 메뉴가 있다. 그 메뉴를 선택하고 나서 왼쪽 카테고리에 있는 설정 — 일반 부분을 선택하면 위와같은 창이 나온다.
일단 앱 키에 있는 네이티브 앱 키를 메모장에 복사해놓은다. 이후 밑에 있는 플랫폼 섹션에서 +플랫폼 추가를 선택한다. 거기서 나오는 플랫폼 체크에서 Android를 선택한다.
위와같은 창이 나올텐데, 패키지 명은 프로젝트 만들때 메모장 복사해놓은 것을 적는다.패키지명을 적으면 마켓 URL이 자동으로 생성된다.
이후 키 해시를 적어야하는데 가장 간단한 방법을 소개하겠다.
안드로이드 스튜디오에서 위 사진의 하단부에 있는 Terminal 부분을 선택한다. 그러면 명령어를 넣을 수 있는 곳이 나온다.
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64
위 명령어를 복사해서 넣어준다. 그러면 맨 마지막 줄에 대소문자, 숫자, 특수문자로 구성된 키가 나올 것이다. 그 키를 복사한 뒤 아까 KakaoDevelopers 플랫폼 추가란에 넣어준다.
우리가 넣은 것은 디버그 키일 뿐, 실제로 릴리즈 할 때는 릴리즈 키를 추가해야하고, 구글 플레이 스토어에서 만든 키를 따로 사용할 경우에는 그 키도 추가해 주어야 한다.
카카오 지도 SDK를 프로젝트에 추가하자
자 이제 사전 작업은 끝났다. 위의 홈페이지를 들어가자. 사실 카카오맵을 띄우기 위한 모든 과정은 위 홈페이지에 잘 나와있다. 하지만 실제로 SDK를 설치할 때, 경로가 다르게 나와있어서 이 포스팅을 참고하는게 더 정확할 것이다.
다운 받은 SDK를 압축을 풀어보자. libs 폴더 하위에 폴더 3개와 jar파일 1개 등 총 4개만 사용할 것이다. 이제 안드로이드 스튜디오 프로젝트로 돌아가보자
일단 상위에 프로젝트 구조가 Android로 되어있을 것이다. 그걸 Project 구조로 변경해준다(위 사진의 맨 위 빨간 박스 부분)
그리고 나서 app-libs 밑에 jar 파일만 넣어준다. 공식 설명 홈페이지에는 SDK 모든 파일을 넣으라고 하는데 그러면 파일을 찾질 못한다. 반드시 이 방법대로 진행하길 바란다.
이후 app — src — main 밑에 jniLibs라는 폴더를 만들고 그 하위에 SDK의 나머지 3개의 폴더를 복사해서 넣어준다. 그리고 프로젝트를 rebuild한다.
카카오 맵을 앱에 띄우자
자 위와 같이 Activity든 Fragment든 맵을 띄울 곳을 layout 층위로 선언해 놓는다.
이후 Activity라면 위의 코드를 넣는다. 3번째 줄에 map_view는 kotlin-android-extensions를 사용해서 findViewById 작업을 생략한 것이다.
만약 fragment라면 1번째 줄에 this에 getActivity를 넣으면된다.
프로젝트를 실행해보자. 정상적으로 맵이 올라온 것이 보일 것이다.
서버의 값으로 맵에 마커를 생성해보자
자 서버의 값을 불러오자. 보통 Android 에서는 Retrofit이라는 라이브러리를 활용해서 API를 호출한다(Retrofit 설치 및 사용방법은 여기서 다루기에 너무 길어지기 때문에 따로 공부하길 바란다)
서버의 값을 리스트 형태로 가지고 있다고 가정한다. 리스트를 foreach로 돌리고, 각 한개의 모델에서 마커를 생성해서 위에서 만든 mapView에다가 추가하면된다.
위의 코드는 디폴트 마커를 사용할 경우이다(커스텀도 물론 가능하다 / 카카오 공식 설명 홈페이지 참조)
2번째 줄에는 마커위에 나올 이름을 적어준다.
3번째 줄의 tag는 디폴트 마커를 사용할 경우 0으로 고정한다.
4번째 줄의 mapPoint는 좌표를 넣는 곳인데, GeoCoord로도 넣을 수 있고, pixel로도 넣을 수 있고, CongCoord 방식으로 넣을 수 있다. 우리는 카카오 서버로부터 x(longitude), y(latitude) 값을 저장했기 때문에 GeoCoord 방식으로 추가했다. x, y의 순서를 꼭 확인하길 바란다.
5번째 줄은 기본으로 제공하는 BluePin 마커 모양을 사용한다는 것이다.
6번째 줄은 마커를 클릭했을때, 기본으로 제공하는 RedPin 마커 모양이다.
7번째 줄에서 맨 처음 만든 카카오맵 객체에 마커를 추가한다.
자 이제 프로젝트를 실행하면 마커가 들어가 있는 것을 확인할 수 있다.
마무리
기본적으로 프로젝트에 쓰일 기반 작업은 끝냈다. 이제 여러분이 원하는 서비스를 기반 작업들 위에서 그리기만 하면된다.
개인적으로 만들 서비스에는 사실 기반작업이 더 필요하다. 아마 공통으로 사용될 수 있는 것은 구글 로그인(Firebase를 활용한) 정도 있을 것같다.
다음 포스팅은 구글 로그인 연동 혹은 현재 앱을 어떤 구조로 개발하고 있는 지 설명하는 포스팅이 될 것 같다.
