도구별 실전 가이드 · 공식 정보 확인 2026-08-20
open-design Apache-2.0 오픈소스 조건과 시작 절차
작성: gentive · 편집·검수 책임: 신유빈 · 지원 환경: Desktop, Extension · 페이지 갱신: · 운영·편집 기준
Claude Code·Codex 등 여러 CLI로 프로토타입·대시보드·슬라이드를 만들고 실제 파일로 내보내는 코딩 에이전트를 디자인 엔진으로 쓰는 로컬 데스크톱 플러그인입니다.
Claude Code·Codex 등 여러 CLI로 프로토타입·대시보드·슬라이드를 만들고 실제 파일로 내보내는 코딩 에이전트를 디자인 엔진으로 쓰는 로컬 데스크톱 플러그인입니다. open-design의 첫 실전 과제는 “간단한 SaaS 대시보드 목업을 HTML과 PDF 두 형식으로 내보내기”이며, 이 흐름을 직접 통제할 사람에게 맞습니다.
이럴 때 맞습니다
- “사용자 수·매출 카드와 선 그래프가 필요한 디자인 요구사항” 같은 입력으로 open-design의 핵심 기능을 시험하려는 사람
- HTML과 PDF의 정보 순서·색상·수치가 같고 소스 파일을 다시 편집할 수 있는지 기준으로 open-design 결과를 직접 검수할 수 있는 경우
- Desktop·Extension 환경에서 Apache-2.0 코드를 직접 설치·관리하려는 작업
이럴 때는 멈추세요
- 코딩 에이전트를 디자인 엔진으로 쓰는 로컬 데스크톱 플러그인 설치·모델 준비·업데이트를 관리하지 않고 즉시 완성된 서비스를 원하는 경우
- 다음 위험을 사람이 확인할 수 없는 작업: 연결한 코딩 에이전트가 광범위한 파일 권한을 사용하고 여러 내보내기 형식에서 폰트·레이아웃이 달라지는 문제.
참고 시작점
팩트시트 · 작업 근거 확인 필요: 아래 문구는 공식 제품 사실을 정리한 참고 시작점이며, 성공 결과를 보장하는 검증 절차가 아닙니다.
대시보드 정보 계약을 만든다
사용자 수·매출·선 그래프의 수치와 순서가 고정된다.
참고 시작점: 사용자 수 카드, 매출 카드, 6개월 선 그래프 순서의 SaaS 대시보드 목업을 설계해 줘.
- Open Design local-first desktop app에 디자인 요구사항과 실제 예시 수치를 입력한다.
- Claude Code·Codex 등 coding agent가 읽을 프로젝트 폴더를 빈 작업 디렉터리로 제한한다.
- HTML·PDF 두 export에서 유지할 색상·폰트·정보 순서를 명시한다.
에이전트로 편집 가능한 목업을 만든다
실제 파일로 수정 가능한 대시보드 소스가 생성된다.
참고 시작점: 카드 두 개와 선 그래프가 있는 반응형 HTML 목업을 실제 파일로 만들어 줘.
- Open Design plugin에서 Codex design engine을 선택한다.
- prototype의 카드 수치와 그래프 점을 입력 요구와 대조한다.
- generated source를 열어 색·폰트·레이아웃 값을 다시 편집할 수 있는지 확인한다.
HTML과 PDF 렌더를 교차 검수한다
두 형식의 정보·수치·시각 규칙이 일치한 목업이 남는다.
참고 시작점: 같은 소스에서 HTML과 PDF를 내보내고 정보 순서·색상·수치 차이를 찾아 줘.
- HTML export를 desktop과 mobile viewport에서 확인한다.
- PDF export의 폰트 대체와 그래프 잘림을 HTML과 나란히 비교한다.
- 에이전트 파일 권한을 회수하고 HTML·PDF·source의 수치가 같은지 최종 확인한다.
무료 조건과 주의점
Apache-2.0 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도. 핵심 기능에 외부 AI 공급자 계정 또는 API 키 필요
Apache-2.0 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도. 핵심 기능에 외부 AI 공급자 계정 또는 API 키 필요
Apache-2.0 저장소 코드는 상업적으로 사용할 수 있지만, 모델 가중치·입력 자료·생성물·번들 자산의 권리는 각각 따로 확인해야 합니다.
연결한 코딩 에이전트가 광범위한 파일 권한을 사용하고 여러 내보내기 형식에서 폰트·레이아웃이 달라지는 문제.
공식 근거와 확인일
| 확인 항목 | 확인한 내용 | 공식 출처·확인일 |
|---|---|---|
| 제품 정보 | Claude Code·Codex 등 여러 CLI로 프로토타입·대시보드·슬라이드를 만들고 실제 파일로 내보내는 코딩 에이전트를 디자인 엔진으로 쓰는 로컬 데스크톱 플러그인입니다. | open-design 공식 사이트 |
| 무료 조건 | Apache-2.0 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도. 핵심 기능에 외부 AI 공급자 계정 또는 API 키 필요 | 공식 무료 정책·요금 안내 |
| 공식 코드 라이선스 | 오픈소스 코드의 사용·수정·재배포 조건 | 공식 코드 라이선스 |
| 공식 제품 페이지 | Claude Code·Codex 등 여러 CLI로 프로토타입·대시보드·슬라이드를 만들고 실제 파일로 내보내는 코딩 에이전트를 디자인 엔진으로 쓰는 로컬 데스크톱 플러그인입니다. | 공식 제품 페이지 |