OpenPencil 살펴보기: Figma 파일을 그대로 열 수 있는 AI 네이티브 오픈소스 설계 에디터

Figma는 설계 도구의 표준이 됐습니다. 하지만 모든 팀이 Figma 구독을 유지할 수 있는 건 아니고, 모든 워크플로우가 클라우드 잠금에 편한 것도 아닙니다.

특히 개인 프로젝트, 사이드 프로젝트, 오픈소스 작업에서는 기존 .fig 파일을 열어볼 수만 있어도 큰 도움이 되는 경우가 많습니다. 그런데 이게 의외로 어렵습니다. .fig 파일은 사실상 Figma에서만 열 수 있었기 때문입니다.

이 지점에서 등장한 프로젝트가 OpenPencil입니다. 단순한 드로잉 도구가 아니라, .fig 파일을 네이티브로 읽고 쓸 수 있는 AI 네이티브 설계 에디터를 표방합니다.

OpenPencil은 무엇인가요?

OpenPencil은 MIT 라이선스의 오픈소스 설계 에디터로, Figma의 오픈소스 대안을 목표로 하는 프로젝트입니다.

핵심 철학은 네 가지로 요약됩니다.

• 오픈소스(MIT): 완전한 소스 공개, 자유로운 수정과 배포
• .fig 파일 네이티브 지원: Figma 파일을 그대로 읽고 쓸 수 있음
• 모든 작업 스크립트 가능: CLI, 플러그인, MCP 서버 연동
• 데이터 로컬 유지: 계정, 서버, 인터넷 불필요

즉, Figma의 파일 형식 호환성을 유지하면서도 데이터 소유권과 자동화 가능성을 모두 확보하겠다는 방향입니다.

왜 이 프로젝트가 흥미로운가

기존에도 오픈소스 설계 도구는 있었습니다. Penpot, Excalidraw, tldraw 같은 프로젝트가 대표적입니다. 그런데 OpenPencil이 다른 점은 크게 세 가지입니다.

1. .fig 파일을 직접 열 수 있다

이게 가장 큰 차별점입니다.

기존 오픈소스 도구들은 Figma와 호환되지 않거나, 내보내기/가져오기 과정에서 정보가 손실됩니다. OpenPencil은 Figma의 바이너리 파일 형식을 직접 파싱하는 .fig 파일 파서를 자체 구현했습니다. Figma와 양방향 복사-붙여넣기까지 가능합니다.

2. AI가 설계 프로세스에 내장되어 있다

90개 이상의 AI 도구가 포함되어 있습니다. 채팅으로 설명하면 UI를 자동 생성하는 내장 어시스턴트가 있고, OpenRouter API를 통해 자신의 키로 다양한 AI 프로바이더를 연결할 수 있습니다.

3. 완전히 자동화할 수 있다

CLI로 파일 검사, 내보내기, 분석을 할 수 있고, Figma 플러그인 API eval을 지원하며, MCP 서버로 Claude Code, Cursor 같은 AI 에디터와 통합됩니다.

전체 구조를 살펴보면

OpenPencil의 아키텍처는 이렇게 구성됩니다.

flowchart TB
    subgraph 사용자
        A[웹 브라우저 / 데스크톱 앱]
    end
    subgraph 코어 엔진
        B[Skia 렌더링<br/>CanvasKit WASM]
        C[Yoga 레이아웃<br/>WASM]
        D[.fig 파서<br/>Kiwi + Zstd]
    end
    subgraph 자동화
        E[CLI]
        F[MCP 서버]
        G[플러그인 API]
    end
    subgraph 협업
        H[WebRTC P2P<br/>Trystero]
        I[CRDT<br/>Yjs]
    end
    A --> B
    A --> C
    A --> D
    A --> H
    H --> I
    E --> D
    F --> D
    G --> D

기술 스택을 정리하면 이렇습니다.

몇 가지 포인트가 눈에 띕니다.

Skia 렌더링은 Figma 자체가 사용하는 렌더링 엔진과 같은 계열입니다. 이건 .fig 파일의 시각적 충실도를 유지하는 데 꽤 중요한 선택입니다.

Tauri v2로 데스크톱 앱을 감싸면서 앱 크기가 약 7MB에 불과합니다. Electron 기반 도구들과 비교하면 상당히 가볍습니다.

.fig 파일 호환이 왜 중요한가

설계 도구에서 파일 형식 호환성은 생각보다 큰 문제입니다.

Figma에서 작업한 파일을 다른 도구로 옮기려면 보통 이런 과정을 거칩니다.

1. Figma에서 SVG나 PNG로 내보내기
2. 다른 도구에서 다시 가져오기
3. 레이어 구조, 컴포넌트, 자동 레이아웃 등 정보 손실
4. 수작업으로 복원

이 과정에서 원본의 구조적 정보가 대부분 사라집니다.

OpenPencil은 이 문제를 파일 형식 레벨에서 해결하려고 합니다. .fig 파일을 직접 파싱하기 때문에, Figma에서 만든 디자인을 구조 그대로 열 수 있습니다.

물론 완벽한 호환은 아직 어려울 수 있습니다. Figma의 파일 형식은 공식적으로 문서화되어 있지 않기 때문에, 리버스 엔지니어링을 통해 구현하는 부분이 있습니다.

AI 설계 도구가 내장되어 있다는 점

OpenPencil의 또 다른 흥미로운 점은 AI가 부가 기능이 아니라 핵심 기능이라는 것입니다.

90개 이상의 AI 도구가 포함되어 있는데, 대략 이런 영역을 다룹니다.

• 자동 도형 생성: 텍스트 설명으로 UI 요소 생성
• 자동 레이아웃: Flexbox, CSS Grid 기반 배치
• 컴포넌트 관리: 생성, 변환, 정리
• 부울 연산: 도형 합치기, 빼기 등
• 토큰 분석: 디자인 토큰 추출
• 자산 내보내기: 다양한 형식으로 내보내기
• Tailwind CSS v4 JSX 내보내기: 선택 영역을 HTML + Tailwind로 변환

특히 마지막 항목이 개발자 관점에서 눈에 띕니다. 설계 결과물을 바로 Tailwind CSS 코드로 내보낼 수 있다면, 디자인-개발 간 핸드오프 과정이 꽤 단축됩니다.

# MCP 서버 설치 및 실행
bun add -g @open-pencil/mcp
openpencil-mcp          # stdio 모드
openpencil-mcp-http     # HTTP 모드 (localhost:3100/mcp)

MCP 서버를 띄우면 Claude Code, Cursor, Windsurf 같은 AI 코딩 도구에서 직접 설계 파일을 조작할 수 있습니다. 이건 “AI가 코드도 쓰고 디자인도 한다”는 워크플로우의 실험적인 출발점으로 볼 수 있습니다.

실시간 협업도 서버 없이 가능합니다

협업 방식도 독특합니다.

대부분의 실시간 협업 도구는 중앙 서버가 필요합니다. OpenPencil은 WebRTC 기반 P2P 연결을 사용해서 서버 없이 링크 공유만으로 함께 작업할 수 있습니다.

flowchart LR
    A[작업자 A] <-->|WebRTC P2P + Yjs CRDT| B[작업자 B]
    subgraph 결과
        C[충돌 없는 동시 편집]
    end
    A --> C
    B --> C

CRDT(Conflict-free Replicated Data Type)인 Yjs를 사용해서 동시 편집 시 충돌 없이 병합됩니다.

이 방식의 장점은 명확합니다.

• 별도 서버 인프라 불필요
• 데이터가 참여자 간에만 이동
• 프라이버시 보장

시작하는 방법

온라인에서 바로 사용

가장 간단한 방법은 웹에서 바로 접속하는 것입니다.

app.openpencil.dev/demo ↗에 접속하면 설치 없이 즉시 사용할 수 있습니다.

macOS 설치

brew install open-pencil/tap/open-pencil

개발 환경 셋업

bun install
bun run dev           # 웹앱: localhost:1420
bun run tauri dev     # 데스크톱 앱 (Rust 필요)

CLI 활용

# 파일 정보 확인
open-pencil info design.fig

# 내보내기
open-pencil export design.fig --format png

# 디자인 토큰 분석
open-pencil analyze design.fig

# JSON 출력 (자동화 연동)
open-pencil info design.fig --json

모든 CLI 명령이 JSON 출력을 지원하기 때문에 스크립트나 파이프라인에 쉽게 연결할 수 있습니다.

기존 도구들과 비교하면

OpenPencil의 위치를 이해하려면 기존 오픈소스 설계 도구들과 비교해볼 필요가 있습니다.

정리하면 OpenPencil의 고유한 강점은 이렇습니다.

• Figma 파일을 직접 열 수 있는 유일한 오픈소스 도구
• AI가 설계 프로세스 중심에 위치
• CLI와 MCP로 완전한 자동화 가능
• 서버 없는 P2P 협업

반면에 커뮤니티 규모나 생태계 성숙도는 아직 기존 도구들에 비해 초기 단계입니다.

현재 상태와 한계

솔직히 말하면, OpenPencil은 아직 초기 개발 단계입니다.

GitHub 스타 약 3천 개, 21개 이슈, 16개 PR이 활성화된 상태입니다. 이건 프로젝트가 활발하게 개발 중이라는 긍정적 신호이면서, 동시에 아직 안정화 단계에는 이르지 않았다는 의미이기도 합니다.

적합한 경우:

• .fig 파일을 Figma 없이 열어보고 싶을 때
• AI 기반 설계 워크플로우를 실험하고 싶을 때
• 로컬 우선, 프라이버시 중심 설계 도구가 필요할 때
• 설계 파일 자동화(CI/CD, 스크립트)를 시도하고 싶을 때

아직 부족할 수 있는 경우:

• 프로덕션 미션 크리티컬 설계 작업
• 대규모 팀의 일상적인 설계 협업
• 복잡한 Figma 프로토타이핑 기능 의존

이 프로젝트가 보여주는 방향

OpenPencil을 단순한 “Figma 클론”으로만 보면 아깝습니다. 이 프로젝트가 시사하는 더 큰 흐름이 있습니다.

설계 도구의 오픈소스화

Figma가 표준이 된 이후, 설계 파일은 사실상 특정 플랫폼에 잠겨 있었습니다. .fig 파일을 열 수 있는 오픈소스 도구가 등장한다는 건, 설계 자산의 이동성이 높아진다는 의미입니다.

AI + 설계의 통합

코딩 에이전트가 코드를 쓰듯이, 설계 에이전트가 UI를 만드는 시대가 오고 있습니다. OpenPencil의 MCP 서버 통합은 이 방향의 초기 실험입니다.

로컬 우선 도구의 부활

클라우드 SaaS에 대한 반작용으로, 데이터를 로컬에 두고 필요할 때만 공유하는 도구에 대한 수요가 커지고 있습니다. OpenPencil은 이 흐름에도 잘 맞습니다.

마무리

OpenPencil은 Figma의 .fig 파일을 네이티브로 지원하는 오픈소스 설계 에디터입니다. AI 도구 내장, MCP 서버 통합, P2P 협업, CLI 자동화까지 꽤 야심찬 방향을 제시합니다.

아직 초기 단계이기 때문에 당장 Figma를 대체하기는 어렵습니다. 하지만 이런 프로젝트가 존재한다는 것 자체가 의미가 있습니다.

설계 파일에 대한 오픈 액세스, 설계 프로세스의 AI 자동화, 데이터의 로컬 소유권. 이 세 가지를 동시에 추구하는 도구는 아직 많지 않습니다.

.fig 파일을 Figma 없이 열어보고 싶거나, AI 기반 설계 워크플로우에 관심이 있다면 한번 살펴볼 만한 프로젝트입니다.

참고 자료

• GitHub: https://github.com/open-pencil/open-pencil ↗
• 공식 사이트: https://openpencil.dev/ ↗
• 온라인 데모: https://app.openpencil.dev/demo ↗
• Hacker News 토론: https://news.ycombinator.com/item?id=47215736 ↗