Overview
주제만 던지면 PM + 도메인 전문가 에이전트들이 Slack 스타일 채팅 UI에서 30턴 자유 토론을 벌이고, 결론이 나오는 순간 9개 디자인 템플릿 중 키워드 매칭으로 0초에 랜딩 페이지를 렌더링하는 멀티 에이전트 디베이트 플랫폼. Build with TRAE Seoul Hackathon 2026 대상 수상작.
Highlights
- 30턴 자유 토론 + 확정 교체(turn 12 / 22) — 초기 라운드제를 폐기하고 자유 흐름으로 피봇해 데모 안정성 + 토론 깊이 동시 확보
- 이중 경로 랜딩 생성 — FINAL_RESULT 수신 즉시 9개 템플릿 키워드 매칭으로 0초 렌더링(Primary), GPT-4o HTML streaming(180s)은 백그라운드 fallback으로 동작
- Slack 스타일 다크테마 UI — 사이드바·채널·아바타·타이핑 인디케이터·입퇴장·시스템 메시지를 13종 SSE 이벤트로 실시간 시각화
- AsyncGenerator<SSEEvent> 오케스트레이션 — 5-step 파이프라인(agents_created → 30턴 free debate → summarize → final_result → landing_page) + AbortController 타임아웃(JSON 30s / streaming 180s) + MAX_RETRIES=1
- 토론 페이즈 자동 전환 — opening(0–2) → mid(3–14) → late(15–24) → closing(25–29, 강제 수렴 프롬프트)으로 발산만 하다 끝나는 문제 차단
- 7+ 멀티 에이전트 디자인 패턴 — Orchestrator / Specialist / Persistent (PM + Designer) / Spawning / Retirement / Multi-turn Debate / Result Synthesis + Human-in-the-Loop (결과 반려 시 추가 8턴 토론)
- 토론 히스토리 localStorage 영속화 + Archiver 기반 /api/export ZIP 다운로드로 생성된 랜딩 페이지 즉시 배포 가능
- MIT 라이선스 공개 · types.ts 281줄 계약 우선 개발로 3인 병렬 작업 안정화 (해커톤 당일 단일 세션 완성)
Architecture
Browser(React 19 useReducer) · Orchestrator(Next.js AsyncGenerator) · AI(GPT-4o) 3-Tier 위에 30턴 토론 타임라인과 Dual-Path 랜딩 생성(템플릿 0초 · GPT-4o 백그라운드)을 결합한 설계 — 라운드제와 GPT 단일 생성에서 피봇한 두 번의 핵심 결정이 그대로 구조에 반영되어 있습니다.
Agent Arena의 핵심은 3-Tier Streaming Architecture + 30-Turn Free Debate + Dual-Path Landing Generation 입니다. 해커톤 당일 두 번의 큰 피봇(라운드제 → 30턴 자유 토론 / GPT 생성 → 템플릿 즉시 렌더링)이 그대로 구조에 새겨져 있고, 모든 통신이 SSE로 단방향 스트리밍되는 일관된 흐름을 가집니다.
Browser Layer — React 19 + useReducer. TopicInput에서 토픽이 들어오면 `useDebate` 훅이 SSE 13종 이벤트를 단일 상태 머신(idle → creating → debating ⇄ retiring → spawning → debating → generating_landing → landing)에서 처리합니다. ChatLayout은 Slack을 메타포로 한 다크테마 UI로 사이드바·채널·아바타·타이핑 인디케이터·입퇴장·시스템 메시지를 시각화하며, 최종 랜딩은 LandingPageView가 iframe sandbox로 격리 렌더링합니다. 토론 히스토리는 localStorage에 영속화되고 결과 반려 시 Human-in-the-Loop 8턴 추가 토론 경로로 진입합니다.
Orchestrator Layer — AsyncGenerator<SSEEvent>. `orchestrator.ts`는 5단계 파이프라인(agents_created → 30-turn free debate → summarize → final_result → landing_page)을 AsyncGenerator로 yield하고, `/api/debate`가 이를 SSE 형식으로 스트리밍합니다. 30턴 루프 내부에서는 `pickNextSpeaker`가 발언 횟수 균등 분배를 보장하고, turn 12와 22에서 `doRetireSpawn`이 도메인 전문가를 핸드오프 메시지와 함께 교체합니다. 페이즈(opening/mid/late/closing)는 turnCount로 자동 전환되며 25–29 마무리 단계에서는 강제 수렴 프롬프트를 주입해 발산만 하다 끝나는 문제를 차단합니다.
Dual-Path Landing Generation. FINAL_RESULT가 도착하면 Path 1(Primary): 9개 디자인 템플릿(Glassmorphism · Neobrutalism · Editorial · Minimalism · Dark Neon · Bento Grid · Organic Shapes · Corporate · Gradient Mesh) 중 키워드 매칭으로 즉시 렌더링 — 대기 시간 0초. 동시에 Path 2(Background): GPT-4o HTML streaming(180s timeout, t=0.7)이 백그라운드로 진행되지만, 이미 템플릿이 렌더링된 경우 chunk 이벤트는 무시됩니다. 'first arrived wins' 정책으로 데모 안정성과 GPT 거부/저품질 fallback을 동시에 보장하며, `/api/export`는 Archiver로 ZIP 다운로드를 제공해 배포 가능한 정적 페이지를 즉시 내보낼 수 있습니다. MIT · TRAE 2026 Grand Prize.
Deep Dive
Build with TRAE Seoul Hackathon 2026 대상 수상작. '에이전트끼리 토론하면 더 나은 결과가 나오는가'라는 가설을 가장 직관적인 형태로 시연하는 데모를 목표로 했습니다 — 사용자는 토픽 한 줄만 던지면, AI들이 토론하는 모습을 실시간으로 보고, 결론이 나오는 순간 채팅 화면이 동작하는 랜딩 페이지로 변신하는 경험을 합니다.
오케스트레이션은 `orchestrator.ts`의 AsyncGenerator<SSEEvent> 패턴으로 구현됐습니다. 5단계 — 에이전트 생성(GPT-4o JSON) → 30턴 자유 토론(streamSpeak + pickNextSpeaker로 균등 발언 분배) → 토론 요약(JSON) → 최종 결과 합성(JSON) → 랜딩 페이지 생성(streaming) — 가 SSE로 클라이언트에 흘러가고, 프론트엔드는 useReducer로 13종 이벤트를 단일 상태 머신에서 처리합니다. PM과 Designer는 isFixed로 항상 존재하며(Designer는 turn 3에 합류), 그 외 도메인 전문가는 turn 12·22에 확정 교체됩니다.
초기 설계는 라운드제(R1 브레인스토밍 → R2 토론 → R3 수렴) + GPT-4o 풀 HTML 생성이었지만, 두 번의 큰 피봇이 있었습니다. (1) **라운드 → 30턴 자유 토론**: 라운드 전환 로직의 엣지 케이스를 피하고 토론 깊이를 확보하기 위해 turnCount 기반 단일 프롬프트로 단순화. 마지막 5턴(25–29)에는 강제 수렴 프롬프트를 주입해 결론 도출을 보장. (2) **GPT 생성 → 템플릿 즉시 렌더링**: 토론 5–8분에 더해 HTML 생성 30–60초 대기는 데모에서 치명적이었고, GPT-4o가 랜딩페이지 생성을 거부/저품질 반환하는 경우도 있어, `landing-templates.ts`의 9개 템플릿(Glassmorphism / Neobrutalism / Editorial / Minimalism / Dark Neon / Bento Grid / Organic Shapes / Corporate / Gradient Mesh)을 키워드 매칭으로 즉시 선택하는 Primary 경로로 전환. GPT-4o 백그라운드 생성은 fallback으로 남겨둬 이중 경로를 유지합니다.
한 제품 안에서 7개 이상의 멀티 에이전트 디자인 패턴(Orchestrator·Specialist·Persistent Anchor·Spawning·Retirement·Multi-turn Debate·Result Synthesis) + Human-in-the-Loop(결과 반려 시 rejectDebatePrompt로 추가 8턴 토론)을 모두 시연한다는 점이 심사에서 좋게 평가됐습니다. 통신은 SSE 단방향 스트리밍(WebSocket은 양방향이라 오버엔지니어링)으로 단순화했고, types.ts에 Agent · ChatItem · SSEEvent 등 인터페이스 281줄을 먼저 확정해 3인 병렬 개발의 충돌을 최소화했습니다. MIT 라이선스로 공개되어 있습니다.