Couple Map
PRODUCT함께 다닌 곳과 추억을 기록하는 모바일 커플 PWA
- 기간
- 2026.08 ~ 2026.09
- 역할
- 기획 · 구현 단독
- 사용 기술
- React 19 · Firebase · Kakao Maps · d3-geo
개요
커플이 함께 다녀온 장소를 기록하고 공유하는 모바일 우선 PWA입니다.
입력 단계를 지도 핀 한 번으로 줄이고, 방문 지역이 채워지는 지도를 지속 사용에 대한 시각적 피드백으로 구성했습니다.
문제와 해결
- 01
두 사람만 접근하는 공유 기록
장소·기념일·편지는 두 사람이 공유하지만, 화면에서 다른 기록을 숨기는 것만으로는 직접 요청을 막을 수 없습니다.
Firestore 보안 규칙으로 인증 사용자와 커플 식별자를 대조하고, 허용·거부 시나리오를 에뮬레이터 테스트로 검증했습니다.
- 02
방문 지역을 채우는 지도
핀은 카카오 지도 SDK로 충분하지만, "다녀온 지역 채우기"는 행정구역 폴리곤이 있어야 합니다.
d3-geo로 국내 시도·세계 국가 경계를 직접 그려 핀 좌표를 지역에 귀속시켰습니다.
주요 구현
- 카카오 지도 핀 — 맛집·카페·데이트 장소 기록
- d3-geo 기반 국내·세계 지역 지도 채우기
- 공유 타임라인 · 기념일 · 편지 · 채팅 · 타임캡슐
- 6종 팔레트 테마 글래스 디자인 시스템
- Firestore 보안 규칙 + 에뮬레이터 규칙 테스트
- react-hook-form + zod 폼 검증, Sentry 에러 수집
회고
두 사람이 함께 쓰는 제품에서는 화면 기능보다 공유 범위와 접근 권한을 먼저 정의해야 했습니다. 이 기준을 Firestore 규칙과 테스트에 함께 반영했습니다.