VS Code에서 Claude Code를 픽셀 아트 에이전트로: Pixel Agents 실전 리뷰
AI 에이전트가 백그라운드에서 뭘 하는지 감이 안 올 때가 많습니다.
Pixel Agents는 이 문제를 꽤 영리하게 풀어요. Claude Code 터미널마다 픽셀 캐릭터를 붙여서, 에이전트 상태를 “움직임”으로 보여줍니다.
- 코드 작성 중: 타이핑 애니메이션
- 파일/문서 탐색 중: 읽기 애니메이션
- 사용자 확인 대기 중: 대기/말풍선 표시
- 여러 터미널 동시 실행: 캐릭터 여러 명이 각자 행동
핵심 포인트 요약
1) One agent, one character
터미널 1개 = 캐릭터 1명 매핑.
작업이 많은 날에는 “누가 지금 무슨 작업 중인지”를 글자 로그 대신 시각적으로 파악할 수 있습니다.
2) 실시간 활동 트래킹
확장은 Claude Code의 JSONL transcript를 관찰해 상태를 추론합니다.
즉, Claude Code 자체를 수정하지 않고도 동작 상태를 애니메이션으로 반영합니다.
3) 가상 오피스 레이아웃 편집기
내부 편집기에서 바닥/벽/가구를 배치해 작업 공간을 꾸밀 수 있습니다.
- 바닥 색상(HSB) 조정
- 벽 자동 타일링
- 선택/칠하기/지우기/스포이드
- Undo/Redo(최대 50단계)
- JSON Export/Import
- 그리드 최대 64×64 확장
4) 서브에이전트 시각화
Task 도구로 생성된 서브에이전트도 별도 캐릭터로 나타나서, 부모 작업과 병렬 흐름을 따라가기 좋습니다.
5) 알림 UX
- 입력이 필요한 상황: 말풍선
- 턴 종료 시: 선택적 사운드 알림
데모 영상 관찰 포인트
요청받은 로컬 데모 영상(약 53.5초, 1280×720/30fps)에서도 아래 흐름이 명확히 보입니다.
- 에이전트 생성 시 캐릭터가 즉시 배치됨
- 터미널 활동에 맞춰 걷기/앉기/작업 모션 전환
- 유휴 상태에서 대기 동작으로 전환
- 캐릭터 선택 후 좌석 재배치 인터랙션
기술 스택 (저장소 기준)
- Extension: TypeScript, VS Code Webview API, esbuild
- Webview UI: React 19, TypeScript, Vite, Canvas 2D
- 렌더링/동작: 캔버스 기반 루프, BFS 경로 탐색, 상태 머신(idle → walk → type/read)
설치 및 시작
- VS Code 1.109.0+
- Claude Code CLI 설치/설정 필요
마켓플레이스 설치가 가장 빠릅니다:
https://marketplace.visualstudio.com/items?itemName=pablodelucca.pixel-agents
오픈소스 저장소:
https://github.com/pablodelucca/pixel-agents
장점과 주의점
장점
- 멀티 에이전트 작업 가시성 향상
- “지금 멈춘 건지, 일하는 중인지” 인지 부하 감소
- 팀 데모/스트리밍에서 상태 전달이 쉬움
주의점 (저장소의 Known Limitations)
- 터미널-에이전트 동기화가 간헐적으로 어긋날 수 있음
- 상태 판별 일부가 휴리스틱 기반이라 오탐 가능
- 테스트 환경이 Windows 11 중심(다른 OS는 변동 가능)
총평
Pixel Agents는 “귀엽다”를 넘어, 실제로 에이전트 오퍼레이션 가시성을 높이는 도구입니다.
특히 Claude Code를 여러 터미널로 병렬 운용하는 사용자라면, 로그를 읽는 시간보다 상태를 파악하는 시간이 크게 줄어듭니다.