Context
Overview
사용자의 현재 위치를 기반으로 주변 안경원을 탐색하고, 조건에 맞는 매장을 필터링해 보여주는 위치 기반 서비스입니다.
모바일 앱 내 WebView에서 동작하며, 저는 JSP·JavaScript 기반 웹 화면을 담당했습니다. 네이티브 앱은 Kotlin으로 개발하는 팀과 함께 위치 권한·브리지 메시지·화면 전환 타이밍 등을 맞추며 협업했습니다. 사용자 위치와 매장 데이터를 결합해 오프라인 매장 방문으로 이어지는 것을 목표로 합니다.
Challenge
Problem
사용자가 가까운 안경원을 찾기 어려워 매장 탐색 경험이 비효율적이었습니다. 동시에 모바일 앱(WebView) 안에서 브라우저와 다른 권한·라이프사이클을 고려해 위치 기반 기능을 안정적으로 구현해야 했습니다.
Contribution
My role
JSP·JavaScript 환경에서 웹뷰 화면을 구현했습니다. 네이버 지도 API 기반 안경원 탐색, 사용자 위치 기준 매장 리스트와 지도 뷰 동기화(선택·이동·리스트 스크롤 연동), 유형별 마커·필터 UI·로직을 담당했습니다.
Kotlin으로 앱을 만드는 네이티브 개발자와 수시로 소통하며 WebView ↔ Native 브리지 계약(위치 좌표 전달, 권한 플로우, 호출 순서)을 맞추고, 웹에서 처리할 부분과 앱에서 처리할 부분을 나눴습니다. 마커·리스트 인터랙션 UX와 예외 케이스(지연·실패·재시도) 정리에도 집중했습니다.
Approach
Solution
매장 데이터와 지도 마커를 동일한 식별자로 묶어, 리스트 선택·필터 변경이 지도 중심·마커 하이라이트와 맞도록 클라이언트 측 JavaScript 상태를 설계했습니다. JSP로 내려주는 초기 데이터와 이후 비동기 갱신의 경계를 정리했습니다. WebView에서는 Kotlin 네이티브에서 전달하는 위치 좌표를 기준으로 카메라·반경 검색을 맞추고, 지도 SDK 이벤트와 리스트를 양방향 연결했습니다. 네이티브 팀과 합의한 브리지 스펙에 맞춰 재진입·뒤로 가기 시에도 맥락이 끊기지 않게 했습니다.
Impact
Result
사용자 위치 기반 매장 탐색 경험이 개선되었고, 지도와 리스트 간 연동으로 탐색 효율이 높아졌습니다. 모바일 WebView 환경에서 위치 기반 기능을 적극 활용할 수 있는 흐름을 갖추어, 오프라인 매장 방문으로 이어지는 동선을 지원했습니다.
Engineering
Technical decisions
- JSP로 조립된 HTML과 클라이언트 JavaScript의 역할 분담(초기 렌더 vs 이후 인터랙션)을 명확히 하여 유지보수 포인트 축소
- 네이버 지도 API와 매장 목록을 단일 소스 상태로 두고, 지도 이벤트·리스트 클릭을 동일 액션으로 수렴
- Kotlin 앱 측과 WebView 브리지 계약(메시지 이름·페이로드·타임아웃)을 문서화해 디버깅 시 합의 기준 확보
- 위치 권한·좌표 수신 지연·실패 시 재시도·폴백(수동 지역 선택 등) 분기, 줌·마커 밀도로 모바일 성능과 가독성 균형
Learnings
Retrospective
JSP·JS 웹과 Kotlin 네이티브 사이에서 재현하기 어려운 이슈가 많았고, 브리지 스펙을 더 일찍 고정하고 실기기 시나리오를 촘촘히 잡았으면 디버깅 비용을 줄일 수 있었을 것 같습니다.