Excalidraw 화이트보드에 코딩 에이전트를 앉힌 Drawgent

Hacker News14일 전조회 14

Drawgent는 Excalidraw 화이트보드를 코딩 에이전트의 작업대로 바꿔주는 단일 Rust 바이너리다. 사용자가 이미 설치하고 로그인해 둔 Claude Code, Codex, opencode를 그대로 붙여, 오른쪽 채팅 패널에 요청을 적거나 도면 위에 메모를 남기면 에이전트가 캔버스를 읽고 그림을 직접 수정한다. 새 모델이나 새 계정을 요구하지 않고, 사용자의 CLI·설정·저장소를 그대로 쓴다는 점이 이 도구의 출발점이다.

설치는 `drawgent setup claude|codex|opencode` 한 줄로 시작한다. 이 단계에서 해당 CLI가 PATH에 있는지, 로그인이 되어 있는지 확인하고, ACP(Agent Client Protocol) 브리지를 준비한 뒤, 헤드리스 크롬을 찾거나 내려받고, `~/.config/drawgent/config.toml`을 작성한다. Claude Code와 Codex는 공식 ACP 어댑터를 `~/.cache/drawgent/adapters`에 약 60MB 크기로 한 번 설치하는데, 어댑터에 딸린 에이전트 바이너리는 빼고 사용자의 CLI를 가리키도록 설정한다. opencode는 ACP를 자체적으로 지원한다. Claude와 Codex 브리지를 쓰려면 Node.js 18 이상이 필요하다.

실행은 `drawgent up`이다. 현재 디렉터리를 작업 공간으로 삼아 127.0.0.1:7300(점유 중이면 다음 빈 포트)에 에디터와 API를 띄우고, ACP를 통해 에이전트 세션을 새로 열고, 브라우저를 연다. 화면이 없는 서버에서는 대신 `ssh -L` 명령을 출력해준다. 캔버스 상태는 `.drawgent/scene.json`에 남고 자동으로 gitignore에 들어간다.

이미 돌리고 있는 세션에 캔버스를 붙이는 `up --attach`도 있다. Claude는 `claude agents --json`으로 대화형·백그라운드 세션 목록을 뽑아 고를 수 있고, fork를 선택하면 전체 대화를 이어받은 새 세션이 ACP로 구동되면서 원래 터미널 세션은 건드리지 않는다. opencode는 로컬에 떠 있는 서버(`opencode --port 4096` 또는 `opencode serve`)에 live로 연결해 TUI에서 주고받는 메시지와 도구 호출이 채팅 패널에 그대로 비치게 한다. Codex는 `codex queue --thread <id>` 방식으로 붙고, 세션의 rollout 파일에서 응답을 읽어 미러링한다.

캔버스에서 지시하는 방법은 두 갈래다. 도형 옆이나 안에 `AGENT:`로 시작하는 텍스트를 쓰거나, 메모에서 도형으로 화살표를 그리면 입력이 멈춘 뒤 약 2.5초 후에 요청이 발화한다. 이때 메모의 위치, 가리키는 대상, 주변에 무엇이 있는지가 함께 전달되고, 에이전트는 처리 결과를 녹색 `DONE:` 노트로 남긴다. 다시 `AGENT:`로 고쳐 쓰면 같은 요청을 재전송할 수 있다.

레이저 존은 더 직접적이다. Excalidraw의 레이저(K)를 켜고 도면 일부를 동그랗게 또는 갈지자로 긋으면 그 자취가 빨간 외곽선으로 고정되고, 채팅 패널이 해당 영역에 걸린 요소 목록을 칩 형태로 띄운 채 열린다. 다음 메시지는 영역의 경계와 덮인 요소들(많이 겹친 순서)과 함께 서버로 넘어가고, 턴이 끝나거나 live 세션이 다시 유휴 상태가 되면 자취는 사라진다. 4초 안에 그은 획들은 하나의 존으로 묶인다.

`--room` 옵션을 주면 excalidraw.com의 룸에 협업자로 합류한다. 룸 키로 종단간 암호화(AES-GCM)된 트래픽을 주고받고, 빈 룸은 Firestore 저장소에서 불러오고 저장한다. 사람들은 익숙한 excalidraw.com에 그대로 남아 있고, 그들이 남긴 `AGENT:` 노트도 에이전트에게 전달된다. 로컬 에디터는 룸을 미러링하면서 채팅 패널을 유지한다.

에이전트 쪽에는 `drawgent mcp`가 stdio MCP 서버로 캔버스 도구를 노출한다. 스크립트와 컨테이너를 위한 저수준 서버 `drawgent serve`는 `--agent claude,codex,opencode`처럼 명시적으로 지정하거나 `name=command` 형태로 임의의 ACP 에이전트를 붙일 수 있다. 배포는 정적 musl 빌드를 만드는 Makefile, fish를 쓰는 Nix 개발 셸, 서버 전용 Docker 이미지 옵션으로 정리돼 있다. 공통 옵션으로 `--port`, `--room`, `--token`(API 베어러 및 URL의 `?token=`) 등이 있다.

배경에는 코딩 에이전트의 무대가 터미널 밖으로 넓어지는 흐름이 있다. 아키텍처 논의와 설계 스케치는 대개 화이트보드에서 일어나는데, 정작 에이전트는 텍스트만 볼 수 있었다. Drawgent는 캔버스를 에이전트가 읽고 쓸 수 있는 인터페이스로 만들어 그 간극을 메우려 한다. 헤드리스 크롬 렌더러로 화면을 캡처해 보여주는 비전 도구를 MCP로 얹은 것도 같은 맥락이다.

실무에서는 이미 쓰던 에이전트를 그대로 두고 시각적 작업 공간만 추가할 수 있다는 뜻이 된다. 다이어그램을 고치며 설계를 논의하거나, 리뷰 중인 구조를 캔버스에서 바로 손보는 식의 워크플로가 가능해진다. 다만 전제 조건이 분명하다. claude, codex, opencode 중 하나가 설치되고 로그인돼 있어야 하며, Claude·Codex 브리지는 Node.js 18 이상을 요구한다. 렌더러용 헤드리스 크롬도 필요한데, 시스템에 크롬이 있으면それを 쓰고 없으면 약 120MB의 Chrome Headless Shell을 sudo 없이 내려받거나 패키지 관리자 설치를 안내한다. 해당 에이전트에 대한 setup이 성공하지 않으면 `up`은 시작을 거부한다.