실시간 상담 및 AI 기반 상담 요약 통신사 플랫폼, 다무너 (DaMoono) 🐙

다무너(DaMoono) 는 사용자 맞춤형 최적의 요금제를 추천하고,
AI 챗봇과 실시간 상담사 연결을 결합하여
AI를 통한 상담 요약까지 제공하는 통합 요금제 상담 서비스입니다.

📑 PPT : 발표 자료 링크
🌐 배포 링크 : 서비스 바로가기
🎥 시연 영상 : Youtube 시연 영상

---

📌 프로젝트 개요

항목	내용
프로젝트명	다무너 (DaMoono)
서비스 주제	실시간 상담 · AI 기반 상담 요약
해결 방식	AI 챗봇 및 요약 + 실시간 상담 병행
개발 기간	2026.01.12 ~ 2026.01.30
팀 구성	Frontend 6명 · Backend 1명

---

🔧 주요 기능

기능 미리보기	기능 설명
	1. 🔐 로그인 & 인증 시스템 • 로그인 여부에 따라 접근 가능한 페이지 제어 • 인증 정보는 보안성을 고려해 쿠키 기반으로 관리 • 전역 상태 관리로 새로고침·페이지 이동 시 로그인 상태 유지 • 인증 만료 또는 실패 시 로그인 페이지로 안전하게 리다이렉트
	2. 🧠 AI 챗봇 요금제 추천 (텍스트 / 음성) • OpenAI 기반 챗봇과 대화하며 요금제 추천 제공 • LangChain Conversation Chain 기반 대화 흐름 설계 • 의도 분석 → 프롬프트 생성 → 요금제 후보 도출 → 카드형 응답 렌더링 구조 • 텍스트 입력 / Web Speech API 기반 음성 입력 모두 지원 • 성향 테스트 결과를 프롬프트 컨텍스트에 포함해 추천 정확도 향상 • 정확 모드 / 자연 모드 전환 가능 • 챗봇 이탈 후 재접속 시 대화 히스토리 유지
	3. 💬 실시간 1:1 상담 시스템 (WebSocket) • AI 상담으로 해결되지 않는 경우를 대비한 실시간 상담사 연결 기능 • Socket.IO 기반 WebSocket 통신으로 사용자–상담사 1:1 매칭 • 상담 요청 → 대기 → 연결 → 종료 단계의 세션 상태 관리 • Room 기반 메시지 중계 구조 • 상담 종료 시 세션 및 소켓 정리로 안정적인 연결 유지
	4. 📊 요금제 탐색 및 비교 시각화 • 통신망(LTE/5G), 가격, 데이터, 혜택 기준 요금제 탐색 • 요금제 공통 데이터 모델 정의로 필터·정렬 로직 단순화 • Chart.js 기반 요금·데이터·혜택 비교 시각화 • Flip Card UI로 핵심 정보 / 상세 정보 단계적 노출 • Framer Motion으로 비교 모드 전환 애니메이션 구현
	5. 🎭 사용자 맞춤형 요금제 추천 • 데이터 사용량, 통화 빈도, 가격 민감도 등 질문 구성 • 점수 기반 로직을 통한 사용자 맞춤형 요금제 제공 서비스 • 질문 폼 재사용 가능하도록 구현
	6. 📱 채팅 모드 분리 구조 • AI 채팅: 요금제 추천 및 정보 제공 • 상담 채팅: WebSocket 기반 실시간 1:1 상담 • 관리자 모드: 상담 세션 관리 및 상담사 전용 UI • 가이드 모드: FAQ 및 서비스 이용 안내 제공
	7. 📝 상담 요약 및 히스토리 • AI 기반 상담 내용 자동 요약 • 마이페이지에서 과거 상담 내역 조회 • 상담별 주요 내용 및 추천 요금제 확인
	8. 📚 고객 지원 가이드 • 군인 요금제 가이드 • 미성년자 가입 안내 • 대리인 가입 절차 안내 • FAQ 및 자주 묻는 질문

⚔️ 기술 스택

분야	기술
Frontend
3D / UI
Backend
AI
Deploy
Design & Collaboration
Dev Tools

📦 설치 및 실행

환경 변수 설정

Frontend (.env)

VITE_API_URL=https://damoono-backend-production.up.railway.app
VITE_API_BASE_URL=https://damoono-backend-production.up.railway.app

Backend (.env)

PORT=3000
OPENAI_API_KEY=your_openai_api_key_here
NODE_ENV=development

설치 및 실행

cd DaMoono-Frontend
npm install
npm run dev

cd DaMoono-Backend
npm install
npm run dev

🏗️ 시스템 아키텍처

``` Frontend (React + Vite) ↕ REST API / WebSocket Backend (Node.js + Express + Socket.IO) ↕ LangChain + OpenAI API ```

🔄 플로우 차트

Service Flow

Admin Flow

상담 흐름

1. 상담 요청
2. 대기 세션 등록
3. 상담사 매칭
4. 실시간 상담
5. 상담 종료 및 요약

---

👥 팀원 및 역할

프로필	이름	주요 역할 및 기여
	김예린 @yerroong	Frontend · AI 팀장으로, OpenAI + LangChain 기반 텍스트·음성 AI 챗봇 프론트·백엔드 연동 구현, 요금제·구독 상품 응답 로직 설계, Socket.IO 기반 실시간 상담 채팅 통신 구현, 상담사 채팅 UI 개발, 챗봇 대화 흐름·프롬프트 설계 및 챗봇 매뉴얼 제작
	류종현 @jonghyunRyu	Frontend 마이페이지 및 관리자 페이지 UI 구현, 상담 이력·이용 데이터 시각화, 요금제·구독 정보 조회 UI 개발, 다중 데이터 로딩 렌더링 최적화 및 3D 로딩 UI 적용
	양해강 @Inoansta	Backend · AI 백엔드 프로젝트 및 DB 초기 셋업, 회원가입·인증 API 구현, REST API 설계, 프론트엔드 연동 및 서비스 배포 환경 구성, AI 기능 연동을 위한 서버 구조 설계
	이해니 @haeni82	Frontend 상담 요약 페이지(UI) 구현, 유저용 상담 요약 프롬프트(JSON) 설계, 상담사 WebSocket 양방향 통신 구조 설계, 상담 요약 및 후속 액션 제안 기능 기획
	이혁준 @Lilium0422	Frontend 홈·온보딩·성향 분석 페이지 UI 및 컴포넌트 구현, 사용자 성향 분석 로직 설계, 공용 레이아웃(헤더·하단 메뉴) 및 서비스 가이드 UI 개발
	유덕현 @Ydh0622	Frontend FAQ 페이지 및 군인·미성년자·대리인 가입 시 구비 서류 안내 UI 구현, 이미지 애니메이션 및 인터랙션 마무리
	최낙운 @skrdnss-byte	Frontend 구독·요금제 서비스 UI 및 컴포넌트 구현, 백엔드 API 연동, 데이터 분석차트 시각화 및 비교 기능 설계 구현, 로그인 상태 기반 동적 UI/UX 구현