[swiftUI] Nmap SDK 설치하기 (naver 지도)

Naver map의 SDK를 프로젝트에 설치하는 과정을 정리해보았다.

https://navermaps.github.io/ios-map-sdk/guide-ko/1.html

시작하기 · NAVER Map iOS SDK

위 네이버 클라우드 공식문서에 있는 내용을 바탕으로 정리한 글이다.

 

 

 

1. 클라이언트 ID 발급하기

https://www.ncloud.com/

NAVER CLOUD PLATFORM

위 홈페이지 들어가서 로그인 or 회원가입을 한다.

로그인을 한 뒤, 콘솔에 들어가야 하는데, 콘솔에 들어가려 하면 결제 수단을 선택하라고 한다.

결제수단 등록이라는 말에 망설여졌지만, 현재는 신규 가입 고객을 대상으로 이벤트를 하고 있었다.

Maps 또한 이벤트 가능 서비스였고, 한도를 보니 하루에 1,000,000건인가 .. 정확히 기억은 나지 않지만, 충분했다.

 

 

 

어쨌든 결제 수단까지 등록하고, 콘솔에 들어간다.

https://console.ncloud.com/naver-service/application

 

이제 클라이언트 ID 발급 시작이다 !

콘솔에 들어가면 이렇게 온보딩 화면이 나오는데 닫기 해준 뒤, 

 

1-1. Products & Services에서 AI-Application Service 하위의 AI·NAVER API를 선택한다.

 

그 다음, 하단에 있는 +Application 등록을 눌러준다.

등록 후 약관을 동의하면 된다.

 

 

 

1-2. Application 등록을 선택하고 Maps 하위의 Mobile Dynamic Map을 체크한다.

이 때, Mobile Dynamic Map을 제대로 선택하지 않으면 인증 실패 오류(429)가 발생할 수 있다.

 

 

1-3. iOS Bundle ID에 네이버 지도 SDK를 사용하고자 하는 앱의 이름과 번들 ID를 추가한다.

번들 ID는 xcode project에서 확인할 수 있다.

이 때 제대로 입력하지 않으면, 인증 실패 오류(401)가 발생한다.

 

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

 

여기까지 client ID 발급하는 과정이었다 !

 

 

 

 

 

2. 의존성 추가하기

의존성 추가는 cocoapod에 추가하는 것과 package로 추가하는 방식이 있는데, 3.16.1 이하 버전은 CocoaPods, 그 이상 버전은 package를 추가하면 된다.

나는 package로 추가해주었다.

 

 

먼저 앱 프로젝트의 Package Dependencies에서 + 버튼을 누른다.

패키지 관리 창의 URL 검색란에 https://github.com/navermaps/SPM-NMapsMap 를 입력하면, spm-nmapsmap 패키지가 나오는데, 이걸 추가하면 된다.

이렇게 Add Package를 해주면 된다.

이제 패키지 설치까지 마무리했다. 설치한 패키지에 우리의 Client ID를 등록해주면 된다.

 

 

 

 

 

3. 클라이언트 ID 지정하기

발급받은 클라이언트 ID를 SDK에 지정하면 지도 API를 사용할 수 있다.

클라이언트 ID는 두 가지 방식인, API 호출해서 지정하기 or info.plist에 저장하기 방식이 있다.

나는 info.plist에 지정해주는 방식을 선택했다.

 

target > info > Custom iOS Target Properties 에 접근한다.

여기에 + 버튼을 눌러 NMFClientId 라는 키를 추가하고, Value에는 아까 발급받은 Client ID를 넣어준다.

이렇게 직접적으로 Client ID를 넣어주려고 했는데, 우리 프로젝트에서는 .xcconfig 파일을 만들어서 인증키 같은 중요한 데이터를 저장하고 있다. 이렇게 직접적으로 저장하면, github에 올렸을 때 보안에 취약해지므로, config 파일에 있는 내용을 가져오도록 했다.

이렇게 config에 저장한 값을 불러오도록 수정해주었다.

(config 설정 관련 내용이 궁금하다면 아래 블로그를 참고하면 좋을 것 같다 !)

https://haram22.tistory.com/84

[Swift] .xcconfig 파일로 api key 저장하기

 

 

 

 

 

4. 지도 표시하기

이제 여기까지 하면 다 왔다 !!

지도를 화면에 띄워보자.

 

그런데 swiftui에서는 직접적으로 NMFMapView를 쓸 수 없다는 사실을 알게 되었다.

NMFMapView가 UIKit 기반으로 만들어졌기 때문에 직접 사용이 안된다고 한다.

그래서, UIViewRepresentable을 사용해서 변환해줘야 한다.

struct NaverMapView: UIViewRepresentable {
    
    // UIViewRepresentable을 써서 swiftui에서 쓸 수 있게 하기
    func makeUIView(context: Context) -> NMFMapView {
        let mapView = NMFMapView()
        return mapView
    }
    
    func updateUIView(_ uiView: NMFMapView, context: Context) {}
}

이렇게 UIViewRepresentable을 사용해서 UIKit 코드를 swiftUI에서도 쓸 수 있게 해주었다.

 

공식 문서를 보니 NMFMapView보다 NMFNaverMapView를 사용하면 기본적인 화면이 구성되어있다고 한다.

struct NaverMapView: UIViewRepresentable {
    func makeUIView(context: Context) -> NMFNaverMapView {
        let mapView = NMFNaverMapView()
        return mapView
    }
    
    func updateUIView(_ uiView: NMFNaverMapView, context: Context) {}
}

이렇게 써주면, 

이렇게 네이버 지도가 잘 불러와졌음을 확인할 수 있다.

빌드하면, 네이버 본사가 디폴트 위치로 저장되어 있다.

 

 

 

 

이렇게 Naver SDK 연결해서 화면에 띄우는 과정을 정리해봤다.

다음에는 현재 위치에서 특정 위치까지 가는 경로를 보여주는 길찾기 기능을 사용해볼 예정이다.