OpenPencil: Figma 파일을 지원하는 프로그래밍 가능한 오픈소스 AI 디자인 에디터

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

핵심 요약

OpenPencil은 독점적인 디자인 도구 생태계에 대응하기 위해 개발된 MIT 라이선스의 오픈소스 디자인 에디터이다. .fig 파일을 직접 읽고 쓸 수 있는 네이티브 호환성을 제공하며, 모든 기능을 CLI와 API를 통해 프로그래밍 방식으로 제어할 수 있는 것이 특징이다. 특히 Anthropic의 MCP(Model Context Protocol)를 지원하여 Claude Code와 같은 AI 에이전트가 디자인 요소를 직접 생성하고 수정할 수 있는 환경을 구축했다. 서버나 계정 없이 WebRTC를 통한 실시간 P2P 협업이 가능하며, Skia와 Yoga WASM을 활용한 고성능 렌더링 엔진을 탑재했다.

배경

Figma 파일 구조에 대한 기본 이해, 명령줄 인터페이스(CLI) 사용 숙련도, Node.js 및 Bun 런타임 환경

대상 독자

AI 기반 자동화 워크플로를 구축하려는 디자이너 및 프런트엔드 개발자

의미 / 영향

OpenPencil은 폐쇄적인 디자인 도구 시장에 강력한 오픈소스 대안을 제시한다. 특히 AI 에이전트가 디자인 도구의 기능을 직접 호출할 수 있는 MCP 지원은 향후 'AI 기반 디자인-투-코드' 자동화의 표준 모델이 될 가능성이 높다.

섹션별 상세

Figma 파일과의 높은 호환성과 프로그래밍 가능한 제어 기능을 제공한다. .fig 파일을 네이티브로 읽고 쓸 수 있으며, 앱 간 노드 복사 및 붙여넣기가 가능하다. Headless CLI를 통해 터미널에서 노드 트리를 탐색하거나 XPath를 사용하여 특정 속성을 가진 요소를 쿼리할 수 있다. 또한 Figma Plugin API와 호환되는 eval 기능을 통해 디자인 파일을 스크립트로 직접 수정하고 결과를 저장하는 워크플로를 지원한다.

bash

open-pencil query design.fig "//FRAME[@width > 1000]"
open-pencil export design.fig -f jsx --style tailwind

XPath를 사용하여 특정 조건의 프레임을 쿼리하고 Tailwind CSS 기반의 JSX로 내보내는 CLI 명령어 예시

javascript

open-pencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity = 0.5)" -w

Figma Plugin API를 사용하여 선택된 노드의 투명도를 일괄 변경하고 파일에 저장하는 스크립트 실행 예시

OpenPencil 에디터의 실행 화면 스크린샷 — Screenshot왼쪽에는 레이어와 컴포넌트 트리가 위치하고, 중앙 캔버스에는 그라데이션 카드가 배치되어 있다. 오른쪽 패널에서는 선택된 노드의 위치, 크기, 색상 등 상세 속성을 제어할 수 있으며 상단에 AI 및 Code 탭이 있어 프로그래밍 및 AI 통합 기능을 시각적으로 확인할 수 있다.

AI 에이전트와의 깊은 통합을 위해 MCP 서버 기능을 내장했다. 내장된 AI 어시스턴트는 87개 이상의 도구를 사용하여 셰이프 생성, 레이아웃 관리, 불리언 연산 등을 수행한다. 외부 코딩 에이전트인 Claude Code나 Cursor를 MCP 서버에 연결하면 에이전트가 디자인 토큰을 분석하고 자산을 내보내며 직접 디자인을 수정하는 고도화된 자동화가 가능하다. 이는 디자인과 코드 사이의 간극을 줄이는 강력한 도구로 작용한다.

json

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

Claude Code나 Cursor 같은 MCP 클라이언트에 OpenPencil 서버를 연결하기 위한 설정 파일 예시

중앙 서버가 필요 없는 실시간 P2P 협업 아키텍처를 채택했다. Trystero와 Yjs(CRDT)를 사용하여 WebRTC 기반으로 사용자 간에 직접 데이터를 동기화한다. 별도의 계정 생성 없이 공유 링크만으로 실시간 커서 추적, 프레젠스 확인, 뷰포트 팔로우 모드를 사용할 수 있다. 모든 데이터는 사용자의 로컬 머신에 머무르며 개인정보 보호와 데이터 주권을 보장한다.

현대적인 기술 스택을 활용하여 성능과 확장성을 확보했다. 렌더링에는 Skia(CanvasKit WASM)를 사용하고 레이아웃 엔진으로는 Yoga WASM을 탑재하여 Flexbox와 CSS Grid를 완벽하게 지원한다. 데스크톱 앱은 Tauri v2를 기반으로 구축되어 약 7MB의 가벼운 용량을 유지하면서 macOS, Windows, Linux를 지원한다. 또한 Tailwind CSS v4 유틸리티 클래스를 포함한 HTML/JSX 내보내기 기능을 통해 디자인의 코드 변환 효율을 극대화했다.

실무 Takeaway

MCP 서버 설정을 통해 Claude Code와 같은 AI 에이전트에게 디자인 수정 권한을 부여하여 반복적인 UI 작업을 자동화할 수 있다.
Headless CLI와 XPath 쿼리를 활용하여 CI/CD 파이프라인 내에서 디자인 시스템의 일관성을 자동으로 검사하거나 자산을 추출할 수 있다.
서버 구축 부담 없이 WebRTC P2P 기능을 활용하여 팀원들과 즉각적인 실시간 디자인 협업 환경을 구축할 수 있다.

언급된 리소스

문서OpenPencil Documentation

GitHubOpenPencil GitHub Repository

문서MCP SDK Documentation