서비스·

내 손으로 그린 다이어그램, 클로드가 실시간으로 고쳐준다

한 줄 요약Excalidraw에 내 AI 계정을 연결해 다이어그램을 대화로 수정하는 오픈소스 도구
광고

드로젠트, Excalidraw에 내 AI 계정을 그대로 붙인다

Excalidraw는 브라우저에서 바로 쓰는 손그림 스타일 다이어그램 도구다. 여기에 내 컴퓨터에 설치된 클로드 코드(Claude Code), 코덱스(Codex), 오픈코드(opencode) 중 하나를 연결해 주는 프로그램이 '드로젠트(drawgent)'다. 별도 클라우드 계정이나 API 키를 새로 만들 필요 없이, 이미 로그인해 둔 내 계정 그대로 쓴다.

핵심은 두 가지다. 채팅 패널에 "시퀀스 다이어그램 그려줘"라고 말하거나, 캔버스 위 특정 도형 옆에 AGENT: 이 화살표 방향 바꿔줘라고 적어두면 에이전트가 스크린샷과 씬 데이터를 보고 바로 고친 뒤 DONE 표시를 남긴다. 편집 과정은 실시간으로 화면에 보이고, 커서도 에이전트 모양(🤖 Agent)으로 따라다닌다.

공식 MCP가 있는데 왜 제3자 도구를 쓰나

Excalidraw팀은 이미 **공식 MCP 엔드포인트(mcp.excalidraw.com)와 서버(github.com/excalidraw/excalidraw-mcp)**를 공개했다. Hacker News 댓글에서도 이 점을 지적하는 목소리가 있었다. 그런데 드로젠트는 **'내 로컬 에이전트 그대로 연결'**이라는 다른 지점을 노린다.

구분 Excalidraw 공식 MCP 드로젠트(drawgent)
실행 주체 클라우드/서버 측 에이전트 내 PC에 설치된 클로드·코덱스·오픈코드
인증 별도 토큰/키 관리 claude auth status 등 기존 로그인 그대로
협업 단일 세션 중심 drawgent up --room으로 Excalidraw 공개 방에 협업자(🤖)로 입장
암호화 서버 측 처리 룸 키로 종단간 암호화(E2EE)
설치 npm 패키지/도커 Rust 바이너리(cargo install) + Node.js ≥ 18

공식 MCP가 'Excalidraw 기능을 에이전트에게 열어준다'면, 드로젠트는 **'내 에이전트가 내 Excalidraw 캔버스를 직접 만진다'**에 가깝다. 특히 --room 옵션으로 excalidraw.com 공개 방에 봇처럼 들어가 사람들과 동시에 편집하는 시나리오가 차별점이다.

광고

한국 개발자가 지금 바로 해보려면

준비물 세 가지만 있으면 된다.

  1. 클로드 코드, 코덱스, 오픈코드 중 하나가 설치돼 있고 claude auth status(또는 codex login status, opencode auth list)가 통과할 것
  2. Node.js 18 이상(npm 포함)
  3. Chrome/Chromium이 있거나, 없을 때 drawgent setup이 제안하는 --chrome download로 헤드리스 크롬을 받을 것

설치 순서는 다음과 같다.

# 1) 바이너리 설치 (Rust 툴체인 필요)
cargo install --path .   # 또는 crates.io 공개 시 cargo install drawgent

# 2) 에이전트별 1회 설정
drawgent setup claude    # codex | opencode 도 가능

# 3) 내 저장소에서 캔버스 띄우기
cd ~/my-project
drawgent up              # 브라우저에 에디터 열림

이미 띄워둔 에이전트 세션이 있으면 drawgent up --attach로 골라 붙이면 된다. 예외적으로 코덱스만 codex mcp add drawgent -- drawgent mcp 명령으로 MCP 서버를 한 번 등록해야 한다. 클로드와 오픈코드는 --attach 시 자동으로 도구가 주입된다.

협업 방 만들 때 주의할 점

drawgent up --room 'https://excalidraw.com/#room=<id>,<key>'로 공개 방에 들어가면 사람들은 excalidraw.com 그대로 쓰고, 에이전트는 봇 협업자로 참여한다. 사람들 메모(AGENT: ...)가 내 에이전트에게 전달되고, 에이전트 편집이 바로 그 방에 반영된다. 트래픽은 룸 키로 종단간 암호화된다.

단, 빈 방은 Excalidraw의 Firestore 저장소를 쓴다. 방이 비어 있으면 데이터가 구글 인프라에 닿는다. 사내 보안 정책상 Firestore가 막혀 있으면 빈 방 생성·저장이 실패할 수 있다. 이 경우 로컬 에디터(drawgent up만 실행)로 작업 뒤 JSON(.drawgent/scene.json, git-ignored)로 내보내 쓰는 우회가 필요하다.

한국어·한글 폰트, 한국 서비스 연동은?

자료에 한국어 인터페이스나 한글 폰트 지원 여부는 명시되지 않았다. Excalidraw 본체가 웹앱이라 브라우저 폰트를 따르지만, 드로젠트 렌더러(헤드리스 크롬)가 스크린샷을 찍을 때 시스템에 한글 폰트가 없으면 깨져 보일 가능성이 있다. 리눅스 서버에서 돌릴 땐 fonts-noto-cjk 등 설치를 권한다.

국내 클라우드(네이버 클라우드, NHN 클라우드, 카카오클라우드)나 협업 툴(노션, 구글 워크스페이스)과의 직접 연동 기능은 없다. MCP 도구 목록(get_scene, add_mermaid, update_elements 등)에 HTTP 엔드포인트도 포함돼 있으니, 내부 스크립트로 래핑해 연동하는 건 어렵지 않아 보인다.

비용·요금제 비교: 무료지만 '내 리소스'를 쓴다

드로젠트 자체는 오픈소스(MIT 라이선스 추정)라 사용 요금이 없다. 단, 연결한 에이전트 비용은 내 계정 요금제를 따른다.

  • 클로드 코드: 과금 방식은 자료에 공개되지 않았습니다
  • 코덱스: 과금 방식은 자료에 공개되지 않았습니다
  • 오픈코드: 로컬 LLM(올라마 등) 쓰면 토큰 비용 0원, GPU 메모리만 필요

기존 유료 도구(미로, 루시드차트, 피그잼 등) 대체 여부는 '다이어그램 수정 횟수 × 토큰 단가'로 계산해봐야 한다. 하루 수십 번 고치는 팀이면 API 비용이 구독료를 넘을 수 있다. 로컬 LLM(opencode + ollama) 조합이면 토큰 비용 0원이라 가장 저렴하다.

쉽게 풀어보면

드로젠트는 내 컴퓨터에 있는 AI 코딩 비서(클로드 코드·코덱스·오픈코드)를 Excalidraw 화이트보드에 '참관인'으로 앉히는 프로그램이다.

상상해보자. 회의 중에 Excalidraw 방을 열고 팀원들과 같이 아키텍처를 그린다. 중간에 "이 부분 메시지 큐로 바꿔줘"라고 포스트잇(AGENT: ...)을 붙여둔다. 그럼 내 PC에서 돌고 있던 클로드가 화면 캡처와 도면 데이터(JSON)를 보고, 화살표와 박스를 지우고 다시 그린 뒤 'DONE' 스티커를 붙인다. 팀원들 눈엔 그냥 봇 커서가 슥슥 움직이는 걸로 보인다.

이게 가능한 건 **MCP(Model Context Protocol)**라는 표준 덕분이다. MCP는 'AI에게 도구 상자를 건네주는 규약'인데, 드로젠트는 Excalidraw 조작 도구(add_elements, add_mermaid, update_elements 등)를 MCP 서버로 포장해 내 로컬 에이전트에 넘긴다. 내 API 키가 외부로 나가지 않고, 내 로컬에서만 돈다는 게 핵심이다.

공식 Excalidraw MCP도 있다. 그건 'Excalidraw 서버가 에이전트에게 도구를 빌려준다'는 구조다. 드로젠트는 **거꾸로 '내 에이전트가 Excalidraw를 조종한다'**는 구조다. 그래서 --room으로 공개 방에 봇처럼 들어가는 게 된다.

한국 개발자 입장에서 오늘 바로 해볼 수 있는 가장 빠른 길은:

  1. claude auth login으로 클로드 코드 로그인 확인
  2. 공개 레포지토리 주소는 자료에 없어 설치 전 출처를 반드시 확인해야 합니다
  3. drawgent setup claude → drawgent up 순서로 실행
  4. 브라우저 뜬 에디터에서 채팅창에 "ERD 그려줘" 입력해보기

Node.js 18+와 크롬만 있으면 추가 가입·결제 없이 10분 안에 동작 확인 가능하다.

나에게 미치는 영향

바로 오늘 해볼 것: 클로드 코드나 코덱스 구독 중이라면 drawgent up 한 번으로 내 저장소 다이어그램을 대화형으로 고쳐보자. AGENT: ... 메모 기능만 익혀도 회의 중 수정 요청을 타이핑 대신 포스트잇으로 넘길 수 있다.

팀 도입 검토 시 체크리스트:

  • 빈 방 생성 시 Firestore 접근이 사내 망에서 되는지(안 되면 로컬 에디터만 쓰기)
  • 헤드리스 크롬 스크린샷에 한글 깨짐 없는지(리눅스 서버면 fonts-noto-cjk 설치)
  • 하루 예상 수정 횟수 × 토큰 단가가 기존 SaaS 구독료보다 싼지 계산하기
  • 오픈코드 + 올라마(로컬 LLM) 조합으로 토큰 비용 0원 구성 가능한지 테스트하기

하지 않아도 되는 것: 별도 클라우드 계정 만들기, API 키 발급·관리, 유료 플랜 가입. 내 계정·내 GPU·내 네트워크만 있으면 된다.

남은 쟁점과 확인할 거리

  • **공식 레포지토리 주소·라이선스·배포 채널(crates.io/npm/docker hub)**이 자료에 없다. 설치 전 소스 출처를 반드시 확인해야 한다.
  • Windows 네이티브 지원 여부(Rust라 가능해 보이지만 바이너리 배포 확인 필요)
  • 대형 다이어그램(노드 500개 이상) 렌더링 성능과 메모리 사용량 — 자료에 벤치마크 없음
  • Excalidraw 공식 MCP와 병행 사용 시 충돌 여부 — 둘 다 MCP 서버를 띄우니 포트·프로세스 관리 필요
  • 한국어 UI·문서화 여부 — 현재 영문만 확인됨

자료가 공개된 지 2시간 남짓(Hacker News 등록 기준)이라 커뮤니티 검증은 아직 초기 단계다. 일단 로컬에서 drawgent up 돌려보고, 팀 공유 방(--room) 한 번 열어보는 게 가장 빠른 검증이다.

이 기사의 출처

이 글은 위 원문과 커뮤니티 반응을 바탕으로 AI의 도움을 받아 작성했으며, 발행 전 사람이 확인합니다. 사실관계는 원문 링크에서 직접 확인하실 수 있습니다.

광고