성향 테스트와 챗봇을 통해 나에게 딱 맞는 통신사 요금제를 추천해주는 AI 맞춤형 서비스
유레카 프론트엔드 개발자 2기 종합 프로젝트 우수상🎖️
🗣️ 발표 자료
| 항목 | 내용 |
|---|---|
| 프로젝트명 | 무물 moo-mool |
| 팀명 | YouGodIT |
| 주제 | 성향테스트 기반 AI 요금제 추천 서비스 |
| 타겟층 | SNS 트렌드에 민감한 MZ세대 |
| 개발 기간 | 2025.06.04 ~ 2025.06.26 (약 3주) |
| 팀 구성 | Frontend 6명 (Full-Stack + AI) |
| 기능 미리보기 | 기능 설명 |
|---|---|
 |
1. 🔐 소셜 로그인 & 인증 시스템 (NextAuth + Middleware) - NextAuth.js + Kakao OAuth2: 소셜 로그인 구현- JWT (HttpOnly Cookie 저장): 안전한 인증 정보 관리- Next.js Middleware: 인증된 사용자만 접근 가능한 경로 보호- Zustand + localStorage: 인증 상태 및 사용자 정보 전역 관리- Axios Interceptor: 401 응답 시 자동으로 Refresh Token 재요청 처리 |
 |
2. 💡요금제 탐색 및 비교 - Next.js + Prisma (MySQL) : 서버 API 및 DB 연동- Chart.js : 사용 요금제와 추천 요금제 비교 시각화- Tailwind CSS + Framer Motion : 리스트/카드 기반 UI 구성 및 애니메이션- TanStack Query (React Query) : 요금제 리스트 무한 스크롤- URL 쿼리 기반 필터링 : 통신망(LTE/5G), 가격, OTT 포함 여부 서버 필터링 |
 |
3. 🧠 AI 챗봇 요금제 추천 (텍스트/음성) - OpenAI 기반 챗봇과 대화하며 요금제 추천 - 텍스트/음성 입력 모두 지원 - 성향 질문 기반 요금제 추천 대화 흐름 구성 - 대화 중 모드 전환(정확 / 자연) 가능 - 챗봇 중간 이탈 후 재접속 시 대화 이어짐 |
 |
4. 🎭 밈 테스트 기반 무너 캐릭터와 요금제 추천 - 6가지 카테고리 (SNS, Youtube, Call, Chat, Books, Savings)의 질문을 통해 사용자 통신 성향 도출- Next.js App Router + Prisma : 성향 분석 결과 저장 및 추천 흐름- CryptoJS (AES) : 공유 링크 내 userId 암호화 및 복호화 처리- generateMetadata() : 공유 페이지 별 OG 메타태그 동적 설정- KakaoTalk SDK : 카카오톡 공유 기능 및 클릭 트래킹 구현- Zustand : 테스트 결과 및 상태 전역 관리- OG Preview 최적화 : 공유자 이름 포함한 미리보기 문구 자동 반영 |
 |
5. 🧭 주변 사용자 탐색 & 실시간 상호작용 - WebSocket (ws) : 사용자 위치 실시간 공유 및 클릭 이벤트 전송- Geolocation API : GPS 기반 사용자 위치 탐지 및 반경 100m 내 접속자 존재 탐지- Vibration API + 하트 애니메이션 : 상대방 클릭 시 피드백 제공- Zustand + useRef/useMemo : 상태 캐시 및 렌더링 최적화- Framer Motion : 아바타 등장 및 클릭 시 동적 애니메이션 처리- Sonner : 커스텀 토스트로 근처 사용자 탐색 반경 100m 내 접속자 존재 시 Home 화면에 toast 알림🔗 WebSocket 서버 바로가기 |
 |
6. 📋 요금제 탐색 & 비교 시각화 -통신망, 속도, 가격, 혜택, 정렬 등 URL 쿼리 기반 서버 필터링 구현 -무한 스크롤 Pagination을 통한 성능 최적화 및 Lazy Loading - useInfiniteQuery + IntersectionObserver를 활용한 페이지네이션 처리-사용자 니즈에 맞춘 정렬/필터 패널 UI 구성 - Tailwind CSS + Shadcn 기반 일관된 카드형 UI 구현-선택한 요금제의 가격, 데이터, 부가통화, 혜택, 속도 등 세부 정보 시각화 -사용자 성향 기반 요금제 비교 차트 (레이다 + 바 차트) 구성 - Chart.js 기반 FlipCard UI 및 비교 모드 전환 애니메이션 구현-사용자 현재 요금제 vs 추천 요금제 수치 비교 시 애니메이션 처리 - Framer Motion 기반 인터랙션 모션 최적화 처리 |
| 분야 | 기술 스택 |
|---|---|
| Frontend |         |
| Backend |      |
| Auth / Social Login |    |
| AI Integration |   |
| Deployment / Infra |    |
| Collaboration / Tools |      |
| Code Quality / Testing |   |
| 프로필 | 이름 | 주요 역할 및 기여 내용 |
|---|---|---|
 |
이은비 @silverain02 |
팀장 · 음성 챗봇 리드 - 프로젝트 기획 총괄 및 워크플로우 설계 - 음성 입력 기반 AI 요금제 챗봇 구현 - 음성 인식 처리 로직 및 UI 컴포넌트 구성 - 요금제 추천 흐름 설계 및 테스트 - 요금제 상세 정보 조회 기능 API 연동, 데이터 시각화 전처리 - 외부 API 응답 데이터 정제 (XML to JSON) - Skeleton UI와 로딩 페이지 구현 - react-query 옵션 튜닝 |
 |
박은서 @arty0928 |
풀스택 · 근거리 통신 & 공유 시스템 리드 - 서비스 전체 워크플로우 설계 - 실시간 위치 공유 시스템 및 Node.js 서버 구현 - ERD 설계 기반 Prisma ORM으로 DB 스키마 및 관계형 모델링 구축 - Kakao OAuth2 사용자 상태 Zustand 전역 관리 - 위치 기반 사용자 정보 수집 및 클릭 이벤트 처리 로직 구현 - 성향 테스트 제출 및 레벨업 시스템 API 구현 - 공유 URL 내 userId AES 암호화 및 CryptoJS 기반 보안 처리 및 OG 메타 태그 동적 설정 - 보상 시스템 로직 설계 및 클릭 이벤트 연동 - 테스트 홈·결과 페이지, Nearby 위치 UI |
 |
박희준 @heejun8 |
풀스택 · 요금제 시각화 및 추천 시스템 - Chart.js 기반 요금제 비교 시각화 구현 - 사용자의 현재 요금제와 추천 요금제 시각적 비교 인터페이스 개발 - 요금제 상세 정보 페이지 및 필터·정렬 기능 구현 - 요금제 리스트 Pagination 및 Lazy Loading 처리 - 추천 요금제 데이터 가공 및 백엔드 API 연동 |
 |
안민지 @minji-38 |
풀스택 · 밈 테스트 UI 및 콘텐츠 리드 - 밈 테스트 디자인 총괄 및 문항 콘텐츠 제작 - 문항 설계 및 결과 유형 매칭 로직 구현 - 성향 테스트 결과 페이지, 마이페이지 UI 및 애니메이션 적용 - 마이페이지 모달 및 공통 햄버거 메뉴 구현 |
 |
정다희 @alotofhee |
풀스택 · AI 챗봇 플로우 & 인증 시스템 설계 - ERD 설계 및 Swagger API 문서 작성 - Next.js middleware.ts 기반 인증 라우팅 구현- 로그인 여부에 따라 페이지 접근 제한 및 리디렉션 처리 - 랜딩, 온보딩 페이지 UI 및 인터랙션 구현 - AI 챗봇 단계별 로드맵 모달 UI 및 흐름 제어 로직 구현 |
 |
허준호 @gichulLimitLess |
풀스택 · AI 챗봇 & 요금제 추천 시스템 리드 - OpenAI 연동 챗봇 대화 흐름 설계 및 질문 템플릿 구성 - 추천 요금제 응답 JSON 파싱 및 카드형 UI 렌더링 처리 - 자연스러운 모드 / 정확한 모드 전환 로직 구현 - 요금제 추천 시스템 API 통합 및 응답 최적화 - 사용자 챗봇 대화 기록 저장 및 AI 요약 기능 구현 |
npm install
npm run dev
Team YouGodIT | LG U+ URECA 프론트엔드 개발자 과정 2기 종합프로젝트 1조