리액트 네이트브로 네이버 지도 구현하기 #1 — 설치와 키 발급 받기

리액트 네이티브를 이용해 네이버 지도 구현하기 가이드 #1

MJ Studio

Published in

MJ Studio

9 min readApr 14, 2024

지도 in React Native

리액트 네이티브로 앱 개발을 하면서 지도를 보여주는 기능을 넣으려면 여러가지 옵션이 있습니다.

우선, 구글맵과 애플맵(MapKit)의 추상화를 제공하는 react-native-maps이 있습니다. 만약 구글맵이나 애플맵을 사용하려는 개발자에게 적합합니다.

대한민국에서만 지도 서비스를 제공하려면 다른 옵션으로 네이버맵, 카카오맵이 있습니다.

지도를 보여주려면 각 지도 플랫폼의 Web SDK를 이용해 웹뷰를 이용해 띄워주거나 실제 Android, iOS SDK를 이용해 포팅한 라이브러리를 쓰는 방법이 있습니다.

전자는 아무래도 웹뷰이기 때문에 제스쳐나 성능 및 애니메이션 등에서 모바일 앱에서 쓰기엔 아쉬운 부분들이 있을 수 밖에 없기 때문에 Native SDK를 포팅하여 제공해주는 라이브러리들을 쓰는 것이 좋은 사용자 경험을 위해 필수적입니다.

오늘은 그 중에서 네이버맵을 이용해 리액트 네이티브에서 지도를 그리는 법을 알아보겠습니다.

첫 장에서는 네이버 지도 SDK의 키를 발급하는 과정과 처음으로 네이버 지도를 앱에 그리는 과정까지 알아보겠습니다.

네이버 지도 클라이언트 ID발급받기

네이버 지도 SDK를 사용하려면 다음과 같이 애플리케이션을 등록하고 클라이언트 ID를 발급받아야 합니다.

네이버 클라우드 플랫폼에 로그인한 후 콘솔에 들어갑니다.
Products & Services에서 AI-Application Service 하위의 AI·NAVER API를 선택합니다.

Application 등록을 선택하고 Maps 하위의 Mobile Dynamic Map을 체크합니다.

선택하지 않으면 네이버 맵을 사용하려고 할 때 인증 실패 오류(429)가 발생합니다.

Android 앱 패키지 이름에 네이버 지도 SDK를 사용하고자 하는 앱의 패키지명을 추가하고 등록합니다.

올바르게 입력하지 않으면 인증 실패 오류(401)가 발생합니다.

등록한 애플리케이션의 인증 정보를 선택해 Client ID를 확인합니다.

Client ID값은 앱에서 네이버 맵을 보여주기 위해 필요하고 추가적인 인증과정은 콘솔에서 등록한 Android, iOS 앱 패키지 이름과 iOS Bundle ID와 일치하는지 여부로 검사됩니다.

프로젝트 생성

프로젝트를 생성해보겠습니다.

오늘 소개해드릴 네이버 맵 패키지는 Expo환경이나 Expo환경이 아닌 리액트 네이티브 프로젝트에서도 동작합니다.

따라서 예제 프로젝트는 Expo환경이 아닌 프로젝트로 만들어보겠습니다.

Expo를 쓰시는 분들은 더 간단하게 설정이 가능하니, 이 부분을 참고하시면 됩니다.

npx react-native@latest init AwesomeProject

다음과 같이 네이버 맵 패키지를 설치해줍니다.

# npm
npm install --save @mj-studio/react-native-naver-map

# yarn
yarn add @mj-studio/react-native-naver-map

# expo
npx expo install @mj-studio/react-native-naver-map

iOS에서 구동시켜주기 위해 Cocoapod도 설치를 해줍니다.

프로젝트마다 어떻게 Cocoapod를 설치하는 지에 따라 상이할 수 있습니다.

# bare pod
cd ios && pod install

# bundler
cd ios && bundle && bundle exec pod install

# bundle with new architecture
cd ios && bundle && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install

Android

안드로이드 프로젝트에선 Client ID를 AndroidManifest.xml에 삽입해주어야 하고, 유저의 위치를 보여주기 위해(optional) 요청할 권한을 명시해야 합니다.

Expo라면 app.json의 config plugin에 옵션만 설정해주면 되고 이렇게 직접 명시하는 과정이 필요하지 않습니다.

<manifest>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

    <application>
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="{{위에서 발급받은 Client ID}}" />
    </application>
</manifest>

이처럼 AndroidManifest.xml을 수정해주시면 됩니다.

iOS

iOS는 Info.plist 파일에서 NMFClientId키에 Client ID를 명시해주어 하고 권한에 대한 명시 및 사용자에게 권한을 요청할 때 안내될 메세지를 설정해주어야 합니다.

Expo라면 app.json의 config plugin에 옵션만 설정해주면 되고 이렇게 직접 명시하는 과정이 필요하지 않습니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
...
    <key>NMFClientId</key>
    <string>YOUR_CLIENT_ID_HERE</string>
...
<dict>
<plist>

<plist version="1.0">
<dict>
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>{{usage description}}</string>
  <key>NSLocationTemporaryUsageDescriptionDictionary</key>
  <dict>
    <key>{{your purpose key}}</key>
    <string>{{usage description}}</string>
  </dict>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>{{usage description}}</string>
</dict>
</plist>

네이버 맵 표시하기

자, 이제 설정이 끝났습니다.

실제로 네이버 맵을 우리의 앱에 띄워보겠습니다.

일단 기본 App.tsx 에 있는 기본 템플릿 뷰들을 모두 지우고 빈 화면을 만듭니다.

import React from 'react';
import {View} from 'react-native';

function App(): React.JSX.Element {
  return <View />;
}

export default App;

이제 NaverMapView를 그려주고flex: 1을 설정해서 네이버 맵 뷰가 화면에 꽉차게 만든 다음 렌더링을 해보겠습니다.

function App(): React.JSX.Element {
  return (
    <View style={{flex: 1}}>
      <NaverMapView style={{flex: 1}} />
    </View>
  );
}

만약 다음과 같은 오류가 뜬다면 콘솔에서 지정한 iOS Bundle Name과 실제 앱의 Bundle Name이 다른 것이므로, 콘솔에서 고쳐주시거나 iOS프로젝트의 Bundle Name을 바꿔주어야합니다.

콘솔에서 여러개의 Android, iOS의 패키지 이름, Bundle Name도 등록 가능합니다.

이제 정상적으로 네이버 맵이 보입니다.

초기 위치는 특별히 지정해주지 않았으므로 네이버 본사가 중앙에 위치한 모습입니다.

마무리

프로젝트 설정을 하고 네이버 콘솔에서 네이버 맵 Client ID를 발급받고 실제 리액트 네이티브 앱에 패키지를 설치해 맵을 보여주는 것 까지 완료했습니다.

다음 가이드에선 Camera나 Region을 이용해 실제 지도의 위치를 변경해보겠습니다.

Github
Website
Medium Blog, Dev Blog, Naver Blog
Contact: mym0404@gmail.com