abyss-s.log
뒤로가기

AI 혜택 큐레이션 서비스 MoonoZ 개발 회고

페이지 수정

티스토리 원문: https://tomymoon.tistory.com/215

MoonoZ

LG U+ 유레카 SW교육과정에서 진행한 종합프로젝트 무너즈(MoonoZ) 개발 회고다.

해당 프로젝트는 유레카 프론트엔드 개발자 2기 종합프로젝트에서 최우수상을 수상한 뜻깊은 프로젝트였다. 3주라는 짧은 기간 동안 팀장으로서 팀을 이끌며 AI 기반 서비스를 구축한 경험을 정리해본다.

프로젝트 소개

프로젝트 소개

프로젝트 주제 선정 배경

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

하지만 LG U+에는 이러한 MZ세대를 위한 다양한 혜택이 있음에도 불구하고, 공식 어플이나 사이트에서 정보가 분산되어 있어 사용자들이 자신에게 맞는 혜택을 찾기 어렵다는 문제점을 인식하게 되었다.

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

ERD 다이어그램

ERD 다이어그램

시연 영상

소리를 약간 줄이고 보는 걸 추천..

https://www.youtube.com/watch?v=LGXlG-HELl8

기술 스택

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 기반 클라우드 인프라를 구축했다.

시스템 아키텍처

시스템 아키텍처

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

주요 기능 소개

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

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

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

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

나의 역할 (AI, BE, FE)

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

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

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

협업 및 개발 역량 개발 지원

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

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

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

핵심 구현 내용

Intent 분류 설계

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

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

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

문제 상황 인식

현직자 멘토링 및 설문조사를 통해, 기존 챗봇을 고도화하면 좋겠다는 피드백을 받았다. 기본적인 텍스트만 주고받는 챗봇이었기에 참신성이 부족했고, 이를 고도화하기 위한 방안을 생각해보았다. 또한 응답이 너무 빨라서 부자연스럽고, JSON과 텍스트가 섞인 데이터 처리에서 파싱 에러가 빈발했다.

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

AI 챗봇 스트리밍 아키텍처

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밀리초 씩 바꿔가면서 테스트해본결과 최적 딜레이는 다음과 같았다.

프리셋별 최적 딜레이

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

챗봇 스트리밍 데모

정성 및 정량적 결과

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

주요 UI 컴포넌트 개발

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

내가 주도하여 팀에 Storybook을 도입한 결과, 플레이그라운드에서 실시간으로 테스트하며 UI 개발 생산성을 크게 높일 수 있었다. 굳이 테스트 페이지를 만들지 않고도, 스토리북을 통해 컴포넌트를 한눈에 보고 관리할 수 있어서 팀 전체의 개발 효율성이 향상되었다!

스토리북

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

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

스토어맵

커스텀 훅 useNaverMap 개발

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

UI 구현

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

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

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

문제 상황

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

Redis OOM 발생 시점

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

AI Server 세션 데이터 정리

TTL 동적 설정 및 세션 관리

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

React 기반 성능 대시보드를 자체 개발하여 AI Server Redis 전용 지표를 re-charts를 이용해 실시간으로 시각화했다. 모니터링 대시보드는 다음과 같은 요소를 담아 구축했다.

부하 테스트 기능도 추가하여 일부러 테스트를 위해 동시 챗봇 요청을 반복 발생시켜 Redis 세션 관리 상태를 수치를 통해 실시간 관찰할 수 있도록 구성했다.

모니터링 대시보드

결과

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

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

프로젝트 성과 및 수상

최우수상 수상

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

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

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

회고

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

초기에는 단순한 텍스트 기반 챗봇이었지만, 멘토링 과정에서 ‘챗봇을 통해 더 많은 기능이 있었으면 어떨까요?‘라는 피드백을 받고 난 뒤, JSON과 텍스트가 혼합된 스트리밍 시스템을 새로 설계해야 했다. 밤을 새워가며 개발한 과정 덕분에 최우수상 수상이라는 결과로 이어졌다고 생각한다.

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

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

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

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

유레카도 정말 막바지다! 더운 여름이지만 마지막 남은 융합 프로젝트도 화이팅 👍

프로젝트 관련 링크

페이지 수정
이 글 공유하기:
X에 공유이메일로 공유
이전 글
Google I/O Extended Incheon 2025 후기
다음 글
밸런스 게임 플랫폼 '너로 정했다!' 개발 회고