Pencil리포지토리의 .pen 파일riviera.pen벡터 캔버스 파일, Git 버전 관리UI kit내장 컴포넌트편집: 더 차분한 헤드라인캔버스 또는 프롬프트 블록에서 편집
Pencil 
OpenDesign 완전한 오픈 소스 Pencil.dev 대안: OpenDesign
OpenDesign과 Pencil은 유난히 비슷합니다. 둘 다 에이전트 기반이며 Git을 통해 저장소에 디자인을 파일로 보관합니다. OpenDesign은 무료이고 완전한 오픈 소스이며 공급업체 중립적인 대안입니다. 전체 애플리케이션에 대해 Apache-2.0을 적용하고, 주요 코딩 에이전트와 함께 BYOK를 지원하며, UI, 덱, 프로토타입 및 디자인 시스템에 이르는 결과물을 제공합니다. 이 페이지에서는 두 도구가 겹치는 부분, Pencil의 캔버스가 진정으로 우수한 부분, 그리고 전환하는 방법을 설명합니다.
작업별 결론12 / Pencil
OpenDesign 대 Pencil, 세 가지 다른 요구 사항
올바른 곳에서 시작하기
이 페이지 · 선택하기
OpenDesign인가 Pencil인가?
상황별 결론, 두 도구에서의 간단한 실행, 날짜가 기입된 기능 비교 및 답변을 뒤집는 조건입니다.
결론 읽기 이미 Pencil을 사용 중인 경우.pen 디자인을 OpenDesign으로 이동하기
둘 다 저장소에 파일을 보관하므로 클라우드 내보내기로 인해 손실되는 것은 없습니다. 이동하는 것, 캔버스에 남는 것, 그리고 4가지 단계를 확인하세요.
이동하는 항목 보기 다른 질문Pencil이 아니라 Figma를 떠나시나요?
떠나려는 캔버스가 Figma의 것이라면, 해당 비교에서는 협업과 Dev Mode도 다룹니다.
OpenDesign 대 Figma 읽기각 도구의 특징
Pencil 대 OpenDesign: 각 도구의 특징
Pencil과 OpenDesign은 에이전트 기반 디자인을 저장소에 파일로 보관한다는 큰 아이디어를 공유하지만, 무엇이 개방되어 있는지, 어떤 에이전트가 일급인지, 결과물의 범위가 얼마나 넓은지에 차이가 있습니다. OpenDesign은 자사 제품에 대한 이 비교를 작성했으며 Pencil과 제휴하지 않았습니다.
짧은 답변. OpenDesign은 무료이고 완전한 오픈 소스(Apache-2.0)인 로컬 우선 Pencil 대안입니다. 동일한 에이전트 기반, 저장소 내 파일 아이디어를 기반으로 하며, 파일 형식뿐만 아니라 전체 애플리케이션이 개방되어 있습니다. Claude, Codex, Cursor, Gemini, OpenCode 및 Qwen 전반에 걸쳐 공급업체 중립적인 BYOK를 지원하며, UI, 랜딩 페이지, 덱, 프로토타입 및 DESIGN.md 디자인 시스템에 이르는 결과물을 제공합니다. 벡터 캔버스는 없습니다. 네이티브 Figma 붙여넣기를 지원하는 IDE 내에서 Figma와 유사한 캔버스를 수동으로 편집하는 것을 중요하게 생각한다면 Pencil을 유지하세요.
Pencil
Pencil(pencil.dev)은 "캔버스에서 디자인하고 코드로 구현"하는 도구입니다. a16z Speedrun의 후원을 받으며 IDE 및 코드베이스 내에 존재하는 무한 벡터 디자인 캔버스입니다. 디자인 파일은 Git을 통해 저장소에 보관되는 개방적이고 문서화된 .pen JSON 형식을 사용하며, 로컬 MCP 서버를 통해 AI 에이전트가 이를 읽고 쓸 수 있습니다. 내장 UI 키트와 네이티브 Figma 복사-붙여넣기를 제공하며, 얼리 액세스 기간 동안 무료입니다.
- 실행 환경로컬 데스크톱 앱, IDE 확장 프로그램 및 로컬 MCP 서버
- 모델여러 에이전트가 있는 MCP, Claude Code에 최적화됨
- 결과물저장소의 .pen JSON 파일; 코드로 변환되는 UI 화면 및 컴포넌트
- 비용얼리 액세스 기간 동안 무료; 유료 요금제 예고됨게시된 한도 없음
OpenDesign
OpenDesign은 자체 코딩 에이전트를 지정할 수 있는 로컬 우선 오픈 소스 디자인 에이전트입니다. 스킬과 이식 가능한 브랜드는 저장소에 파일로 존재하며, 데스크톱 앱이 결과를 렌더링하고 검토합니다.
- 실행 환경머신의 데스크톱 앱 및 로컬 데몬
- 에이전트사용자 지정: Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen 등
- 결과물프로젝트 디렉터리의 파일
- 비용Apache-2.0; API 사용량에 대해 자체 공급업체에 지불
겹치는 부분
Git을 통해 저장소에 보관되는 에이전트 기반 디자인 파일과 코드가 되는 UI입니다. 이것이 두 도구가 수행하는 대부분의 작업이며, 이 페이지의 나머지 부분에서 비교하는 전체 내용입니다.
이 페이지에서 주장하지 않는 내용
OpenDesign에 벡터 캔버스, 레이어 패널, 내장 UI 키트 또는 네이티브 Figma 붙여넣기가 있다거나 .pen 파일이 자동으로 변환된다는 것은 아닙니다. 캔버스가 주된 작업이라면 아래 결론에서 Pencil을 유지하라고 권장합니다.
결론
Pencil인가 OpenDesign인가? 상황별 결론
다음의 경우 Pencil을 선택하세요…
- Cursor 또는 VS Code 내에서 성숙하고 Figma와 유사한 벡터 캔버스를 수동으로 편집하고 싶은 경우.
- Figma에서 자주 붙여넣기를 하며 레이어와 자동 레이아웃을 그대로 유지해야 하는 경우.
- 내장 UI 키트와 Claude 우선 에이전트 경험을 가장 중요하게 생각하는 경우.
OpenDesign을 선택하세요…
- 단순히 문서화된 형식이 아니라, 포크, 감사, 자체 호스팅이 가능한 완전한 오픈 소스 도구를 원할 때.
- 얼리 액세스 이후에도 공급업체 제한 없이 "무료"가 계속 무료이길 원하며, 자체 모델 사용료만 지불하고 싶을 때.
- Claude, Codex, Cursor, Gemini, OpenCode, Qwen 모두를 일급 객체로 지원하는 공급업체 중립적인 BYOK를 원할 때.
- 하나의 DESIGN.md에서 UI, 덱, 프로토타입, 디자인 시스템을 모두 렌더링하고 싶을 때.
둘 다 실행하세요…
- 디자이너는 Pencil의 캔버스에 그리고, 나머지 아티팩트는 OpenDesign에서 동일한 브랜드로 렌더링할 때.
- 얼리 액세스 가격 책정이나 Claude 우선 튜닝이 더 이상 맞지 않을 경우를 대비해 오픈 폴백을 원할 때.
- 두 도구 모두 리포지토리에 파일을 보관하므로 나란히 실행해도 비용이 거의 들지 않을 때.
동일한 브리프, 두 가지 결과
Pencil과 OpenDesign의 동일한 브리프
비교는 입력이 정직할 때만 의미가 있습니다. 동일한 브리프와 동일한 브랜드가 Pencil과 OpenDesign에 입력됩니다. 반환되는 결과물, 편집 방법, 그리고 이를 통해 추가로 렌더링할 수 있는 것이 비교 대상입니다. 아래 패널은 스크린샷이 아닌 일러스트레이션입니다. 20분 테스트를 통해 직접 브리프를 실행해 볼 수 있습니다.
브리프 · 두 도구에서 동일
슬로우 트래블 숙소를 예약하는 소규모 스튜디오를 위한 랜딩 페이지를 디자인하세요. 강력한 헤드라인이 있는 히어로 섹션 하나, 추천 장소 세 곳, 예약 방법에 대한 짧은 안내, 그리고 마지막 콜 투 액션. 데스크톱 및 모바일.
- 브랜드
- 종이 배경, Albert Sans, 녹색 강조 하나, 8px 반경
- 중단점
- 1440 데스크톱, 390 모바일; 가로 스크롤 없음
- 편집 테스트
- 첫 번째 결과 후: "헤드라인을 더 차분하게 만들고, 두 번째 장소를 교체하세요"
- 기록
- 모델, 날짜, 첫 번째 결과까지의 시간, 필요한 편집, 내보내기 형식
Pencil리포지토리의 .pen 파일OpenDesign + 사용자의 에이전트리포지토리의 파일riviera-landing.html새로 만들기 · v2DESIGN.md바인딩됨편집: 더 차분한 헤드라인요소를 가리키면 에이전트가 수정함
예시두 패널 모두 이 페이지를 위해 그려진 일러스트레이션이며 두 도구의 스크린샷이 아닙니다. 또한 최종 평가는 이에 의존하지 않습니다. 아래의 20분 테스트로 직접 브리프를 실행하고 두 결과를 공정하게 비교할 수 있도록 여기에 나열된 사항에 유의하세요.
유의 사항 · 두 도구 모두
모델 및 버전, 실행 날짜, 첫 번째 사용 가능한 결과까지의 시간, "완료"에 도달하기 위한 편집 횟수, 내보내기에 포함된 내용.
유의 사항 · Pencil
어떤 에이전트가 MCP를 통해 실행되었고 Claude 외부에서 어떻게 작동했는지, .pen 파일이 코드로 깔끔하게 왕복되었는지, Figma 붙여넣기가 무엇을 보존했는지.
유의 사항 · OpenDesign
사용된 에이전트 및 키, 다시 프롬프트하지 않고 DESIGN.md가 존중되었는지 여부, 두 중단점이 모두 확인되었는지, 버전이 파일로 유지되었는지.
기능별 비교
OpenDesign 대 Pencil, 기능별 비교
OpenDesign과 Pencil이 실제로 차이를 보이는 9가지 측면은 라이선스, 런타임, 디자인 파일, 계정, 비용, 모델, 주요 표면, 출력 범위 및 성숙도입니다. Pencil 정보는 2026-09-06에 공개 출처를 기준으로 확인되었으며, 얼리 액세스 조건은 변경될 수 있습니다.
| 차원 | OpenDesign | Pencil |
|---|---|---|
| 라이선스 | Apache-2.0; 전체 앱이 오픈 소스임 | 클로즈드 소스 앱; .pen 형식만 문서화됨 |
| 런타임 | 로컬 데몬 및 데스크톱 앱 | 로컬 데스크톱 앱, IDE 확장 및 로컬 MCP 서버 |
| 디자인 파일 | 리포지토리의 파일: DESIGN.md 및 아티팩트 | 리포지토리의 .pen JSON 파일 |
| 계정 | 필요 없음 | 로그인, 얼리 액세스 |
| 비용 | 무료 및 오픈 소스; 자체 모델 사용료 | 얼리 액세스에서는 무료; 유료 요금제 예고됨조건은 변경될 수 있음 |
| 모델 | 공급업체 중립적인 BYOK: Claude, Codex, Cursor, Gemini, OpenCode, Qwen | 여러 에이전트가 있는 MCP, Claude Code에 최적화됨 |
| 기본 표면 | 에이전트 주도: 브리프에서 아티팩트까지, 그리고 리뷰 UI | 직접 편집하는 Figma와 유사한 벡터 캔버스; MCP를 통한 에이전트 |
| 출력 범위 | UI, 랜딩 페이지, 덱, 프로토타입, 디자인 시스템 | 코드로 변환할 UI 화면 및 컴포넌트 |
| 자체 호스팅 / 포크 | 예 | 아니요; 앱은 클로즈드 소스임 |
Pencil이 우수한 점
직접 다루는 캔버스: 레이어와 자동 레이아웃을 유지하는 네이티브 Figma 붙여넣기, 내장 UI 키트, 그리고 이 모든 것이 IDE 내에 있는, 직접 편집할 수 있는 성숙한 Figma 유사 표면. 디자인하는 개발자는 편집기를 떠나지 않습니다.
OpenDesign이 우수한 점
소유권과 범위: 전체 앱이 오픈 소스이고, BYOK는 Claude 우선이 아닌 공급업체 중립적이며, 수익을 창출할 공급업체가 없기 때문에 무료가 계속 무료로 유지되고, 출력이 UI-to-code보다 훨씬 더 넓습니다.
결정
OpenDesign이 올바른 Pencil 대안인 경우
IDE에서 디자인하는 개발자
Claude Code를 사용하여 코드 옆에 손으로 화면 그리기
PencilCursor나 VS Code 내부의 캔버스, 네이티브 Figma 붙여넣기, Claude 우선 튜닝이 정확히 이 사람의 워크플로우인 경우. OpenDesign은 이들에게 제공할 캔버스가 없습니다.
다음인 경우 적합하지 않음 팀이 Claude 대신 Codex, Gemini 또는 Qwen을 실행하는 경우.
오픈소스 정책을 가진 팀
전체 도구는 감사 및 포크가 가능해야 합니다
OpenDesign에이전트, 스킬 라이브러리, 렌더러를 위한 Apache-2.0; 문서화된 .pen 형식은 이와 동일하지 않습니다.
다음인 경우 적합하지 않음 개방형 파일 형식만으로 정책을 충족하는 경우.
다양한 결과물 유형에 걸친 브랜드
하나의 브랜드로 덱, 랜딩 페이지, 프로토타입 및 UI 제작
OpenDesign하나의 DESIGN.md로 프롬프트를 다시 작성할 필요 없이 이 모든 것을 렌더링합니다. Pencil의 범위는 UI에서 코드까지입니다. 디자인 시스템 솔루션을 참조하세요.
다음인 경우 적합하지 않음 UI 화면이 유일한 결과물인 경우.
얼리 액세스를 대비하는 Pencil 사용자
현재는 무료, 유료 요금제 예고됨
둘 다 실행Pencil에서 계속 드로잉하세요. 브랜드를 DESIGN.md로 추출하고 나머지는 OpenDesign에서 렌더링하여 특정 공급업체의 가격 정책에 종속되지 않도록 하세요. 두 도구 모두 리포지토리에 파일을 보관합니다.
다음인 경우 적합하지 않음 .pen 파일과 DESIGN.md가 자동으로 동기화될 것으로 기대하는 경우; 동기화되지 않습니다.
디자인을 이전하거나 둘 다 실행하기
Pencil에서 OpenDesign으로 디자인을 이전하는 방법
두 도구 모두 디자인을 리포지토리의 파일로 유지하므로 손실이 발생하는 클라우드 내보내기와 씨름할 필요가 없습니다. 이전되는 것은 Pencil 내보내기에서 한 번 추출되는 브랜드와 브리프입니다. .pen 캔버스 파일은 Pencil에서 계속 편집할 수 있습니다.
| 이전되는 항목 | |
|---|---|
| 브랜드 | 에이전트가 Pencil 내보내기, Figma 붙여넣기 또는 스크린샷을 가리키게 하세요. 색상, 타이포그래피, 간격 및 보이스를 DESIGN.md로 추출합니다. |
| 프롬프트 | 일반 텍스트. 캔버스에서 복사한 프롬프트 블록을 OpenDesign 브리프에 그대로 붙여넣습니다. |
| 생성된 코드 | Pencil이 .pen 파일에서 생성한 코드는 구조적 참조 역할을 할 수 있습니다. 에이전트는 코드를 패치하는 대신 DESIGN.md에 따라 다시 렌더링합니다. |
| Pencil에 남는 항목 | |
| .pen 캔버스 파일 | 벡터 레이어는 변환되지 않습니다. 브리프와 DESIGN.md에서 다시 렌더링하세요. |
| 내장 UI 키트 | Shadcn 스타일의 키트는 DESIGN.md와 자체 컴포넌트를 통해 다시 표현됩니다. |
| 네이티브 Figma 붙여넣기 | 팀원이 Figma에서 계속 붙여넣기를 한다면, 해당 단계는 Pencil에 남습니다. |
-
OpenDesign을 설치하고 동일한 리포지토리 열기
데스크톱 앱을 다운로드하고 이미 .pen 파일이 있는 리포지토리를 프로젝트로 엽니다. 소스 빌드 경로는 빠른 시작에서 별도로 다룹니다.
-
참조용으로 Pencil 화면 하나 내보내기
유지하고 싶은 디자인의 화면을 PNG(또는 생성된 코드)로 내보내어 프로젝트에 추가합니다.
-
에이전트에게 브랜드를 DESIGN.md로 추출하도록 요청하기
파일을 수동으로 검토하세요: 하나의 강조 색상, 올바른 글꼴, 올바른 반경. 이것이 판단이 필요한 유일한 마이그레이션 단계입니다.
-
새 브랜드에 맞춰 원본 브리프 렌더링하기
스킬을 선택하고 렌더링하세요. 이제부터 UI, 덱, 프로토타입 등 모든 스킬이 프롬프트를 다시 작성할 필요 없이 브랜드에 맞춰 렌더링되며, 각 버전은 파일로 저장됩니다.
둘 다 실행하기
캔버스에서 UI를 수동으로 편집하려면 Pencil을 유지하고, 브랜드에서 렌더링되는 모든 작업에는 OpenDesign을 사용하세요. 둘 다 동일한 리포지토리에 존재합니다. 캔버스가 변경되면 DESIGN.md를 업데이트하세요. 자동으로 동기화되는 것은 없습니다.
대체 수단 및 손실
시도해 보아도 잃을 것이 거의 없습니다. 어느 쪽이든 .pen 파일은 리포지토리에 남습니다. OpenDesign 렌더링이 실패하더라도 마지막 버전이 디스크에 유지되며 브리프는 변경되지 않습니다. 동일한 에이전트나 다른 에이전트로 다시 시도하세요.
20분 테스트
Pencil에서 이미 그린 화면으로 OpenDesign 사용해 보기
Pencil에서 그린 화면을 가져와 원하는 에이전트를 사용하여 OpenDesign에서 다시 빌드해 보세요. 20분 안에 사용할 수 있는 결과가 나오지 않는다면, 이 비교가 여러분에게 가치 있는 정보를 제공한 것입니다.
1작업
여기 내가 Pencil에서 디자인한 화면의 PNG 내보내기 파일이 있습니다. 이 브랜드를 DESIGN.md로 추출한 다음, 내 디자인 규칙을 사용하여 이 브리프에서 동일한 화면을 다시 빌드하고, 동일한 브랜드의 1슬라이드 덱 커버를 추가해 주세요. 데스크톱 및 모바일 너비에서 화면을 확인하세요.
- 01Pencil 화면 입력유지하고 싶은 디자인의 .pen 화면 PNG 내보내기 파일입니다.
- 02DESIGN.md 출력.pen 파일 옆의 파일로 추출된 브랜드입니다 — 수동으로 검토하세요.
- 03렌더링된 화면 및 덱 커버데스크톱 및 모바일 화면과 동일한 브랜드의 덱 커버, 그리고 요소를 가리켜 수행하는 한 번의 편집입니다.
2다음인 경우 성공입니다…
- DESIGN.md가 .pen 파일 옆에 커밋되었으며 해당 토큰을 승인할 수 있습니다.
- 화면이 가로 스크롤 없이 1440 및 390으로 렌더링되며, 덱 커버가 브랜드를 공유합니다.
- 원하는 경우 Claude가 아닌 다른 에이전트를 사용하여 요소를 가리켜 한 번의 편집("더 차분한 헤드라인")이 적용되었습니다.
- 두 버전이 파일로서 나란히 존재합니다. 조용히 덮어쓰인 것은 없습니다.
작동하지 않은 경우: 에이전트가 연결되어 있고 선택한 모드에 대해 인증되었는지 확인한 다음, 도구를 판단하기 전에 더 작은 브리프로 다시 시도하세요.
기타 옵션
기타 Pencil.dev 대안
FAQ
Pencil.dev 대안: FAQ
Pencil(pencil.dev)은 오픈 소스인가요?
앱은 아닙니다. Pencil은 클로즈드 소스이며 a16z가 후원하는 제품입니다. 열려 있는 것은 문서화되어 있지만 변경될 수 있는 .pen 파일 형식뿐입니다. OpenDesign은 Apache-2.0에 따라 완전히 오픈 소스입니다. 형식이 아니라 애플리케이션 전체가 오픈 소스입니다.
Pencil.dev는 무료인가요?
현재는 명시적인 얼리 액세스 단계로 무료이며, 창립자들은 유료 요금제와 제한을 예고했습니다. OpenDesign은 오픈 소스이므로 무료입니다. 자체 에이전트 키를 가져오는 BYOK 방식이므로 모델 사용 비용이 사용자에게 청구되며 공급업체 제한이 없습니다.
OpenDesign과 Pencil의 차이점은 무엇인가요?
두 도구는 비슷합니다. 둘 다 에이전트 기반이며 Git을 통해 저장소에 디자인을 파일로 보관합니다. OpenDesign은 완전히 오픈 소스이며 Claude 우선이 아닌 공급업체 중립적인 BYOK 방식이고 UI, 덱, 프로토타입 및 디자인 시스템을 렌더링합니다. Pencil은 UI를 코드로 변환하는 데 중점을 둔 IDE 내의 벡터 캔버스입니다. 결론에서 각각의 조건을 나열합니다.
Pencil은 Claude 이외의 에이전트와도 작동하나요?
네, MCP를 통해 여러 에이전트를 연결하지만 Claude Code에 최적화되어 있으며 리뷰어들은 다른 곳에서는 경험이 부족하다고 보고합니다. OpenDesign은 Claude, Codex, Cursor, Gemini, OpenCode 및 Qwen을 일급 객체로 취급합니다.
OpenDesign과 함께 Pencil을 계속 사용할 수 있나요?
네. 둘 다 동일한 저장소에 파일을 보관하므로 나란히 실행하는 데 비용이 거의 들지 않습니다. Pencil에서 그리고 OpenDesign의 DESIGN.md에서 다른 모든 것을 렌더링하세요. 이동하는 것과 유지되는 것을 확인하세요.
OpenDesign은 정말 오픈 소스인가요?
네. github.com/nexu-io/open-design에 Apache-2.0으로 공개되어 있으며 자체 호스팅이 가능합니다.
OpenDesign은 Pencil과 제휴 관계인가요?
아니요. OpenDesign은 독립적인 오픈 소스 프로젝트입니다. Pencil은 pencil.dev에 있는 a16z가 후원하는 별도의 제품입니다. 이것은 OpenDesign 팀이 작성한 제휴 관계가 없는 비교입니다.
하나의 실제 화면에서 OpenDesign 사용해 보기
Pencil에서 그린 화면을 코딩 에이전트로 다시 빌드하고 왕복 과정을 판단한 다음 결정하세요. 자신에게 맞는 상황을 선택하세요. 이 페이지는 사용자의 설정을 감지하지 않습니다.