Figma 대체 오픈소스? OpenPencil 가이드

OpenPencil이란?

AI 네이티브 오픈소스 디자인 에디터. MIT 라이선스 배포이며, Figma 파일(.fig)을 네이티브로 열 수 있는 게 가장 큰 특징. 약 7MB의 가벼운 데스크톱 앱으로, 인터넷 연결이나 계정 없이 완전히 로컬에서 동작함.

• 공식 사이트: openpencil.dev
• GitHub: open-pencil/open-pencil
• 라이선스: MIT (완전 오픈소스)

핵심 특징 요약

• AI 내장: 90개 이상의 AI 도구로 자연어 기반 디자인 작업 가능
• Figma 호환: .fig 파일 직접 열기 + Figma ↔ OpenPencil 간 복사/붙여넣기 지원
• 완전 로컬: 서버 통신 없음, 계정 불필요, 오프라인 사용 가능
• P2P 협업: WebRTC 기반 실시간 협업 (서버 불필요)
• 다중 코드 내보내기: React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native 등

---

설치 방법

웹에서 바로 사용 (설치 불필요)

가장 빠른 방법은 브라우저에서 바로 접속하는 것.

👉 app.openpencil.dev

모바일에서는 PWA로 설치해 터치 최적화 UI 사용도 가능함.

macOS

Homebrew 이용 시 자동 업데이트까지 지원됨.

brew install open-pencil/tap/open-pencil

또는 공식 사이트에서 .dmg 다운로드 후 Applications 폴더로 드래그. arm64(Apple Silicon)와 x64(Intel) 모두 지원.

Windows

공식 사이트에서 .exe 인스톨러 다운로드 후 설치 마법사 따라 진행.

Linux

GitHub Releases에서 사전 빌드된 바이너리 다운로드.

👉 GitHub Releases

CLI 설치

커맨드라인에서 쓰고 싶다면:

bun add -g @open-pencil/cli

---

상세 활용 방법

1. 기본 드로잉

직관적인 단축키 체계 제공.

도구	단축키
사각형 (Rectangle)	R
타원 (Ellipse)	O
선 (Line)	L
다각형 (Polygon)	—
별 (Star)	—
펜 도구 (Bezier)	P

텍스트는 캔버스에서 직접 편집 가능하고, IME 지원으로 한글 입력도 문제없음. 볼드, 이탤릭, 밑줄, 취소선 등 서식도 지원.

2. 레이아웃 & 오토 레이아웃

Yoga WASM 엔진 기반으로 Flexbox와 CSS Grid 레이아웃을 캔버스 위에서 직접 설정 가능.

• 방향 (direction), 간격 (gap), 패딩 (padding)
• justify, align, 자식 요소 크기 조절
• CSS Grid 트랙 설정

Figma의 Auto Layout과 유사한 방식으로 반응형 디자인을 시각적으로 구성할 수 있음.

3. AI 어시스턴트 활용

OpenPencil의 가장 강력한 기능. ⌘+J (Mac) 또는 Ctrl+J (Windows/Linux)로 AI 어시스턴트 호출.

활용 예시:

• "파란색 둥근 버튼을 만들어줘" → 자연어로 도형 생성
• "이 요소의 배경색을 #FF5733으로 변경해줘" → 스타일 속성 변경
• "현재 프레임을 React 코드로 내보내줘" → 코드 내보내기
• "디자인 토큰을 분석해줘" → 디자인 시스템 분석

90개 이상의 도구가 내장되어 있어 반복적인 디자인 작업을 자연어로 빠르게 처리 가능.

4. 코드 내보내기

디자인을 다양한 프레임워크 코드로 바로 변환 가능.

내보내기 형식	설명
React + Tailwind	Tailwind v4 유틸리티 적용 JSX
HTML + CSS	순수 웹 코드
Vue / Svelte	프론트엔드 프레임워크
Flutter	모바일 크로스플랫폼
SwiftUI	iOS 네이티브
Jetpack Compose	Android 네이티브
React Native	크로스플랫폼 모바일
SVG	벡터 이미지 (그라데이션, 이펙트 포함)
PNG / JPG / WEBP	래스터 이미지

5. Figma 파일 호환

Kiwi 바이너리 코덱으로 .fig 파일을 네이티브로 읽음. 별도 변환 과정 없이 Figma 파일을 직접 열 수 있고, Figma ↔ OpenPencil 간 복사/붙여넣기도 가능. 기존 Figma 프로젝트 마이그레이션에 매우 유리함.

6. 실시간 협업

WebRTC 기반 P2P 협업 지원. 링크 공유만으로 별도 서버 없이 실시간 공동 편집 가능. 커서 추적과 접속자 표시 기능도 있음.

7. 버전 관리

모든 작업(생성, 삭제, 이동, 크기 조절, 속성 변경, 레이아웃 변경 등)에 대해 Undo/Redo 지원. 디자인 파일을 Git으로 버전 관리할 수 있어 개발 워크플로우와 자연스럽게 통합됨.

---

OpenPencil vs Pencil.dev 비교

Pencil.dev(pencil.dev)는 "Design on canvas. Land in code."를 표방하는 또 다른 AI 네이티브 디자인 도구. 둘 다 AI와 코드 생성이 핵심이지만, 접근 방식이 꽤 다름.

항목	OpenPencil	Pencil.dev
유형	독립형 디자인 에디터	IDE 내장형 디자인 도구
실행 환경	웹 브라우저 또는 데스크톱 앱	VS Code / Cursor 내 확장
설치	Homebrew, 다운로드, 또는 웹 접속	확장 설치 + MCP 설정 필요
AI 통합	자체 내장 (90+ 도구)	Claude Code 기반 (외부 의존)
파일 형식	.fig 네이티브 지원	.pen 자체 포맷
Figma 호환	네이티브 .fig 열기 + 복사/붙여넣기	Figma에서 임포트 가능
코드 생성	React, Vue, Flutter, SwiftUI 등 다수	React, HTML, CSS 실시간 생성
협업	P2P WebRTC (서버 불필요)	Git 기반 팀 협업
비용	완전 무료 (MIT 라이선스)	얼리 액세스 무료 (Claude Code 구독 $20+/월 필요)
대상 사용자	디자이너, 프로토타이퍼, Figma 대안 찾는 사람	Claude Code 쓰는 개발자
오프라인	완전 지원	불가 (Claude Code 연결 필요)

어떤 걸 골라야 할까?

• 디자이너 또는 독립적인 디자인 작업이 목적이라면 → OpenPencil. Figma 대안으로 바로 쓸 수 있고, 설치도 간편함.
• 개발자이고 디자인→코드 워크플로우를 IDE 안에서 처리하고 싶다면 → Pencil.dev. Claude Code와 결합해 디자인을 코드로 바로 변환하는 개발 중심 도구임.

---

참고: Pencil Project (Evolus)

이름이 비슷한 Pencil Project는 완전 별개 도구. GUI 와이어프레임 및 프로토타이핑용 레거시 데스크톱 앱(최신 버전 3.1.1)이고, AI 기능 없음. 검색 시 혼동 주의.

---

마무리

OpenPencil은 오픈소스 진영에서 Figma에 가장 근접한 대안임. AI 내장, Figma 파일 호환, 다중 코드 내보내기, P2P 협업까지 갖추고도 완전 무료라는 점이 인상적. 특히 .fig 파일을 네이티브로 열 수 있다는 건 Figma에서 전환을 고려하는 팀에게 큰 장점.

한번 app.openpencil.dev에서 직접 체험해 보길 추천함.

---

참고 링크

• OpenPencil 공식 사이트
• OpenPencil GitHub
• OpenPencil 기능 가이드
• Pencil.dev 공식 사이트
• Pencil.dev 문서