Marker

Problem

일상의 행복한 순간은 보통 사진첩이나 메모 안에 흩어져 있고, 장소와 감정이 함께 기록되는 경험은 많지 않습니다. 해커톤이라는 짧은 시간 안에서 사용자가 지도 위에 자신의 감정과 이야기를 남기고, 다른 사람이 남긴 장소도 탐색할 수 있는 서비스를 만들어야 했습니다.

지도 기반 서비스 특성상 위치 권한, 현재 위치 이동, 주소 검색, 마커 클릭, 같은 좌표에 여러 기록이 있는 경우의 탐색 흐름까지 함께 고려해야 했습니다. 단순히 지도에 점을 찍는 것만으로는 사용자가 기록을 남기고 다시 찾아보는 경험이 충분하지 않았습니다.

또한 백엔드와 동시에 개발되는 상황이었기 때문에 프론트엔드에서 필요한 장소 조회, 상세 조회, 등록, 삭제, 좋아요, 좋아요 여부 확인 API 스펙을 명확히 정의하고 빠르게 연동할 필요가 있었습니다.

Approach

React, TypeScript, Vite 기반으로 빠르게 개발할 수 있는 웹앱 구조를 잡고, TanStack Router로 단일 지도 페이지 중심의 라우팅을 구성했습니다. 서버 상태는 TanStack Query로 관리해 장소 목록, 필터, 등록, 좋아요 상태가 화면에 자연스럽게 반영되도록 했습니다.

Kakao Maps API를 중심으로 지도 경험을 구현했습니다. 현재 위치를 가져와 지도 중심을 이동시키고, 사용자가 지도를 누르면 해당 좌표에 기록을 남길 수 있게 했습니다. 주소 검색은 React Daum Postcode와 좌표 변환 흐름으로 연결해 사용자가 직접 지도를 탐색하지 않아도 원하는 위치로 이동할 수 있게 했습니다.

장소 기록은 2단계 입력 흐름으로 설계했습니다. 먼저 설렘, 편안함, 감사, 성취, 위로 같은 감정을 선택하고, 이후 제목, 이야기, 사진을 입력하게 했습니다. 선택한 감정은 마커와 배지에 반영되어 지도 위 기록이 단순 핀이 아니라 감정의 분포처럼 보이도록 만들었습니다.

장소 탐색 경험도 보강했습니다. 감정 필터, 최신순/인기순 정렬, 내가 기록한 장소 보기, 인기 장소 바텀시트를 제공했습니다. 같은 좌표에 여러 기록이 있는 경우에는 이전/다음 탐색을 지원해 한 위치에 쌓인 여러 이야기를 순서대로 볼 수 있게 했습니다.

모바일 사용성을 위해 바텀시트 기반 UI를 적용했습니다. 장소 등록 폼, 장소 상세, 인기 장소 목록을 지도 위에 자연스럽게 띄우고, 기록하기 버튼과 필터 바는 지도 탐색을 방해하지 않도록 고정 위치와 계층을 조정했습니다.

백엔드 연동을 위해 API 명세를 함께 정리했습니다. /places, /places/{id}, /places/{id}/like, /places/{id}/liked 흐름과 multipart 이미지 업로드 형식을 정의해 프론트엔드와 백엔드가 같은 기준으로 개발할 수 있게 했습니다.

Result

Marker는 지도 위에 감정과 이야기를 남기는 웹앱으로 완성되었고, 제12회 하이톤에서 대상을 수상했습니다. 사용자는 현재 위치나 검색한 장소를 기준으로 행복한 순간을 기록하고, 감정 필터와 인기 장소 목록을 통해 다른 기록을 탐색할 수 있습니다.

짧은 해커톤 기간 안에서 지도, 위치 권한, 주소 검색, 사진 업로드, 감정 필터, 좋아요, 바텀시트 UI, API 명세까지 연결했습니다. 특히 지도 기반 서비스에서 자주 발생하는 “좌표 선택 이후 무엇을 해야 하는가”의 흐름을 기록 폼과 상세 바텀시트로 자연스럽게 이어지게 만든 점이 핵심이었습니다.