VS Code에서 Claude Code를 픽셀 아트 에이전트로: Pixel Agents 사용기

Claude Code를 쓰다 보면 한 가지 불편한 점이 있습니다. 에이전트가 백그라운드에서 뭘 하고 있는지 터미널 로그만으로는 알기 어렵다는 거죠. “지금 일하는 중인가, 멈춘 건가?” 하고 로그를 읽어야 하는데, 이게 생각보다 인지 부하가 큽니다.

Pixel Agents는 이 문제를 꽤 재미있게 풀었습니다. Claude Code 터미널마다 픽셀 캐릭터를 하나씩 붙여서, 에이전트 상태를 “움직임”으로 보여주는 거죠.

실제로 어떻게 작동하나

기본 원리는 간단합니다. 터미널 하나당 캐릭터 하나가 할당되고, 에이전트가 하는 일에 따라 캐릭터가 다르게 움직입니다.

확장이 Claude Code의 JSONL transcript를 관찰해서 상태를 추론하는 방식이라, Claude Code 자체를 수정할 필요가 없습니다. 꽤 영리한 접근이죠.

실제로 며칠 써봤는데, 몇 가지 특징이 있더라고요.

먼저 시각화 효과가 생각보다 좋습니다. 로그를 읽으려고 노력하지 않아도 캐릭터가 움직이는 걸 보면 “아, 지금 파일 분석 중이구나” 하고 바로 알 수 있습니다. 여러 터미널을 동시에 켜두고 병렬로 작업시킬 때는 이런 가시성이 더욱 빛을 발합니다.

서브에이전트도 별도 캐릭터로 표현된다는 점이 재밌었습니다. Task 도구로 하위 에이전트를 만들면 새 캐릭터가 생겨서, 전체 작업 흐름을 한눈에 볼 수 있거든요.

오피스 레이아웃 편집기도 있는데, 바닥/벽/가구를 배치해서 나만의 작업 공간을 꾸밀 수 있습니다. 색상 조정, 타일링, 선택/칠하기/지우기 같은 기본 기능에 Undo/Redo까지 최대 50단계 지원되니 꽤 디테일합니다.

궁금해서 저장소를 뒤져봤습니다.

캔버스 위에 캐릭터를 그리고, BFS로 경로를 찾아서 이동시키는 방식이네요. 상태 머신이 잘 설계되어 있어서 전환이 자연스럽습니다.

가장 큰 장점은 가시성입니다. 로그를 읽으려고 애쓸 필요 없이 캐릭터가 움직이는 걸 보면 상태가 바로 파악되니까요. 특히 팀 데모를 하거나 스트리밍을 할 때 상태를 설명하기가 훨씬 쉬워집니다.

저장소에 Known Limitations라고 적혀있듯, 완벽하진 않습니다.

하지만 이런 제약에도 불구하고, Claude Code를 자주 쓰는 분이라면 충분히 시도해볼 가치가 있습니다.