vroomfan

채식 지도

채식 식당의 정보와 재방문율을 알려주는 지도 서비스입니다.

URL: https://vegimap.loplat.com

기술 블로그: https://vroomfan.tistory.com/search/채식 지도

개발 기여도: 100%

기술 스택

Next.js, Naver Map API, swr, rxjs, hammer.js, react-window

기획 과정

  • 회사가 보유하고 있는 위치 데이터를 이용하여 작은 프로젝트들을 시도하는 것을 회사 차원에서 장려했습니다.
  • 채식 식당에 관심이 있던 와중, 채식 식당에 대한 정보를 좋은 UI/UX로 제공하는 서비스가 아직 없다는 것을 알게 되었습니다.
  • 회사가 보유하고 있는 매장 데이터와 접목시켜 채식 지도 서비스를 개발하기로 했습니다.
  • 필요한 기능과 화면 레이아웃을 직접 기획했고 세부적인 UI와 마커 이미지 등은 디자이너의 도움을 받았습니다.

작업 내용

  • 지도 UI 개발

    • 매장의 위치에 따라 마커를 지도에 표시했습니다.

    • 지도 클러스터링을 적용하여 많은 마커를 효율적으로 표현했습니다.

      • 이 때, 기존 naver map의 픽셀 기반 클러스터링 대신 행정 구역과 동네에 따라 클러스터링 되도록 구현했습니다.
      • 채식 식당이 특정 지역에 밀집된 경우가 많기 때문에, 지역에 따라 클러스터링하는 것이 더 적합하다고 판단했습니다.
    • 공유하기 버튼을 통해 현재 지도의 위치와 줌 레벨을 URL로 공유할 수 있도록 했습니다.

example-1

  • 매장 목록 개발

    • 페이지 하단 Slider UI와 지도 UI를 연동했습니다.

    • swipe 제스처를 통해 Slider UI를 제어할 수 있도록 했습니다.

      • 제스처 라이브러리로 hammer.js를 사용했습니다.
      • swipeup, swipedown 제스처로 Slider UI를 올리거나 내릴 수 있습니다.
      • swiperight 제스처로 상위 행정 구역으로 이동할 수 있습니다. 이 때, 지도 UI의 줌 레벨도 연동됩니다.
    • react-window를 이용하여 매장 목록 UI를 최적화했습니다.
    • rxjs를 이용하여 매장 데이터를 다루었고, 행정 구역의 계층과 현재 지도의 위치에 따라 매장 목록을 필터링했습니다.

  • 상세 페이지 개발

    • 상세 페이지에 매장 정보와 재방문율을 표시했습니다.
    • 지도의 마커를 클릭했을 때도 상세 페이지가 나타나도록 연동했습니다.

    • 공유하기 버튼을 통해 선택한 매장의 상세 페이지를 URL로 공유할 수 있도록 했습니다.

      • 공유된 URL을 통해 접속했을 때, 지도의 위치와 줌 레벨이 해당 매장을 중심으로 설정되도록 했습니다.

example-2

  • 피드백 페이지 개발

    • 유저의 피드백을 받기 위한 페이지를 개발했습니다.
    • 재미를 주기 위해 무한한 포스트잇 게시판 UI를 구현했습니다.
    • 피드백 추가 시, 달팽이 배열 로직을 이용해 포스트잇이 역동적으로 움직이도록 했습니다.

example-3

project
map
ux
nextjs
← loplat UI