도구별 실전 가이드 · 공식 정보 확인 2026-08-20
open-pencil MIT 오픈소스 조건과 시작 절차
작성: gentive · 편집·검수 책임: 신유빈 · 지원 환경: Desktop · 페이지 갱신: · 운영·편집 기준
Figma와 비슷한 캔버스에서 컴포넌트·도형·레이아웃을 AI와 함께 편집하는 AI 기능을 중심에 둔 오픈소스 벡터 디자인 편집기입니다.
Figma와 비슷한 캔버스에서 컴포넌트·도형·레이아웃을 AI와 함께 편집하는 AI 기능을 중심에 둔 오픈소스 벡터 디자인 편집기입니다. open-pencil의 첫 실전 과제는 “모바일 로그인 화면과 재사용 버튼 컴포넌트 한 세트 만들기”이며, 이 흐름을 직접 통제할 사람에게 맞습니다.
이럴 때 맞습니다
- “375픽셀 프레임과 브랜드 색상·입력 필드·오류 상태 요구사항” 같은 입력으로 open-pencil의 핵심 기능을 시험하려는 사람
- 버튼 인스턴스가 원 컴포넌트 변경을 따르고 제약 조건에서 정렬이 유지되는지 기준으로 open-pencil 결과를 직접 검수할 수 있는 경우
- Desktop 환경에서 MIT 코드를 직접 설치·관리하려는 작업
이럴 때는 멈추세요
- AI 기능을 중심에 둔 오픈소스 벡터 디자인 편집기 설치·모델 준비·업데이트를 관리하지 않고 즉시 완성된 서비스를 원하는 경우
- 다음 위험을 사람이 확인할 수 없는 작업: 초기 편집기 버전의 파일 호환성·협업 기능 한계와 AI 수정이 레이어 구조를 평탄화하는 문제.
참고 시작점
팩트시트 · 작업 근거 확인 필요: 아래 문구는 공식 제품 사실을 정리한 참고 시작점이며, 성공 결과를 보장하는 검증 절차가 아닙니다.
375픽셀 프레임과 레이어 구조를 만든다
로그인 화면의 필드·버튼·오류 상태가 계층적으로 배치된다.
참고 시작점: 375픽셀 모바일 프레임에 이메일·비밀번호 필드, 오류 문구, 기본 버튼을 구조화해 줘.
- OpenPencil design editor에서 375픽셀 frame을 만든다.
- 입력 필드·오류 문구·button을 의미 있는 layer group으로 나눈다.
- 브랜드 color token과 간격 기준을 재사용 스타일로 등록한다.
재사용 버튼 컴포넌트를 확정한다
기본·눌림·비활성 상태를 공유하는 버튼 세트가 생긴다.
참고 시작점: 브랜드 버튼을 component로 만들고 default, pressed, disabled instance를 배치해 줘.
- Figma alternative 방식의 component와 instance 관계를 만든다.
- 원 component의 글꼴·색·radius를 바꿔 세 instance가 따라오는지 본다.
- AI-native edit가 instance를 개별 도형으로 평탄화하지 않았는지 확인한다.
제약 조건과 파일 재열기를 시험한다
정렬과 컴포넌트 관계가 유지되는 편집 파일이 남는다.
참고 시작점: 프레임 폭을 바꿔 입력과 버튼 정렬을 시험하고 저장 파일을 다시 열어 줘.
- constraint를 적용한 뒤 frame 폭을 줄이고 좌우 padding을 확인한다.
- OpenPencil 파일을 저장·재열어 component link와 layer order가 남는지 본다.
- 협업·호환 기능이 확인되지 않은 형식은 별도 백업과 함께 공유한다.
무료 조건과 주의점
MIT 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도
MIT 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도
MIT 저장소 코드는 상업적으로 사용할 수 있지만, 모델 가중치·입력 자료·생성물·번들 자산의 권리는 각각 따로 확인해야 합니다.
초기 편집기 버전의 파일 호환성·협업 기능 한계와 AI 수정이 레이어 구조를 평탄화하는 문제.
공식 근거와 확인일
| 확인 항목 | 확인한 내용 | 공식 출처·확인일 |
|---|---|---|
| 제품 정보 | Figma와 비슷한 캔버스에서 컴포넌트·도형·레이아웃을 AI와 함께 편집하는 AI 기능을 중심에 둔 오픈소스 벡터 디자인 편집기입니다. | open-pencil 공식 사이트 |
| 무료 조건 | MIT 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도 | 공식 무료 정책·요금 안내 |
| 공식 코드 라이선스 | 오픈소스 코드의 사용·수정·재배포 조건 | 공식 코드 라이선스 |
| 공식 제품 페이지 | Figma와 비슷한 캔버스에서 컴포넌트·도형·레이아웃을 AI와 함께 편집하는 AI 기능을 중심에 둔 오픈소스 벡터 디자인 편집기입니다. | 공식 제품 페이지 |