세션 샘플 데모 — Claude Code Orchestration

🎬

세션 샘플 데모

실제 사용자가 CCO 플랫폼을 처음부터 끝까지 사용하는 전체 시퀀스입니다.
■ 파란색 — 사용자 입력 명령 ■ 초록색 — 시스템 응답·결과 ■ 노란색 — 승인/확인 단계 (Beginner Only)

🎓 BEGINNER MODE

초보자 모드 — 단계별 수동 확인 세션

각 단계마다 사용자가 직접 확인하고 승인하며 진행합니다. 처음 사용자가 플랫폼 전체 흐름을 익히기에 최적입니다. 병렬 에이전트 최대 2개.

사용자

Settings 페이지로 이동 → API Keys 섹션 → Gemini API Key 입력란 클릭

사용자

AIzaSyD••••••••••••••••••••••7k3m 입력 후 Save 클릭

시스템

✅ API Key 저장 완료. Gemini 2.0 Flash 모델 연결 확인됨. 응답 지연: 124ms

사용자

Agent Configuration → Max Concurrent Agents: 2 / Task Timeout: 300s / Retry: 3 설정 → Save

시스템

✅ 에이전트 설정 저장 완료. 최대 2개 에이전트 병렬 실행 준비 상태입니다.

사용자

Execution Mode → Beginner Mode 토글 선택 → Save Mode

시스템

✅ Beginner Mode 저장 완료. 각 단계마다 수동 확인 팝업이 표시됩니다. 병렬 에이전트: 최대 2개.

사용자

Planning 페이지 → Master Plan Generator → 프로젝트 유형: Web Application 선택

사용자

핵심 기능 입력: "사용자 인증, 상품 관리, 결제 연동"

사용자

기술 스택: Next.js 14 + Supabase + Stripe 입력 → Generate Master Plan 클릭

시스템

🤖 Gemini AI 분석 중… (3.2초)

시스템

✅ 마스터 플랜 생성 완료 — 총 5단계 / 예상 소요 토큰: 48,200 / 예상 완료: 2시간 14분

Step 1 — 아키텍처 설계 (Architect Agent)
Step 2 — 백엔드 API 구현 (Backend Agent)
Step 3 — 프론트엔드 UI 생성 (Frontend Agent)
Step 4 — 결제·인증 통합 (Backend Agent)
Step 5 — 테스트·배포 (QA Agent)

승인 요청

⚠️ [Beginner 확인] 위 마스터 플랜으로 진행하시겠습니까? ▶ Approve ✅ / ✗ Cancel

사용자

Approve ✅ 클릭

시스템

✅ 플랜 확정됨. Quick Plan → 제목: "초기 DB 스키마 설계" / 우선순위: High / 에이전트: Planner-01 → Submit Plan

시스템

✅ Plan #P-0012 "초기 DB 스키마 설계" 큐에 추가됨. Planner-01 배정 완료.

사용자

Agents 페이지 → Agent Orchestration 다이어그램 확인

시스템

✅ 에이전트 현황: Architect(Running) · Backend(Idle) · Frontend(Idle) · QA(Idle) — 총 4개 온라인 (Beginner: 최대 2개 동시 실행)

사용자

Backend Agent 카드 → Trigger 버튼 클릭

승인 요청

⚠️ [Beginner 확인] Backend Agent를 지금 활성화하시겠습니까? ▶ Approve ✅ / ✗ Cancel

사용자

Approve ✅ 클릭

시스템

✅ Backend Agent 활성화. 상태: Idle → Running. 현재 병렬 실행 중: 2/2 (Architect + Backend).

사용자

Activity Feed에서 실시간 에이전트 간 통신 로그 확인

시스템

📡 [09:14] Architect → Backend: "API 계약서 v1.2 전달"
📡 [09:15] Backend: "엔드포인트 스펙 구현 시작: /api/auth, /api/products, /api/checkout"

사용자

Execution 페이지 → State Machine: Next State ▶ 클릭 (INIT → PLAN)

승인 요청

⚠️ [Beginner 확인] INIT → PLAN 상태로 전환하시겠습니까? ▶ Approve ✅ / ✗ Cancel

사용자

Approve ✅ 클릭

시스템

✅ 상태 전환: INIT → PLAN. Planner-01이 태스크 분해를 시작합니다.

사용자

Next State ▶ 클릭 (PLAN → EXECUTE)

승인 요청

⚠️ [Beginner 확인] PLAN → EXECUTE 상태로 전환하시겠습니까? 실행이 시작됩니다. ▶ Approve ✅ / ✗ Cancel

사용자

Approve ✅ 클릭

시스템

✅ 상태 전환: PLAN → EXECUTE. 2개 Execution Set 순차 실행 시작 (Beginner: 병렬 2개 제한).
Running: 2 / Queued: 3 / Progress: S1 ████░░ 72%

사용자

Live Log 탭 → Executor-01 #T-0092 로그 실시간 확인

시스템

[09:14:05] INFO Loading source files... (142 files)
[09:14:11] OK Parsed router/auth.js
[09:14:15] OK Converted 14/18 routes
[09:14:17] WARN Route /api/upload — manual review required
[09:14:25] OK tsc — 0 errors
[09:14:26] INFO ▶ Awaiting step approval...

승인 요청

⚠️ [Beginner 확인] Executor-01 #T-0092 결과를 검토했습니다. 다음 단계(REVIEW)로 진행하시겠습니까? ▶ Approve ✅ / ✗ Cancel

사용자

Approve ✅ 클릭

시스템

✅ 상태 전환: EXECUTE → REVIEW. 코드 리뷰 단계 시작.

사용자

Tasks 탭 → Failed 탭 클릭 → #T-0094 "배포 파이프라인" Retry 클릭

시스템

✅ #T-0094 재시도 성공. 배포 파이프라인 완료. Status: Failed → Done

사용자

Diff 페이지 → Load Sample 클릭

시스템

✅ 샘플 코드 로드 완료. Before: Express 라우터 / After: Fastify 변환본

사용자

Compute Diff ▶ 클릭

시스템

✅ Diff 계산 완료 (8ms)
Lines Added: 23 · Lines Removed: 31 · Unchanged: 142
Saving Rate: 71.2% — 전체 전송 대비 토큰 71.2% 절감

사용자

Split View 클릭 → 좌(Before) / 우(After) 병렬 비교 확인

시스템

✅ Split 뷰로 전환. 삭제 줄(빨강) 31개, 추가 줄(초록) 23개 하이라이트 표시.

사용자

Analytics 페이지 → 기간 탭 30D 선택

시스템

✅ 30일 데이터 로드 완료.
Total Tasks: 1,247 · Success Rate: 94.7% · Avg. Duration: 4.2분 · Agent Utilization: 61%

사용자

Token Analytics → Token Budget Allocator → 총 예산: 100,000 토큰 입력 → Calculate 클릭

시스템

✅ 단계별 최적 배분 계산 완료:
Planning: 12,000 (12%) · Architecture: 18,000 (18%) · Implementation: 45,000 (45%)
Testing: 15,000 (15%) · Review: 10,000 (10%) — 예상 절감: $0.78

사용자

Dashboard 페이지로 이동 → 전체 현황 확인

시스템

✅ 프로젝트 완료 현황:
Active Agents: 2 · Tasks Running: 0 · Success Rate: 96.4% · Avg. Latency: 312ms
총 소요 시간: 3시간 42분 (Beginner 모드 — 수동 확인 포함)

사용자

Recent Events → Refresh 클릭

시스템

✅ 이벤트 갱신 완료.
[방금 전] 마스터 플랜 "Next.js 쇼핑몰" 전체 완료 — 총 소요 시간: 3시간 42분 / 사용 토큰: 31,840 / 절감율: 71.8%

⚡ PRO MODE 세션으로 전환

⚡ PRO MODE

전문가 모드 — 완전 자동화 고속 세션

모든 단계가 자동으로 연속 실행됩니다. 수동 승인 없이 처리 속도 최대 3배, 병렬 에이전트 최대 6개 동시 실행.

사용자

Settings → Execution Mode → Pro Mode 토글 ON → Save Mode

시스템

✅ Pro Mode 활성화 완료. 자동 연속 실행 ON / 수동 확인 팝업 비활성화 / 병렬 에이전트: 최대 6개.

사용자

Agent Configuration → Max Concurrent Agents: 6 / Task Timeout: 300s / Retry: 3 → Save

시스템

✅ 에이전트 설정 저장 완료. 최대 6개 에이전트 병렬 실행 준비 상태입니다.

사용자

Planning → Master Plan Generator → 프로젝트: Web Application / 기능: "사용자 인증, 상품 관리, 결제 연동" / 스택: Next.js 14 + Supabase + Stripe → Generate Master Plan

시스템

🤖 Gemini AI 분석 중… (2.8초)
✅ 마스터 플랜 생성 완료 — 총 5단계 / 예상 토큰: 48,200 / 예상 완료: 44분 (Pro 자동화)

Step 1 — 아키텍처 설계 (Architect Agent)
Step 2 — 백엔드 API 구현 (Backend Agent)
Step 3 — 프론트엔드 UI 생성 (Frontend Agent)
Step 4 — 결제·인증 통합 (Backend Agent)
Step 5 — 테스트·배포 (QA Agent + DevOps Agent)

시스템

⚡ [Pro Auto] 플랜 즉시 실행 큐 등록 완료. 수동 확인 없이 Execution으로 자동 전환합니다.

시스템

⚡ [Pro Auto] State Machine: INIT → PLAN → EXECUTE 자동 전환 완료.
6개 에이전트 완전 병렬 실행 시작: Architect · Backend · Frontend · QA · DevOps · Reviewer

시스템

[09:14:05] ⚡ Architect: 아키텍처 설계 완료 (42초)
[09:14:48] ⚡ Backend: API 18개 구현 완료 (3분 12초)
[09:15:30] ⚡ Frontend: 컴포넌트 34개 생성 완료 (2분 51초)
[09:17:21] ⚡ Backend: 결제·인증 통합 완료 (1분 51초)
[09:19:05] ⚡ QA: 테스트 스위트 통과 (94/95) / DevOps: 배포 파이프라인 완료

사용자

Live Log 탭에서 실시간 병렬 실행 로그 모니터링

시스템

[09:14:07] INFO Architect → Backend: "API 계약서 v1.2 전달" (자동)
[09:14:09] INFO Backend → Frontend: "엔드포인트 스펙 공유" (자동)
[09:15:02] WARN #T-0094 실패 감지 → 자동 재시도 1/3
[09:15:18] OK #T-0094 재시도 성공. 총 3회 중 2회만에 완료.

시스템

⚡ [Pro Auto] EXECUTE → REVIEW → DONE 자동 전환 완료.
Running: 0 / Done: 19 / Failed: 0 — 전체 파이프라인 자동 완료 ✅

시스템

⚡ [Pro Auto] Diff 자동 계산 완료 (6ms)
Lines Added: 23 · Lines Removed: 31 · Unchanged: 142
Saving Rate: 71.2% — 토큰 71.2% 절감 자동 적용됨

사용자

Split View 클릭 → 변경사항 최종 검토

시스템

✅ Split 뷰로 전환. 삭제 줄(빨강) 31개, 추가 줄(초록) 23개 하이라이트 표시.

시스템

⚡ [Pro Auto] 실행 완료 후 Analytics 자동 집계 완료.
Total Tasks: 19 · Success Rate: 100% · Avg. Duration: 44분 · Agent Utilization: 98%

사용자

Analytics → Token Analytics → Token Budget Allocator → 100,000 토큰 → Calculate

시스템

✅ 단계별 최적 배분:
Planning: 12,000 · Architecture: 18,000 · Implementation: 45,000 · Testing: 15,000 · Review: 10,000
예상 절감: $0.78 / 실제 사용: 31,840 토큰 (68.2% 절감)

사용자

Dashboard 페이지로 이동 → 전체 현황 확인

시스템

✅ 프로젝트 완료 현황:
Active Agents: 6 · Tasks Running: 0 · Success Rate: 100% · Avg. Latency: 241ms
총 소요 시간: 44분 (Pro 자동화) vs 3시간 42분 (Beginner 수동) — 5.0배 빠름 🚀

시스템

✅ Weekly Activity: 이번 주 최고 기록 달성 🎉
[방금 전] 마스터 플랜 "Next.js 쇼핑몰" 전체 완료 — 사용 토큰: 31,840 / 절감율: 71.8%