[iOS] NaverMap 기본 설정 (feat. CocoaPods & 클라이언트ID 발급)

이번에 <택시팟>이라는 개인앱 프로젝트를 진행하면서 네이버맵과 네이버 Cloud API를 사용하였었다. 구현하려는 기능에 대한 정보를 많이 찾을 수 없어서 이번에 구현한 기술들과 구현을 하며 알게 된 정보를 공유해보려고 한다. 

 

 

1. CocoaPod 설치하기

 아래는 CocoaPod을 처음 사용하는 사람들은 위한 설치 순서이다.

무조건 순서대로 설치를 해줘야하며,

명령어를 입력하고 설치되는 데까지 시간이 좀 걸릴 수 있으니 기다려야 한다.

 

 만일 CocoaPod이 설치되어 있지 않다면 터미널을 켜서 아래 명령어를 입력해 준다.

sudo gem install cocoapods

 

 만일 HomeBrew가 설치되어 있지 않다면 아래 명령어를 입력해서 설치해 준다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

 

 만일 git-lfs가 설치되어 있지 않다면 마찬가지로 입력 후 설치가 필요하다.

brew install git-lfs

 

 

 

 이제 터미널로 네이버맵을 사용할 프로젝트 폴더 위치로 이동한다.

 

 여기서 초보자를 위한 한 가지 팁을 주자면 폴더를 드레그 해서 프롬프트 위에 드롭하면 자동으로 경로가 위 사진처럼 입력된다.

그 후 pod init을 통해 Podfile을 만들어주고 git-lfs install을 쳐서 git LFS를 설치해 주자.

 

 설치가 끝나고 폴더로 돌아가보면 Podfile이 생긴 걸 볼 수 있다. 이를 클릭해 naverMap을 추가해줘야 한다.

 

naverMap podfile에 추가하기

 

마지막으로 터미널로 돌아가 

pod install --repo-update

를 입력하고 기다리면

 

위 터미널 사진처럼 설치가 될 것이고

폴더에는 이전과 다르게 여러 파일이 추가적으로 생성되었을 것이다.

 

※ 주의할 점

이제부터는 xcodeproj 파일이 아니라 xcworkspace 파일로 xCode를 실행시켜줘야 한다.

 

xcworkspace

 

 

2. 클라이언트 ID 발급받기

 

NAVER CLOUD PLATFORM

 

우선 위의 클라우드로 이동을 한 후 우 상단 위에 있는 콘솔을 누른다.

 

 

 

그럼 콘솔 창이 나타나는데 여기서 Services를 누르고 목록 중에 AI NAVER API를 찾는다.

 

 

해당 부분을 클릭하면 위와 같이 Application을 등록하라고 페이지가 나오는데 + Application 등록을 눌러주자.

 

 

이름에는 본인 프로젝트 혹은 앱의 이름을 적어주고 내가 사용할 서비스를 선택해 주자. 그리고 iOS Bundle ID 역시 꼭 정확하게 입력해 주자.

 

만일 지도만 사용할 거라면 Mobile Dynamic Map만 선택하면 된다.

 

그 외 서비스들은 아래 더 보기를 눌러서 확인해 보자.

 

• Directions 같은 경우 출발지부터 도착지까지 네비게이션 기능을 만들고 싶다면 선택
• Geocoding 같은 경우 입력한 주소를 좌표를 포함한 상세 정보로 변환하고 싶을 때 (ex. 서울특별시 용산구 한강대로 405 (서울역)이란 주소를 보내면 이에 해당하는 좌표값과 정보들을 반환)
• Reverse Geocoding 같은 경우는 Geocoding의 반대로 좌표를 통해 지번 주소, 도로명 주소 등의 주소 정보를 얻고 싶을 때 사용

 

 

 

입력과 서비스 선택을 완료하면 위와 같이 내 앱이 추가된다. 여기서 인증 정보를 눌러서 ID 값을 확인하자.

 

 

 

만일 Map만 사용할 것이라면 Client ID만 복사하면 되고, 다른 서비스까지 사용할 것이라면 Client Secret까지 필요하다.

 

 

이제 다시 xCode로 돌아가서 info.plist로 이동한다.

 

 

그런 뒤에 하나의 항목을 추가해 주고 key 부분에 NMFClientId라고 입력하고 Value 부분에 발급받은 Id를 입력해 준다.

 

 

 

3. 네이버 맵 화면에 구현

이제 드디어! 네이버 맵을 사용할 준비가 끝났다....

 

import UIKit
import NMapsMap

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let map = NMFNaverMapView(frame: view.frame)
        view.addSubview(map)
    }

}

 

 

우선 NMapMap을 import를 해주자. 그 후 NMFNaverMapView 객체를 만들어 뷰에 추가해 주고 빌드를 시켜보면

 

 네이버 본사를 중심으로 지도가 뜨게 된다!

 

 

 

다음 글들에서는 내비게이션 기능 구현, 마커를 활용해 좌표값 반환하기, Geocoding, Reversed Geocoding 등을 구현해 볼 예정이다.

 

 

 

 

※ Sandbox 에러 발생 시

 만일 위와 같은 에러가 발생한다면

 

 

project - Build Settings에 sandbox를 검색해서 User Script Sandboxing을 No로 바꿔주면 해결이 된다.