Flutter 카카오 네비게이션 앱으로 길안내하기 (Android)

 

Kakao API를 활용하면 카카오 로그인, 카카오톡 소셜, 메시지, 지도/로컬, 카카오내비, 톡캘린더 등 소셜통합 API를 사용할 수 있다.

그 외에도 카카오싱크, 카카오톡 채널, 카카오페이, 카카오 키워드 광고, 푸시 알림, 카카오 모먼트 등의 비즈니스 API.

검색, KoGPT, Karlo 등 인공지능 API 역시 활용할 수 있다.

 

이러한 API를 활용하기 위해서는 우선 Kakao Developers 홈페이지에서 내 앱을 등록하는 절차가 필요하다.

 

오늘은 카카오 API 중 네비게이션을 연동하는 방법에 대해서 정리해 보자.

 

1. 카카오 개발자 페이지 접속하기

 

먼저 Kakao Developers 페이지에 접속해야 한다.

아래 링크를 참고하자.

 

https://developers.kakao.com/

Kakao Developers

 

접속 후 우측 상단의 '로그인' 버튼을 눌러 로그인을 진행한다.

 

이후 '내 애플리케이션'을 클릭한다.

 

 

이제 '애플리케이션 추가하기' 버튼을 눌러주자.

 

그러면 앱 아이콘, 앱 이름, 사업자명, 카테고리 및 약관동의가 필요하다.

여기서 앱 이름과 사업자명, 카테고리는 필수정보다.

 

 

필요한 정보를 작성하고 '저장' 버튼을 누르면 새로운 애플리케이션이 추가된 것을 확인할 수 있다.

 

추가된 애플리케이션을 클릭하자.

 

그러면 이렇게 앱 키가 나오는 것을 확인할 수 있다.

각자 발급받은 키를 유출되지 않게 잘 관리하자.

 

 

뭐라고? 유출되지 않게 잘 관리하라 해놓고 나는 유출했다고 비웃고 있는가?

괜찮다. 해당 키는 이 글을 쓰고 바로 지웠다.

각자 키는 각자가 발급해서 쓰자. ^^

 

2. Android 플랫폼 등록하기

 

Android에서 네이티브 앱 키 및 JavaScript 앱 키를 활용하여 API를 쓰려면 플랫폼 설정이 필요하다.

이를 위해서 좌측의 '플랫폼', 혹은 플랫폼 탭의 '플랫폼 설정하기'를 클릭하자.

 

 

Android 등록을 위해서 'Android 플랫폼 등록'을 클릭한다.

 

 

그러면 아래와 같이 패키지명과 키 해시를 입력해야 한다.

패키지명과 키 해시, 둘 중 하나라도 틀리면 API 호출에 실패한다.

물론 REST API 호출방식 말고.

 

3. 패키지명 및 키 해시 값 구하기

 

이제 패키지명과 키 해시를 찾아서 넣어야 한다.

패키지명은 최초 모바일 애플리케이션 생성 시 이름을 지어주면서 정해진다.

그러나 내가 원하는 대로 변경 역시 가능하다.

 

<Flutter 패키지명 변경하기>

플러터(Flutter)에서 Android Package 이름 설정

 

자, 패키지명은 해결되었고..

키 해시를 받아오려면 준비물이 두 가지가 필요하다.

KeyTool, Open SSL.

 

이 포스팅하려고 내가 글 2개를 미리 적었다. 🤣

각각 아래의 링크를 통해 확인할 수 있다.

 

<KeyTool 설치하기>

Keytool이란? 설치/환경변수 등록 및 확인 방법

 

<OpenSSL 설치하기>

flutter에서 openssl 설치하기 (Android)

 

 

모든 준비물이 준비되었다면, 이제 Flutter의 Terminal에 아래 명령어를 입력하자.

단, 릴리즈 키 해시는 '<RELEASE_KEY_ALIAS>', '<RELEASE_KEY_PATH>;'  내부에 각각 키의 이름, 키의 경로를 기입해야 정상적으로 동작한다.

디버그(Debug) 키 해시
keytool -exportcert -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

릴리즈(Release) 키 해시
keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | PATH_TO_OPENSSL_LIBRARY\bin\openssl base64

 

Terminal에 해당 값을 입력하면 아래처럼 특정 키 해시가 나온다.

 

 

그런데 만약 Google Play Console 앱 서명으로 사용한다면, 아래의 링크를 확인하여 진행해 보자.

나도 아직 못해봐서 당당하게 적을 수 없다.

https://developers.kakao.com/docs/latest/ko/android/getting-started#before-you-begin-add-key-hash-using-console

Kakao Developers

 

4. Android 플랫폼 등록 마무리하기

 

아래처럼 내 앱의 패키지명 및 키 해시를 등록한다.

키 해시가 여러 개라면 엔터를 통한 줄 바꿈 후 이어서 작성한다.

 

 

5. 소스 작성

이제 거의 다 왔다.

 

먼저 API를 쓰기 전 초기화가 필요하다.

main 함수에서 runApp 전에 초기화를 하는 소스다.

 

${YOUR_NATIVE_APP_KEY} 부분에는 내 네이티브 키.

${YOUR_JAVASCRIPT_APP_KEY} 부분에는 내 자바스크립트 키를 넣어야 한다.

그래야 각 상황에서 기능 호출이 가능하다.

 

void main() {
  // runApp() 호출 전 아래 메서드 호출을 해야
  // 웹 환경에서 카카오 로그인을 정상적으로 완료 가능.
  WidgetsFlutterBinding.ensureInitialized();

  // runApp() 호출하기 전 Flutter SDK 초기화 필요
  KakaoSdk.init(    
    nativeAppKey: '${YOUR_NATIVE_APP_KEY}',
    javaScriptAppKey: '${YOUR_JAVASCRIPT_APP_KEY}',
  );
  runApp(const MainApp());
}

 

아래의 소스는 카카오 내비가 설치되어 있는지를 체크하고, 카카오내비 앱이 미설치 되었을 시 해당 앱 다운로드 페이지로 이동하는 소스다.

 

onTap: () async {
  debugPrint(await KakaoSdk.origin);
  bool result = await NaviApi.instance.isKakaoNaviInstalled();
  if (result) {
    print('카카오내비 앱으로 길안내 가능');
  } else {
    print('카카오내비 미설치');
    // 카카오내비 설치 페이지로 이동
    launchBrowserTab(Uri.parse(NaviApi.webNaviInstall));
  }
},

 

마지막으로 좌표를 기반으로 내비게이션 길안내 기능으로 연결되는 소스다.

 

onTap: () async {
                  if (await NaviApi.instance.isKakaoNaviInstalled()) {
                    // WGS84 좌표계 사용하여, 카카오내비 앱으로 길 안내하기.

                    await NaviApi.instance.navigate(
                      destination: Location(
                          name: '카카오 판교오피스', x: '127.108640', y: '37.402111'),
                      // 경유지 추가
                      viaList: [
                        Location(
                            name: '판교역 1번출구', x: '127.111492', y: '37.395225'),
                      ],
                      option: NaviOption(coordType: CoordType.wgs84),
                    );
                  } else {
                    // 카카오내비 앱 설치 링크로 이동
                    launchBrowserTab(Uri.parse(NaviApi.webNaviInstall));
                  }
                },

 

위 소스들은 클릭 시 이벤트이므로 Inkwell 혹은 GestureDetactor 등을 활용해서 onTap 함수 등에 배치해서 써보면 되겠다.

앱을 실행해서 작동시켜 보면 기능이 잘 수행되는 것을 확인할 수 있다.

 

그런데!!!

만약, '카카오내비 인증에 실패하였습니다.'라고 에러가 뜰 수 있다.

그렇다면 해시 키 값이 틀렸을 수 있다.

 

hash key 값을 정확히 적었는데도 에러가 난다면, 아래 소스를 활용해 보자.

debugPrint(await KakaoSdk.origin);

 

이렇게 하면 또 다른 해시 값이 나오는데, 이 값을 Android 플랫폼 등록에 적용시켜 보자.

정상적으로 동작할 가능성이 있다.

 

이유를 찾아보니 OpenSSL의 버전이나 기타 환경에 따라서 해시 값이 다르게 나올 수 있다고 하더라(?)

근데 KakaoSdk.origin 명령어를 쓰면 어쨌든 카카오가 요구하는 해시 값을 뽑아낼 수 있나 보다.

 

여기까지, 카카오 API를 활용한 네비게이션 길 안내받기에 대한 정리를 마친다.

 

<Flutter 터미널 명령어 모음>

flutter doctor, clean 등 Terminal 명령어 모음.