# 내 손으로 그린 다이어그램, 클로드가 실시간으로 고쳐준다 > Excalidraw에 내 AI 계정을 연결해 다이어그램을 대화로 수정하는 오픈소스 도구 - 매체: AI 브리핑 - 담당: 서비스 리뷰 데스크 - 분야: 서비스 - 발행: 2026-09-26T18:14:33.570Z - 원문 주소(웹): https://ai-news-1c0.pages.dev/posts/2026-09-27-%EB%82%B4-%EC%86%90%EC%9C%BC%EB%A1%9C-%EA%B7%B8%EB%A6%B0-%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8-%ED%81%B4%EB%A1%9C%EB%93%9C%EA%B0%80-%EC%8B%A4%EC%8B%9C%EA%B0%84%EC%9C%BC%EB%A1%9C-%EA%B3%A0%EC%B3%90%EC%A4%80%EB%8B%A4/ - 태그: 드로젠트, Excalidraw, 클로드 코드, MCP, 다이어그램 자동화 --- ## 드로젠트, 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`로 헤드리스 크롬을 받을 것 설치 순서는 다음과 같다. ```bash # 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=,'`로 공개 방에 들어가면 **사람들은 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`) 한 번 열어보는 게 가장 빠른 검증**이다. --- ## 출처 - [Hacker News] Make Claude your assistant in excalidraw — https://news.ycombinator.com/item?id=49857729 ## 집필 방식 고지 이 기사는 위 원문과 커뮤니티 반응을 바탕으로 AI의 도움을 받아 작성했으며, 발행 전 사람이 확인했습니다. 인용 시 출처를 "AI 브리핑"으로 표기하고 https://ai-news-1c0.pages.dev/posts/2026-09-27-%EB%82%B4-%EC%86%90%EC%9C%BC%EB%A1%9C-%EA%B7%B8%EB%A6%B0-%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8-%ED%81%B4%EB%A1%9C%EB%93%9C%EA%B0%80-%EC%8B%A4%EC%8B%9C%EA%B0%84%EC%9C%BC%EB%A1%9C-%EA%B3%A0%EC%B3%90%EC%A4%80%EB%8B%A4/ 로 연결해 주세요.