SwiftUI 에서 Naver Map SDK 사용법(UIViewRepresentable)

Photo by Chris Lawton on Unsplash

어떻게든 SwiftUI에서 네이버 맵 SDK를 사용하고자 여기까지 오게 된 당신에게 우레와 같은 박수를 보낸다. 네이버 맵에서 가이드를 만들지 않으니 나라도 만들어야겠다는 생각이 들어 이 포스트를 쓰게 되었다.

물론 다른 많은 분들이 가이드를 많이 만들어 두셨으나 내 가려움을 긁어주기엔 한 꼬집이 부족했다. 그런 전차로 잊어버리긴 아까운 이 달콤한 추억을 기록해두려고 한다.

1. 네이버 클라우드 플랫폼 등록하기

위 포스트에서 매우 잘 설명해주셨다.

여기까지는 매우 쉽다. 단, 플랫폼에 결제수단을 등록하지 않으면 서비스 목록에 Maps가 뜨지 않으므로 한도가 충분한 신용카드를 미리 준비하도록 하자.

2. Xcode에서 기본 세팅하기

앞서 과정을 마치면 일단 프로젝트에 SDK가 깔려있을 것이다. 여기까지 마치지 못한 당신을 위해서는 특별히 맞춤형 무료 솔루션 업체의 링크를 첨부해 드리겠다. 여기로 들어가면 된다.

이제 그러면 info.plist에 권한을 추가해주자. 왜 안돼요?의 75%는 경험상 여기서 기인한다. 이 파트를 또 ‘누가 못함?ㅋㅋ'하고 넘긴 후 에러를 겪을 분들을 위해 글 말미에 반복지도 시간을 갖도록 할 것이다.

ㄱ. 권한추가

풀 네임은 Privacy — Location Always and When In Use Usage Description 이다. 대소문자를 잘 쳐줘야 자동완성이 나타난다. 노트북 하나에 300만원이나 하는 주제에 놈들은 여전히 개발자에게 쒸프트를 누르기를 강요한다.

참고로 Xcode 13부터 info.plist는 Target으로 넘어갔다. 그 말인 즉슨 파일이 따로 생기지 않는다. 앞으로 탐색창에서 info.plist를 찾아 수정하라고 하면 틀 인증을 하는 꼴이니 주의하도록 하자.

3. UIViewRepresentable 만들기

이제 거의 다 됐다. 사실 나도 여기까지 하고 ‘네이버 맵은 쓰기 🐕‍🦺쉽네?’ 라고 방심했다가 크게 데였다. 네이버 로그인을 구현하면서 2도 화상을 입었던 경험이 있던 탓에 방심했는지도 모른다.

코드는 몇 줄 안 된다.

이러면 짠하고 맵뷰가 뜬다. iOS 13에서도 잘 뜨니 뒤에 나온 버전은 말할 것도 없을 것이다. 네이버 아니랄까봐 기본 좌표는 네이버 그린팩토리다. 꼴보기 싫으면 다음 파트에서 다룰 updateUIView에서 기본 좌표를 미리 설정하고 시작하자.

4. updateUIView

사실 여기서 삽질을 하루 종일 했다. 멍청하기 짝이 없는 실수를 했는데 글을 읽는 분들은 그러지 마시길 바란다.

이 예제는 카메라를 주어진 좌표로 이동하는 예제다. 기본 좌표는 서울 시청이고 각 버튼을 누르면 부산 어딘가와 서울 어딘가로 이동한다.

updateUIView에서 내가 한나절을 헤멘 이유는 uiView.mapView.moveCamera(cameraUpdate)에서 함수 내부의 변수가 아닌 클래스 프로퍼티로 선언한 view를 사용했다는 것이다.

이게 무슨 뜻이냐면 처음엔 let view = NMFNaverMapViewmakeUIView밖에서 전역변수로 선언 후 사용했다. updateUIView에 파라미터로 들어오는 uiView를 사용하지 않고 이걸 바로 써 먹은게 화근이었던 것이다. 이것도 돼야 되는 거 아닌가 싶지만.. 일단 파라미터를 사용하기로 하면서 문제는 해결.

여기서는 @State를 사용했지만 @ObservedObject를 이용할 수도 있다. @ObservedObjectupdateUIView의 협응에 관련된 문제도 한 트럭이길래(🚛) 처음엔 SwiftUI 버그인 줄 알았다. 근데 Apple Map은 잘 되길래 뭐지..? 하고 봤더니 앞서의 문제를 발견한 것이다.

5. Coordinator

모종의 이유로 딜리게이트를 추가하고 싶을 수 있다. 그럴 땐 코디네이터를 사용하도록 하자. 여기는 딱히 중요하게 사용되지 않으므로 예시만 대충 적어놓겠다.

요래 써주면 카메라가 변할 때마다 프린트문이 출력된다. 다른 딜리게이트도 비슷허게 사용하면 된다.

마무리하기 전에

권한추가 했나요? (2번 참조)

마무리

사실 하다하다 안 돼서 네이버 클라우드 플랫폼에 문의를 넣었었다.

음..? 문제가 있긴 했나보다.

하여튼 앤시언트 테크놀로지 UIKit과의 불장난은 오늘도 이렇게 막을 내렸다.

--

--

I can make your dream come true — Mainly Interested in iOS and also in Flutter, Python

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store