keung-keung (킁킁)
디저트 유목인들을 위한 디저트 전문 지도 웹 서비스 개발
- React
- Javascript
- Vite
- Naver Maps API
- Tailwind CSS
왜 만들었나
최근 디저트 트렌드가 빠르게 변화하면서 새로운 디저트와 맛집을 찾는 사람들이 많아지고 있습니다. 하지만 다양한 디저트 가게를 일일이 찾아다니며 정보를 확인하는 데에는 불편함이 있다고 느꼈습니다. 이에 디저트를 찾아다니는 ‘디저트 유목민’을 위해 디저트 가게만 모아 한눈에 탐색할 수 있는 지도 기반 웹 서비스를 만들게 되었습니다. 사용자가 자신이 알고 있는 디저트 가게를 직접 등록하고 다른 사용자들과 공유하며, 댓글과 리뷰를 통해 다양한 가게의 정보를 함께 쌓아갈 수 있도록 기획했습니다.
핵심 기능
지도 탐색
회원 인증
댓글
찜하기
기술적으로 고민한 지점
네이버 지도 API 연동
네이버 지도 API를 처음 연동하는 과정에서 지도가 렌더링되지 않는 오류가 반복적으로 발생했고, 원인이 API 키 설정인지 인증 방식인지 파악하기 어려웠습니다.
- 네이버 클라우드 플랫폼 콘솔에서 서비스 URL과 IP 등록 여부를 하나씩 재점검
- 공식 문서와 AI 도구의 도움을 받아 오류 로그를 단계적으로 추적해 원인 범위를 좁힘
API 키 발급부터 도메인 등록까지의 인증 흐름을 정확히 이해하게 되었고, 외부 API 연동 시 인증 설정을 체계적으로 점검하는 습관을 갖게 되었습니다.
Firebase 기반 가게 등록 기능
사용자가 직접 좋아하는 디저트 가게를 등록할 수 있는 기능을 추가하려 했으나, Firebase를 처음 사용하다 보니 데이터 구조 설계와 쓰기 권한(Rules) 설정에서 막혔습니다.
- Firebase 공식 문서를 참고해 회원 관리, 댓글, 찜하기 기능부터 먼저 구현하며 Firestore 구조에 익숙해짐
- 가게 등록 기능은 보안 규칙과 데이터 검증 로직을 학습하며 단계적으로 설계 중
Firebase를 처음 다뤄보며 인증, 실시간 데이터베이스, 보안 규칙의 기본 구조를 익혔고, 이를 바탕으로 사용자 등록 기능을 다음 단계로 고도화할 계획입니다.
회고
평소 만들어보고 싶었던 서비스를 직접 기획하고 개발하면서 아이디어를 실제 서비스로 구현하는 과정을 경험할 수 있었다. 특히 Firebase를 활용해 데이터를 직접 관리하고 기능을 구현해보면서 서비스의 전체적인 흐름을 이해할 수 있었고, 기획부터 개발까지 직접 진행하는 과정에서 큰 재미와 흥미를 느낄 수 있었다. Firebase를 처음 접하면서 러닝커브를 과소평가했던 점이 아쉬웠습니다. 다음에는 새 기술 스택을 쓰기 전에 공식 문서로 데이터 모델링을 먼저 설계하고 시작하려 합니다.