시작하며

시작하기 전

카카오 지도 API 사용 시 안드로이드 스튜디오 AVD 에뮬레이터 실행이 안된다...😭
즉, 가상기기가 아닌 실제 안드로이드 디바이스를 연결해야만 한다.
그러니 혹시 이 포스트를 참고하며 카카오 지도 API 연동을 시도하실 분들이 계시다면,
실제 기기를 먼저 준비해주시길 추천드린다.

프로젝트 개요

개발 툴은 VS Code와 Android Studio.
React Native를 이용해 안드로이드 앱을 개발하는 프로젝트이다.

카카오지도 API

현재 진행하고 있는 프로젝트에서 지도를 load 하고, 주소를 검색하고 선택한 점포에 대해 위도와 경도를 끌어와야 하는 기능이 필요했다.
그래서 지도 API를 연동하기로 했다.
이 API를 연동하게 되면 나의 프로젝트 안에 카카오 지도가 구현되는 것이다.
처음 연결하는 것이다 보니 시간이 오래 소요됐는데...
삽질하게 됐던 과정들은 모두 가지치기 하고 결과론적으로 성공적이었던 내용만 담아보려 한다.

1. 애플리케이션 등록

1) 카카오 developers에서 애플리케이션 추가

카카오 개발자 사이트에서 로그인을 한 뒤 상단의 '내 애플리케이션'에서 카카오 API를 연동할 프로젝트를 추가해보겠다.

'내 애플리케이션' 을 누르면 위와 같은 버튼이 나온다.
애플리케이션 추가하기 를 누른 다음,

위 내용을 채워준 뒤 저장을 하면 된다.
그러면 '내 애플리케이션' 에 방금 작성한 애플리케이션이 추가된 걸 확인할 수 있을 것이다.
그걸 클릭하면,

이처럼 자동으로 발급되는 앱 키를 확인할 수 있다.

2) 안드로이드 플랫폼 등록

앱 키를 알려주는 화면에서 스크롤을 조금 내리면,

플랫폼을 설정하라는 화면이 나온다.

안드로이드, iOS, Web의 플랫폼을 설정할 수 있는데
우리는 안드로이드를 등록해보도록 하겠다.

안드로이드 플랫폼을 누르면,

이런 내용을 채운 뒤 저장을 하면 되는데...

패키지명은 안드로이드 스튜디오에서 바로 확인하면 되지만,
키 해시가 뭔지 나는 생소했고 좀 어려웠기 때문에...
이 부분은 따로 적어보도록 하겠다.

2. 키 해시 등록

1) 키해시란?

우선, 카카오 자체에서 제공하는 키 해시에 대한 문서를 확인하길 추천한다.

설명하자면, 나는 카카오 API를 사용할 건데
카카오 입장에서는 내가 카카오가 허가된 대상인지 아닌지 확인하는 과정이 필요할 것이다.
그 과정에서 사용되는 것이 키 해시 이다.

쉽게 말하면 API를 사용하기 위한 신분증이라고 이해하면 된다.

2) openssl 설치

터미널에서 키 해시를 구하는 방법도 있고 코드로 구하는 방법도 있지만,
나는 터미널에서 디버그 키 해시와 릴리즈 키 해시를 구할 예정이다.

이 과정에서 openssl 설치가 필수이기 때문에, openssl-for-windows 링크에 접속해 사전에 설치해주면 된다.

링크에 접속하면 위와같은 화면이 나오는데, 이 중 본인의 환경에 맞는 zip 파일을 설치하면 된다.

설치한 뒤 본인이 설치한 openssl이 저장된 디렉토리를 확인해둔다.
나의 경우 다음 디렉토리였다.

2) 디버그 키해시

두 가지 키해시 중 "디버그" 키해시는,
프로젝트를 처음 생성하거나 디버그할 때 안드로이드 스튜디오에서 개발 환경에 맞게 자동으로 생성해준 인증서에서 해시한 값이다.

이제 "C:\Users\USER.android\"의 경로에서 debug.keystore가 있는지 확인해준다.

해당 파일이 있는 것이 확인 됐다면 다음 명령어를 이용해 해당 디렉토리로 이동한다.

cd C:\Program Files\Android\Android Studio\jre\bin

단, 사용자의 환경에 따라 절대적으로 이 경로가 일치하는 건 아니다.
나의 경우, Scoop을 이용해 Android Studio를 설치했기 때문에

의 경로를 입력해야 했다.
각자 환경에 따라 android studio 디렉토리를 찾아보며 수정하면 될듯하다.

이렇게 위의 명령어로 해당 디렉토리로 이동했다면

keytool -exportcert 
-alias androiddebugkey 
-keystore C:\Users\User\.android\debug.keystore 
-storepass android -keypass android 
| C:\Users\USER\openssl-0.9.8k_X64\bin\openssl sha1 -binary 
| C:\Users\USER\openssl-0.9.8k_X64\bin\openssl base64

다음 명령어를 입력하면 된다.
본인의 환경에 따라 debug.keystore의 디렉토리, openssl의 디렉토리는 수정하면 된다.

그러면 키해시 값을 바로 띄워준다!

3) 릴리즈 키해시

"릴리즈" 키해시는,
스토어에 앱을 배포하기 위해 생성한 릴리즈 인증서로부터 해시한 값이다.

터미널에 아래 사항을 입력해주면 된다.

keytool -exportcert
-alias "ptect"
-keystore ptect.jks
| C:\Users\USER\openssl-0.9.8k_X64\bin\openssl sha1 -binary
| C:\Users\USER\openssl-0.9.8k_X64\bin\openssl base64

alias 이후에는 RELEASE KEY ALIAS라고 릴리즈 키의 별칭,
keystore 이후에는 REALEASE KEY PATH라고 키스토어의 경로가 들어가면 된다.

3. 카카오 SDK 설치

1) SDK 설치

이제 '내 애플리케이션' 추가가 완료되었다면,
API를 본격적으로 설치해볼 것이다.

카카오 맵 API 공식 가이드 페이지에 접속하여 SDK를 설치한다.

위 링크에 접속한 뒤 Download SDK를 해주면 된다.
설치를 완료한 뒤 zip 파일 압축을 해제한다면

다음 내용이 들어있음을 확인할 수 있다.

2) SDK 앱에 넣기

실제 나의 디렉토리를 캡처한 내용이다.
위 사진처럼 파일을 넣어두면 된다.

윗 단계에서 압축해제했을 때 보이는 폴더와 파일을 확인해보자.

libDaumMapAndroid.jar 파일은 /app/libs/의 디렉토리에,
arm64-v8a , armeabi , armeabi-v7a 폴더들은 /app/source/main/jniLibs 의 디렉토리에 모두 넣어주면 된다.

4. AndroidManifest.xml 수정

1) permission 추가

당연히 알겠지만... AndroidManifext.xml은 \android\app\src\main 디렉토리 하에 있다!

permission을 부여하는 uses-permission 태그는 manifest 하에 바로 작성하면 된다.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

2) appkey 추가

다음으로는 appkey를 추가해야 한다.

이 단계는 manifest 바로 하위 단계가 아니라, manifest 아래의 application 하에 작성해 주면 된다.
android:value에는 카카오 개발자 사이트 에서 추가한 애플리케이션의 네이티브 앱 키를 넣어준다.

<meta-data android:name="com.kakao.sdk.AppKey" android:value="네이티브 앱 키"/>

5. jar 파일 추가

1) build.gradle(:app)에 코드 수정

이제 실행 시 /app/libs에 넣어둔 jar가 실행될 수 있도록, build.gradle 파일을 수정해보자.

Android Studio의 Project Structure에서 jar dependency를 추가하는 방법도 있다고 하는데, 업데이트된 것인지 jar depencency를 추가하는 화면이 보이지 않아 직접 코드를 수정해주기로 하였다.

build.gradle이 여러 개 있을 수 있는데, 그 중 app의 하위 단계에 있는 파일을 선택하고
dependency 하위에 다음 코드를 추가한다.

implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation files('libs/libDaumMapAndroid.jar')

6. 지도를 불러와보자

이제 기본 세팅이 완료된 것이고, 각 프로젝트에 맞게 지도를 활용해주면 된다.
우선 아주 간단한 코드를 작성해 기초적으로 화면이 돌아가는지 확인해보겠다.

다음 두 코드는 Mapview를 띄우는 과정으로, 지도 화면이 보여지도록 하는 코드다.

1) layout : activity_main.xml

<!-- xml layout -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:background="@color/white"
xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/map_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

2) java : MainActivity.java

import net.daum.mf.map.api.MapView;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MapView mapView = new MapView(this);
        ViewGroup mapViewContainer = findViewById(R.id.map_view);
        mapViewContainer.addView(mapView);
    }
}

7. 완료!

내 디바이스에서 보여지는 화면이다.
여기에 마커를 추가하는 등 개인 커스텀을 해주면 되겠다.