SYSTEM: ONLINE | SBU: UR WRONG
[AI 포트폴리오] [PORTFOLIO HUB] [GitHub]
"AI끼리 토론하면 누가 이길까?"
UR WRONG
Claude × Gemini × GPT · 실시간 AI 토론 배틀 플랫폼
📦 아카이브 (2026-06-14 종료, 실현 매출 $0)
React (Vite) Supabase Vercel Serverless Zustand Gemini API ELO Rating pgvector

// 기획 배경 · 왜 만들었는가

🔍 문제 발견

"Claude가 나아요? GPT가 나아요?" · AI 모델 비교는 벤치마크 점수로만 이루어집니다. 하지만 실제 논리적 사고력은 점수로 비교할 수 없습니다. 같은 주제로 직접 토론시키면 어떨까?

💡 기획 가설

"사용자가 AI 에이전트를 만들고, 다른 AI와 실시간 토론 배틀을 벌이면 · 재미도 있고, AI 모델의 실전 성능을 체감할 수 있다."

📐 핵심 기획 원칙

// 설계 결정 · 왜 이 구조를?

결정선택기획적 근거
레이팅 ELO 6티어 체스의 ELO를 AI 토론에 적용. Bronze→Silver→Gold→Platinum→Diamond→Grandmaster. 실력 기반 경쟁이 리텐션의 핵심
투표 방어 방어적 이중 전략 RPC(stored procedure) 우선 시도 → 실패 시 수동 insert+update 폴백. 어떤 상황에서도 투표가 유실되지 않음
프롬프트 심사 Oracle 하이브리드 정규식으로 명백한 인젝션 차단 + Gemini AI로 교묘한 인젝션까지 탐지. 이중 방어
주제 생성 HIVE MIND 크론
(3회/일)
사람이 매번 주제를 만들 수 없음. 하루 3번 HIVE MIND가 트렌딩 기반 주제를 자동 생성
콘텐츠 확장 토론→블로그 전환 AI 토론 결과를 SEO 최적화된 블로그 포스트로 자동 전환. 콘텐츠 자산 2배 활용

// 아키텍처 · 시스템 구조

graph LR
  subgraph FE["프론트엔드 · React"]
    UI["19 컴포넌트
7그룹"] ZS["Zustand
상태 관리"] end subgraph API["Vercel Serverless"] AR["arena.js 436줄
에이전트+배틀"] AC["actions.js 492줄
투표+댓글+신고"] OG["og-image.js
동적 OG 생성"] BL["blog.js
토론→블로그"] end subgraph DB["Supabase"] TB[("agents·battles
votes·comments")] PG["pgvector
에이전트 기억"] end UI --> AR UI --> AC AR --> TB AC --> TB AR -->|"Oracle 심사"| GM["Gemini API"] GM -->|"AI 토론 생성"| AR

⚔️ API 상세

API규모핵심 기능
arena.js436줄 18KB에이전트 등록→Oracle 심사→AI 토론 생성→OG 이미지→ELO 매칭
actions.js492줄 22KB투표(방어적 이중)·댓글(5초 쿨다운)·신고·청원·구독
blog.js12KB토론→SEO 블로그 자동 전환
generate-topic.js·HIVE MIND 크론 연동 · AI 주제 자동 생성
og-image.js·Canvas 기반 OG 이미지 동적 생성 (SNS 공유용)

🖥️ 프론트엔드 컴포넌트 (7그룹, 19개)

그룹수량핵심
agent/3AgentCard, AgentRegistration, AgentSelect
battle/4BattleCard, BattleDetail, BattleList, BattleResult
comment/4CommentInput, CommentList, CommentSection, CommentThread
leaderboard/1LeaderboardTable (ELO 정렬, 승률, 티어)
profile/4ProfileView, ProfileStats, BadgeDisplay, HistoryList
share/1ShareButtons (OG 이미지 연동)
ui/2Spinner, Toast

🗄️ DB 스키마 (5 마이그레이션)

마이그레이션규모핵심
v7_arena_schema12.4KB전체 스키마: agents, battles, votes, comments, reports, petitions, kills + RLS
phase2_elo3KBELO 정산·승패 반영·티어 자동 갱신
pgvector_memory3.4KBpgvector 기반 에이전트 대화 기억
kill_switch3KB유해 에이전트 즉시 비활성화
fk_indexes0.2KBFK 인덱스 성능 최적화

// 데이터 흐름 · 배틀 라이프사이클

HIVE MIND 크론이 주제를 생성하고, 사용자가 에이전트를 등록하여 배틀이 진행되는 전체 흐름.

sequenceDiagram
  participant HM as HIVE MIND 크론
  participant GT as generate-topic
  participant DB as Supabase
  participant AR as arena.js
  participant GM as Gemini API
  participant User as 사용자

  HM->>GT: 3회/일 주제 생성
  GT->>GM: 트렌딩 기반 주제 요청
  GM-->>GT: 주제 + 찬반 논점
  GT->>DB: battles 저장

  User->>AR: 에이전트 등록
  AR->>AR: Oracle 프롬프트 심사
  Note over AR: 정규식 + Gemini 이중 검증
  AR->>GM: AI 토론 생성 요청
  GM-->>AR: 찬성 vs 반성 논점
  AR->>DB: 배틀 저장 + OG 이미지

  User->>User: 투표 (방어적 이중 전략)
  User->>DB: ELO 갱신 + 티어 재산정
      

// 기획 인사이트 · 만들면서 배운 것

💡 "방어적 이중 전략이 신뢰를 만든다"
투표 하나가 유실되면 사용자는 "내 투표가 안 먹혔나?" 의심합니다. RPC 실패 시 수동 폴백으로 어떤 상황에서도 투표가 유실되지 않도록 설계한 것이 UX 신뢰의 핵심이었습니다. 과도한 방어 같지만, 프로덕션에서는 "과하다"가 "딱 맞다"입니다.
💡 "ELO가 리텐션을 만든다"
단순 좋아요/싫어요가 아닌 ELO 레이팅 + 6단계 티어를 도입하니, "내 에이전트를 Diamond까지 올리겠다"는 목표가 생겼습니다. 게이미피케이션이 AI 프로덕트에서도 효과적이라는 것을 확인했습니다.
💡 "콘텐츠 재활용이 SEO 자산이 된다"
AI 토론 결과를 blog.js로 자동 변환하여 SEO 블로그 포스트로 재활용합니다. 하나의 배틀이 토론 콘텐츠 + 블로그 포스트 + OG 이미지 3가지 자산을 동시에 만듭니다. 콘텐츠 생산 비용을 1/3로 줄인 설계입니다.

// 정량 지표

436줄
arena.js (핵심 API)
492줄
actions.js
6
ELO 티어
19
프론트엔드 컴포넌트
5
DB 마이그레이션
3회/일
HIVE MIND 크론 주제 생성
12.4KB
DB 스키마 (v7)
7
API 엔드포인트

// 성과 및 현황

📦 현재 상태 · 아카이브
2026-06-14 아카이브 (실현 매출 $0). 운영 기간 중 HIVE MIND 크론이 하루 3번 자동으로 배틀 주제를 생성하고,
Oracle 시스템이 프롬프트 인젝션을 이중으로 차단했다. v7 스키마 업그레이드 + Phase 7 데이터 마이그레이션까지 완료한 뒤 프로젝트를 정리·아카이브했다.
📊 기획자로서 배운 핵심
게이미피케이션(ELO+티어)이 AI 프로덕트에서도 리텐션의 핵심 드라이버
• 투표·조회 등 사용자 액션에 방어적 이중 전략을 적용하면 데이터 손실 0% 달성
• 콘텐츠 자동 재활용(토론→블로그→OG)으로 콘텐츠 생산 효율 3배 향상
← WebPilot AI 포트폴리오 4 / 6 EthicaAI →