[Project] React + JavaScript 네이버 지도 앱 연동 - URL Scheme

SEONDY·2024년 11월 17일

naver map api project url scheme 앱 연동 할망비전

Project

목록 보기

7/9

[Project] React + JavaScript 네이버 지도 앱 연동 - URL Scheme

경로 페이지에서 네비연동 버튼을 클릭했을 때, 네이버 지도 앱으로 이동하는 동작이 필요했다.

네이버 지도 앱으로 이동하기 위해 iOS와 AOS로 구분했다.

🖼️구현 화면

iOS + 네이버 앱 설치 O	iOS + 네이버 앱 설치 X

🧑‍💻구현 코드

안드로이드 추가 테스트 필요

/** 네비연동 버튼 클릭 */
const handleNaviLinkClick = () => {
  const isAndroid = /android/i.test(navigator.userAgent);
  const isiOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);

  // 액션 경로 설정
  const actionString = routeData
  .map((element, idx) => {
    if (idx === 0) {
      return `slat=${element.lat}&slng=${element.lng}&sname=${element.title}`;
    } else if (idx === routeData.length - 1) {
      return `dlat=${element.lat}&dlng=${element.lng}&dname=${element.title}`;
    } else {
      return `v${idx}lat=${element.lat}&v${idx}lng=${element.lng}&v${idx}name=${element.title}`;
    }
  })
  .join("&");
  
  if (isAndroid) { // 안드로이드 테스트 필요
    location.href = `intent://route/car?${actionString}&appname={YOUR_APP_NAME}#Intent;scheme=nmap;action=android.intent.action.VIEW;category=android.intent.category.BROWSABLE;package=com.nhn.android.nmap;end`;
  } else if (isiOS) {
    const clickedAt = +new Date();

    location.href = `nmap://route/car?${actionString}&appname={YOUR_APP_NAME}`;

    setTimeout(function () {
      if (+new Date() - clickedAt < 2000) {
        location.href = "http://itunes.apple.com/app/id311867728?mt=8";
      }
    }, 1500);
  }
};

1. URL Scheme

모바일 앱 / 웹앱에서 다른 앱으로 직접 이동하거나 특정 기능을 호출하기 위한 규칙적인 URL 형식이다.
앱 고유의 프로토콜을 사용해 특정 앱을 열거나 동작을 수행한다.
http://, ftp://, market://과 같은 문자열을 URL Scheme라 부른다.
- URL Scheme을 통한 앱 실행 방식
  - 웹 페이지에서 하이퍼링크 클릭 시 URL Scheme이 시스템에 전달됨
  - 전달된 URL Scheme을 보고 실행 가능한 앱이 있는지 확인함
  - 해당 URL Scheme을 받을 수 있는 앱이 있으면 앱을 실행시키며 URL을 함께 전달함
  - 앱이 실행되면서 URL에 포함된 내용을 참조해 특정 기능을 수행함

2. 네이버 지도 앱 URL Scheme

네이버 지도 앱 URL Scheme은 nmap://으로 시작하며, 구문의 형식은 다음과 같다.

"nmap://actionPath?parameter=value&appname={YOUR_APP_NAME}"
"nmap://" // 네이버 지도 앱 접근 URL Scheme
"actionPath?parameter=value&" // 액션 + 입력 파라미터
"appname={YOUR_APP_NAME}" // URL Scheme 호출 앱

문서에서 자세한 내용을 확인할 수 있다!
할망비전 프로젝트는 웹앱으로 진행되었기 때문에 appname에 개발 URL을 넣어줬다. (배포 후, 배포 URL로 변경 예정)

모바일 웹에서의 네이버 지도 URL Scheme

네이버 지도 앱 URL Scheme을 사용하려면 네이버 지도 앱을 설치하도록 구현해야 한다.
Android
인텐트 URL을 사용하면, 앱이 설치되어 있지 않은 경우 자동으로 Google Play 스토어로 이동한다.
인텐트 URL 구조 : intent://actionPath?parameter=value&appname={YOUR_APP_NAME}#Intent;scheme=nmap;action=android.intent.action.VIEW;category=android.intent.category.BROWSABLE;package=com.nhn.android.nmap;end

iOS
JavaScript 타이머를 이용해 App Store로 분기시키는 방법을 사용한다.

/** 네비연동 버튼 클릭 */
const handleNaviLinkClick = () => {
const clickedAt = +new Date();

location.href =
  "nmap://actionPath?parameter=value&appname={YOUR_APP_NAME}";

setTimeout(function () {
  if (+new Date() - clickedAt < 2000) {
    location.href = "http://itunes.apple.com/app/id311867728?mt=8";
  }
}, 1500);
};

이렇게 설정하면 작동한다!
나는 이 부분에서 한참을 작동하지 않았는데, 전체적인 코드를 다시 확인하고 내 잘못임을 깨달았다...🥲 (4. 진행 중 만난 이슈 - 4.2 작성)

3. URL Scheme 액션

URL Scheme 액션을 사용하면, 다양한 기능을 호출할 수 있다.

프로젝트에서는 자동차 길찾기(경유)가 필요했기 때문에 해당 내용을 정리하고자 한다. 다른 내용(검색, 내비게이션 등)은 문서에 들어가면 확인할 수 있다.

자동차 길찾기

액션 경로 : /route/car
경로 탐색 공통 파라미터
- 출발지 위도/경도/이름, 도착지 위도/경도/이름, 경유지 위도/경도/이름...
경유지 자동차 길찾기 예제
- nmap://route/car?
- slat=출발지위도&slng=출발지경도&sname=출발지이름&
- dlat=도착지위도&dlng=도착지경도&dname=도착지이름&
- v1lat=경유지1위도&v1lng=경유지1경도&v1name=경유지1이름&
- appname={YOUR_APP_NAME}
경유지가 여러 개 필요하다면 v2lng, v3lng, ... , v5lng 형태로 사용이 가능하다.

routeData 기반 actionString 만들기

설정된 routeData를 기반으로 actionString을 만들고자 했다.

// 액션 경로 설정
const actionString = routeData
.map((element, idx) => {
if (idx === 0) {
  return `slat=${element.lat}&slng=${element.lng}&sname=${element.title}`;
} else if (idx === routeData.length - 1) {
  return `dlat=${element.lat}&dlng=${element.lng}&dname=${element.title}`;
} else {
  return `v${idx}lat=${element.lat}&v${idx}lng=${element.lng}&v${idx}name=${element.title}`;
}
})
.join("&");

첫 번째 장소와 마지막 장소는 각각 출발지 / 도착지로 설정하고, 나머지 장소들은 경유지로 설정했다.
작성한 후, 액션 + 입력 파라미터 부분에 넣어주면 상단의 구현 화면이 된다!

4. 진행 중 만난 이슈 😅

4.1. 모바일 네트워크로 접속했을 때, 네이버 맵이 보이지 않았다.

네이버 클라우드 플랫폼 콘솔에서 신청한 애플리케이션의 서비스 환경 등록 - Web 서비스 URL에 내가 사용하는 URL이 등록되어 있는지 잘 확인하자.
나는 기존에 로컬에서 작업했기 때문에 localhost만 등록해뒀는데, 접속하는 네트워크가 등록되어 있지 않아 발생한 문제였다.
- 이후 배포된 URL도 등록하기!

4.2. URL Scheme을 작성했는데, 전혀 작동하지 않았다. (iOS)

분명히 코드를 잘 작성했다고 생각했는데, 아무런 동작이 없었다.
handleNaviLinkClick 내부에 console.log로 확인해도 해당 함수는 잘 작동되는 것을 확인했다.
일부 코드를 변경해도 아무런 변화가 없어서 전체적인 코드를 다시 확인하는 과정에서 나의 실수를 발견할 수 있었다.
원인 : 상단에서 const location = useLocation();으로 location 변수를 react-router-dom의 useLocation훅을 통해 정보를 가져왔던 것이다.
이렇게 되면, 전역 location 객체가 아닌 리액트 라우터에서 제공하는 정보가 할당된다... 그래서 아무런 동작이 없었던 것!
해결 : const location = useLocation();의 변수를 const curLocation = useLocation();으로 변경해줬다. 이제 이동이 잘 되는 것을 볼 수 있다.