URI scheme으로 네이버, 카카오, 티맵 앱 길찾기 연동 방법

동기

하이브리드앱 프로젝트를 하던 중 네이버, 카카오, 티맵과 관련한 길찾기 기능이 필요하였고, URI scheme을 사용하여 편리하게 구현하였다. 관련 내용이 유용한 정보라 기록하고자 글을 적게 되었다. 

 

URI scheme이란?

URI scheme은 특정 유형의 식별자를 구성하는데 사용되는 체계를 정의하는 개념이다.

 

앱에서 특정 유형의 식별자를 구분한다는 개념이 와닿지 않을 수 있다.

웹페이지에서 https://naver.com으로 브라우저에 입력하면 네이버 홈페이지 창으로 가게된다. 

이와 같이 앱에서 유사한 기능을 하는것이 '딥링크'이다.

딥링크는 특정 주소를 입력하면 앱이 실행되거나 앱의 화면으로 이동하는데, 앱이 설치되어 있지 않다면 앱의 설치를 유도할 수  있다. 따라서 마케팅적인 측면에서 필수적으로 사용되는 기능이다.

 

서론이 길었다. 그래서 URI scheme이 뭔데?

앞서 말한 딥링크 방식 중 한 가지가 URI scheme방식이다.

 

 

URI scheme 사용법

URI scheme방식은 앱에 scheme값을 등록하는 형태로 앱을 구분한다. 
앱마다 다양한 스킴값이 있고, 특정한 스킴값을 입력하면 그 스킴값에 맞는 앱이 열린다. 

예를 들어, "kakaomap://"라는 스킴값을 사용하게 되면 카카오지도가 열린다. 

스킴값은 앱 개발 시 개발사에서 자신들만의 고유한 값을 등록한다. 하지만 앱 수가 증가하면서 앱 스킴값이 서로 중복되는 문제가 발생하기도 한다. (앱 스킴값은 존재하지않는 고유한 값으로 사용하자 .. )

 

앱의 특정 페이지는 "path'값으로 구분한다. 카카오맵의 길찾기로 이동하고 싶으면 "kakaomap://route?"와 같은 형태로 사용한다. 

 

정리하면, "kakaomap://route?"에서 

• scheme : kakaomap:
• path: //route?

scheme은 앱을 특정하고 (카카오맵)

path는 앱 내 페이지를 특정한다 (카카오맵의 길찾기)

 

 

카카오맵 길찾기 

<intent-filter>
               <action android:name="android.intent.action.VIEW" />
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE" />
               <data
                   android:host="https"
               android:scheme="kakaomap" />
 </intent-filter>

먼저  Androidmanifest.xml에 다음 스킴값을 등록한다. 위 과정은 네이버, 티맵도 공통 사항이다. 

 

그리고 URI스킴을 사용하면 된다. 

Url = `kakaomap://route?sp=${startLat},${startLng}&ep=${finishLat},${finishLng}&by=FOOT`;

 참고: https://apis.map.kakao.com/android_v2/docs/api-guide/urlscheme/ 
위의 주소를 사용했는데 UNKNWON_URL_SCHEME_ERR에러가 발생했다. 

 

Url = ` https://map.kakao.com/link/to/$ {목적지},${Lat},${Lng}`; 

따라서 다음과 같은 http프로포콜을 이용한 방법으로 하였다.

하지만 이 방식은 뭔가 이상했으며, 빌드 후 앱에서 확인하니 따로 출발지를 설정할 수 없었다. 

 

 

네이버맵 길찾기

카카오맵과 같이  Androidmanifest.xml에 다음 스킴값을 등록한다. 

 

그리고 scheme값을 사용하면 된다. 

Url = `nmap://route/walk?slat=${startLat}&slng=${startLng}&dlat=${finishLat}&dlng=${finishLng}&appname=com.example.myApp`;

nmap:// : 네이버맵 스킴

route: 네이버 길찾기

walk: 걷기 경로 (자동차, 대중교통으로 변경 가능)

slat, slng: 출발점 위도, 경도

dlat, dlng: 도착점 위도, 경도

추가로 출발점, 도착점의 이름을 설정하고 싶으면 sname, dname을 추가해서 사용하면 된다.

 

이렇게 사용하면 잘 될줄 알았지만 역시 UNKNWON_URL_SCHEME_ERR이 발생하였다. 

카카오맵과 같은 http프로토콜을 이용한 방법으로 해결하려고 했다. 

Url = "http://map.naver.com/index.nhn?slng=127&slat=37.5&stext=출발지명&elng=127.5&elat=37.4&pathType=0&showMap=true&etext=도착지명&menu=route";

 

위 방식은 웹에서는 정상적으로 지도화면이 열리지만 빌드한 앱에서 네이버 빠른 길찾기 검색창으로 이동한다. 

 

Url = `http://m.map.naver.com/route.nhn?menu=route&sname=내위치&sx=${startLng}&sy=${startLat}&ename=${도착지명}&ex=${finishLng}&ey=${finishLat}&pathType=0&showMap=true`;

위 방식은 웹과 모바일 모두 빠른 길찾기 검색창으로 이동한다. (아이폰은 잘 될 수 있는데, 안드로이드 테스트 결과 네이버 지도로 이동하는게 아니라 네이버 검색창으로 이동한다...)

 

결과적으로 네이버 길찾기 기능은 성공적으로 구현하지 못했다. 하지만 네이버스킴을 이용하고, 네이티브에서 설정값을 추가해야할 거 같다는 느낌이 들었다. 

 

 

티맵 

마찬가지로 Androidmanifest.xml에 다음 스킴값을 등록한다. 

URL = `tmap://route?rGoName=${목적지명}&rStX=${startLng}&rStY=${startLat}&rGoX=${finishLng}&rGoY=${finishLat}`;

역시 UNKNWON_URL_SCHEME_ERR이 발생하였다. 

 

 

해결

안드로이드 스튜디오에서 디버그를 찍으면서 폭풍 구글링 후 문제를 해결할 수 있었다. 

<queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="nmap" android:host="*"/>
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="tmap" android:host="*"/>
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="kakaomap" android:host="*"/>
        </intent>
</queries>

 Androidmanifest.xml에 다음과 같은 queries를 추가하면 된다. 

 

추가한 후 빌드한 앱에서 실행하면 에러없이 정상적으로 실행된다 !!!
최종 사용한 URI scheme

카카오맵 

Url = `kakaomap://route?sp=${startLat},${startLng}&ep=${finishLat},${finishLng}&by=FOOT`;

네이버맵

Url = `nmap://route/walk?slat=${startLat}&slng=${startLng}&dlat=${finishLat}&dlng=${finishLng}&appname=com.example.myApp`;

티맵

URL = `tmap://route?rGoName=${목적지명}&rStX=${startLng}&rStY=${startLat}&rGoX=${finishLng}&rGoY=${finishLat}`;

 

 

이렇게하면 정상적으로 실행되지만 한 가지 문제점이 발생한다 ..

앱이 설치되어 있으면 앱으로 이동하여 정상적으로 길찾기 기능을 수행하지만, 앱이 설치되어있지 않을 때 앱 설치페이지로 이동하지 않는 문제가 발생하였다. 결국 네이티브에서 Uri scheme처리 코드를 짜서 이 문제를 해결하였다. 다음과 같은 코드를 플러터에서 작성하였다. 

(여기서 route는 host로 설정하는 것에 주의하자!)

    NativeCallHandler.instance.addCallBack(name: "openNaverMap", callback: (args) async {
      try {
        var startLat = args[0]['startLat'];
        var startLng = args[0]['startLng'];
        var endLat = args[0]['finishLat'];
        var endLng = args[0]['finishLng'];
        var destNm = args[0]['destNm'];

        final Uri uri = Uri(
          scheme: 'nmap',
          host: 'route',
          path : 'walk',
          queryParameters: {
            'slat': '$startLat',
            'slng': '$startLng',
            'sname' : '현재위치',
            'dlat': '$endLat',
            'dlng': '$endLng',
            'dname': '$destNm',
            'appname': 'com.example.myApp',
          },
        );

        if (await canLaunchUrl(uri)) {
          await launchUrl(uri);
        } else {
          final playStoreUrl = Uri.https('play.google.com','store/apps/details',{'id':'com.nhn.android.nmap'});
          if (await canLaunchUrl(playStoreUrl)) {
            await launchUrl(playStoreUrl,mode: LaunchMode.externalApplication);
          } else {
            print('네이버맵을 플레이스토어에서 열 수 없습니다.');
          }
        }
      } catch (error) {
        print('네이버맵 에러 발생: $error');
      }
    });

 

결론

Uri scheme은 특정앱으로 이동하여 특정 기능을 수행하도록 하는 것을 매우 편리하게 수행할 수 있다. 나는 길찾기와 관련된 Uri scheme을 사용했고, 시행착오 끝에 문제를 해결할 수 있었다. 하지만 하이브리드 앱 개발 과정에서 예상치못한 이슈가 계속 발생할 수 있으니, 웹뷰에서 Uri scheme처리를 하지않고 네이트브쪽에서 Uri scheme처리를 하는것이 좋을 거 같다. 

 

 

 

 

 

출처

https://help.dfinery.io/hc/ko/articles/360039757433-%EB%94%A5%EB%A7%81%ED%81%AC-Deeplink-URI%EC%8A%A4%ED%82%B4-%EC%9C%A0%EB%8B%88%EB%B2%84%EC%85%9C-%EB%A7%81%ED%81%AC-%EC%95%B1%EB%A7%81%ED%81%AC-%EA%B5%AC%EB%B6%84%EA%B3%BC-%EC%9D%B4%ED%95%B4

https://developers.naver.com/docs/utils/mobileapp/