AI에게 상관도를 부탁해 본 적이 있나요? 그럴싸한 이미지는 돌아옵니다. 하지만 "이 상자만 오른쪽으로", "이 화살표만 다시 그리고 싶다"라고 생각하는 순간, 손이 멈춥니다. 돌아온 것은 이미지입니다. 함께 이어서 만질 수 있는 그림이 아닙니다.

저는 이것을 몇 번이고 반복했습니다. 그때마다 슬라이드에서 다시 그렸고, AI는 그림을 잘 못한다고 단정 지었습니다.

틀렸습니다. 못하는 것은 출력이 아닙니다. 그림을 "한 번에 받아내는 납품물"로 취급했던, 저의 사용 방식이 문제였습니다.

이 기사에서는 Claude와 인간이 동일한 Excalidraw 한 장을 서로 편집할 수 있는 환경을 만듭니다. 직접 재현할 수 있는 절차까지 작성합니다. 모두 OSS(Open Source Software)입니다.

그림이 일방통행이면, 왕복이 사라진다

코드라면 왕복할 수 있습니다. AI가 작성한 것을 제가 수정하고, 다시 읽게 하여 다음 작업을 부탁할 수 있습니다. 하지만 그림이 되면 이 왕복이 사라집니다.

제가 슬라이드에서 수정한 내용은 AI에게 보이지 않습니다. 다음에 다시 부탁하면, 제 손길을 무시한 다른 그림이 돌아옵니다. 맞물리지 않은 채로 같은 설명을 반복하게 됩니다.

문제는 이미지의 품질이 아닙니다. 그림이 일방통행이라는 점입니다. 그것뿐입니다.

그래서 발상을 바꾸었습니다. 그림의 가치는 예쁘게 출력되는 것에 있지 않습니다. AI와 인간이 동일한 한 장을 계속 만질 수 있다는 것. 거기에 있습니다. 이것이 핵심적인 역설입니다. 납품물로서 한 번에 받아내는 것을 그만두고, 생각하는 도중의 공유 메모로서 취급합니다.

바꾸고 싶은 축을 하나의 표로 나타내면 다음과 같습니다.

만들기: 단일 캔버스 + 3개의 입구

토대는 두 개의 OSS입니다. Excalidraw (MIT)와, 그것을 MCP 서버로 만든 mcp_excalidraw (MIT)입니다.

생각 방식은 단순합니다. 하나의 캔버스를 유일한 정답(Single Source of Truth)으로 삼고, 거기에 여러 개의 입구를 연결합니다. Claude (MCP 경유), CLI, 그리고 브라우저. 모든 것이 동일한 살아있는 캔버스에 WebSocket으로 연결되어 실시간으로 동기화됩니다.

먼저 빌드하여 캔버스 서버를 기동합니다.

git clone https://github.com/yctimlin/mcp_excalidraw
cd mcp_excalidraw && npm ci && npm run build
# HOST/PORT를 존중하는 것은 server.js를 직접 기동했을 때
...

브라우저에서 http://<호스트의 IP>:3939/를

열면, 그대로 Excalidraw 캔버스가 나타납니다. 다른 PC에서도 동일한 URL로 같은 그림을 볼 수 있습니다.

다음으로, Claude Code에 MCP 서버로 등록합니다.

claude mcp add excalidraw --scope user \
--env EXPRESS_SERVER_URL=http://127.0.0.1:3939 \
--env EXCALIDRAW_NO_AUTOSTART=1 \
...

EXCALIDRAW_NO_AUTOSTART=1이 은근히 효과적입니다. 이것이 없으면 MCP 측에서 별도의 포트로 자체 캔버스를 세워버립니다. 브라우저에서 보고 있는 한 장과 연결되지 않습니다.

왕복시키기: 생성 → GUI 편집 → 다시 읽기

이 부분이 가장 보여주고 싶은 부분입니다. 작동시키면 다음과 같이 순환합니다.

• Claude에게 초안을 생성하게 한다
• 제가 브라우저에서 상자를 드래그하고, 빠진 관계를 추가하고, 손글씨로 써넣는다
• Claude에게 "무엇을 바꿨는지 읽어줘"라고 부탁한다
• Claude가 차이분(diff)을 인식하여 다음 작업을 제안한다

이 4단계가 동일한 그림 위에서 빙글빙글 돌아갑니다. 핵심은 3번째 단계입니다. 인간의 GUI 편집을 AI가 다시 읽어낼 수 있기 때문에, 일방통행이 양방향이 됩니다.

다시 읽기는 describe라는 조작으로 수행합니다. 제가 상자를 하나 추가하고 색을 바꾼 뒤, Claude에게 다시 읽게 시키자 다음과 같이 답해왔습니다. "rectangle이 1개 늘어났습니다. 라벨은 '이미지화'. 기존 노드에서 새로운 상자로 화살표가 뻗어 있습니다."

제가 손으로 추가한 상자를 Claude가 제대로 인식하고 있습니다. 여기까지 와서야 비로소 왕복이 성립되고 있음을 알 수 있습니다. 텍스트만으로 주고받는 대화라면 '상대방이 무엇을 했는지'가 흐릿해집니다. 그림 위라면 그 차이분이 구체적으로 보입니다.

상관도처럼 상자와 선이 많은 도표는 요소를 하나씩 추가하는 것보다, 선언적으로 한꺼번에 생성하는 것이 더 빠릅니다. 노드 (Node)를 딕셔너리 (Dictionary)로, 관계를 배열 (Array)로 작성합니다. 그다음 루프 (Loop)를 돌려 .excalidraw JSON으로 변환합니다.

# 노드=상자, 에지(Edge)=관계. 이를 일괄적으로 요소로 변환함
NODES = {
"nogi": {"label": "노기", "x": 560, "y": 380},
...

10명 규모의 상관도라도 이런 방식으로 작성하면 한 번에 정렬됩니다. 인물을 추가하고 싶을 때도 딕셔너리에 한 줄을 추가하고 다시 생성하기만 하면 됩니다. 손으로 하나씩 그리던 시절로는 이제 돌아갈 수 없습니다.

한 가지 구현 팁이 있습니다. 화살표를 상자의 중심끼리 연결하면, 그릴 때 상자를 뚫고 지나갑니다. 상자의 경계에서 멈추도록, 중심을 잇는 직선과 변의 교점을 계산하여 그곳을 화살표의 끝으로 만듭니다.

import math
def edge_point(cx, cy, w, h, tx, ty, gap=4):
dx, dy = tx - cx, ty - cy
...

화살표에는 startBinding / endBinding도 설정해 둡니다. 이렇게 하면 나중에 사람이 상자를 드래그했을 때 선이 자동으로 따라옵니다. 생성물이 그대로 편집 가능한 도표가 됩니다.

아이콘을 내 손안의 GPU로 만들어 삽입하기

노드에 이모지 대신 이미지 아이콘을 올리면 도표가 단번에 읽기 쉬워집니다. 여기서 외부 이미지 생성 API에 의존하면, 저작권과 비용 문제가 매번 따라옵니다.

그래서 아이콘도 직접 만들었습니다. 로컬 GPU로 찍어냅니다. 한 장당 몇 초면 충분합니다. 그것을 캔버스에 삽입합니다. 삽입에는 약간의 요령이 있습니다.

import는 도표의 요소만 보내고, 이미지 바이너리 (Binary)는 보내지 않습니다. 이미지는 별도의 경로로 넣습니다.

# 도표를 import한 후, 이미지 바이너리는 /api/files로 별도 POST 함
curl -s -X POST http://127.0.0.1:3939/api/files \
-H "Content-Type: application/json" \
...

여기서 한 번 막혔습니다. 스크린샷용 헤드리스 브라우저 (Headless Browser)는 이미지를 fileId 단위로 캐싱 (Caching)합니다. 같은 fileId에 다른 이미지를 다시 넣어도 예전 이미지 그대로 그려집니다. "아이콘 하나만 업데이트되지 않는" 증상은 대개 이 때문입니다. 교체할 때는 fileId도 새로운 이름으로 지정합니다.

저작권의 경계선

소재로 드라마나 영화를 사용할 때, 배우의 얼굴 사진은 사용하지 않습니다. 사진의 저작권뿐만 아니라 초상권이나 퍼블리시티권 (Right of Publicity)이 걸려 있기 때문입니다. 흑백으로 만든다고 해서 회피할 수 있는 것도 아닙니다.

대신 역할을 나타내는 아이콘을 배치합니다. 누가 어느 진영인지는 충분히 전달되며, 권리 문제도 발생하지 않습니다. 사실인 '역할명'과 '관계'만으로도 도표는 성립합니다.

실제로 만든 2장의 도표

테스트 삼아 휴일에 본 드라마의 인물 상관도를 만들었습니다. Claude가 12명을 배치하고, 제가 GUI로 다듬습니다. 얼굴 사진 대신 역할 아이콘을 배치했습니다.

다음으로, 제 운영 방식 그 자체를 그렸습니다. 하나의 GPU를 여러 로컬 생성 도구와 GPU 대여 서비스가 서로 차지하려는 도표입니다. 아이콘은 그 도표의 소재인 GPU로 찍어냈습니다. 도표가 설명하고 있는 GPU로 그 도표의 아이콘을 찍어낸 것입니다. 도표가 자신의 출신을 스스로 그린 격입니다.

둘 다 AI만 만든 것도, 저 혼자 만든 것도 아닙니다. 둘이서 한 장을 완성한 도표입니다.

도입 단계 (Stage 1부터)

한 번에 전부 다 하지 않아도 괜찮습니다. 순서는 다음과 같습니다.

• Stage 1: OSS를 clone하여 빌드하고, node dist/server.js를 실행. 브라우저에서 열리는지 확인한다.
• Stage 2: Claude Code에 MCP 등록. Claude에게 도표를 하나 생성시켜 본다.
• Stage 3: 브라우저에서 그 도표를 손으로 수정하고, Claude에게 "무엇을 바꿨어?"라고 다시 읽히게 한다.
• Stage 4: 익숙해지면 systemd 등으로 상주시키고, 아이콘의 로컬 생성을 추가한다.

Stage 3까지 오면 그 전환을 이미 체험하게 됩니다. "AI에게 도표를 맡기는 것"에서 "AI와 함께 도표를 그리는 것"으로.

상주 시킬 때의 주의사항

Stage 4에서 상주시키려면 한 가지 알아두어야 사고를 줄일 수 있습니다. 이 캔버스는 상태를 디스크에 영속화 (Persistence)하지 않습니다. 완전히 메모리 (Memory) 안에만 존재합니다.

즉, 서버를 재시작하면 그림은 사라집니다. GUI에서 수정한 내용도 export(내보내기)하기 전까지는 메모리 (Memory) 안에만 존재합니다. 따라서 재시작이나 reboot(재부팅) 전에는 반드시 export를 해야 합니다.

systemd로 상주시키려면, 기동 후에 최신 .excalidraw 파일을 읽어오는 훅 (Hook)을 추가합니다. 이렇게 하면 안심할 수 있습니다. 이렇게 하면 재시작해도 직전의 그림이 자동으로 복구됩니다. 저는 이것을 잊어버려서 한 번 깨끗하게 날려버린 적이 있습니다.

주의해야 할 점

제가 실제로 겪었던 시행착오 순서대로 요점만 정리해 두겠습니다.

• CLI에는 매번 접속 대상을 전달해야 함. EXPRESS_SERVER_URL을 붙이는 것을 잊으면, 기본값인 다른 포트에 빈 캔버스가 멋대로 실행되어 그쪽을 조작하게 됩니다.
• 서버 설정. CLI의 server.js를 직접 실행하는 start를 통하면, 내부에서 HOST가 바뀌어 0.0.0.0으로 대기하지 않습니다.
• EXCALIDRAW_NO_AUTOSTART=1을 붙일 것. 이를 붙이지 않으면 MCP가 자체적인 캔버스를 별도로 생성하여 브라우저의 페이지와 분리됩니다.
• 이미지를 교체했다면 fileId도 변경할 것. 동일한 ID를 유지하면 스크린샷에 이전 이미지가 남게 됩니다.
• 인증 기능이 없음. LAN(근거리 통신망)에 노출한다면 신뢰할 수 있는 범위 내로 한정해야 합니다.

모두 한 번 겪고 나면 잊지 않게 되는 것들입니다. 역으로 말하면, 이 5가지만 피하면 나머지는 거의 순조롭게 작동합니다.

요약

AI에게 그림을 '그리게' 하면, 생성물은 일방향적인 상태에서 멈춥니다. 하지만 같은 캔버스를 공유하면, 생성물은 상호작용하는 도구로 변합니다.

필요했던 것은 세 가지였습니다. 양방향성일 것. 인간의 GUI 편집을 일급 시민 (First-class citizen)으로 대우할 것. 이미지 또한 수중에 확보할 것.

모두 OSS (오픈 소스 소프트웨어)이며, 직접 재현할 수 있습니다. 우선 그림 한 장을 AI에게 건네주고, 함께 수정해 보세요.

이 메커니즘을 '그림 = AI와 인간의 공동 사고 인터페이스'로서 어떻게 파악하고 있는지에 대한 방향성 이야기는 별도의 글로 정리했습니다.

Discussion