TheJacksonCode/Agent-Architecture

Claude Code를 위한 시각적 멀티 에이전트 시스템 디자이너 - 개발자들이 각 에이전트가 어떻게 생각하고, 무엇을 수행하며, 팀이 어떻게 협업하는지 이해할 수 있도록 구축되었습니다.

Agent Architecture Designer는 주로 교육 및 개발용 도구입니다. 이는 프로덕션 오케스트레이터 (Production Orchestrator)가 아닙니다. 복잡한 기계를 하나씩 부품을 살펴보며 공부하듯, 멀티 에이전트 시스템 (Multi-agent systems)을 천천히 연구할 수 있는 공간입니다.

이 도구를 사용한 후 여러분은 다음과 같은 능력을 갖추게 될 것입니다:

모든 개별 에이전트가 실제로 무엇을 하는지 이해 - 역할, 입력 (Inputs), 출력 (Outputs), 안티 패턴 (Anti-patterns), 그리고 실패 모드 (Failure modes)
에이전트들이 서로 어떻게 대화하는지 이해 - 누가 누구에게 업무를 인계하는지, 어떤 단계 (Phases)에 존재하는지, 어디에서 마찰이 발생하는지
주어진 프리셋 (Preset)이 왜 그런 형태를 띠는지 이해 - 왜 12개가 아닌 7개의 에이전트를 사용하는지, 왜 Five Minds 토론이 중간에 위치하는지, 왜 HITL (Human-in-the-loop) 게이트가 현재 위치에 있는지
토큰을 소비하기 전에 멀티 에이전트 시스템의 비용과 컨텍스트 예산 (Context budget)을 이해

시각적 디자이너로 사용할 수도 있지만, 진정한 가치는 모든 에이전트와 프리셋 뒤에 있는 **백과사전 (Encyclopedia)**에 있습니다. 각 항목은 짧은 강의처럼 구조화되어 있습니다: 정체성, 단계별 작동 방식, 수행하는 일, 수행하지 않는 일, 안티 패턴, 실제 사례, 실패 사례, 그리고 흥미로운 사실들.

학습 (Learn). 35개의 에이전트나 42개의 프리셋 중 아무거나 클릭하여 전체 백과사전 항목을 읽어보세요. 이것이 주요 사용 사례입니다.
설계 (Design). 캔버스에 에이전트를 드래그하여 배치하고, 서로 연결하며, 모델 (Opus / Sonnet / Haiku)을 할당한 뒤, Claude Code에서 바로 사용할 수 있는 시스템 프롬프트 (System prompt)를 생성하세요.
시뮬레이션 (Simulate). 에이전트들이 애니메이션 메시지를 주고받고 HITL 결정 게이트를 통과하는 라이브 시뮬레이션을 실행하여, 실제로 구현하기 전에 흐름을 확인할 수 있습니다.
예산 (Budget). 비용 커맨드 센터 (Cost Command Center)를 열어 에이전트별/단계별 예상 비용, 컨텍스트 윈도우 (Context window) 압박, 그리고 다양한 시나리오 (모두 Opus, 모두 Sonnet, 모두 Haiku 등)를 확인하세요.
내보내기 (Export). 시스템 프롬프트, 팀의 Mermaid 다이어그램, Markdown 보고서, CSV 또는 JSON을 복사하세요.

설치가 필요 없습니다. npm도 필요 없습니다. 빌드 단계도 없습니다. 오프라인에서도 작동하는 **단일 HTML 파일 (single HTML file)**입니다.

인터페이스는 클릭 한 번으로 언어를 전환할 수 있는 완전한 이중 언어 체계를 지원합니다. 폴란드어는 영어보다 더 포괄적입니다 - 저자가 폴란드인이며, 연구 과정에서 더 큰 폴란드어 지식 베이스를 사용할 수 있었기 때문입니다. 구체적으로는 다음과 같습니다:

• 35개의 에이전트(agent) + 42개의 사전 설정 백과사전 항목이 두 언어 모두에 존재합니다 (v32.16에서 마지막 차이를 메웠습니다)
• 폴란드어 버전에는 선택된 에이전트 및 사전 설정에 대한 **인라인 인포그래픽 (inline infographics)**이 포함되어 있으며, 이는 백과사전 벤토(bento) 내에 직접 렌더링됩니다 - 영어 버전에는 아직 인포그래픽이 포함되어 있지 않습니다. 폴란드어가 기본 작성 언어이며, 영어 번역은 em/en-dash를 사용하지 않는 기술적/직설적인 미국식 영어(US English)로 제공됩니다.

만약 영어를 사용하는 사용자로서 무언가 누락되었다고 느끼신다면, 이슈(issue)를 생성하거나 README 하단의 피드백 링크를 사용해 주세요. 저희는 어떤 부분을 확장하고 싶은지 알고 싶습니다.

GitHub Pages에서 Open Agent Architecture Designer를 확인하세요.

전체 경험을 위해 사전 설정인 Deep Five Minds Ultimate로 시작해 보세요. 에이전트를 클릭하여 백과사전을 열고, **Simulation (시뮬레이션)**을 눌러 팀이 작동하는 모습을 지켜보세요.

Visual canvas (비주얼 캔버스)- 35개의 에이전트를 드래그 앤 드롭하고, 연결선을 그리며, 마키 선택(marquee-select)으로 그룹을 지정하고, 스마트 제안을 통해 자동 배치하며, 우클릭 컨텍스트 메뉴를 사용합니다.
Agent encyclopedia (Universal) (에이전트 백과사전 (범용))- 35개의 모든 에이전트와 42개의 프리셋은 10개의 섹션으로 구성된 벤토(bento) 항목을 가집니다: 나는 누구인가, 비유, 작동 방식 (단계별), 내가 하는 일, 내가 하지 않는 일, 실제 사례, 실패하는 경우, 사실 관계, 심층 분석, 팀 구성
Preset encyclopedia (Universal) (프리셋 백과사전 (범용))- 42개의 모든 프리셋은 이중 열로 구성된 그린라이트/레드라이트 판결 패널, 단계별 흐름, 그리고 모델 힌트가 포함된 에이전트 명단을 제공합니다.
Five Minds Protocol (파이브 마인즈 프로토콜)- 4명의 도메인 전문가와 데빌스 애드버킷(Devil's Advocate)이 구조화된 적대적 토론을 통해 골드 솔루션(Gold Solution)을 도출합니다. 2026년 4월 현재 공개된 유사 기술은 없습니다.
HITL decision gates (HITL 의사결정 게이트)- 단계 사이에 3개의 인간 체크포인트, 120초 카운트다운, 자동 결정 폴백(fallback), 의사결정 프레젠터(Decision Presenter) 에이전트가 포함됩니다.
Live simulation (라이브 시뮬레이션)- 에이전트들이 연결선을 따라 애니메이션화된 말풍선과 데이터 패킷을 교환하며, 다이얼로그 타임라인(Dialog Timeline)이 모든 것을 기록합니다.
Mission Control (미션 컨트롤)- 실시간 지표, 단계별 타임라인, 통신 로그를 포함한 전체 화면 시네마틱 시뮬레이션 대시보드입니다.
Cost Command Center (비용 커맨드 센터)- 에이전트별/단계별 비용 추정치, p50-p90 범위, 컨텍스트 윈도우(context window) 사용량, 모델 믹스, 'what-if' 슬라이더, Markdown / CSV / JSON 내보내기를 지원합니다.
Custom Agent Creator Pro (커스텀 에이전트 크리에이터 프로)- 7가지 기능의 빌더 (복제, 품질 점수가 포함된 라이브 미리보기, 159개의 아이콘이 포함된 아이콘 피커, 컬러 스와치, MD 내보내기/가져오기, 위저드 모드, 모의 테스트 플레이그라운드)
Dark / Light theme (다크/라이트 테마)- 완전한 CSS 변수 시스템, APCA 준수 잉크 토큰, 색각 이상(CVD) 안전한 Okabe-Ito 단계 팔레트를 제공합니다.
Bilingual PL/EN (폴란드어/영어 이중 언어 지원)- 모든 UI 문자열, 모든 백과사전 항목, 모든 비용 모달 레이블에 적용됩니다.
Accessibility (접근성)- WCAG 2.2 ARIA, 동작 줄이기 선호(prefers-reduced-motion), 키보드 탐색, 포커스 가시성(focus-visible), 건너뛰기 링크, 스크린 리더(SR) 안내를 지원합니다.
Zero dependencies (제로 의존성)- npm, CDN, 빌드 단계가 필요 없습니다. 단 하나의 HTML 파일로 구성됩니다.

카테고리	에이전트 (Agents)	단계 (Phase)	일반적인 모델 (Typical model)
Orchestration (오케스트레이션)	Orchestrator, Synthesizer	Strategy (전략)	Opus / Sonnet
Planning (계획)	Analyst, Planner	Strategy (전략)	Sonnet
Research (리서치)	Tech, UX, Reddit, X/Twitter, GitHub, Forums, Docs (7명의 리서처) + Research Critic	Research (리서치)	Haiku / Sonnet
Build (빌드)	Backend, Frontend, Feature, Designer, Integrator, Writer	Build (빌드)	Sonnet
QA (품질 보증)	QA Security, QA Quality, QA Performance, QA Manager	QA (품질 보증)	Haiku / Sonnet
Five Minds (파이브 마인즈)	Pragmatist, Innovator, Data Analyst, User Advocate, Shadow (Devil's Advocate)	Debate (토론)	Opus
HITL (인간 참여형)	Decision Presenter	HITL (인간 참여형)	Haiku
Data / Ops / Product (데이터 / 운영 / 제품)	DB Architect, Observability Engineer, GTM Strategist, Statistician, EDA Analyst, Control Mapper, Telemetry Surfer	Build / Data / Compliance (빌드 / 데이터 / 컴플라이언스)	Sonnet

모든 에이전트는 ROLE (역할) / INPUT (입력) / OUTPUT (출력) / RESPONSIBILITIES (책임) / RULES (규칙) / ANTI-PATTERNS (안티 패턴) / WHAT YOU DO NOT DO (금지 사항) / REPORT FORMAT (보고 형식)을 따르는 v32.16 연구 기반 프롬프트와 함께 제공됩니다. 프롬프트는 독립적으로 구성되어 있어, 격리된 서브 에이전트(subagent)가 추가적인 컨텍스트 없이도 실행될 수 있습니다. 전체 형식은 docs/SKILLS_ARCHITECTURE.md를 참조하세요.

Minimal (2-3개 에이전트)- Solo + Validator, Quick Fix, Recon Squad, Classic Trio, Reflective Loop
Core (4-6개 에이전트)- Bug Hunter, Content Pipeline, Plan & Execute, Performance Boost, Startup MVP, Cascade Cost, Testing Suite, Accessibility Sprint
Advanced (6-11개 에이전트)- Security Hardening, Code Review, Design System, API Modernization, UI/UX Overhaul, Feature Sprint, Standard Dev, Data Pipeline, Research Swarm, Legacy Refactor, Microservices, 그리고 Perf Squad, AB Test Lab, Tech Writing Pipe와 같이 연구 기반의 "새로운 티어 (new tier)" 프리셋 포함
Enterprise / flagship (10-27개 에이전트)- Full-Stack SaaS, Full Hierarchy, Five Minds Protocol, Deep Research+Build, Fullstack Premium, Deep Research Swarm Pro, SOC2 Sweep, Data Analysis Pipe, Incident War Room, Five Minds Strategic, 그리고 플래그십인 Deep Five Minds Ultimate (27개 에이전트, 2개의 Five Minds 토론, 3개의 HITL 게이트)

프리셋(presets) 중 일부에는 작은 녹색 "NEW" 배지가 붙어 있습니다. 이들은 논문 및 업계 레퍼런스(Anthropic Lead Researcher, Magentic-One, wshobson, arxiv 2510.04023 및 기타)에서 파생된 블루프린트 기반(blueprint-based) 프리셋입니다. 각 프리셋에는 기원, 아이디어, 결과물(deliverables), 이상적인 사용 사례(ideal use cases) 및 안티 패턴(anti-patterns)을 설명하는 약 250단어 분량의 정교한 상세 설명이 포함되어 있습니다.

참고: [IMG:dark.png], [IMG:light.png], [IMG:simulation.png] 및 기존의 [IMG:encyclopedia.png] 스크린샷은 여전히 앱의 이전(v31) 상태를 보여줍니다. 이들은 추후 작업에서 v32.16으로 업데이트될 예정입니다. 위에서 언급한 우선순위가 높은 스크린샷들(encyclopedia bento, verdict panel, Cost Command Center, Custom Agent Creator, 정교한 인포그래픽)은 이미 v32.16 버전입니다.

Agent Architecture Designer는 완전한 오케스트레이션 계층(orchestration layer)을 포함합니다: **35개의 에이전트 기술(agent skills)**과 Claude Code에서 슬래시 명령어(slash commands)로 작동하는 **42개의 팀 프리셋(team presets)**이 포함되어 있습니다.

# 1. 에이전트 기술 생성 (35개 파일 -> ~/.claude/skills/)
node generate_skills.js
# 2. 팀 프리셋 생성 (42개 파일 -> ~/.claude/commands/)
...

생성되면 프리셋은 **전역적(global)**으로 작동합니다. 즉, 이 리포지토리뿐만 아니라 모든 프로젝트에서 사용할 수 있습니다.

Claude Code에서 /를 입력하고 프리셋을 선택하거나, 작업을 설명하여 Claude가 최적의 프리셋으로 자동 라우팅(auto-route)하게 할 수 있습니다:

계층 (Tier)	프리셋 예시 (Example presets)	에이전트 수 (Agents)
Minimal	/solo , /quick-fix , /trio	2-3
Core	/bug-hunt , /test-suite , /startup	4-6
Advanced	/security , /design-sys , /research	6-11
Enterprise	/saas , /full , /five-minds , /deep-five-minds	9-27

각 프리셋은 단계별(전략(Strategy) -> 조사(Research) -> 구축(Build) -> QA)로 에이전트 팀을 오케스트레이션하며, 단계 사이에 HITL(Human-in-the-loop) 결정 게이트를 둡니다. 전체 카탈로그와 자동 라우팅 아키텍처는 docs/ROUTING_SYSTEM.md를 참조하십시오.

~/.claude/skills/*.md # 35개 에이전트 프롬프트 (단일 진실 공급원 (single source of truth))
~/.claude/commands/*.md # 42개 프리셋 파일 (기술을 복제하지 않고 참조함)
~/.claude/PRESET_CATALOG.md # 라우팅 카탈로그 (작업 -> 최적의 프리셋)
...

docs/SKILLS_ARCHITECTURE.md를 참조하십시오.

전체 스킬 형식, 모델 라우팅 (Opus / Sonnet / Haiku), 그리고 새로운 에이전트를 추가하는 방법에 대해서는 docs/SKILLS_ARCHITECTURE.md를 참조하십시오.

형식 (Format)- 단일 HTML 파일, 약 27,500행, 약 5.7 MB (폴란드어 및 영어의 모든 백과사전 콘텐츠, 인라인 SVG 아이콘, 폴란드어 버전을 위한 인라인 base64 인포그래픽 포함)
의존성 (Dependencies)- 없음. npm, CDN, 빌드 단계가 필요하지 않음
기술 스택 (Stack)- Vanilla JS (ES2022) + 인라인 SVG + CSS transitions + Canvas 2D + Web Animations API + 컨테이너 쿼리 (container queries) + View Transitions API
상태 관리 (State)- localStorage 지속성 (canvas, 테마, 아이콘 모드, 언어 설정, 사용자 정의 에이전트). v32로 자동 마이그레이션 체인을 갖춘 버전 관리 키 사용
렌더링 (Rendering)- 하이브리드 아키텍처: 입자(particles) 및 별자리(starfield)를 위한 Canvas 2D, 연결선 및 아이콘을 위한 SVG, 에이전트 애니메이션을 위한 WAAPI, UI 크롬(chrome)을 위한 CSS
접근성 (Accessibility)- WCAG 2.2 ARIA, focus-visible, prefers-reduced-motion, 키보드 네비게이션, 스크린 리더(SR) announcer, 건너뛰기 링크(skip link), APCA 준수 대비(contrast)
아이콘 시스템 (Icon system)- 159개 아이콘 라이브러리 (스트로크 기반 기하학적 SVG) + Imagen 4로 생성된 PNG 폴백(fallback) 모드
폰트 (Fonts)- Space Grotesk / Inter / JetBrains Mono (Google Fonts로부터 단일 @import)
모델 (Models)- 오케스트레이션(orchestration) 및 중재(mediation)를 위한 Opus 4.6 ($15/MTok), 대부분의 에이전트를 위한 Sonnet 4.6 ($3/MTok), 가벼운 조사 및 HITL 게이팅을 위한 Haiku 4.5 ($0.25/MTok)
보안 (Security)- 모든 innerHTML 싱크(sink)를 훑는 escHtml(),
수식 주입(formula injection) 방지 기능이 포함된 escCsv(),
sanitizeMermaidLabel(),
테이블 셀 이스케이프를 위한 escMd(),
QuotaExceededError 처리가 포함된 safeParseLS / safeSaveLS
이중 언어 엔진 (Bilingual engine)- 약 1,694개의 번역된 필드를 위해 10개의 새로운 v32.16 네임스페이스(eduAgent, eduPreset, agentLong/Mid/Green/Red, presetLong/Mid/Green/Red)를 포함한 28개 네임스페이스와 평면(flat) I18N_EN.ui 조회 방식

각 주요 버전은 단일 HTML 파일로서 자체 폴더(v32/)에 저장됩니다. 루트 index.html은 항상 최신 출시 버전을 반영합니다. 과거 반복 빌드(v32.1부터 v32.16까지)는 git 히스토리에 보존됩니다.

v1부터 v32.16까지의 모든 버전을 다루는 전체 변경 이력(changelog)은 VERSIONS.md를 참조하십시오.

버전	주요 혁신 사항
v28	모든 에이전트를 위한 연구 기반 프롬프트 (ROLE/INPUT/OUTPUT/...)
...	v32.16
Universal Bilingual - 모든 백과사전 콘텐츠에 대한 완전한 영어 (EN) 동등성 확보; 10개의 새로운 I18N_EN 네임스페이스 추가; 18개의 병렬 Sonnet 번역 에이전트를 통해 약 1,694개의 필드 번역

이 프로젝트는 여전히 성장 중이며, 저희는 여러분의 피드백을 적극적으로 원합니다 - 특히 교육적인 측면에서 말이죠:

• 백과사전이 혼란스러웠던 특정 에이전트를 이해하는 데 도움이 되었나요? 어떤 에이전트였나요?
• 35 / 42 카탈로그에서 누락된 에이전트 역할(role)이나 패턴이 있나요?
• 영어 버전에도 인포그래픽 (infographics)이 포함되기를 원하시나요?
• 비용 명령 센터 (Cost Command Center)가 멀티 에이전트 토큰 예산 (multi-agent token budgets)에 대한 여러분의 생각을 바꾸어 놓았나요?

GitHub 이슈를 생성하거나 토론 (discussion)을 시작해 주세요. 짧은 댓글이나 스크린샷도 매우 환영합니다.

MIT - Copyright (c) 2026 TheJacksonCode

TheJacksonCode에 의해 제작되었습니다.

인터페이스 언어: 폴란드어 (인라인 인포그래픽을 포함하여 더 포괄적임) 및 영어 (v32.16부터 완전한 동등성 확보) | 문서 언어: 영어 | 주요 목적: 교육 및 개발 - 멀티 에이전트 시스템 (multi-agent systems)이 어떻게 사고하는지 이해하는 것