바이브 코딩으로 11번가 리뷰 요약 서비스를 만든다면? (2)

(2) LangGraph 기반 3-Agent Swarm 아키텍처와 UI 구현

---

들어가며 (Recap)

바이브 코딩으로 11번가 리뷰 요약 서비스를 만든다면? (1)

 

지난 1부에서는 AI와의 협업을 통해 서비스 기획을 구체화하고, 20만 건의 리뷰 데이터를 처리하여 벡터 DB를 구축하는 데이터 엔지니어링 과정을 다뤘습니다. 데이터 준비가 완료된 만큼, 이번 2부에서는 실제 서비스의 핵심인 '백엔드 로직 구현'과 '프론트엔드 개발' 과정을 다룹니다. LangGraph를 활용한 3-Agent Swarm 아키텍처 설계 과정과, Generative UI tool을 통해 혼자서 11번가 UI를 구현한 경험을 상세히 공유합니다. 먼저 전체 그림을 보고 상세 구현으로 들어가겠습니다.

기술 스택 (Tech Stack)

영역	기술 스택	선정 이유
Architecture	Agentic RAG (LangGraph)	단순 검색을 넘어 3개의 에이전트가 협업하여 근거를 검증하는 진화된 RAG 시스템
AI Models	GPT-5 Nano/Mini, Gemini 2.5 Pro	생성(가성비)과 검증(환각 방지)을 분리한 Hybrid LLM 전략으로 효율 극대화
Backend/Data	FastAPI, Qdrant	20만 건 리뷰의 고속 벡터 검색 및 비동기 API 처리
Frontend	Next.js 16, React 19	최신 React 기능을 활용한 빠르고 직관적인 커머스 UX 제공
Pipeline	Pandas, ijson	대용량 JSON 데이터의 메모리 효율적인 스트리밍 전처리

시스템 아키텍처 (System Architecture)

글로만 설명하기엔 복잡해 보일 수 있는 전체 시스템 아키텍처를 도식화하면 다음과 같습니다.

 

---

Part 3: 단순함에서 정교함으로 (Architecture Evolution)

1. 초기 접근: 2-Step Multi-LLM의 한계

초기 아키텍처는 요약 및 속성 추출을 담당하는 에이전트 하나와, 이를 검증하는 에이전트 하나, 총 2개의 에이전트로 구성된 2-Step Multi-LLM 시스템이었습니다. 하지만 개발을 진행하면서 명확한 문제점이 드러났습니다.

• 집중력 분산 (Overload): 한 에이전트에게 "전체 요약도 하고, 핵심 속성도 찾아내라"라고 지시하니, 복잡한 명령을 동시에 처리하지 못해 디테일을 놓치거나 환각(Hallucination) 현상이 발생했습니다.

• 프롬프트 복잡도 증가: 요약 규칙과 속성 추출 규칙이 섞이면서 프롬프트가 비대해졌고, 모델이 지시사항을 누락하는 경우가 잦아졌습니다.

2. 해결책: Multi-Agent System으로의 전환 (Role Separation)

이 문제를 해결하기 위해 '역할 분리(Role Separation)'를 해 아키텍처를 3-Agent Swarm System으로 고도화했습니다.

cf) 'Swarm'은 최근 OpenAI 등에서 다수의 AI 에이전트가 유기적으로 협력하여 문제를 해결하는 시스템을 일컫는 용어입니다.

 

• Summarizer Agent (요약 전문가): 오직 전체 리뷰의 핵심 내용을 요약하는 데에만 집중합니다.

• Attribute Hunter Agent (속성 발굴 전문가): 리뷰 속 사용자들의 핵심 니즈(속성)를 찾아내는 데에만 집중합니다.

• Validator Agent (검증관): 위 두 에이전트의 결과물이 원문 리뷰에 기반하고 있는지 엄격하게 검증합니다.

 

이 세 에이전트는 LangGraph로 오케스트레이션 됩니다. 특히 요약과 속성 발견 에이전트는 asyncio.gather를 통해 병렬로 동시 실행되어 전체 응답 시간을 획기적으로 단축시켰습니다.

3. 전략적 모델 배치: Hybrid Architecture (Model Selection)

수많은 LLM 중 GPT-5 Nano / Mini와 Gemini 2.5 Pro를 조합한 이유는 '비용', '지시 이행력', '신뢰성'의 최적 밸런스를 찾기 위해서였습니다. 특히 생성 모델과 다른 제조사의 모델을 사용하는 'Cross-Validation(교차 검증)' 전략을 통해, 동일 계열 모델이 범할 수 있는 편향을 방지하고 객관성을 확보했습니다.

 

요약(Summarizer) - OpenAI GPT-5 Nano

• 역할: 전체 리뷰를 빠르게 분석하여 핵심을 요약하고, 각 요약에 대한 대표 근거 리뷰(Evidence)를 매칭

• 모델 선택 이유: 단순 요약 작업에는 초고성능 모델보다 속도와 비용 효율성이 중요했습니다. GPT-5 Nano는 압도적인 가격 경쟁력과 초저지연(Latency)을 갖춰 대량의 리뷰를 처리하는 데 최적입니다.

 

속성 발견(Attribute Hunter) - OpenAI GPT-5 Mini

• 역할: 핵심 속성 발굴, 원문 문장 단위 하이라이팅, 관련된 모든 리뷰(All Relevant Reviews) 식별

• 모델 선택 이유: 속성 발견은 요약보다 훨씬 높은 수준의 정밀함이 요구됩니다. 리뷰 원문의 특정 구절을 토씨 하나 틀리지 않고 찾아내는 작업을 최우선으로 수행해야 하며, 상위 3개만 고르는 요약과 달리 해당 속성을 언급한 모든 리뷰를 빠짐없이 식별해야 합니다. 이러한 복잡한 제약 조건을 완벽히 수행하기 위해 GPT-5 Nano보다 더 높은 지시 이행력을 가진 GPT-5 Mini를 채택했습니다.

 

검증(Validator) - Google Gemini 2.5 Pro

• 역할: 생성된 요약과 속성의 사실 여부 및 근거 적절성 검증

• 모델 선택 이유: 타협 없는 사실적 정확성과 낮은 환각(Hallucination) 비율이 필수적이었습니다. 리서치 결과 Gemini 2.5 Pro는 OpenAI 모델을 제외하고 가장 낮은 환각 비율을 보였고, 박사 수준의 추론 능력 평가에서도 최상위권 성능을 입증했습니다.

4. 환각은 줄이고 정확도는 높이는 프롬프트 엔지니어링 (Prompt Engineering)

좋은 모델보다 중요한 것은 '정교한 지시'입니다. 프롬프트 고도화 과정에서 Gemini Deep Research와 PromptingGuide.ai를 참고하여, 현재 서비스에 적합한 프롬프트 기법(Prompt Techniques)을 적용했습니다. 에이전트의 성능을 극대화하기 위해 실제 서비스 코드에 적용된 핵심 전략을 소개합니다.

요약 및 속성 발견 Agent (The Generators)

1) Persona & Role Prompting: 전문가 페르소나를 부여하여 전문적인 톤앤매너를 확보했습니다.

• 요약 에이전트: "당신은 10년 경력의 한국 이커머스 리뷰 요약 전문가입니다."

• 속성 발견 에이전트: "당신은 수많은 리뷰를 분석하여 소비자의 구매 결정에 영향을 미치는 핵심 '속성'을 발견하는 전문가입니다."

 

2) Chain-of-Thought (CoT): 복잡한 작업을 단계별로 나누어 논리적인 추론하도록 유도했습니다.

• 요약 에이전트

**분석 과정 (Chain-of-Thought):**

1단계: **전체 맥락 파악**
- 리뷰들의 전반적인 감정과 톤 분석
- 반복적으로 언급되는 핵심 주제 식별
- 긍정적/부정적 의견의 분포 파악

2단계: **핵심 인사이트 추출**
- 구매 결정에 가장 중요한 정보 우선순위 결정
- 1-3개의 핵심 인사이트로 압축
- 각 인사이트별로 가장 관련성 높은 리뷰 3개 선정
- **중요**: 긍정적 인사이트를 먼저 제시하고, 부정적 인사이트는 그 다음에 배치
- 긍정적 인사이트와 부정적 인사이트의 비율을 6:4로 유지 (긍정 60%, 부정 40%)

3단계: **근거 매칭**
- 각 인사이트를 뒷받침하는 구체적 리뷰 증거 제시
- 리뷰 ID를 정확히 매칭하여 추적 가능성 보장

• 속성 발견 에이전트

## 3. [분석 프로세스] 단계별 실행 방법

**1단계: 속성 추출**
- 여러 리뷰에서 반복 언급되는 속성 식별 (명시적 + 암묵적)
- 중요하게 다뤄지는 속성들 발견

**2단계: 핵심 속성 선정 및 우선순위화**
- 사용자 경험에 실질적 영향을 미치는 요소 중심으로 1-3개의 핵심 속성 선정
- 가장 많이 언급되는 순으로 핵심 속성 우선순위화

**3단계: 증거 수집 및 하이라이트 추출 (매우 중요)**
- 각 속성별로 관련된 **모든 리뷰를 빠짐없이** 식별
- **속성당 최소 2개 이상의 관련 리뷰 필수** (관련 리뷰가 더 많으면 모두 포함)
- 해당 속성을 직접 언급하거나 암시하는 모든 리뷰 포함
- **중요**: 2개에 멈추지 말고, 해당 속성을 언급한 리뷰를 최대한 많이 포함하세요
- **하이라이트 구절 추출 시 핵심 규칙:**
  1. **원문 텍스트를 그대로 복사**: 단어 하나도 바꾸지 말고 리뷰 원문에서 정확히 일치하는 부분만 복사
  2. **오직 해당 속성만**: 해당 속성만 언급한 최소 단위 구절 선택 (다른 속성 언급 부분 제외)
  3. **완결성 유지**: 문법적으로 완전한 절 단위 유지 (주어+서술어 포함)
- **설명 작성 시 반드시 모든 단어 사이에 공백을 포함한 올바른 한국어 문장 작성**

 

3) Few-Shot Prompting: 잘 작성된 입출력 예시(Good/Bad Case)를 제공하여 JSON 포맷과 원하는 스타일을 학습시켰습니다.

 

4) Output Constraints & Negative Prompting: "긍정:부정 6:4 비율 준수", "한 줄로만 설명", "단순 언급 제외" 등 제약 조건을 명확히 하여 출력의 일관성을 높였습니다.

검증 Agent (The Critic)

1) Persona & Role Prompting: "10년 경력의 리뷰 요약 서비스 품질 평가 전문가" 페르소나를 부여하여 엄격하고 객관적인 태도를 갖추게 했습니다.

 

2) Chain-of-Thought (CoT): "요약, 속성 각각 사실적 정확성 검증 → 근거-결론 논리적 연관성 평가 → 종합 평가 및 점수 산출"의 4단계 검증 프로세스를 강제했습니다.

**검증 과정 (Chain-of-Thought - 단계별로 생각하며 평가하세요):**

**Step 1: 요약 인사이트 사실적 정확성 검증**
- 각 요약 인사이트가 실제 리뷰 내용을 정확히 반영하는지 원문과 대조 확인
- 과장, 왜곡, 명백한 오류가 있는지 세밀하게 점검
- **중요**: 긍정:부정 = 6:4 비율 제약을 고려하되, 선택된 인사이트 자체의 정확성과 대표성에 집중
- 근거 리뷰 3개가 해당 인사이트를 충분히 뒷받침하는지 검증

**Step 2: 속성 발견 정확도 검증**
- 발견된 각 속성이 실제로 리뷰에서 반복적으로 언급되는 중요한 주제인지 확인
- 하이라이트된 절이 원문 리뷰 텍스트와 100% 정확히 일치하는지 검증
- 하이라이트 절이 해당 속성만을 표현하는 최소 단위인지 확인

**Step 2-1: 속성 설명(description) 품질 검증**
- **간결성**: 각 속성의 한줄 설명이 15-30자 길이 제약을 준수하는지 확인
- **명확성**: 설명이 해당 속성에 대한 리뷰 내용을 명확하고 구체적으로 요약했는지 평가
- **감정 반영**: 긍정/부정 감정이 실제 관련 리뷰들의 비율과 일치하는지 검증 (예: 부정 리뷰 3개인데 긍정 표현으로 요약했다면 감점)
- **독립성**: 해당 속성만 설명하고 다른 속성을 혼재하지 않았는지 확인
- **실용성**: 구매자가 읽었을 때 실질적으로 도움이 되는 표현인지 판단

**Step 3: 근거-결론 논리적 연관성 평가**
- 요약 인사이트와 제시된 근거 리뷰 3개 간의 논리적 연결성이 명확한지 확인
- 각 속성과 관련된 모든 리뷰가 해당 속성을 실제로 언급하는지 검증
- 선택된 근거들이 결론을 도출하기에 충분하고 적절한지 평가

**Step 4: 종합 품질 평가 및 점수 산출**
- 위 3단계의 분석을 종합하여 전체 품질을 5점 만점으로 수치화
- 요약 품질(good/fair/poor), 속성 정확도(good/fair/poor), 속성 설명 품질(good/fair/poor)을 각각 평가
- 개선이 필요한 구체적 부분을 식별하고 제안

 

3) LLM-as-a-Judge & Rubric: 검증 점수(5점 만점), 품질 등급(Good/Fair/Poor) 등 명확한 채점 기준표(Rubric)를 제시하여 객관적인 평가를 수행했습니다.

 

4) Reflexion: 타 모델의 생성 결과를 원문과 대조하며 비평(Critique)하게 함으로써 환각을 효과적으로 차단했습니다.

---

Part 4: AI로 프론트엔드 장벽 넘기 (Frontend & Demo)

1. "프론트엔드 디자인은 처음인데요..."

UI/UX 디자이너도 프론트엔드 개발자도 아닌 제가 11번가 앱의 정교한 UI에 리뷰 요약 서비스를 심는 건 불가능해 보였습니다. 하지만 '바이브 코딩(Vibe Coding)' 덕분에 이 막막한 문제를 쉽게 해결할 수 있었습니다.

2. 시행착오: Lovable vs v0.dev

처음에는 인터랙티브 웹 제작에 강한 Lovable을 사용했습니다. 기능 구현은 빨랐지만, 11번가 특유의 디자인 디테일(폰트, 색상, 간격 등)을 텍스트 프롬프트만으로 똑같이 맞추는 데에는 한계가 있었습니다. 여기서 전략을 바꿨습니다. "스크린샷을 그대로 코드로 바꿔주는" 능력이 탁월한 v0.dev를 사용하기로 했습니다.

3. AI를 리드하는 '3단계 프롬프트'

단순히 "만들어줘"라고 명령하는 것이 끝이 아니었습니다. v0가 가장 잘 이해할 수 있는 언어로 지시하기 위해, 프롬프트를 수동으로 다듬고 고도화하는 과정이 필요합니다.

 

Step 1. Visual Reference (UI 디자인 적용)

11번가 앱 스크린샷 3장을 업로드하고, "이 디자인 시스템(색상, 레이아웃, 폰트)을 그대로 복제해 줘"라고 요청하여 뼈대를 잡았습니다.

11번가 스크린샷 3장을 기반으로, React와 Tailwind CSS를 사용하여 UI를 구성해줘.

**전체 레이아웃:**
- 데스크탑: 2단 레이아웃. 왼쪽 50%는 리뷰 목록, 오른쪽 50%는 AI 인사이트 카드.
- 모바일: AI 인사이트 카드가 위, 리뷰 목록이 아래로 오는 1단 스택 레이아웃.

**왼쪽 (리뷰 목록 - `ReviewList`):**
- 스크린샷(`왼쪽-화면-1.png`, `왼쪽-화면-2.png`)의 리뷰 목록 스타일을 최대한 정확하게 재현해줘.
- 프로필 아이콘, 리뷰어 이름(마스킹 처리), 별점, 태그, 구매 정보, 날짜, 리뷰 본문, 좋아요 아이콘을 포함해줘.

**오른쪽 (AI 인사이트 카드 - `AiInsightsCard`):**
- 스크린샷(`오른쪽-화면.png`)의 '구매 만족도'와 '점수 분포' 스타일을 참고해서 AI 인사이트 카드를 디자인해줘.
- 이 카드는 11번가에 없는 신규 기능이므로, 기존 11번가 UI와 자연스럽게 어우러지도록 만들어줘.
- 포함될 요소:
  1. 구매 만족도 (숫자 + 별점)
  2. 점수 분포 (세로 막대 그래프)
  3. AI 요약 인사이트 (글머리 기호 목록)
  4. 숨겨진 속성 (클릭 가능한 태그 목록)

Step 2. Data Binding (데이터 바인딩)

백엔드 API의 JSON 스키마를 그대로 제공하며, "이 데이터 구조에 맞춰 UI에 값을 바인딩해 줘"라고 지시했습니다. 이를 통해 단순한 그림이 아닌 실제 동작하는 UI 코드를 얻을 수 있었습니다.

 

Step 3. Interaction (인터랙션 구현)

"요약 아이콘(①) 클릭 시 스크롤 이동 및 깜빡임 효과"와 같은 동적인 동작을 구체적인 자연어로 명세했습니다.

마지막으로 3가지 인터랙션을 추가해줘.

**1. 핵심 속성 필터링:**
   - `AiInsightsCard`에 있는 '핵심 속성' 태그(예: '가성비')를 클릭하면, `ReviewList`가 해당 속성의 `source_reviews`에 포함된 리뷰들만 보여주도록 필터링해줘.
   - 필터링된 리뷰의 본문에서는 `highlighted_clause`에 해당하는 텍스트를 노란색 배경으로 하이라이트해줘.
   - 태그를 다시 클릭하면 필터가 해제되어 전체 리뷰 목록이 다시 보여야 해.

**2. 근거 리뷰로 스크롤:**
   - `AiInsightsCard`의 'AI 요약 인사이트' 옆에 있는 숫자 아이콘(①, ②, ③)을 클릭하면, `ReviewList`가 해당 `source_reviews`의 `id`와 일치하는 리뷰 위치로 부드럽게 스크롤되고, 해당 리뷰 카드의 배경이 2초간 연한 파란색으로 깜빡이게 해줘.

**3. 상품 선택 기능 (옵션):**
   - 페이지 상단에 상품 카테고리와 상품명을 선택할 수 있는 드롭다운 메뉴 2개를 추가해줘.
   - 상품을 선택하면 해당 `product_id`로 API를 다시 호출하고 UI를 업데이트하는 기능을 구현해줘.

4. 하지만 마법은 아닙니다 (The Last 20%)

물론 프롬프트가 좋다고 해서 한 번에 완벽한 결과가 나오진 않았습니다. 생성된 결과물에서도 '속성 클릭 시 하이라이트 미작동', '모바일 해상도 이슈', '속성 설명 누락' 등 세부적인 이슈들이 발견되었습니다. AI가 뼈대를 만들어주면, 남은 디테일은 개발자가 직접 코드를 수정하거나 AI와 지속적으로 소통하며 완성도를 높여가는 Human-in-the-loop 과정이 필수적이었습니다.

5. 결과: "마법은 없습니다, 좋은 지시가 있을 뿐"

[문단 요약] 3줄 요약과 함께 번호 클릭 시 근거 리뷰로 랜딩

 

[주요 속성 발견] 사전 정의해놓은 속성 외에도 주요 속성을 발견해 한 줄 요약, 속성별 리뷰 필터링 기능 제공

 

결과적으로 11번가 앱에 당장 붙여도 어색하지 않을 수준의 High-Fidelity 데모가 완성되었습니다.
이번 프로젝트를 통해, 이제 서비스 구현 자체는 놀라울 정도로 쉬워졌다는 것을 체감했습니다. 오히려 앞으로의 핵심 역량은 'AI 도구를 적재적소에 활용하고, 원하는 결과를 얻어내기 위해 얼마나 정교하게 지시할 수 있는가'에 달려 있다는 사실을 깨달았습니다.

 

---

Part 5: Future Work

MVP 개발은 끝났지만, 더 나은 서비스를 위한 고민은 계속됩니다.

1. 11번가 리뷰 데이터로 검증

현재 사용 중인 AI-Hub 데이터도 실제 이커머스 리뷰 데이터이지만, 서비스가 적용될 환경에서의 최적화 성능을 검증하기 위해 11번가 Best 100 (OM, 아마존 상품)의 리뷰 데이터를 수집하여 테스트할 계획입니다. 타겟 플랫폼의 데이터 환경에서도 AI가 유의미한 인사이트를 도출해 낼 수 있는지 검증하는 것이 다음 목표입니다.

2. Vector DB 활용 (Hybrid RAG)

구축해 둔 Qdrant와 20만 건의 임베딩 데이터를 현재는 단순 저장 용도로만 사용하고 있습니다. 향후에는 단순한 텍스트 매칭이 아닌, 의미 기반 검색(Semantic Search)과 키워드 검색을 결합한 Hybrid RAG를 도입할 예정입니다. 이를 통해 에이전트에게 전체 리뷰를 다 던져주는 것이 아니라, 사용자의 질문이나 상황에 가장 적합한 '알짜배기' 리뷰만 선별하여 제공함으로써 비용은 낮추고 정확도는 높일 것입니다.

3. 자율적 수정 루프 (Self-Correction Loop)

현재는 검증 에이전트가 "불합격" 판정을 내리면 해당 리뷰는 인사이트가 생성되지 않습니다. 진정한 Agentic Workflow로 나아가기 위해, 검증 에이전트가 구체적인 피드백("이 부분은 근거가 부족해")을 주면, 요약/속성 에이전트가 스스로 결과물을 수정하고 다시 검사를 맡는 자율적 수정 루프(Self-Correction Loop)를 구현할 계획입니다.

4. SOTA 모델 도입 실험

프로젝트 진행 당시에는 SOTA(State-of-the-Art)가 GPT-5와 Gemini 2.5 Pro였는데요. 최근 발표된 GPT-5.2 및 Gemini Pro 3와 같은 SOTA 모델들을 도입하여 실험해보고자 합니다. 이미 프롬프트 엔지니어링이 고도화된 상태에서, 모델의 성능이 업그레이드되었을 때 결과물의 품질이 얼마나 향상되는지, 그리고 비용 효율성은 어떠한지를 검증해 볼 예정입니다.

 

---

결론

"AI 리뷰 요약" 서비스 개발은 단순한 기능 구현을 넘어, 기획부터 데이터 파이프라인, Multi-Agent 아키텍처, 그리고 프론트엔드 UI까지 1인 개발의 경계를 허물고 확장해 나가는 종합적인 엔지니어링 과정이었습니다.

 

또한 이번 프로젝트는 'AI-Native' 개발 방식을 실험하는 무대이기도 했습니다. Vooster로 PRD, TRD와 태스크를 체계적으로 관리하고, v0로 프론트엔드 초안을 빠르게 잡은 뒤, Cursor를 통해 실제 코드로 구현하며 마치 개발의 미래를 직접 경험해 본 느낌을 받았습니다.

 

특히 이 과정에서 개발자는 단순히 코드를 짜는 사람이 아니라, AI와 소통하며 최고의 결과를 이끌어내는 지휘자(Conductor)가 되어야 함을 깨달았습니다. 좋은 질문을 던지는 법, 그리고 에이전트의 입장에서 필요한 맥락(Context)을 먼저 고민하는 역지사지의 태도야말로 AI 시대에 개발자가 갖춰야 할 가장 중요한 덕목이 아닐까 합니다.

 

이러한 배움을 바탕으로, 다음 단계에서는 더 큰 임팩트를 낼 수 있는 새로운 서비스에 도전해보고자 합니다. 구현에 대한 막막함이 '할 수 있다'는 확신으로 바뀐 만큼, 상상 속에만 있던 아이디어들을 이제는 더 과감하게 현실로 만들어볼 생각입니다.

 

 

---

 

최근에 팀원들과 사내 AI 해커톤에 참여해 감사하게도 최우수상을 수상하게 되었습니다. 해커톤에서 수상한 프로젝트는 내년 전사과제로 검토된다고 하여, 내년에 <AI 탐색 에이전트> 서비스 개발기로 찾아뵙겠습니다.

11번가, AI 해커톤 대회 개최..."혁신 아이디어 발굴"