[URECA] 종합프로젝트 회고록 - MoonoZ

 

 

무너즈(MoonoZ) - LG U+ AI 혜택 큐레이션 플랫폼 개발 회고록

안녕하세요! 오늘은 LG U+ 유레카 SW교육과정에서 진행한 종합프로젝트 무너즈(MoonoZ) 개발 회고입니다.

해당 프로젝트는 유레카 프론트엔드 개발자 2기 종합프로젝트에서 최우수상을 수상한 뜻깊은 프로젝트였는데요!

3주라는 짧은 기간 동안 팀장으로서 팀을 이끌며 AI 기반 서비스를 구축한 경험을 공유해보겠습니다!

 

 

프로젝트 소개

 

 

• 프로젝트명: MoonoZ (무너즈)
• 주제: MZ세대를 위한 스마트한 LG U+ 혜택 큐레이션 서비스
• 개발 기간: 2025.06.04 ~ 06.26 (약 3주)
• 팀 구성: 5명 (Full-Stack)
• 수상: 유레카 프론트엔드 개발자 2기 종합프로젝트 최우수상

 

프로젝트 주제 선정 배경

 

최근 경기 불황과 구독료 인상으로 인해 '요노족'(You Only Need One) 이라는 신조어가 등장할 정도로 MZ세대의 합리적 소비 성향이 강해지고 있습니다. 특히 2030세대의 60%가 제휴나 할인을 통해 구독 서비스를 이용하고 있다는 조사 결과가 있었습니다.

 

하지만 LG U+에는 이러한 MZ세대를 위한 다양한 혜택이 있음에도 불구하고,

공식 어플이나 사이트에서 정보가 분산되어 있어 사용자들이 자신에게 맞는 혜택을 찾기 어렵다는 문제점을 인식하게 되었습니다.

 

그래서 저희 팀은 AI 챗봇을 통해 개인의 통신 패턴을 분석하여 최적의 요금제와 구독 서비스를 추천하는 큐레이션 서비스를 기획하게 되었습니다!

 

ERD 다이어그램

 

시연 영상

소리를 약간 줄이고 들어주세요..

 

 

기술 스택

Frontend

React + TypeScript + Vite + TailwindCSS + Zustand + React Query + Axios

 

이번 프로젝트에서는 복잡한 AI 챗봇과 실시간 스트리밍을 구현해야 했기 때문에, 상태 관리와 성능 최적화가 중요했습니다. 특히 Zustand를 선택한 이유는 Redux보다 가볍고 직관적이면서도, 다양한 모달과 전역 상태를 효율적으로 관리할 수 있었기 때문입니다.

 

Backend & AI

Spring Boot + MySQL + Redis + FastAPI + LangChain + OpenAI

 

백엔드는 Spring Boot 기반 모놀리식 구조로, AI 서버는 FastAPI로 별도 분리하여 각각의 장점을 최대한 활용할 수 있도록 구성했습니다.

 

Infrastructure

Docker + AWS EC2/RDS/S3/ALB + Route53 + Vercel

 

전체적으로 AWS 기반 클라우드 인프라를 구축했습니다.

 

• 컨테이너화: 전체 서비스를 Docker 컨테이너로 구성하고 CI/CD 파이프라인 구축
• 데이터베이스: MySQL을 AWS RDS로 배포하여 안정적인 데이터 관리
• 이미지 서버: AWS S3를 활용한 정적 파일 및 이미지 저장용 서버 구축
• 로드밸런싱: ALB를 통한 HTTP/2 로드밸런싱
• 도메인 관리: Route53을 이용한 퍼블릭 도메인 및 DNS 관리

 

 

시스템 아키텍처

전체 시스템을 프론트엔드, 백엔드, AI 서버로 분리한 3-tier 아키텍처로 설계하여 Docker를 통해 각각 컨테이너화하고 Docker Compose를 통해 전체 시스템을 구동했습니다.

 

 

주요 기능 소개

1. AI 기반 멀티턴 챗봇 & 요금제 추천

이번 프로젝트의 핵심 기능이자 제가 가장 집중적으로 개발한 부분입니다!

• LangChain + OpenAI를 이용한 프롬프트 기반 AI 설계: 자연어 처리로 사용자 성향 분석하여 요금제 및 구독 서비스 추천
• 멀티턴 세션 관리: Redis 기반 대화 상태 보존 및 임시적 모니터링 시스템 구축 
• StreamingThrottle 프로세서: 청크별 동적 지연 제어로 클라이언트 단 자연스러운 챗봇 대화 구현
• JSON/텍스트 혼합 스트리밍: 실시간 카드 렌더링과 텍스트 응답 동시 처리를 위한 뮤테이션 훅 개발

2. 위치 기반 혜택 추천 & 스토어맵

• Naver Maps API: 사용자 위치 기반 매장 정보 제공
• 브랜드 선호도 기반 추천: 내 위치 주변 좋아요한 브랜드를 매장 맞춤 추천 챗봇에 활용

3. 소셜 로그인 & 보안 인증 시스템

• OAuth2 소셜로그인: Kakao/Google/Naver 로그인 지원
• JWT + Redis: HttpOnly Cookie 기반 보안 인증 및 엑세스 토큰은 쿠키, 리프레시 토큰은 레디스 세션으로 관리하여 보안 강화

 

나의 역할 (AI, BE, FE)

1. 팀 리더십과 프로젝트 관리

이번 프로젝트에서 팀장을 맡으면서 가장 중요하게 생각한 것은 팀원 모두가 함께 성장할 수 있는 환경을 만드는 것이었습니다. 저는 1년 정도의 프로젝트 경험을 보유한 상태였지만, 그렇지 못한 팀원이 더 많았기 때문에 실무에서 바로 투입될 수 있도록 최대한 현업과 똑같은 스택 및 시스템 아키텍처 내에서 개발하는 것을 목표로 팀을 이끌기 위해 노력했습니다.

 

 

워크플로우 및 협업 체계 구축

• 애자일 방법론: 스프린트 단위 개발로 빠른 피드백과 개선 사이클 구축
• 코드 리뷰 문화: 팀원들의 코드 품질 향상을 위한 적극적인 리뷰 진행
• 체계적인 문서화: 스프린트와 스크럼을 Conflunce, 개발 문서를 Notion으로 정리하여 체계적으로 관리

협업 및 개발 역량 개발 지원

• React Query, Storybook 등 새로운 기술 스택 학습 지원
• 각자의 강점을 살린 역할 분배 (기획 및 디자인, QA, 인프라 등)
• Github Wiki를 통한 코드 컨벤션 구축 및 활용

 

2. AI 챗봇 아키텍처 설계 및 구현

가장 도전적이었던 부분은 멀티턴 대화가 가능한 AI 챗봇을 구현하는 것이었습니다.

저는 AI를 전문적으로 배운적이 없었기에, 3주라는 짧은 시간동안 자연스러운 대화를 구축하기 위해 이미 검증된 오픈소스인 LangChain을 활용하기로 했습니다. 또한 FastAPI로 AI 서버를 구축하고, 프롬프트 엔지니어링을 통해 LG U+만의 요금제 및 구독서비스를 제대로 추천하도록 고도화 했습니다.

 

핵심 구현 내용

• 세션 기반 대화 관리: Redis를 활용한 대화 히스토리 보존
• 플로우 자동 전환: 일반 채팅 → 타코시그널 분석 → 요금제 추천 등으로 플로우를 자동 연결
• 템플릿 기반 응답: 사용자 성향에 따른 맞춤형 프롬프트 생성

 

현직자 멘토링에서 오프토픽에 대한 응답 처리도 필요하다는 피드백을 받아, 위와 같이 intent를 분류했습니다.

따라서 랭체인은 제가 설계한 발화 의도에 따라 사용자가 어떤 응답을 원하는지 분석하고, 요금제 추천과 구독 서비스 추천 등을 할 수 있으며, 쓸데없는 응답이 오면 '요금제나 구독 이야기로 넘어가자'고 하며 자연스럽게 주제를 전환할 수 있습니다.

 

3. 동적 지연 스트리밍 응답 시스템 구현 

문제 상황 인식

현직자 멘토링 및 설문조사를 통해, 기존 챗봇을 고도화하면 좋겠다는 피드백을 받았습니다.

기본적인 텍스트만 주고받는 챗봇이었기에 참신성이 부족했고, 이를 고도화하기 위한 방안을 생각해보았습니다.

또한 응답이 너무 빨라서 부자연스럽고, JSON과 텍스트가 섞인 데이터 처리에서 파싱 에러가 빈발했습니다.

 

 

혁신적인 해결책: 동적 스트리밍 아키텍처 도입

 

 

StreamingThrottle 클래스 개발

위 문제를 해결하기 위해, StreamingThrottle 클래스에서 청크 길이와 메시지 종류에 따라 동적으로 지연시간을 조절하도록 설계했습니다.

특히 응답이 짧은 경우에는 최소 80ms 이상의 지연을 강제 적용해, 마치 사람이 타이핑하듯 자연스럽게 출력되도록 만들었습니다.

class StreamingThrottle {
  calculateDelay(chunkSize: number, preset: StreamingPreset): number {
    // 청크 크기와 기능별 프리셋에 따른 동적 지연 계산
    const { minDelay, maxDelay } = STREAMING_PRESETS[preset];
    return chunkSize > 80 ? minDelay : maxDelay - (chunkSize * 2);
  }
}

 

 

이에 따라 기능별로 사용자 경험에 적합한 속도를 테스트하여 프리셋별 최적 지연 범위를 도출했습니다. 20밀리초 씩 바꿔가면서 테스트해본결과 최적 딜레이는 다음과 같았습니다.

 

 

결과적으로 사용자 입장에서 몰입감을 해치지 않는, 더 직관적이고 부드러운 챗봇 경험을 완성할 수 있었습니다.

 

 

정성 및 정량적 결과

• 파싱 에러율: 15% → 0.1%
• 인터랙티브한 사용자 경험 도출로 심사 및 타팀 평가에서 우수한 평가를 받음.

4. React 기반 프론트엔드 UI 개발

주요 UI 컴포넌트 개발

• 무너톡 AI 챗봇 전반: 실시간 스트리밍 + 카드형 메시지 등
• 유독Pick: 1+1 구독 조합 선택 UI
• Naver Maps 연동 및 커스텀 훅 개발: 위치 기반 매장 정보 제공

 

스토리북 주도 컴포넌트 개발 및 UI 테스팅

제가 주도하여 팀에 Storybook을 도입한 결과, 플레이그라운드에서 실시간으로 테스트하며 UI 개발 생산성을 크게 높일 수 있었습니다.

굳이 테스트 페이지를 만들지 않고도, 스토리북을 통해 컴포넌트를 한눈에 보고 관리할 수 있어서 팀 전체의 개발 효율성이 향상되었습니다!

 

 

 

5. 네이버 맵 API 연동으로 위치 기반 팝업스토어 렌더링 

위치 기반 지도 서비스를 위한 네이버 맵 API를 연동하고, 이를 커스텀 훅으로 만들었습니다.

 

 

커스텀 훅 useNaverMap 개발

• 네이버 맵 API 로드 상태 모니터링 및 재시도 로직 구현
• 마커 추가/제거, 지도 중심 이동, 줌 레벨 조정 등 지도 제어 기능 통합
• 메모리 누수 방지를 위한 언마운트 시 cleanup 로직 구현

위치 기반 팝업스토어 렌더링:

• 전체 팝업스토어 표시와 현재 위치 기반 근처 팝업 필터링 기능
• 사용자 위치 권한 요청 및 Geolocation API 연동

UI 구현

• 마커 클릭 시 팝업스토어 상세 정보를 모달로 표시
• 지도 컨트롤 (현재 위치 찾기, 전체 보기) 및 범례 컴포넌트

이를 통해 주변 LG U+의 일상의틈 팝업스토어를 찾고 혜택을 확인할 수 있는 지도 기반 서비스를 완성할 수 있었습니다.

 

 

트러블슈팅 - 멀티턴 대화 세션 관리

많은 트러블 슈팅이 있었지만 가장 힘들었던 건 제 주 분야가 아닌 인프라 + AI 서버 관련이었습니다..

문제 상황

AI Server 컨테이너에서 FastAPI + Redis 조합으로 멀티턴 챗봇 세션을 관리하는 과정에서 Redis OOM 문제가 발생했습니다. 대화 맥락을 유지하면서도 메모리 누수를 방지해야 했습니다.

Redis OOM 발생 시점

• 멀티턴 대화 세션 데이터 JSON으로 누적되면서 Redis 메모리 사용량 증가
• 대화 히스토리와 사용자 정보가 쌓이면서 메모리 스파이크 발생
• AI Server 컨테이너 메모리 한계 도달 시 Redis 프로세스 강제 종료

해결 과정 - Redis 기반 챗봇 세션 관리 구조 설계

AI Server 세션 데이터 정리

• 대화 history는 최대 10개까지 보존
• 사용자 입력 텍스트는 300자 이하로 제한
• AI 응답에 필요한 핵심 key만 보존하고 불필요한 데이터는 제거함

 TTL 동적 설정 및 세션 관리

• 멀티턴 대화 진행 중일 경우 TTL을 자동으로 2배 연장 (30분 → 60분)
• AI Server 세션 수가 임계치를 넘으면 TTL이 얼마 남지 않은 세션을 정리하도록 함
• Redis maxmemory, eviction-policy 설정을 AI Server 환경에 최적화

AI 서버 전용 실시간 모니터링 대시보드 구축

 

React 기반 성능 대시보드를 자체 개발하여 AI Server Redis 전용 지표를 re-charts를 이용해 실시간으로 시각화했습니다.

모니터링 대시보드는 다음과 같은 요소를 담아 구축했습니다.

• AI 세션당 평균 메모리 사용량
• AI Server Redis 사용률
• 현재 동시 대화 가능 사용자 수
• 멀티턴 대화 응답 시간

부하 테스트 기능도 추가하여 일부러 테스트를 위해 동시 챗봇 요청을 반복 발생시켜

Redis 세션 관리 상태를 수치를 통해 실시간 관찰할 수 있도록 구성했습니다.

 

 

결과

• AI Server 메모리 사용량 70% 감소
• AI Server 전용 대시보드 모니터링을 구현
• 동시 챗봇 대화 최대 3개에서 30-40개 세션까지로 늘려서 안정적 서비스 유지 가능함을 확인

아키텍처 구조상 소수 사용자 환경에서는 정상 작동하지만, 다수가 동시 접속하는 상황에서는 컨테이너 메모리 제약으로 인해 서버가 터지는 상황이 자주 발생했습니다.

하지만 저희는 이 문제를 예산이라는 단순한 한계로 넘기지 않고, AI 서버 전용 헬스체크 API와 React 대시보드 모니터링을 통해 시스템 자원 사용 현황을 정밀하게 파악하며 문제 원인 분석 및 대응 방법까지 제시했다는 점에서 의미 있는 실험적 접근이었다고 생각합니다.

 

 

프로젝트 성과 및 수상

 

개인적으로 부족한 점이 많았다고 생각해서 기대하지는 않았는데 감사하게도 최우수상을 수상하게 되었습니다.

저희 팀이 최우수상을 수상한 이유를 생각해보면, 실제 베타테스트 유저 피드백을 통해 발전된 UX/UI를 구성했다는 점이었다고 생각합니다. 베타 테스트 단계임에도 불구하고 이 정도 만족도를 얻은 것은 사용자 중심의 서비스 설계가 성공적이었다는 증거라고 봅니다.

 

또한 현직자 멘토링에서 3티어 아키텍처 설계와 기술 스택 선택, 프로젝트 관리 방식이 현업 수준이라는 긍정적인 피드백을 받았는데, 이것도 이유 중 하나라고 생각합니다.

 

회고

이번 프로젝트에서 가장 힘들었지만 가장 보람찼던 순간은 단연 AI 챗봇 고도화 과정이었는데요.

 

초기에는 단순한 텍스트 기반 챗봇이었지만, 멘토링 과정에서 '챗봇을 통해 더 많은 기능이 있었으면 어떨까요?'라는 피드백을 받고 난 뒤, JSON과 텍스트가 혼합된 스트리밍 시스템을 새로 설계해야 했습니다.

밤을 새워가며 개발한 과정 덕분에 최우수상 수상이라는 결과로 이어졌다고 생각합니다.

 

팀장으로서 가장 뿌듯했던 순간은, 팀원들이 각자의 영역에서 최선을 다해 성과를 만들어낸 모습이었습니다.

교녕이의 인프라 구축 사투, 처음이라 낯설었을 Storybook을 끝까지 리팩토링 마무리해준 은채 언니, 튜토리얼과 사용자 가이드를 정성스럽게 작성해준 민주와 지회 (다들 시연 영상도 너무너무 고생했다ㅠㅠ)에게 감사합니다. 

그리고 테스터로 적극 참여해준 혜은 언니까지 너무나도 고맙습니다 😊

 

무엇보다 리팩토링 과정에서 가장 크게 배운 점은, 아무리 뛰어난 AI 기술이라도 사용자가 체감하지 못하면 의미가 없다는 것이었습니다. 이번 프로젝트를 통해 기술이 아닌 사용자 경험 중심의 개발이 얼마나 중요한지 몸소 느낄 수 있었습니다.

 

앞으로도 사용자 중심에서 기술 설계를 고민하고, 팀과 함께 성장하는 개발자가 되고자 합니다!

 

유레카도 정말 막바지네요!

더운 여름이지만 마지막 남은 융합 프로젝트도 화이팅 👍

 

 

프로젝트 관련 링크

• GitHub Repository
• API 명세서
• Storybook
• 플로우 차트