[Android/Kotlin] Naver Map API 사용법
🤔 고민해본 사항
Map을 구현하기위해서는 구글, 카카오,네이버 등 다양한 플랫폼이 존재한다.
나는 그중 네이버를 선택했는데, 선택한 이유는 아래 이유때문이다.
1. 일단 저번 팀프로젝트때 카카오맵을 사용했었기 때문에, 다른 플랫폼을 사용하고 싶었다. (심지어 카카오맵부분을 내가 맡아서 구현했는데, 공식문서가 친절하지 않아서 꽤나 고생했었다.)
2. 네이버맵은 공식문서가 엄청 친절한점
3. 현재 개발하는 앱특성상, 국내 타켓인점
💻 구현하기
1. 플랫폼 등록
먼저 아래 사이트에 들어가서 네이버클라우드에 로그인을 한뒤, 신용카드 등록을 완료하면 이용신청을 할수있게된다
(신용카드를 등록해도 유료상품을 이용하지 않으면 결제가되지 않으니깐, 안심하고 결제를 하도록하자)
https://www.ncloud.com/product/applicationService/maps
NAVER CLOUD PLATFORM
cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification
www.ncloud.com
이용신청 버튼 누르기
Application 등록버튼 누르기
이용약관에 동의해주면 아래와같은 화면이 뜰텐데
Application이름을 입력해주고
Mobile Dynamic Map에 체크해주고
Android 앱 패키지 이름에 내프로젝트의 패키지 이름을 그대로 복붙해서 넣으면 된다
등록을 눌러주면 아래와 같이 뜰텐데 인증정보를 눌러준다
그럼 이런식으로 인증정보가 나오는데
이중에서 Client ID가 추후에 필요하므로 잘 복사해서 가지고 있자!
2. 코드구현
이제 안드로이드 스튜디오로 넘어가서 지도를 띄우는 작업을 해볼것이다
https://navermaps.github.io/android-map-sdk/guide-ko/1.html
시작하기 · 네이버 지도 안드로이드 SDK
No results matching ""
navermaps.github.io
해당 공식문서를 참고해서 진행했다.
공식문서에 잘 나와있어서 하나하나 따라가다보면 구현이 되는걸 볼수있을것이다.
네이버 지도 SDK는 Maven 저장소에서 배포되기때문에 루트 프로젝트의 build.gradle에 저장소 설정을 추가해준다.
나같은 경우에는 build.gradle에 추가하면 오류가 발생해서 settings.gradle에 추가해줘야했다.
버전차이 때문인것같다.
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven("https://repository.map.naver.com/archive/maven")
}
}
settings.gradle
그리고 build.gradle에 네이버 지도 SDK에 대한 의존성을 선언해준다
dependencies {
// 네이버 지도 SDK
implementation("com.naver.maps:map-sdk:3.19.1")
}
build.gradle
이제 아까 발급받은 client ID를 사용해줄것이다
AndroidManifest.xml 로 가서 아래와같이 지정해주면 된다.
<manifest>
<application>
<meta-data
android:name="com.naver.maps.map.CLIENT_ID"
android:value="YOUR_CLIENT_ID_HERE" />
</application>
</manifest>
# github에 노출되지 않도록 로컬프로퍼티로 빼주기
근데 나는 client ID를 github에 노출시키지 않기위해서 client ID를 로컬프로퍼티로 빼주는 작업을 했는데, 이부분에서 조금 헤맸었다.
일단 local.properties에 가서 client ID를 작성해준다. local.properties에 작성한 키, ID값들은 깃허브에 올라가지 않는다.
(해당 정보들은 민감한 정보이기 때문에 노출되지 않도록 하는것이 좋다.)
근데 주의해야할점은 AndroidManifest에서 사용할 값은 ""(큰따옴표)를 표시하지 않는다.
ex)
NAVERMAP_CLIENT_ID = 12345678 // Menifest에서 사용할경우
KEY = "12345678" // Menifest에서 사용하지 않을 경우
local.properties
그리고 build.gradle로 가서 아래와같이 작성해준다
여기서도 주의해야할 것이 있는데 AndroidManifest.xml에서 사용하지 않는 ID나 Key값이면 아래와같이 buildConfig를 사용해서 작성해줘야한다.
buildConfigField("String", "NAVERMAP_CLIENT_ID", properties.getProperty("NAVERMAP_CLIENT_ID"))
근데 지금 우리는 AndroidManifest.xml에서 사용해야되기때문에 addManifestPlaceholders()함수를 사용해서 추가해줘야한다!!
종종 구현할때 buildConfig가 import가 안되는 경우가 발생했는데, 그때는 import를 올바르게 해줬는지 다시한번 확인해보자.
그래도 안되면 Clean Project -> ReBuild 해주거나 invalidate Caches를 사용해서 캐시를 제거해주면 올바르게 됐다.
...
val properties = Properties().apply {
load(FileInputStream(rootProject.file("local.properties")))
}
android {
defaultConfig {
...
addManifestPlaceholders(mapOf("NAVERMAP_CLIENT_ID" to properties.getProperty("NAVERMAP_CLIENT_ID")))
}
buildTypes {
release {
isMinifyEnabled = false
proguardFiles(
getDefaultProguardFile("proguard-android-optimize.txt"),
"proguard-rules.pro"
)
}
}
...
buildFeatures {
buildConfig = true
}
build.gradle
이제 AndroidManifest.xml에서 이렇게 사용하면된다.
<manifest>
<application>
<meta-data
android:name="com.naver.maps.map.CLIENT_ID"
android:value= "${NAVERMAP_CLIENT_ID}" />
</application>
</manifest>
AndroidManifest.xml
이제 진짜 마지막으로 FragmentContainerView를 뷰에 선언해주면 지도가 잘 뜨는것을 확인할 수 있다
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".presentation.fragment.EvacuateFragment">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/map"
android:name="com.naver.maps.map.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_main
3. 결과
+) 문제발생했던 상황
앱 개발을 완료하고 플레이스토어에 앱 배포를 하기위해 패키지명을 변경해줬다.
그랬더니 NaverMap에서 아래와 같은 오류가 발생했다.
[NaverMapSdk] Authorization failed: [401] unauthorized client
패키지명을 변경했으면 navermap콘솔창에 가서도 바뀐 패키지명으로 수정해줘야 올바르게 지도가 나온다!!
+) 추가로 6.17 작성
현재는 AI NAVER API를 사용해서 지도 API를 띄우고있는데, 해당 지도 API의 무료이용량 제공을 중단한다고 메일로 공지가왔다.
(7월 1일 이후부터는 무조건 유료요금제로 전환된다고한다)
그치만 Maps 서비스를 신청하면 무료 이용량 혜택이 여전히 적용되서 이걸로 바꾸기로했다
https://www.fin-ncloud.com/product/applicationService/maps
위의 네이버맵 Maps로가서 이용신청을 해주고 Dynamic Map으로 눌러 신청해준다.
패키지 등록까지 해주면, 위에서 신청한것처럼 Client ID가 나올것이다.
https://navermaps.github.io/android-map-sdk/guide-ko/1.html
해당 가이드를 보고 참고해서 했는데
기존하고 달라진부분만 바꿔주면되서 어려운 부분은 없었다. 나는 아래와 같이 변경해줬다.
dependencies {
// 네이버 지도 SDK
implementation("com.naver.maps:map-sdk:3.21.0")
}
build.gradle
<meta-data
android:name="com.naver.maps.map.NCP_KEY_ID"
android:value= "${NCP_KEY_ID}" />
AndroidManifest
마지막으로 새로 발급받아진 ClientId를 NCP_KEY_ID에 작성해줬다.