피드로 돌아가기
Dev.toAI/ML
원문 읽기
OpenClaw-Excalidraw 연동을 위한 MCP 최적화 및 렌더링 정밀 설계
Introducing ExcaliClaw: A Skill for OpenClaw to Generate Excalidraw Diagrams
AI 요약
Context
OpenClaw 환경에서 MCP 기반 Excalidraw 다이어그램 생성 시 UI 렌더링 미지원으로 인한 접근성 한계 발생. 기존 MCP 서버의 단순 데이터 스트리밍 방식으로는 공유 가능한 유효 링크 생성이 불가능한 구조적 제약 존재.
Technical Solution
- SSE 방식의 호환성 결여를 해결하기 위한 streamable HTTP 전송 프로토콜 채택
- 단순 스트리밍 데이터 전송에서 Excalidraw Native Scene Payload 전체 수출 방식으로 전환하여 씬 무결성 확보
- Label 유실 방지를 위해 Shortcut 대신 명시적 Text Element를 정의하고 Shape 상단에 배치하는 Draw Order 제어 로직 적용
- Hand-drawn 스타일 유지를 위한 fontFamily: 1 설정 및 가시성 확보를 위한 Text Element 크기(Width, Height) 명시화
- 화살표의 부유 현상 방지를 위한 객체 간 정밀 연결 경로 및 Label 회피 라우팅 패턴 구축
- 요소가 포함되지 않은 빈 씬의 링크 생성을 원천 차단하는 Validation 로직 도입
실천 포인트
- MCP 통신 시 플랫폼별 기본 프로토콜(SSE vs HTTP) 호환성 우선 검토 - 외부 렌더링 도구 연동 시 추상화된 Shortcut보다 Native Payload 기반의 명시적 속성 정의 권장 - UI 없는 환경의 LLM 생성물은 레이아웃-폰트-순서에 대한 구체적인 Recipe를 Skill 형태로 구조화하여 일관성 확보