Open Design 20분 완전 정복 — 설치부터 데모까지

이 가이드는 Open Design을 처음 사용하는 20분 동안의 여정을 안내합니다 — 깨끗한 설치부터 첫 프로토타입 생성까지 말이죠. CodingMenace(Dennis)가 실전 첫인상 영상에서 밟은 경로를 따라가되, 현재 릴리스에 맞춰 다시 쓰고 업데이트해 단계별로 그대로 따라 할 수 있도록 했습니다. 실시간 진행 과정을 보려면 위 영상을, 글로 된 버전을 원한다면 아래를 읽어 보세요.

Open Design은 오픈소스 Claude Design 대안을 표방합니다 — 데스크톱 우선, 에이전트 네이티브, Apache-2.0.

Open Design이란?

Open Design은 오픈소스이자 로컬 우선 방식의 디자인 플랫폼으로, Claude Design과 Figma를 대신할 수 있는 에이전트 네이티브 대안입니다. 하나의 모델 제공자에 묶어 두는 대신, 이미 사용 중인 코딩 에이전트 위에서 동작합니다: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode 등 수십 가지를 지원하죠. 단순히 키를 직접 가져오는 것을 넘어, 에이전트를 직접 가져오는 방식입니다.

눈여겨볼 만한 몇 가지 이유:

• 오픈소스, Apache-2.0 — 복제하고, 직접 호스팅하고, 모든 코드를 읽어 볼 수 있습니다.
• 로컬에서 실행 — 프로젝트는 남의 클라우드가 아니라 내 컴퓨터의 내 폴더 안에 살아 있습니다.
• 에이전트 플러그형 — 21개 이상의 코딩 에이전트를 지원하며, 어떤 CLI가 생성을 주도할지 직접 고릅니다.
• 프로토타입 그 이상 — 프로토타입, 라이브 아티팩트, 슬라이드 덱, 매거진 레이아웃, 이미지 생성, 심지어 영상까지 하나의 작업 공간에서 다룹니다.
• 디자인 시스템과 스킬로 이루어진 깊이 있는 라이브러리가 기본 내장되어 있어, 빈 캔버스에서 시작하지 않아도 됩니다.

Claude Design을 써 봤다면 분위기가 곧바로 익숙하게 느껴질 겁니다 — Open Design은 의도적으로 동일한 차분한 미감을 유지하면서, 그 위에 기능을 더했습니다.

시작하기 전에

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

방법	이런 분에게	요구 사항
데스크톱 앱	대부분의 사용자 — 설정 없음	없음. 그냥 내려받아 열면 됩니다.
소스에서 실행	코드를 읽거나 수정하고 싶은 개발자	Node ~24, pnpm 10.33.x
에이전트에 설치	터미널에서 사는 사람	기존 코딩 에이전트 CLI

영상에서는 소스에서 실행하는 방법을 쓰지만, 오늘날 권장 경로는 데스크톱 앱입니다 — Node도, pnpm도, 복제도 필요 없습니다.

1단계 — Open Design 설치

방법 A — 데스크톱 앱 (권장, 설정 없음)

open-design.ai로 가서 Download desktop을 클릭하세요. macOS(Apple Silicon 및 Intel), Windows(x64), Linux(AppImage)용 빌드를 제공합니다. 설치한 뒤 앱은 PATH에 이미 있는 모든 코딩 에이전트 CLI를 자동으로 감지하고, 내장된 스킬과 디자인 시스템을 알아서 불러옵니다.

방법 B — 소스에서 실행

Dennis가 영상에서 하듯 저장소에서 직접 실행하고 싶다면, 다음 세 가지 명령만 있으면 됩니다:

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 서버로 호출하려면 — 다음을 실행하세요:

curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

그런 다음 에이전트 안에서 이렇게 요청하기만 하면 됩니다: Use open-design to generate a landing page with the Linear design system.

2단계 — 첫 실행: 코딩 에이전트 연결

Open Design을 처음 실행하면 컴퓨터를 스캔해 찾아낸 모든 로컬 CLI를 보여 줍니다 — Claude Code, OpenCode, Copilot CLI 등이죠. 바로 "에이전트를 직접 가져오는" 단계입니다.

• 기본 에이전트와 모델을 고르세요. 설치된 CLI가 생성을 주도하게 하거나, 이 프로젝트에 한해 특정 모델(예: Claude Opus)을 강제 지정할 수 있습니다.
• 미디어 제공자를 추가하세요 (선택). 이미지, 영상, 오디오를 생성하고 싶으신가요? OpenAI(gpt-image), MiniMax, ElevenLabs, fal, Suno 같은 제공자의 API 키를 직접 추가하세요. 키를 직접 가져오는 부분이 바로 여기입니다.
• MCP 서비스를 연결하세요 (선택). 에이전트가 다른 소스에서 데이터를 가져오게 하려면 Composio 같은 커넥터를 연결하세요.
• 스킬과 디자인 시스템을 켜고 끄세요. 프로토타입, 슬라이드 덱, 모바일 앱, 회의록 등 지금 하려는 작업에 필요한 기능만 활성화하세요.

이 설정들은 나중에 모두 바꿀 수 있으니, 첫 시도에서는 단순하게 가세요.

3단계 — 작업 공간 둘러보기

Open Design은 작업을 프로젝트 단위로 관리합니다: 특정 폴더를 대상으로 실행하면, 만든 디자인은 그 프로젝트 디렉터리 안에 살아 있습니다. 폴더를 바꾸면 프로젝트가 바뀌는 거죠.

프로젝트 안에서는 프로토타입, 라이브 아티팩트, 슬라이드 덱, 애니메이션을 만들 수 있습니다. 프로토타입의 경우 두 가지 정밀도 중에서 고릅니다:

• 와이어프레임 — 가장 기본적인 구조: 상자와 도형으로 레이아웃을 빠르게 잡아 둡니다.
• 고해상도 — 만들고 있는 페이지의 완전한, 스타일까지 입혀진 프로토타입입니다.

Claude Design과의 핵심 차이 하나: 디자인 시스템을 먼저 정의하도록 강요받지 않습니다. Open Design은 합리적인 기본값과 출발점 갤러리를 제공하므로, 기존 디자인 시스템에서 시작할 수도 — 혹은 아무것도 없이 시작할 수도 — 있습니다.

디자인 시스템 라이브러리: 어떤 프로젝트에도 끼워 넣을 수 있는 실제 브랜드 출발점들(Agentic, Airbnb, Airtable 등).

마켓플레이스는 브랜드 시스템을 훨씬 넘어섭니다. 템플릿 라이브러리는 프로토타입, 슬라이드, 그리고 이미지와 영상 생성까지 아우릅니다 — 유형별로 필터링하고 마음에 드는 것을 포크해 출발점으로 삼으세요.

템플릿: 프로토타입, 슬라이드, 이미지, 영상 출발점 — 유형별로 필터링하고 포크해서 시작하세요.

무언가를 설치하기 전에 open-design.ai/plugins에서 전체 플러그인 라이브러리를 웹으로 둘러볼 수 있습니다.

4단계 — 첫 프로토타입 만들기

이제 재미있는 부분입니다. 영상에서 Dennis는 기존 Claude Design 프로젝트를 가져와 Open Design에 새 페이지를 만들어 달라고 요청합니다. 같은 흐름을 따라가 보겠습니다:

1. 새 프로토타입을 만듭니다. 이름을 붙이고(Dennis는 "Expensely"라고 부릅니다) 고해상도를 선택합니다.
2. 디자인 시스템을 가져옵니다. Open Design은 기존 Claude Design ZIP을 가져올 수 있어, 토큰과 컴포넌트가 그대로 넘어옵니다. 가져온 디자인 파일은 라이브 미리 보기와 함께 작업 공간에 나타납니다.
3. 요청서를 작성합니다. Dennis는 "이전 3개월을 바탕으로 12개월간의 지출을 예측하는 새 페이지를 만들어 달라"고 프롬프트를 입력합니다. 익숙한 분할 레이아웃이 나타나죠: 왼쪽에는 대화, 오른쪽에는 미리 보기와 디자인 파일.
4. 확인 질문에 답합니다. 에이전트가 몇 가지 영리한 후속 질문을 던집니다 — 같은 색상인가요? 어떤 정밀도로? 단순한 3개월 평균인가요? — 그런 다음 할 일 목록을 계획하고, 디자인 시스템을 읽고, 아티팩트(projections-v2.html)를 만들어 냅니다.
5. 디자인을 다듬습니다. 첫 결과가 마음에 들지 않나요? 다른 방향을 요청하세요. Dennis는 "다른 분위기와 느낌"을 요청하고 에디토리얼 방향을 골라, 같은 데이터와 디자인 시스템에서 만들어졌지만 진짜로 다른 디자인인 새로운 projections-v3를 얻습니다.

결과물은 실제로 작동하는 인터랙티브 프로토타입입니다: 차트와 페이지를 클릭해 둘러보고, 내보내거나 넘겨주세요 — 모두 가져온 디자인 시스템에서 만들어진 것입니다.

더 잘 활용하는 팁

• 실제 결과물을 보고 싶을 때는 고해상도로 시작하세요; 구조를 빠르게 잡으려면 와이어프레임을 쓰세요.
• 디자인은 프로젝트 폴더와 함께 머뭅니다 — 알맞은 디렉터리를 대상으로 Open Design을 실행해 작업을 정리하세요.
• 실제로 쓰는 제공자에 대해서만 미디어 키를 직접 가져오세요; 전부 다 필요한 건 아닙니다.
• 시작하는 데 디자인 시스템이 꼭 필요한 건 아닙니다. 내장된 것에서 시작하거나, Claude Design ZIP을 가져오거나, Open Design이 기본값을 추론하도록 맡기세요.

자주 묻는 질문

Open Design은 무료인가요?
네 — Apache-2.0 라이선스의 오픈소스입니다. 로컬에서 무료로 실행할 수 있고, 연결한 에이전트와 미디어 제공자의 모델/API 사용량에 대해서만 비용을 냅니다.

어떤 코딩 에이전트를 지원하나요?
Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode를 포함해 21개 이상의 에이전트를 지원합니다. Open Design은 컴퓨터에 이미 설치된 CLI를 감지합니다.

디자인을 시작하려면 먼저 디자인 시스템을 만들어야 하나요?
아니요. Claude Design과 달리 Open Design은 바로 쓸 수 있는 기본값과 출발점 갤러리를 제공합니다. 원할 때 디자인 시스템을 직접 가져오면 됩니다.

Claude Design과는 어떻게 다른가요?
익숙한 느낌은 같지만, 오픈소스이고 로컬 우선이며 에이전트 플러그형입니다 — 게다가 슬라이드 덱, 매거진 레이아웃, 이미지 생성, 영상 같은 추가 기능까지 더해졌습니다.

---

이 글로 된 가이드는 CodingMenace의 첫인상 진행 과정을 바탕으로 작성했습니다. 위의 전체 영상을 시청하고, 더 많은 실전 AI 도구 영상을 위해 CodingMenace를 구독하세요.