Drawgent - 실시간 Excalidraw 캔버스에서 작동하는 코딩 에이전트

(news.hada.io)

GeekNews2026년 9월 27일AI 코딩

Drawgent - 실시간 Excalidraw 캔버스에서 작동하는 코딩 에이전트

Drawgent는 Claude Code와 같은 기존 코딩 에이전트를 Excalidraw 캔버스와 실시간으로 연결하여, 사용자가 시각적 메모나 레이저 도구로 지시를 내리면 에이전트가 직접 다이어그램을 수정하고 협업할 수 있게 돕는 혁신적인 도구입니다.

이 글의 핵심 포인트

1Claude Code, Codex, opencode 등 사용자의 기존 코딩 에이전트를 Excalidraw와 연결
2채팅 패널, 도형 옆 'AGENT:' 메모, 레이저 도구를 통한 직관적인 수정 지시 지원
3에이전트가 캔버스의 스크린샷과 장면 데이터를 직접 확인하며 실시간으로 편집 수행
4별도의 에이전트 번들을 제공하지 않고 사용자의 기존 설치 환경 및 로그인 상태 활용
5Rust 기반 서버와 MCP 도구를 통해 캔버스 요소의 추가, 수정, 삭제 및 Mermaid 지원

이 글에 대한 공공지능 분석

왜 중요한가?

텍스트 기반의 코딩 에이전트를 시각적 설계 도구인 Excalidraw와 결합함으로써, AI의 역할을 단순한 '코드 생성기'에서 '시스템 아키텍처 설계 협업자'로 확장시켰기 때문입니다. 이는 추상적인 로직을 시각적 다이어그램으로 즉시 구현하고 검증할 수 있는 새로운 개발 패러다임을 제시합니다.

어떤 배경과 맥락이 있나?

최근 AI 에이전트 기술은 MCP(Model Context Protocol)를 통해 외부 도구와 상호작용하는 방향으로 진화하고 있습니다. Drawgent는 이러한 흐름을 타고 기존에 파편화되어 있던 코딩 에이전트들의 실행 환경을 캔버스라는 시각적 인터페이스로 통합하려는 시도입니다.

업계에 어떤 영향을 주나?

개발자 도구(DevTools) 시장이 CLI나 IDE 중심에서 '시각적 에이전트 워크플로우'로 이동할 가능성을 보여줍니다. 이는 에이전트가 단순히 코드를 짜는 것을 넘어, 설계도(Diagram)를 이해하고 수정하는 '멀티모달 개발 환경'의 구축을 가속화할 것입니다.

한국 시장에 어떤 시사점이 있나?

빠른 프로토타이핑과 아키텍처 설계가 중요한 한국의 스타트업 생태계에서, AI와 함께 화이트보드에 그림을 그리듯 시스템을 설계하는 방식은 개발 생산성을 극적으로 높일 수 있는 강력한 무기가 될 수 있습니다.

이 글에 대한 큐레이터 의견

Drawgent는 기존 에이전트의 인프라를 그대로 활용하면서 인터페이스만 확장했다는 점에서 매우 영리한 접근을 보여줍니다. 개발자가 새로운 에이잭트를 학습하거나 설치할 부담을 줄이면서도, 시각적 피드백 루프를 통해 AI와의 협업 밀도를 높였다는 점이 핵심적인 가치입니다. 특히 'AGENT:' 메모나 레이저 도구를 통한 지시는 인간의 직관적인 의도를 AI에게 전달하는 데 매우 효과적인 UX입니다.

하지만 명확한 트레이드오프도 존재합니다. Chrome/Chromium 렌더러에 대한 의존도가 높고, 에이전트가 캔버스의 스크린샷을 통해 상황을 파악해야 하므로 시각적 정보의 해상도나 복잡도에 따라 '시각적 환각(Visual Hallucination)'이 발생할 리스크가 있습니다. 또한, 기존 세션을 분기하거나 메시지를 전달하는 방식의 한계로 인해 복잡한 상태 동기화 문제가 발생할 수 있습니다.

스타트업 창업자들은 단순히 '더 똑똑한 모델'을 만드는 데 집중하기보다, Drawgent처럼 기존의 강력한 에이전트들을 어떻게 '시각적/구조적 워크플로우'에 연결하여 사용자 경험을 혁신할 것인가에 주목해야 합니다. 에이전트의 능력을 극대화하는 것은 모델의 파라미터 수가 아니라, 에이전트가 상호작용할 수 있는 '도구의 인터페이스'에 달려 있기 때문입니다.

원문 보기 →