멀티 에이전트 LLM (Large Language Model) 워크플로우가 점점 더 대중화되고 있지만, 우리가 AI 에이전트와 상호작용하는 방식은 여전히 2D 채팅 스레드에 머물러 있습니다. 여러 에이전트가 동시에 작업하거나, 컨텍스트 (Context)를 주고받거나, 비동기적 백그라운드 태스크 (Asynchronous background tasks)를 실행하는 것을 시각화해야 할 때 채팅 UI 탭은 한계가 있습니다.

Pixel Council은 이러한 사고 모델을 완전히 뒤집습니다. 이 시스템은 AI 에이전트를 무한한 2D 캔버스에 배치된 공간적 엔티티 (Spatial entities)로 취급하며, 커스텀 생성된 애니메이션 픽셀 아트 아바타로 표현합니다. 커스텀 Animated Spark Edges를 통해 에이전트는 연결선을 따라 데이터 패킷을 시각적으로 전달하며, 실시간 Task & Flow Audit Log를 유지하면서 다운스트림 실행 파이프라인 (Downstream execution pipelines)을 트리거합니다.

이 기술적 심층 분석에서는 React 18, @xyflow/react, PixiJS v8, DiceBear Pixel-Art, Zustand, 그리고 IndexedDB를 사용하여 Pixel Council이 어떻게 구축되었는지 살펴보겠습니다.

아키텍처 개요 (Architectural Overview)

Pixel Council은 고성능 2D WebGL 캔버스 그래픽을 React의 컴포넌트 상태 (Component state), 커스텀 SVG 모션 경로 (Motion paths), 그리고 비동기 스트리밍 데이터 흐름 (Asynchronous streaming data flows)과 결합합니다.

                  +-----------------------------------+
                  |        React Flow Canvas          |
                  |  (Spatial Node Placement & Edges) |
...

핵심 기술 구현 하이라이트

1. 커스텀 Animated Spark Edges 및 에이전트 간 파이프라인 신호

캔버스 위의 에이전트들은 커스텀 React Flow 엣지 (Edge) 컴포넌트를 사용하여 컨텍스트와 출력 데이터를 다운스트림 에이전트나 출력 노트로 전달합니다. 데이터 패킷이 발송될 때 SVG animateMotion은 빛나는 궤적 입자(#F4A261 및 #D95D39)를 렌더링합니다.

// src/components/canvas/edges/AnimatedSparkEdge.tsx의 발췌
import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath } from '@xyflow/react';
import { Zap } from 'lucide-react';
...

2. PixiJS & DiceBear를 이용한 고성능 픽셀 아트 렌더링

각 에이전트 노드는 격리된 고성능 PixiJS v8 캔버스 애플리케이션을 호스팅합니다. 선명한 픽셀 아트 (pixel art) 시각 효과를 유지하면서도 렌더링을 가볍게 유지하기 위해, DiceBear의 시드 기반 생성기 (seed-based generator)를 WebGL 텍스처 (textures) 및 PixiJS 티커 루프 (ticker loops)와 결합했습니다.

// src/components/canvas/nodes/PixiCharacter.tsx 에서 발췌
import { useEffect, useRef } from 'react';
import * as PIXI from 'pixi.js';
...

3. 작업 및 데이터 흐름 감사 로그 엔진 (Task & Data Flow Audit Log Engine)

에이전트 활동의 감사 가능성 (auditable)을 확보하기 위해, 모든 작업의 시작, 완료, 오류 및 에이전트 간 데이터 전송은 Zustand와 IndexedDB의 추가 전용 (append-only) 감사 추적 (audit trail)에 기록됩니다:

// src/store/useStore.ts 의 작업 로깅 저장소에서 발췌
addTaskLog: (log) => {
  const newEntry: TaskLogEntry = {
...

4. 에이전트 복제 로직 (Agent Duplication Logic)

사용자는 UI(노드 배지, 인스펙터 사이드바 또는 모달 대화 상자)를 통해 구성된 모든 에이전트를 즉시 복제할 수 있습니다:

// src/store/useStore.ts 에서 발췌
duplicateAgent: (id) => {
  const state = getStore();
...

공간적 에이전트 워크스페이스 (Spatial agent workspaces)는 인간의 직관과 자율적인 AI 실행 사이의 간극을 메워줍니다. 레트로 8비트 시각적 미학과 애니메이션 스파크 연결 파이프라인 (connection pipelines), 감사 로그, 그리고 LLM 스트리밍 API (streaming APIs)를 결합함으로써, Pixel Council은 멀티 에이전트 오케스트레이션 (multi-agent orchestration)을 직관적인 즐거움으로 변화시킵니다.

온라인에서 프로젝트를 확인하거나 지금 바로 자신만의 에이전트 의회(agent council)를 구축해 보세요!

https://www.dailybuild.xyz/project/204-pixel-council