가이드

Claude Design은 끝났다… 최고의 무료 Claude Design 대안 (무제한 & 오픈소스)

Open Design을 설정하고 Gemini CLI로 구동하여, 고충실도 AI 디자인 생성을 Gemini 무료 등급에서 실행하세요 — 에이전트에 비용을 지불하지 않고도 쓸 수 있는 오픈소스, 로컬 우선 워크스페이스입니다.

Sandeep Singh 2026년 5월 11일 11:04 YouTube ↗

이 가이드는 생성을 구동하는 에이전트로 Gemini CLI를 사용해 Open Design을 실행하는 방법을 보여줍니다 — 그래서 프로토타입, 랜딩 페이지, UI가 하나의 워크스페이스에서 나오면서도 Gemini의 넉넉한 무료 등급에 기댑니다. 이는 Sandeep Singh가 직접 진행한 실습 안내에서 밟은 경로를 따르며, 현재 릴리스에 맞춰 다시 쓰고 업데이트했습니다. 라이브 버전은 위 영상을 보시거나, 계속 읽어 내려가세요.

비용 이야기가 핵심입니다. Open Design 자체는 무료이며 오픈소스입니다. 당신이 “지불”하는 유일한 것은 당신이 가져오는 에이전트와 모델뿐입니다. Gemini CLI를 가져와 Google 계정으로 인증하면, 그 청구액은 사실상 0으로 떨어집니다.

Open Design 워크스페이스. Open Design 워크스페이스 — 오픈소스, 로컬 우선이며, 당신이 연결한 어떤 코딩 에이전트로든 구동됩니다.

Open Design이란?

Open Design은 오픈소스, 로컬 우선 디자인 플랫폼으로, 특정 모델 제공자에 당신을 묶어두는 대신 당신이 이미 사용하는 코딩 에이전트 위에서 실행됩니다. “자신의 에이전트를 가져오는” 방식입니다: Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode 및 21개 이상의 다른 에이전트가 각각 생성을 구동할 수 있습니다. 당신은 에이전트를 고르고, Open Design은 디자인 영역을 처리합니다.

눈여겨볼 만한 몇 가지:

오픈소스, Apache-2.0 — 복제하고, 셀프호스팅하고, 모든 줄을 읽어볼 수 있다.
로컬에서 실행 — 당신의 프로젝트는 남의 클라우드가 아니라 자신의 머신에 있는 폴더에 산다.
에이전트 교체 가능 — Gemini CLI를 포함해 21개 이상의 코딩 에이전트를 지원하며, 어느 것이 생성을 구동할지는 당신이 고른다.
프로토타입을 넘어서 — 프로토타입, 라이브 아티팩트, 슬라이드 덱, 매거진 레이아웃, 이미지 생성, 심지어 영상까지 모두 하나의 워크스페이스에서.
내장된 출발점 — 브랜드화된 디자인 시스템과 템플릿이 기본 포함되어, 빈 캔버스를 마주하고 멍하니 있을 일이 없다.

그 자체의 장점으로 자립합니다: 로컬이고 모델에 구애받지 않는 디자인 워크스페이스. Gemini CLI 같은 무료 에이전트와 깔끔하게 짝을 이룬다는 사실은, 그것을 진정으로 무료로 사용할 수 있게 만드는 보너스입니다.

시작하기 전에

Open Design을 설치하는 방법은 세 가지가 있습니다. 자신에게 맞는 것을 고르세요:

방법	적합한 대상	요구사항
데스크톱 앱	대부분의 사람 — 설정 불필요	없음. 그냥 다운로드하고 연다.
소스에서 실행	코드를 읽거나 수정하려는 개발자	Node `~24`, pnpm `10.33.x`
에이전트에 설치	터미널에서 사는 사람	기존 코딩 에이전트 CLI

오늘날 데스크톱 앱이 권장 경로입니다 — Node도, pnpm도, 복제도 필요 없습니다. Sandeep은 자신의 플랫폼용 설치 프로그램(macOS에서는 .dmg, Windows에서는 setup.exe)을 최신 릴리스에서 곧장 다운로드합니다.

1단계 — Open Design 설치하기

옵션 A — 데스크톱 앱 (권장, 설정 불필요)

open-design.ai에 가서 Download desktop을 클릭하세요. 빌드는 macOS(Apple Silicon 및 Intel), Windows(x64), Linux(AppImage)용으로 제공됩니다. 설치 후, 앱은 당신의 PATH에 이미 있는 모든 코딩 에이전트 CLI를 자동 감지하고 내장된 스킬과 디자인 시스템을 불러옵니다. 처음 실행하면 연결 화면에 도착하며, 거기서 로컬 CLI를 선택하거나 자신의 API key를 붙여넣습니다.

옵션 B — 소스에서 실행하기

저장소에서 실행하는 편이 좋다면, 필요한 명령어는 몇 개뿐입니다:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

그런 다음 출력되는 로컬 URL을 여세요 — 포트는 동적으로 할당되므로, 고정된 주소가 아니라 터미널에 나타나는 주소를 사용하세요. Node ~24와 pnpm 10.33.x가 필요하며, Corepack이 고정된 pnpm 버전을 대신 선택해 줍니다.

옵션 C — 코딩 에이전트에 설치하기

GUI를 전혀 열지 않고 Open Design을 사용하려면 — 에이전트 내부에서 스킬이나 MCP 서버로 호출하려면 — 다음을 실행하세요:

od mcp install <agent>
# <agent> = gemini | claude | codex | cursor | copilot | opencode | …

그런 다음, 에이전트 안에서 그저 이렇게 요청하세요: Use open-design to generate a landing page with a modern minimal design system.

Gemini CLI를 당신의 에이전트로 연결하기

이것이 워크플로를 무료로 만드는 단계입니다. Open Design은 자체 모델을 탑재하지 않습니다 — 당신이 가리키는 어떤 CLI든 구동합니다 — 그래서 Gemini CLI를 가져와 그 무료 등급에 일을 시킵니다.

왜 Gemini CLI인가? Sandeep의 표현대로 두 가지 이유: Gemini 모델이 나머지 모델들에 견주어 손색이 없다는 점, 그리고 무료 등급이 넉넉하다는 점입니다. Google 계정으로 로그인하면 매일 무료로 많은 요청 한도를 받습니다. Gemini API key는 무료 한도가 더 작습니다. 지속적인 디자인 작업에는 Google 계정 로그인을 쓰는 것이 맞습니다.

Gemini CLI를 설치한다. Gemini CLI 홈페이지의 설치 명령을 따르세요(macOS와 Linux에서는 Homebrew, 그 외에는 문서에 안내된 설치 프로그램). 어떤 터미널이든 됩니다.
gemini를 실행하고 인증한다. 실행하고, 메시지가 뜨면 작업 폴더를 신뢰한 다음 Sign in with Google을 선택하세요. 브라우저가 열려 두 번 클릭으로 Google 로그인이 진행되고 성공이 보고됩니다. Gemini CLI를 재시작하면 활성 모델과 사용된 할당량 0%가 보일 것입니다.
Open Design을 그것에 연결한다. Open Design을 재시작하고 Settings를 엽니다. 이제 Gemini CLI가 사용 가능한 에이전트로 표시됩니다 — 선택하고 Test the connection을 누르면 OK가 돌아와야 합니다. 저장하면 디자인할 준비가 끝납니다.

여기서 로컬 CLI를 쓰는 대신 자신의 API key를 붙여넣을 수도 있고, 나중에 미디어 생성을 원한다면 이미지, 영상, 오디오 모델용 별도 키를 추가할 수도 있습니다. 다만 무료로 무제한처럼 느껴지는 디자인 작업에는 Gemini CLI 로그인만으로 충분합니다. Settings의 모든 항목은 나중에 변경할 수 있으니, 첫 회차는 단순하게 가세요.

워크스페이스 둘러보기

Open Design은 당신의 작업을 프로젝트 범위로 유지합니다: 각 프로젝트는 자체 폴더에 존재하며, 폴더를 바꾸면 프로젝트가 바뀝니다. 프로젝트 안에서는 프로토타입, 라이브 아티팩트, 슬라이드 덱, 이미지, 심지어 영상과 오디오까지 만들 수 있습니다 — UI만이 아닙니다.

내장 디자인 시스템 라이브러리. 디자인 시스템 라이브러리 — 미리 보고 어떤 프로젝트에든 끼워 넣을 수 있는 브랜드화된 출발점.

내장 디자인 시스템 라이브러리는 미리 보고 재사용할 수 있는 브랜드화된 출발점을 제공하므로, 시작하기 전에 토큰 정의에 발이 묶이지 않습니다. 자신의 디자인 시스템을 가져오거나, 기존 Claude Design 프로젝트를 가져오거나, 아무것도 없는 상태에서 시작해 Open Design이 합리적인 기본값을 추론하게 할 수도 있습니다.

템플릿 라이브러리. 템플릿: 프로토타입, 슬라이드, 이미지, 영상 출발점 — 종류별로 필터링하고 포크해 시작.

템플릿 라이브러리는 브랜드 시스템을 넘어 프로토타입, 슬라이드, 그리고 이미지와 영상 생성까지 뻗어 있습니다. 종류별로 필터링하고 어느 것이든 포크해 출발점으로 삼으세요. 무엇이든 설치하기 전에 웹에서 open-design.ai/plugins로 전체 플러그인 라이브러리를 둘러볼 수 있습니다.

무언가를 만들어보기

Gemini CLI를 연결하면, 빌드 흐름은 Sandeep이 영상에서 실행하는 것과 동일합니다:

프로젝트를 만든다. 이름을 붙이고, 원하는 느낌에 맞는 디자인 시스템을 고르고, 와이어프레임이 아니라 실물을 보도록 High fidelity를 선택하세요.
브리프를 작성한다. 제안된 프롬프트 중 하나 대신, 원하는 것을 기술하세요 — Sandeep은 랜딩 페이지를 요청합니다. 마음에 드는 레이아웃 스크린샷을 첨부하고 Open Design에 그 테마를 따르라고 할 수도 있습니다.
확인 질문에 답한다. 에이전트는 영리한 후속 질문을 합니다: 단일 랜딩 페이지인지 랜딩+가격 페이지인지, 반응형 화면인지, 누구를 위한 것인지, 비주얼 톤(Sandeep은 모던하고 미니멀한 Linear/Vercel 느낌을 선택), 그리고 브랜드 컬러나 폰트가 있는지. 필드를 비워두거나, 방향을 알아서 정하게 둬도 됩니다.
비주얼 방향을 고르고 생성한다. 제안된 방향 중 하나를 고르고 보내면, 몇 초 뒤 요청한 섹션을 갖춘 스타일이 입혀진 랜딩 페이지가 나타납니다.
프롬프트로 반복한다. 로고를 바꾸거나, 빠진 아이콘을 추가하거나, FAQ를 확장하고 싶나요? 그 변경을 기술해 보내기만 하면 됩니다. 어떤 편집이 무언가를 어긋나게 했다면, 후속 프롬프트로 제자리로 되돌립니다.

만족스러우면 디자인 파일을 열어 소스 코드를 살펴보고, 원하면 레이어를 수동으로 편집한 다음 내보내세요 — PDF, PPTX, 압축 번들, 또는 Vercel 배포.

무료라는 부분은 진짜입니다: Sandeep은 여러 번 반복하며 프로토타입 두 개를 만들었고, 이후 Gemini 사용량을 확인했을 때 하루 한도의 약 2%만 썼습니다. 매일 새로 채워지는 큰 일일 한도 덕분에, 계량기를 지켜보지 않고도 거의 끊김 없이 디자인할 수 있습니다.

팁

Gemini CLI에는 API key가 아니라 Google 계정으로 로그인하세요 — 일일 무료 한도가 훨씬 크며, 그것이 이 워크플로를 사실상 무료로 만드는 요소입니다.
실제 디자인을 판단하고 싶을 때는 고충실도로 시작하세요. 구조를 빠르게 잡을 때만 와이어프레임으로 내려가세요.
Gemini CLI의 stats로 사용량을 확인하세요 — 일일 한도 대비 디자인 작업이 실제로 얼마나 적게 드는지 알 수 있습니다.
당신의 디자인은 프로젝트 폴더에 함께 머뭅니다 — 올바른 디렉터리를 대상으로 Open Design을 실행해 작업을 정리하세요.
시작하는 데 디자인 시스템이 꼭 필요하지는 않습니다. 내장된 것에서 시작하거나, Claude Design 프로젝트를 가져오거나, Open Design이 기본값을 추론하게 하세요.

자주 묻는 질문

정말 무료인가요? 사실상 그렇습니다. Open Design은 Apache-2.0 하의 오픈소스라 소프트웨어 비용은 들지 않습니다. 유일한 비용은 당신이 가져오는 에이전트와 모델뿐입니다 — 그리고 Google 계정으로 인증한 Gemini CLI라면, 큰 일일 무료 한도를 끌어다 씁니다. 영상에서는 반복을 포함한 프로토타입 두 개가 그날 할당량의 약 2%를 썼고, 이는 매일 새로 채워집니다.

어떤 코딩 에이전트를 지원하나요? Gemini, Claude Code, Codex, Cursor, GitHub Copilot, OpenCode를 포함해 21개 이상의 에이전트입니다. Open Design은 당신의 머신에 이미 설치된 CLI를 감지해 그중 하나를 기본값으로 고르게 해줍니다.

꼭 Gemini CLI를 써야 하나요? 아니요. Gemini CLI는 무료에 높은 할당량을 갖춘 구성으로 가는 길이지만, 지원되는 어떤 에이전트든 연결할 수 있고, 에이전트용으로 또는 이미지, 영상, 오디오 모델용으로 자신의 API key를 붙여넣을 수도 있습니다.

시작하기 전에 디자인 시스템이 필요한가요? 아니요. Open Design은 브랜드화된 디자인 시스템과 템플릿을 출발점으로 기본 제공하며, 기존 디자인 시스템을 가져오거나 합리적인 기본값을 추론하게 할 수도 있습니다.

이 글로 된 가이드는 Sandeep Singh의 직접 실습 안내를 바탕으로 합니다. 위의 전체 영상을 보시고, 더 실용적인 AI 도구 튜토리얼을 위해 Sandeep Singh를 구독하세요.

← 가이드 GitHub · 소스 ↗