Skip to main content

Poosoap내 화장실을 찾아줄 Kakao 지도 API을 이용한 웹 앱

React Native 모바일 어플리케이션 프로젝트를 NX 모노레포를 통해 구성을 하고 OAuth를 위한 세팅이 완료된 시점에 다음으로 우선 순위가 높았던 기능은 지도에서 화장실을 표시하고 사용자와 상호작용하는 기능을 구하는 것이었습니다.

빠른 결과물을 첫 스프린트에 선보이겠다는 목표로 Native API를 연동하지않고 Web App으로 사용자에게 제공하는 것을 목표로 선정해보고 지도앱을 처음으로 만들어보기로 했습니다.

물론 이번 글에서 진행할 내용은 PoC(Proof of Concept) 프로젝트입니다.

왜 PoC를 먼저해야할까?

핵심 메인 기능인 가장 가까운 화장실을 찾기는 사용자 경험(UX)를 최우선으로 해야하기에 당연히 웹앱이 아닌 Native로 해야하는 것이 맞습니다. 하지만 저희 프로젝트의 첫 스프린트 목표는 사용가능한 어플리케이션은 단기간에 출시하고 반응보기이기에 완성도보다는 첫 배포를 진행하면서 팀원간의 협업을 겪어보는 것입니다.

이렇게 말했지만 웹뷰로 작업한 결과물이 사용자가 눈치채지 못할 정도로 정교하게 만들어진다면 웹앱을 고도화하는 방향도 열려있습니다. (하지만 사용자의 위치정도 가져오는 권한 등등이 해결될 지는 미지수 입니다.)

우선 시도해보고 부족한 부분을 Native에서 잘 반영해보도록 하겠습니다.

NX내 React 프로젝트 구성

https://nx.dev/packages/react#nrwlreact

NX mono repo내 React 프로젝트는 NX의 풍부한 기능을 활용하기 위해 NX Plugin을 활용해보았습니다.

사용자의 위치 정보

화장실 위치 마킹으로 표시하기

성능 및 사용자 경험 체크