Veganro
비건 장소 지도 서비스
비건 친화적인 식당과 카페를 사용자의 채식 선호도와 위치 기반으로 쉽게 찾을 수 있도록 돕는 비건 지도 서비스입니다.한국 사회에서의 비건 문화 문제점을 분석하고, 초기 아이디어 제안, 유저 타겟팅, 컨셉 기획 및 User Flow 설계를 진행했습니다.UI/UX 디자인 (전체 화면 구성 및 로고 디자인) 과 함께, React.js 기반 프론트엔드 개발(지도 API, 위치 검색, 필터 기능)을 구현하여 사용자 경험을 개선했습니다.
TIMELINE
24.04.01 ~ 24.04.19
TEAM
4 Frontend, 2 Backend
ROLE
Frontend Developer & UI Designer
CONTRIBUTION
· Planning : 100%
· Design : 100%
· Development : 50%
· Management : 50%
Backend
Node.js, Express, MongoDB, NestJS
Frontend
React, Tanstack Query, Recoil, Vite, Styled Components
Design Tools
Figma, Adobe Illustrator
사용자가 비건 친화적인 장소를 쉽게 찾고 공유할 수 있도록 하려면?
비건 식단을 실천하는 사람들은 외식할 때마다 적절한 식당을 찾는 데 어려움을 겪습니다. 일반 지도 서비스에서는 비건 친화적인 옵션이 명확하게 구분되지 않거나, 사용자 리뷰가 부족하여 신뢰할 만한 정보를 얻기 어려운 경우가 많습니다.Veganro는 이러한 문제를 해결하기 위해 개발되었습니다. 비건 친화적인 장소들을 큐레이팅하여 사용자가 위치 기반 검색 및 세부 채식 유형을 선택하여 자신의 채식 선호도에 맞는 장소를 쉽고 빠르게 찾을 수 있도록 도왔습니다.
현 위치 기반, 주변 비건 장소 검색 및 다양한 필터 기능을 통해 사용자의 선호도에 맞는 장소를 쉽게 찾을 수 있도록 최적화했습니다.
Veganro의 지도 기능은 사용자의 현재 위치와 필터 옵션을 반영하여 맞춤형 검색 결과를 제공합니다. 또한, 사용자는 비건 장소를 제보하고 리뷰를 공유하며 정보를 교류할 수 있습니다. 이를 통해 단순한 검색을 넘어 비건 문화를 확산하고 지속 가능한 라이프스타일을 실천할 수 있는 환경을 조성하였습니다.
로그인 & 회원가입
SNS 로그인 및 이메일 로그인 지원
카카오톡 및 이메일 로그인, 비회원 이용이 가능하며, 회원가입 시 비건 유형을 선택할 수 있습니다. 비건 유형에 따라 맞춤형 프로필 이미지가 제공됩니다. (*비회원은 마이페이지 접속, 장소 제보, 북마크, 리뷰 작성 등의 기능은 제한됩니다.)
지도 & 검색
현위치 기반 지도 서비스
지도의 마커를 클릭 시, 상세 모달을 통해 장소의 상세 페이지로 이동합니다. 상단 검색 창 클릭 시, 원하는 장소를 검색해 볼 수 있으며, 현 위치로부터 거리순 정렬이 되어 가장 가까운 비건 장소를 찾을 수 있습니다.
장소 상세 & 리뷰
리뷰 작성, 수정, 삭제 기능
현 위치와의 거리, 위치, 연락처, 영업시간, SNS URL 등의 정보를 제공합니다. 해당 레스토랑에 대한 리뷰를 조회, 작성 및 수정, 삭제할 수 있고 다른 사용자의 리뷰를 신고할 수 있습니다. 무한 스크롤을 통해 빠른 리뷰 로딩 속도를 제공합니다.
장소 제보
카카오 API 활용 주소 검색
새로운 채식 장소를 제보할 수도 있으며, 주소 검색을 통해 해당 장소의 위치를 지번과 도로명 주소로 가져와 정확한 위치로 등록 가능합니다. 관리자의 승인 후 장소가 등록됩니다.
마이페이지
제보한 가게, 리뷰, 북마크 관리
회원이 제보한 장소, 작성한 리뷰, 북마크 목록을 무한 스크롤을 통해 조회할 수 있습니다. 프로필 정보 수정이 가능하며, 사용자가 선택한 비건 유형에 따라 프로필 이미지가 변경됩니다.
페르소나의 이용 목표를 정의하고, 청사진에 맞게 메뉴 구조도를 구성했습니다.
사용자가 비건 친화적인 장소를 쉽게 찾고 공유할 수 있도록 하려면?
지도 기반 검색 시스템 설계 및 최적화
비건로 프로젝트에서는 다양한 비건 식당 정보를 효율적으로 제공하는 것이 가장 핵심이었습니다. 이를 위해 사용자의 탐색 동선을 단계적으로 분석하며, 직관적인 카테고리 및 필터링 시스템을 구축하기 위해 팀원들과 시뮬레이션을 진행했습니다.
특히, 메인 지도 화면에서 검색 페이지로 이어질 때 필터 항목을 전역적으로 유지하기 위한 방법을 고민하며, 전체 화면 흐름에서 사용자가 필요로 하는 요소들을 분석하는 과정을 팀원 전체가 검토하였습니다. 이를 해결하기 위해 기술적으로 어떤 방법이 적절한지를 고민했고, 상태 관리 라이브러리인 Recoil을 도입하였습니다. 이를 통해 전역 상태를 활용하여 필터 상태를 유지할 수 있도록 구현하였습니다.
효율적인 디자인-개발 협업 전략
프로젝트 진행 과정에서 디자인 시안과 실제 개발 결과물 간의 차이를 최소화하기 위해 디자인 시스템과 컴포넌트 기반 UI 개발 방식을 도입했습니다.
디자인 시스템을 통해 디자인 요소를 재사용 가능하게 하고, 컴포넌트 기반 UI 개발 방식을 통해 디자인 일관성을 유지하며 개발 효율성을 향상시켰습니다.
또한, 새로운 기술을 단기간에 적용해야 하는 상황에서 팀원들의 러닝 커브를 최소화할 수 있도록 적절한 개발 언어와 라이브러리를 선택하는 과정도 중요했습니다. 이를 위해 익숙한 기술 스택을 우선 고려하면서도, 프로젝트 요구사항에 맞춰 적절한 도구를 도입하는 방향으로 진행했습니다.