연애성향테스트 기획서
좋습니다! 위의 내용을 기반으로, 정식 기획서 문서 형태로 정리해드리겠습니다.
기획 배경 → 주요 기능 → UX 흐름 → 기술 스택 → 개발 계획 → 배포 방식 순으로 구성한 실제 서비스 제안서 포맷입니다.
⸻
연애 취향 기반 녹지 데이트 추천 SPA 서비스 기획서
⸻
- 프로젝트 개요
1.1 서비스명 (가칭)
Romance-AI: 연애 취향 기반 커플 추천 플랫폼
1.2 기획 배경
• 사용자의 연애 성향을 테스트하고 그 결과를 기반으로 맞춤형 커플 유형 및 데이트 코스를 추천하는 인터랙티브 웹서비스 개발
• MZ세대의 테스트 참여 유도형 콘텐츠 활용
• 녹지 선호도와 장소 데이터를 활용한 ‘힐링 중심 데이트 추천’ 기능 강화
⸻
- 주요 기능 정의
기능 범주 설명
연애 취향 테스트 총 80문항 (5개 영역 × 16문항), 1~5점 점수화 후 평균값 계산
결과 분석 영역별 평균 기반 12개 유형 분류 (예: 안정형, 열정형 등)
결과 시각화 Radar 차트 + 성향 설명 + 캐릭터 배정
추천 기능 녹지 선호 기반 데이트 루트 추천 (공원 포함 필수)
경로 탐색 출발지 ~ 목적지 간 녹지 점수 기반 최적 경로 표시 (OR-Tools)
친구 비교 친구 결과와 내 결과 비교 → 차이 분석, 공유
공유 기능 URL 공유, 결과 PDF 저장, 카카오톡 공유 API 연동
마이페이지 응답 히스토리, 성향 변화 분석, 추천 결과 재열람 가능
⸻
- UX 흐름 구조 (SPA 기반)
[홈]
↓
[테스트 시작]
↓
[질문 응답 (라디오, 슬라이더)]
↓
[결과 분석 + 유형 표시 + 공유]
↓
[커플 추천 데이트 경로 보기 (지도)]
↓
[마이페이지: 히스토리 / 비교 / 분석]
※ 전환은 React Router 기반 클라이언트 사이드 라우팅으로 처리
⸻
- 기술 스택 및 구조
구분 기술
프론트엔드 React 18, Tailwind CSS, ShadCN UI, React Router
백엔드 Flask (Python), PostgreSQL (PostGIS)
지도/경로 Kakao Map Tile, Leaflet, Google Street View + DeepLab
상태관리 Context API (전역 응답/결과 관리)
배포 GitHub + Vercel
기타 jsPDF (결과 PDF 저장), html2canvas, Kakao.Share API
폴더 구조 요약
src/
├── pages/ // 라우트 단위
├── components/ // UI 및 기능 모듈
├── context/ // 전역 상태
├── router/ // SPA 라우터 구성
├── services/ // API 연동
├── styles/ // Tailwind CSS
⸻
- 개발 일정 (4주)
주차 목표 작업
1주차 디자인 시스템 + 테스트 UI Button, Card, Form 컴포넌트 제작
2주차 결과 분석 + 결과 화면 ResultCard, Toast, Modal, 결과 저장
3주차 녹지 추천 경로 기능 Map + RouteForm + Flask API 연동
4주차 공유 기능 + 전체 마감 비교, 공유, 마이페이지 정리, 배포
⸻
- 배포 전략
플랫폼: Vercel
• GitHub 연동 → 자동 CI/CD
• vercel.json 설정으로 SPA 리다이렉션 대응
• URL 기반 공유 기능 대응
• 추후 도메인 연결 가능 (ex. romance.ai)
⸻
- 향후 확장 아이디어
• 관리자 전용 통계 대시보드
• 캐릭터 기반 AI 연애 코칭 기능
• 친구와 결과 비교 후 “궁합 분석 보고서” 자동 생성
• 커스텀 데이트 코스 공유형 지도 생성
⸻
- 기대효과
• 유저의 자기이해 + 관계 진단 + 추천 기능을 하나로 통합
• 테스트 → 결과 → 액션(데이트)으로 연결되는 몰입 UX
• 데이터 기반 연애 분석 및 커플 행동유도 효과
• 감성 기반 테스트 UI + 녹지경로 탐색이라는 차별화
⸻
→ 이 기획서는 Notion, PDF, PPT로 변환 가능합니다. 어떤 형식으로 제작해드릴까요?
물론입니다! 아래는 당신이 지금까지 진행한 기획부터 개발, 배포까지의 전 과정을 체계적으로 정리한 문서입니다.
연애 취향 테스트 + 녹지 데이트 추천 SPA 어플의 전체 제작 과정을 9단계 로드맵으로 요약했습니다.
⸻
✅ 연애 취향 테스트 기반 SPA 프로젝트: 기획부터 배포까지 전체 과정
⸻
① 기획 Phase: 기능 정의 & 구조 설계
• 사용자 페르소나: 연애 성향을 알고 싶고, 추천 코스를 공유하고 싶은 사용자
• 핵심 기능 정의:
• 연애 성향 테스트 (5개 영역, 80문항)
• 결과 분석 → 12유형 매칭
• 친구 비교, 성향 변화 추적
• 녹지 데이트 코스 추천 + 지도 기반 경로 표시
• SPA 구조로 전환 결정 (라우팅/UX 강화)
⸻
② UX 플로우 설계
• 기능 흐름 구조:
홈 → 테스트 → 결과 → 추천 → 마이페이지 → 공유/비교
• 시각 자료:
• 사용자 플로우차트 (Figma 스타일)
• 기능 흐름도
• 폴더 구조 트리 다이어그램
⸻
③ 디자인 시스템 구축
• Tailwind CSS + ShadCN 기반 설계
• 공통 UI 컴포넌트 제작:
• Button, Card, TextInput, Slider, RadioGroup, Modal, Toast, Tabs
⸻
④ 기능 컴포넌트 개발
• 테스트 폼 구성: 문항 응답 (radio, slider 등)
• 결과 분석: 점수 → 코드 변환 → 유형 출력
• 결과 카드, 공유 모달, 비교 차트 개발
⸻
⑤ 녹지 추천 기능 통합
• Flask 백엔드 분석:
• /api/route, /api/parks, /api/geocode 연동
• 지도 표시: Leaflet + Kakao tile 사용
• 경로 탐색: OR-Tools 기반 최적 녹지 경로
⸻
⑥ SPA 구조 재편
• 폴더 구조 재설계: src/pages, src/components, src/router, src/context
• react-router-dom 기반 클라이언트 라우팅 구성
• 상태 관리: Context API로 전역 응답/결과 상태 유지
⸻
⑦ 전역 관리 및 재사용성 확보
• TestContext.jsx: 응답/결과 전역 관리
• 서비스 분리: services/resultApi.js로 API 통합
• UI → 기능 → 라우터 연결까지 일관된 구조화
⸻
⑧ 시각 자료 정리 + 산출물
• Figma 기반 플로우차트 생성
• 폴더 구조 시각 다이어그램
• 프로젝트 템플릿 .zip 생성
• Notion 일정표 & 기능 트래커 작성
⸻
⑨ 배포: Vercel 사용
• GitHub에 레포 업로드 → Vercel 연동
• vercel.json 설정으로 SPA 리다이렉션 처리
• 배포 URL 발급 → 공유 기능 테스트
• 자동 배포 및 커스텀 도메인 설정 가능
⸻
✅ 결과 요약
항목 내용
기술 스택 React, TailwindCSS, Context API, Flask, PostgreSQL, Kakao Maps
구조 방식 SPA (Single Page Application)
주요 특징 성향 테스트, 친구 비교, 녹지 코스 추천, 공유 기능
배포 방식 Vercel (CI/CD 자동 연동)
결과 산출물 템플릿 코드 zip, 플로우 다이어그램, 개발 일정표
⸻
이 내용을 Notion 페이지, PPT, PDF 중 어떤 형식으로 정리해드릴까요?
또는 Pitch Deck용 요약도 제작해드릴 수 있어요.
