AI가 짠 코드, 그림으로 읽는다 | Whiteboard·Archify·Drawgent·reladraw 비교

코딩 에이전트에게 기능 하나를 맡기면 파일 수십 개가 한꺼번에 바뀝니다. 코드가 돌아가긴 하는데 무엇이 어디로 연결됐는지 머릿속에 그려지지 않는 경험, 에이전트를 써 본 분이라면 익숙할 겁니다.

그래서 최근 코드 리뷰부터 범용 다이어그램까지, 에이전트가 그림을 그리게 하는 도구가 잇달아 화제가 됐습니다. 해커뉴스와 깃허브에서 주목받은 네 가지를 저장소 원문 기준으로 비교하고, 그중 하나는 직접 돌려 봤습니다.

AI가 짠 코드를 그림으로 이해하는 도구는 역할이 다르다. Whiteboard는 에이전트가 변경 내용을 캔버스에 그려 설명하는 데스크톱 앱, Archify는 설명이나 저장소로 움직이는 아키텍처 HTML을 만드는 에이전트 스킬, Drawgent는 엑스칼리드로 캔버스에서 에이전트와 함께 그리는 도구, reladraw는 에이전트가 쓰기 좋은 텍스트 다이어그램 언어다. Whiteboard·Archify·reladraw는 무료 오픈소스이고, 에이전트를 연결해 쓰는 도구는 그 에이전트 사용량이 따로 든다.

PART 01

왜 그림이 필요한가

에이전트 코드가 읽기 어려운 이유

사람이 짠 코드는 작성자에게 물어보면 됩니다. 에이전트가 짠 코드는 작성자가 대화가 끝나면 사라집니다. 변경 이유와 구조를 파악하려면 결국 차이(diff)를 한 줄씩 읽어야 하고, 규모가 커지면 리뷰가 형식적이 되기 쉽습니다.

다이어그램은 이 간극을 메우는 가장 오래된 도구입니다. 요청이 어디서 시작해 어디로 흐르는지, 어떤 모듈이 새로 생겼는지는 글보다 그림이 빠릅니다. 새 도구들은 이 그림을 에이전트가 직접 그리게 만든 것이 핵심입니다.

PART 02

도구 네 가지 비교

한눈에 비교

도구	형태	입력	결과물	라이선스
Whiteboard	데스크톱 앱(맥·윈도우·리눅스)	현재 브랜치 + 에이전트 요청	앱 안 캔버스(시퀀스 다이어그램 등)	MIT
Archify	에이전트 스킬	자연어 설명 또는 저장소	움직이는 단일 HTML 다이어그램	MIT
Drawgent	로컬 서버 + 브라우저	작업 폴더 + 엑스칼리드로 캔버스	에이전트가 고치는 손그림 캔버스	공개 저장소(라이선스 미확인)
reladraw	텍스트 언어 + CLI	.reladraw 텍스트	SVG 그림	Apache-2.0

깃허브 별 수는 9월 28일 기준 Archify가 약 7만 2천 개로 가장 많고, Whiteboard 약 1,900개, reladraw 약 800개입니다. Drawgent는 깃허브가 아닌 탱글드(Tangled)에 올라와 있어 비교하기 어렵습니다.

1. Whiteboard: 에이전트의 리뷰를 캔버스로

Whiteboard는 와이콤비네이터(YC W26) 팀 dev.fast가 만든 오픈소스 데스크톱 앱입니다. 클로드 코드나 코덱스 같은 에이전트를 연결하면, 에이전트가 앱의 SDK로 캔버스에 그림을 그려 자신이 한 일을 설명합니다. 해커뉴스 Show HN 글은 9월 28일 기준 417점, 댓글 141개를 받았습니다.

시작은 간단합니다. 앱을 내려받아 연결할 에이전트를 고른 뒤, "현재 브랜치를 최신 main과 비교해 리뷰하고 Whiteboard에서 열어 줘"처럼 요청하면 됩니다. 제작팀은 GPT-6 Sol이나 Claude Opus 5.5 같은 모델에서 가장 잘 동작한다고 안내합니다.

소스가 공개된 점도 의미가 있습니다. 제작팀은 좋은 선택을 기본값으로 시스템 프롬프트에 넣으려 한다며, 이것이 오픈소스로 공개한 이유 중 하나라고 밝혔습니다. 에이전트에게 어떤 지시가 들어가는지 직접 볼 수 있다는 뜻입니다.

2. Archify: 말로 설명하면 아키텍처 그림

Archify는 에이전트에 설치하는 스킬입니다. 커서, 클로드 코드, 코덱스 CLI, 오픈코드에서 쓸 수 있고, 명령 한 줄로 설치합니다. 결과물은 애니메이션이 들어간 HTML 파일 하나라 브라우저로 바로 열어 공유할 수 있습니다.

npx skills add tt-a1i/archify -g

# 에이전트에게
Use Archify to diagram a web request: Browser calls the API,
the API checks Redis, and a cache miss queries PostgreSQL.

저장소가 없어도 됩니다. 문장으로 구조를 설명하면 그림이 나오고, "인증 추가해 줘", "캐시 미스 경로 강조해 줘"처럼 이어서 고칠 수 있습니다. 에이전트에게 저장소를 읽게 하면 실제 코드에 근거한 아키텍처 그림도 만들 수 있다고 안내합니다.

3. Drawgent: 손그림 위에 에이전트가 그린다

Drawgent는 내 클로드 코드·코덱스·오픈코드를 엑스칼리드로 화이트보드에 연결합니다. 채팅으로 그림을 요청하거나, 그림 옆에 "AGENT: …"라고 메모를 쓰면 에이전트가 캔버스를 보고 직접 고친 뒤 메모를 DONE으로 바꿉니다.

동작 방식이 흥미롭습니다. 에이전트는 캔버스의 스크린샷과 장면 데이터를 함께 보고 그림을 고친 뒤, 결과를 다시 확인하고 나서 메모를 완료로 표시합니다. 사람이 대충 그린 상자와 화살표를 에이전트가 다듬는 식의 공동 작업이 가능합니다.

drawgent setup claude   # 에이전트별 한 번 (claude | codex | opencode)
cd ~/my-repo
drawgent up             # 이 저장소에서 에이전트 세션 + 브라우저 캔버스

에이전트 CLI가 설치·로그인돼 있어야 하고, 클로드와 코덱스 연결에는 Node.js 22 이상이 필요합니다. 설치 과정에서 약 60MB의 연결 어댑터를 따로 받습니다.

4. reladraw: 에이전트가 쓰기 좋은 그림 언어

reladraw는 앞의 셋과 성격이 다릅니다. "이 상자는 저 상자 오른쪽"처럼 상대 위치를 글로 적으면 SVG 그림이 나오는 다이어그램 언어입니다. 머메이드처럼 위치를 자동으로 정하는 도구와 draw.io처럼 좌표를 다 찍는 도구 사이를 노린다고 설명합니다. 제가 실행한 버전은 0.10.0이고, 제작자가 초기 단계라 문법이 바뀔 수 있다고 밝혔습니다.

PART 03

직접 써 보고 고르기

reladraw 직접 실행해 본 결과

설치 없이 바로 확인할 수 있는 reladraw를 직접 돌려 봤습니다. 아래 일곱 줄로 브라우저, API 서버, Redis 캐시, PostgreSQL 사이의 요청 흐름을 적고 npx로 실행하자 몇 초 만에 SVG가 만들어졌습니다. 한글 이름도 그대로 들어갔습니다.

node web "브라우저"
node api "API 서버"  right of web
node cache "Redis 캐시"  right of api
node db "PostgreSQL"  below cache
edge web -> api  "요청"
edge api -> cache  "조회"
edge api -> db  "캐시 없을 때"  from: bottom  to: left

npx reladraw blog.reladraw -o blog.svg

직접 실행 결과 (reladraw 0.10.0)

반응형

에이전트에게 맡기려면 스킬을 설치하면 됩니다. npx skills add reladraw/reladraw -g를 실행하면 클로드 코드, 코덱스, 커서 등에 한 번에 설치됩니다. 좌표를 계산하지 않고 관계만 적으면 되니, 에이전트가 그림을 고칠 때도 텍스트 몇 줄만 바뀝니다.

스킬은 설치한 시점의 사본이라 새 버전이 나오면 같은 명령을 다시 실행해야 합니다. 특정 에이전트에만 넣고 싶다면 -a claude-code처럼 대상을 지정할 수 있습니다.

상황별 선택

이런 경우	추천
에이전트가 만든 브랜치를 리뷰할 때	Whiteboard
팀에 공유할 구조도를 빠르게	Archify
손으로 그리며 에이전트와 같이 설계	Drawgent
문서·저장소에 텍스트로 남길 그림	reladraw

제 판단으로는 처음이라면 Archify나 reladraw처럼 설치가 가벼운 쪽부터 써 보는 게 좋습니다. 둘 다 결과물이 파일(HTML·SVG)로 남아 문서에 붙이기 쉽습니다. 다만 그림이 코드와 정확히 일치하는지는 에이전트 해석에 달려 있으니, 중요한 결정은 그림과 코드를 함께 확인해야 합니다.

Q. 도구를 쓰면 비용이 드나요?

Whiteboard·Archify·reladraw는 무료 오픈소스이고, Drawgent는 공개 저장소지만 라이선스를 확인하지 못했습니다. 에이전트를 연결해 쓰면 클로드 코드나 코덱스 사용량이 들고, reladraw 렌더링처럼 에이전트 없이 돌리는 부분은 비용이 없습니다. 쓰기 전에 각 도구의 이용 조건을 확인하세요.

Q. 한국어 코드 설명도 되나요?

공식 문서에 한국어 지원 안내는 따로 없습니다. 제가 확인한 건 reladraw뿐으로, 상자 이름을 한글로 적자 그림에 그대로 들어갔습니다. 에이전트 기반 도구는 요청 언어에 따라 달라질 수 있어 직접 시험해 보는 게 확실합니다.

정리하면

에이전트가 코드를 쓰는 속도를 사람이 따라 읽기는 어렵습니다. 그림은 그 간극을 줄이는 현실적인 방법이고, 이제 에이전트가 직접 그려 줍니다. 오늘은 가장 가벼운 reladraw 예제 일곱 줄부터 실행해 보고, 맞으면 에이전트 스킬로 연결해 보세요.