대본 확장형

moon.kick·2025년 5월 2일

Romance-AI 20분 발표 대본 (확장 버전)
Slide 1. 타이틀
안녕하세요. 오늘 발표할 서비스는 'Romance-AI'입니다.
이 프로젝트는 연애 성향 테스트와 녹지 기반 데이트 코스 추천 기능을 결합한 웹 기반 싱글 페이지 어플리케이션입니다.
단순히 성격 유형을 진단하는 데서 그치지 않고, 사용자에게 직접적인 실천 경로를 제시한다는 점에서 차별화됩니다.
오늘 이 시간에는 서비스의 기획 의도부터 기술 구현, 배포 전략, 그리고 향후 확장 가능성까지 단계적으로 설명드리겠습니다.
Slide 2. 프로젝트 개요
우리는 누구나 한 번쯤 연애 테스트를 해봤을 것입니다.
하지만 그런 테스트들이 실제 우리의 연애 방식이나 행동으로 이어진 적은 드물죠.
Romance-AI는 바로 그 간극을 메우고자 기획된 서비스입니다.
80문항에 달하는 연애 성향 테스트를 통해 사용자의 유형을 분석하고,
분석된 유형에 맞춰 '어떤 경로로 데이트를 해야 할지'를 추천합니다.
특히 요즘 각광받는 힐링 중심의 데이트 문화에 맞춰 녹지 공간을 적극 활용합니다.
Slide 3. 주요 기능 요약
Romance-AI는 크게 여섯 가지 주요 기능을 포함합니다.
첫째, 연애 성향을 다섯 개 영역으로 분류해 총 80문항의 테스트를 구성하였습니다.
둘째, 결과를 12가지 유형으로 세분화하여 각각의 특성에 맞는 설명과 캐릭터를 제공합니다.
셋째, 분석된 유형을 바탕으로 녹지 점수가 높은 공원 중심의 데이트 코스를 추천합니다.
넷째, 추천 경로는 지도 위에 시각적으로 표시되며, 거리와 시간, 녹색 점수까지 확인 가능합니다.
다섯째, 친구와 결과를 비교하여 궁합을 분석할 수 있고, PDF 저장 및 카카오 공유 기능도 내장되어 있습니다.
마지막으로, 마이페이지에서는 과거 결과 히스토리를 시각화하여 성향 변화를 추적할 수 있습니다.
Slide 4. UX 흐름
서비스의 UX 흐름은 단순하면서도 유기적으로 연결되어 있습니다.
사용자는 홈 화면에서 '테스트 시작' 버튼을 누르면 바로 문항 응답 페이지로 이동합니다.
라디오 버튼과 슬라이더 UI를 통해 간편하게 80문항을 응답하고,
응답이 완료되면 캐릭터, 성향 코드, 레이더 차트 등이 포함된 결과 페이지로 이동합니다.
이후 '추천 보기' 버튼을 통해 본인 유형에 적합한 녹지 중심의 데이트 코스를 추천받고,
해당 경로는 지도 위에 실시간으로 표시됩니다.
이 전체 흐름은 단 한 번의 페이지 리로딩 없이 이루어지며, 모든 라우팅은 클라이언트에서 처리됩니다.
Slide 5. 기술 스택 및 구조
프론트엔드는 React 18 버전을 기반으로 구성되었고, TailwindCSS와 ShadCN UI를 통해 일관된 디자인 시스템을 구축했습니다.
상태 관리는 React의 Context API를 활용하여 테스트 응답 및 결과 데이터를 전역에서 공유할 수 있도록 했습니다.
백엔드는 Python Flask로 구축되었으며, PostgreSQL 데이터베이스에는 PostGIS 확장을 적용하여 공간 데이터를 처리합니다.
녹지 경로 추천 알고리즘은 Google의 OR-Tools를 활용해 거리와 녹색 점수를 가중치로 조합한 최적 경로를 탐색합니다.
지도는 Kakao Map Tile을 Leaflet으로 연동하여 사용했고,
녹지 점수는 Google Street View 이미지에 대해 DeepLab v3+ 모델을 통해 세그먼테이션 처리 후 추출하였습니다.
이러한 구조 덕분에 데이터 기반 추천과 감성적 UI가 공존할 수 있었습니다.
Slide 6. 폴더 구조 요약
폴더 구조는 기능 중심, 도메인 중심으로 나누었습니다.
예를 들어 테스트 화면은 pages/Test.jsx, 결과는 pages/Result.jsx에서 관리하고,
그 외 UI 컴포넌트는 components/ui/, 입력 컴포넌트는 components/form/으로 분리했습니다.
공통 상태 관리는 context/TestContext.jsx에 정의되어 있으며,
라우팅은 router/AppRouter.jsx를 통해 모든 페이지가 React Router로 연결됩니다.
이러한 구조는 확장성뿐 아니라 팀 개발 시의 역할 분리에도 유리한 기반을 제공합니다.
Slide 7. 개발 일정
전체 개발은 총 4주간 진행되었습니다.
1주차에는 기본 폴더 구조와 디자인 시스템을 구축했고, 테스트 UI를 완성했습니다.
2주차에는 테스트 결과 분석 알고리즘과 결과 페이지 UI를 구현하였으며, 공유 기능까지 연동했습니다.
3주차에는 Flask 서버와 Leaflet 기반의 지도 경로 추천 기능을 통합했고, 실제 공원 위치를 활용하여 테스트했습니다.
4주차에는 마이페이지, 친구 비교 기능, 그리고 PDF 저장, 카카오 공유 연동까지 마무리한 뒤 Vercel에 배포하였습니다.
Slide 8. 배포 전략
배포는 GitHub → Vercel 자동화 파이프라인을 활용했습니다.
Create React App preset을 선택하면 Vercel이 자동으로 빌드 과정을 인식하고 배포합니다.
SPA 라우팅 문제는 vercel.json 파일에서 모든 경로를 index.html로 rewrite 처리하여 해결했습니다.
또한 결과 공유 URL은 Vercel에서 제공하는 기본 도메인을 사용하며, 필요시 커스텀 도메인으로 변경 가능합니다.
모든 변경 사항은 Git push만으로 자동 배포되어 운영이 간편합니다.
Slide 9. 확장 방향
향후에는 다음과 같은 확장을 고려하고 있습니다.
먼저, 관리자 전용 대시보드를 추가하여 응답 통계와 유형 분포를 시각화할 수 있도록 할 것입니다.
두 번째는 GPT 기반의 연애 코칭 챗봇을 도입하여 유형별 질문 응답형 서비스를 제공합니다.
세 번째로, 사용자가 직접 커스텀 데이트 루트를 생성하고 친구들과 공유할 수 있도록 기능을 확장할 예정입니다.
마지막으로, 비교 기능을 강화하여 '궁합 분석 리포트'를 자동 생성하고, PDF로 저장하거나 공유할 수 있도록 할 것입니다.
Slide 10. 기대효과
이 프로젝트를 통해 사용자는 단순히 성향을 아는 데 그치지 않고,
자신의 성향에 맞는 실천 방법, 즉 데이트 코스까지 직접적으로 추천받을 수 있습니다.
감성적 UI와 데이터 기반 추천이 결합된 몰입형 서비스로,
연애 테스트 → 분석 → 실천 → 공유까지 하나의 UX 흐름으로 연결됩니다.
이는 자기이해뿐 아니라 관계 개선, 그리고 공유를 통한 커뮤니케이션까지 유도하는 데 효과적입니다.
향후에는 커플 기반 행동 데이터 플랫폼으로 확장할 수 있는 가능성도 매우 큽니다.

profile
@mgkick

0개의 댓글