React Native + WebView + 카카오 지도 연동 삽질기 (with Expo)

Next.js로 만든 기존 서비스를 앱으로 확장하고 싶었다. 그래서 Expo를 선택했고, 그 과정에서 카카오 지도를 붙이며 겪은 문제들과 해결 방법을 정리해본다. 이 글은 완벽한 가이드라기보다는 내가 실제 겪은 시행착오를 기록하는 삽질기에 가깝다. (지금도 만들고 있는데 계속 작성할수도 있다...)

---

Next.js 서비스 → 앱으로 만들기 시작

부동산에 관심이 많았었기에 국토부 실거래 자료를 기반으로 한 웹 기반의 Next.js로 만든 서비스가 있었다.

"이걸 앱으로 만들어보고 광고를 한번 붙여봐 ?" 라고 결정하고, Expo를 사용해 개발을 시작했다. 이유는 단순했다:

• React 기반이라 코드 재사용이 쉬울 것 같았고,
• 배포가 빠를 것 같았고,
• 네이티브 개발을 하고 싶지 않았고,
• 이전엔 CLI로 한번 개발을 했었는데, Expo도 한번 이참에 해보고 싶었기 때문.

 

Expo로 앱 개발 시작

React Native 자체도 초보였던 나는 Expo로 빠르게 프로젝트를 시작했다. Expo Go로 테스트할 수 있어서 서버 올릴 필요 없이 바로 앱에서 확인할 수 있는 점이 좋았다. CLI와 다르게 안드로이드 스튜디오, Xcode가 없이 테스트 가능하다는게 너무 좋았다. 세팅하는게 개발자의 최고의 귀차니즘이니깐...

 

카카오 지도 연동 – 시작부터 막힘

문제는 카카오 지도였다. 기존 웹에서는 쉽게 붙였던 카카오 지도가 앱에서는 생각보다 어려웠다.

• Expo는 네이티브 SDK(안드로이드/iOS)를 사용할 수 없다.
• 카카오에서 제공하는 React Native SDK도 없다.

그래서 WebView로 카카오 지도 웹 SDK를 불러서 띄우는 방식을 선택했다. 여기까지는 괜찮았다.

 

마커 찍기 실패 – Geocoder의 배신

문제는 특정 주소에 마커를 찍는 것이었다. 기존 웹 서비스에서는 문제없이 성공했었다. 그래서 자연스럽게 카카오에서 제공하는 kakao.maps.services.Geocoder를 사용했다.

하지만 결과는 계속 실패.

• status 값은 항상 null
• result 값은 "ERROR"
• Web에서는 잘 되던 코드가 앱(WebView) 안에서는 실패했다.

 

WebView 안에서 지도를 띄우면서 이런 불편함도 있었다:

• WebView에서는 DevTools가 안 보이므로 디버깅이 어렵다.
• 로컬에서 지도 WebView가 보이지 않아서 테스트할 때 매번 핸드폰으로 확인해야 했다.
• React Native ↔ WebView 통신도 postMessage로 일일이 처리해야 했다.

그래도 메시지 핸들러를 만들어서 로그를 찍어가며 디버깅했다. AI한테도 자주 물어보면서 많은 시간을 아꼈다.

 

 

정말 하루동안 세상에 나온 AI들을 다 괴롭혀본것 같다.

하지만 전부 실패하고야 말았고 아래와 같은 결론을 내렸다.

• 카카오 Geocoder는 서버 호출이 필요하다.
• 그런데 WebView에서 실행되는 HTML의 origin은 보통 file://, about:blank, localhost로 인식된다.
• 카카오 개발자센터에서 등록한 도메인이 아니면 Geocoder 호출 자체가 막힌다.

즉, 지도가 로컬에서 잘 보였던 것은 SDK 자체는 클라이언트에서 동작하기 때문이고, 좌표 검색(Geocoder)은 서버에서 동작하기 때문에 도메인 제한에 걸렸다고 생각했다.

(허용 도메인에 로컬호스트, file:// 등을 등록해봤지만 당연히 실패)

 

 

결국 카카오 문서를 다시 뒤져서 다른 API 방식을 찾았다.

• 카카오에서 제공하는 주소 → 좌표 변환 WEB API를 쓰기로 결정.
• 앱에서는 서버 통신이 허용되므로, 이 API는 문제없이 호출 가능.
• WebView 안에서 Geocoder 쓰기를 포기하고,
• React Native 코드 단에서 API로 좌표를 가져와서 WebView로 넘겨주기로 했다.

좌표를 받으면 WebView에 마커를 찍으면 되니까...

 

 

REST API 호출 → 비용 발생 → 캐싱 도입

테스트 중 API를 생각보다 너무 많이 쏘는 것 처럼 느껴졌다.

REST API 호출은 무료가 아니다. 호출이 늘어날수록 비용이 발생한다. 돈벌려고 시작했는데 돈쓰는 서비스가 된다면 섭종이다.

그래서 React Query를 도입했다.

• 주소 → 좌표는 거의 변하지 않으므로 캐싱해도 문제가 없다.
• 다른 Kakao API들도 길게 캐싱해도 문제 없다.
• 처음에는 App.tsx에서 설정했지만,
• Expo Router를 쓰면서 _layout.tsx에 적용해야 한다는 것도 알게 됐다.

덕분에 호출 비용도 아끼고, 속도도 개선됐다.

 

 

마무리

• 카카오 지도 SDK는 웹에서는 편하지만, 앱에서는 도메인 제한 때문에 일부 기능이 막힌다.
• 지도는 WebView에서 띄우되, 좌표 변환은 REST API로 처리하는 것이 안전하다.
• REST API 호출은 캐싱이 중요하다. 비용이 실제로 발생하기 때문이다.
• WebView 안에서 마커, 정보창 등은 HTML/JS에서 처리하고, 부모 React Native와 통신은 postMessage로 단순화하는 게 유지보수에 좋다.

React Native + WebView로 카카오 지도를 붙이는 건 생각보다 쉬웠지만,
주소 → 좌표 변환이 막히면서 하루 넘게 삽질했다.
다음에는 더 빠르게 해결할 수 있을 것 같다.

 

지금도 React Native에서 카카오 지도를 붙이려는 사람이 있다면…
WebView 안에서 Geocoder 쓰지 말고, REST API로 처리하세요.