1월 12일 작성한 스택 및 주제 방향성

주제 선정/기술 스택

→ 레퍼런스 주소도 이 안에 있음

종합프로젝트 기획안_1조(칠색조) .docx

칠색조_WBS .xlsx

종합프로젝트 기획안

2026년 1월 14일

과정명 : LG유플러스 유레카 프론트엔드 비대면 개발자

팀명 1조 : 칠색조 (다무너[Da-Moono])
팀원 팀장: 김예린 팀원 : 류종현, 최낙운, 이해니, 양해강, 유덕현, 이혁준
프로젝트 주제 상담 요약 기능이 있는 통신사 페이지
프로젝트 목적 본 프로젝트는 상담 기록 요약 기능을 중심으로 한 프론트엔드 화면 구현을 통해 실무형 개발 역량을 강화하는 것을 목적으로 한다.

상담 대화 내용과 상담 정보를 입력·선택하고, 요약 요청 과정에서 발생하는 화면 상태 변화와 결과 화면을 구성함으로써 비동기 데이터 처리와 UI 상태 관리에 대한 이해를 높인다.

또한 목 API를 활용한 데이터 통신을 통해 실제 백엔드와 연동하는 상황을 가정하고, 예외 처리 및 사용자 경험을 고려한 화면 설계 능력을 기르는 데 중점을 둔다.

특히 AI 요약 기능과 AI 챗봇 API를 연동하여 상담 대화 내용을 요약하고 상담 기록 정리를 보조함으로써, 실제 상담 업무에서의 생산성 향상 가능성을 검증한다. | | 프로젝트 수행 방향 (개발일정 및 역할분담) | ● 일정 1/12 ~ 1/14: 주제 기능 선정 및 역할 분담, 일정 수립 1/14 ~ 1/17: 피그마 UI 설계 1/18 ~ 1/20: 프로젝트 초기 세팅 및 백엔드 개발 1/21 ~ 1/27: 프론트엔드 개발 및 API 연결 1/28 ~ 1/29: 통합 및 리펙토링 , 배포 1/30 : 프로젝트 마무리     ● 역할분담 공통: 기획 및 피그마 UI 설계 김예린(조장): 간단한 요금제 및 구독 상품 답변, 상담사 연결 가능한 텍스트·음성 기반 AI 챗봇 구현 류종현: 마이페이지 및 관리자페이지 상담 이력·이용 데이터를 시각화, 요금제/구독 정보 및 상담 히스토리 조회 UI 구현, 다중 데이터 로딩에 대한 렌더링 최적화와 3D 로딩 UI 적용 양해강: 백엔드 기능 및 프론트 배포, 로그인 & 회원가입 이해니: 상담사 양방향 통신, 상담 내용 요약 및 후속 액션 제안 기능 이혁준: 온보딩 및 홈 UI, 사용자 성향 분석 알고리즘 및 UI 구현 유덕현: 자주 묻는 질문(FAQ)과 군인·미성년자·대리인 가입 시 필요한 구비 서류 안내 제공 하는 UI 구현 최낙운: 구독 서비스와 요금제 목록을 비교·선택할 수 있는 UI 구현 | | 프로젝트 수행 도구 | - Front end vscode

  1. AI 챗봇 기능 요금제 및 구독 상품 추천, 실시간 상담 진행 연결이 가능한 텍스트·음성 기반 AI 챗봇 기능 제공 대화 기반 맞춤형 상품/혜택 유도
  2. 상담 시스템 상담사와 양방향 통신을 통한 대화형 상담 시스템 제공
  3. 상담 내용 요약 및 후속 액션 제안 기능 상담 종료 후 대화 내용을 자동 요약하고, 사용자에게 적합한 요금제·구독 상품 비교 및 추천 정보 제공
  4. 회원가입 및 로그인 백엔드 기능 사용자 계정 생성, 로그인 및 인증 처리, 상담 기록 관리를 위한 서버 기반 회원 관리 기능 구현
  5. 사용자 성향 분석 기능 사용자의 질문에대한 응답을 기반으로 성향을 분석하여 개인화된 추천 서비스 제공
  6. 고객센터 안내 페이지 자주 묻는 질문(FAQ)과 군인·미성년자·대리인 가입 시 필요한 구비 서류 안내 제공
  7. 마이페이지 기능 사용자의 현재 요금제 및 구독 상품 정보 조회, 상담 히스토리 확인 기능 제공
  8. 구독(유독) 및 요금제 선택 페이지 구독 서비스와 요금제 목록을 비교·선택할 수 있는 UI 제공
  9. 상담 데이터 분석 어드민 페이지 상담 이력 및 이용 데이터를 시각화하여 관리자가 확인할 수 있는 분석 페이지 제공 | | 포함 기술 | 1. Core Frontend Stack (공통 기반) • React & TypeScript: 안정적인 타입 시스템 기반의 컴포넌트 개발 및 유지보수성 향상 • Vanilla-extract: Zero-runtime CSS-in-JS를 통한 성능 최적화 및 타입 안전한 스타일링 • Axios & TanStack Query (React Query): 서버 데이터 페칭 최적화, 캐싱 처리 및 API 상태(Loading, Error) 통합 관리 2. State Management (상태 관리) • Zustand: 가볍고 직관적인 전역 상태 관리를 통한 사용자 인증 및 상담 세션 관리 3. AI & 실시간 인터랙션 • OpenAI API (or LangChain): 상담 요약 엔진 및 맞춤형 상품 추천 로직 구현 • Web Speech API: 음성 인식(STT) 및 합성(TTS)을 통한 보이스 챗봇 기능 • Framer Motion: 성향 테스트 및 챗봇 응답 시 부드러운 UX를 위한 선언적 애니메이션 적용 4. 데이터 시각화 • Chart.js (or Recharts): 상담 데이터 분석 및 요금제 비교 리포트 시각화 5. 품질 검증 및 성능 최적화 (프로젝트 핵심 목표 반영) • Jest & React Testing Library: 핵심 비즈니스 로직(요금 계산, 성향 분석) 단위 테스트 • Lighthouse: 웹 표준 및 접근성 준수, 초기 로딩 성능(LCP) 최적화 6. Collaboration & DevOps • GitHub Actions: 코드 품질 관리를 위한 자동 빌드 및 테스트(CI/CD) 파이프라인 구축 |

■ WBS는 구글드라이브에 업로드(필수아님)

→지라로