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 설계 도구 90여 개가 내장되어 있습니다

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

Yjs는 CRDT(Conflict-free Replicated Data Type) 라이브러리입니다. 여러 사람이 동시에 편집해도 변경 내용을 충돌 없이 병합합니다.

이 방식에는 세 가지 장점이 있습니다.

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

시작하는 방법

온라인에서 바로 사용

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만 가진 특징은 다음과 같습니다.

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

반면 커뮤니티 규모와 생태계는 기존 도구보다 작습니다.

현재 상태와 한계

OpenPencil은 아직 초기 개발 단계입니다.

GitHub 스타 약 3천 개, 21개 이슈, 16개 PR이 활성화된 상태입니다. 개발은 활발하지만 아직 안정화 단계는 아닙니다.

적합한 경우:

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

아직 부족할 수 있는 경우:

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

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

OpenPencil은 설계 도구에서 나타나는 세 가지 흐름과 맞닿아 있습니다.

설계 도구의 오픈소스화

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 ↗