UX 디자인 / Open Design

Open Design AI란? 오픈소스 AI 디자인 도구 설치·활용법과 주요 특징

Open DesignOpen Design AIAI 디자인오픈소스DESIGN.mdMCPCodexClaude Code프로토타이핑

AI를 이용해 웹사이트나 UI를 만드는 방식이 빠르게 변화하고 있습니다. 과거에는 Figma에서 화면을 직접 그리고 개발자가 이를 다시 HTML, CSS, React 코드로 옮기는 과정이 일반적이었다면, 최근에는 자연어로 원하는 결과를 설명하면 AI가 실제 실행 가능한 디자인 결과물을 만들어주는 AI 기반 디자인 워크플로우가 등장하고 있습니다.

그중 개발자 입장에서 특히 주목할 만한 프로젝트가 Open Design, 흔히 Open Design AI 또는 OpenDesign이라고 불리는 오픈소스 프로젝트입니다. 공식 문서에서도 Open Design, OpenDesign, open-design, Open Design AI라는 명칭이 모두 같은 프로젝트를 가리킨다고 설명합니다.

이번 글에서는 Open Design AI가 무엇인지부터 주요 특징, 설치 방법, 실제 활용 방법, 그리고 어떤 사용자에게 적합한지까지 살펴보겠습니다.

Open Design AI란?

Open Design AI는 한마디로 설명하면 코딩 에이전트를 디자인 에이전트로 사용할 수 있게 만들어주는 오픈소스 디자인 워크스페이스입니다.

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot 등의 AI 코딩 도구를 연결하고 사용자가 자연어로 요구사항을 전달하면 웹 프로토타입, 랜딩 페이지, 대시보드, 프레젠테이션, 이미지, 영상 등의 결과물을 생성할 수 있습니다. 결과는 단순한 이미지 시안이 아니라 HTML/CSS 등의 실제 파일 형태로 생성할 수도 있다는 점이 중요합니다.

Open Design 측에서는 이를 Agent-native vibe design workspace라고 표현합니다.

즉,

사용자가 직접 모든 픽셀을 배치하는 대신 디자인 의도를 설명하고, AI 에이전트가 실제 디자인 결과물을 생성하고 수정하는 방식

이라고 이해하면 쉽습니다.

일반적인 AI 디자인 도구와 무엇이 다른가?

ChatGPT나 Claude에게 다음과 같이 요청하는 것만으로도 HTML 코드를 만들 수 있습니다.

SaaS 서비스를 소개하는 랜딩 페이지를 만들어줘.

하지만 일반적인 AI 채팅 환경에서는 AI가 코드를 작성한 다음 사용자가 직접 파일을 만들고 브라우저에서 실행하고, 문제가 있으면 다시 코드를 전달해 수정하는 과정이 반복됩니다.

Open Design은 이 과정을 하나의 디자인 워크플로우 안에 연결하는 것을 목표로 합니다.

Open Design에서는 대략 다음과 같은 흐름을 사용할 수 있습니다.

아이디어
↓
디자인 방향 결정
↓
Design System 적용
↓
AI Agent가 결과물 생성
↓
실시간 Preview
↓
수정
↓
HTML / PDF / PPTX / MP4 등으로 활용

공식 프로젝트가 제시하는 기본 흐름 역시 Brief → Direction → Design System → Artifact → Handoff와 같은 구조를 사용합니다. 생성된 HTML/CSS 결과물을 Cursor, Codex, Claude Code 등의 개발 환경으로 넘겨 계속 구현할 수도 있습니다.

따라서 Open Design은 단순한 AI 이미지 생성 서비스라기보다 디자인과 개발 사이의 작업 환경에 더 가깝습니다.

Open Design AI의 주요 특징

1. 오픈소스

Open Design의 가장 큰 특징 중 하나는 오픈소스 프로젝트라는 점입니다.

프로젝트 코드는 GitHub에 공개되어 있으며 현재 Apache-2.0 라이선스를 사용하고 있습니다. 따라서 소스 코드를 확인하거나 직접 수정하고, 자체 환경에 맞게 확장하는 것도 가능합니다.

특정 SaaS 서비스에 모든 디자인 데이터를 저장해야 하는 구조보다 개발자에게 훨씬 높은 자유도를 제공합니다.

2. Local-first 구조

Open Design은 기본적으로 Local-first 방식을 지향합니다.

Desktop App, daemon, skill runtime 등이 사용자 컴퓨터에서 동작하며 생성된 결과물 역시 프로젝트 디렉터리에 파일로 저장됩니다.

웹 서비스 안에 디자인 프로젝트가 종속되는 방식과 비교하면 상당한 차이가 있습니다.

예를 들어 생성된 프로젝트가 다음과 같은 실제 파일로 존재할 수 있습니다.

project/
├── index.html
├── styles.css
├── components/
├── assets/
└── DESIGN.md

이 파일들은 이후 Git으로 관리하거나 다른 개발 프로젝트로 이동하는 것도 가능합니다.

단, Local-first가 모든 데이터가 절대로 외부로 전송되지 않는다는 의미는 아닙니다.

Claude, OpenAI, Google 등의 외부 AI 모델을 BYOK 방식으로 사용하면 프롬프트와 모델 실행에 필요한 컨텍스트는 해당 AI 제공업체로 전달됩니다. Open Design 공식 FAQ 역시 이 점을 명확히 설명하고 있습니다.

따라서 기업 내부 프로젝트에서 사용한다면 사용하는 AI 공급자의 데이터 정책까지 함께 확인하는 것이 필요합니다.

3. 다양한 AI Coding Agent 지원

Open Design의 핵심은 특정 AI 모델 하나에 종속되는 대신, 이미 사용하고 있는 코딩 에이전트를 디자인 엔진처럼 연결하는 방식입니다. 자체 모델 서비스인 Open Design Cloud를 선택할 수도 있고, BYOK 방식으로 기존 공급자나 OpenAI 호환 Endpoint를 연결할 수도 있습니다.

공식 문서에서는 Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot CLI, OpenCode 등 다양한 에이전트와 CLI 환경을 지원한다고 안내하고 있습니다.

즉 사용자는 특정 AI 모델 하나에 종속되지 않고 자신의 개발 환경에 맞는 에이전트를 선택할 수 있습니다.

예를 들어 평소 Codex를 사용한다면 Open Design과 Codex를 연결해 사용할 수 있습니다.

4. DESIGN.md 기반 디자인 시스템

Open Design에서 상당히 흥미로운 부분이 바로 DESIGN.md입니다.

DESIGN.md는 해당 프로젝트에서 사용할 디자인 규칙을 AI가 이해할 수 있도록 정의하는 일종의 브랜드 계약서 또는 디자인 시스템 명세 역할을 합니다.

예를 들어 다음과 같은 규칙을 포함할 수 있습니다.

# Brand Design System

## Typography
- Heading: Inter
- Body: Inter

## Colors
- Primary: #111111
- Background: #FFFFFF
- Accent: #635BFF

## Radius
- Buttons: 8px
- Cards: 16px

## Layout
- Maximum width: 1200px
- Section spacing: 120px

Open Design은 이 디자인 시스템을 읽어 이후 생성되는 UI에 같은 스타일을 지속적으로 적용할 수 있습니다.

프로젝트에는 다양한 DESIGN.md 기반 디자인 시스템 패키지가 포함되어 있으며, 사용자가 자신의 디자인 시스템을 추가할 수도 있습니다.

AI 디자인에서 자주 발생하는 문제 중 하나가 화면을 생성할 때마다 디자인 스타일이 달라지는 현상인데, DESIGN.md는 이런 문제를 줄이는 데 중요한 역할을 합니다.

5. 실제 HTML 기반 프로토타입 생성

많은 AI 이미지 도구는 결과물을 PNG 또는 JPG 이미지로 제공합니다.

하지만 Open Design의 Prototype 기능은 실제 HTML 기반 결과물을 생성하고 sandboxed iframe에서 즉시 확인할 수 있도록 설계되어 있습니다.

따라서 단순한 목업이 아니라 실제 브라우저에서 동작하는 화면을 만들 수 있습니다.

예를 들어 다음과 같은 요청이 가능합니다.

Create a SaaS dashboard for a railway ticket reservation system.

Include:
- reservation statistics
- daily sales
- cancellation rate
- popular routes
- sidebar navigation

Use a clean enterprise design.

AI가 이에 맞는 화면을 생성하면 Preview에서 확인하고 다시 자연어로 수정할 수 있습니다.

Make the sidebar narrower.

Increase the visual hierarchy of the sales KPI.

Change the dashboard cards to a more minimal style.

이런 식으로 Prompt → Preview → 수정의 반복 작업이 가능해집니다.

Open Design으로 만들 수 있는 것

Open Design은 웹 페이지 생성에만 한정된 도구는 아닙니다.

공식 프로젝트에서 지원하거나 제시하는 대표적인 Artifact 유형은 다음과 같습니다.

Web Prototype

랜딩 페이지나 서비스 화면을 만들 수 있습니다.

Create a modern landing page for an AI developer tool.

Dashboard

관리자 페이지나 데이터 분석 화면을 만들 수 있습니다.

Create an analytics dashboard for an e-commerce service.

Mobile UI

모바일 앱 화면이나 온보딩 화면 등의 프로토타입을 만들 수 있습니다. 관련 모바일 앱 및 온보딩 템플릿도 프로젝트에 포함되어 있습니다.

Presentation

Pitch Deck이나 서비스 소개 자료와 같은 프레젠테이션을 생성하고 PPTX 또는 PDF 형태로 활용할 수 있습니다.

Image

브랜드에 맞는 이미지나 디자인 Asset을 생성하는 워크플로우도 제공합니다.

Video

HyperFrames를 이용한 HTML 기반 Motion Graphics 생성 기능도 지원합니다. Open Design은 HTML/CSS/GSAP 기반 Motion Graphics를 MP4로 렌더링하는 워크플로우를 프로젝트에 통합하고 있습니다.

Open Design AI 설치 방법

Open Design을 처음 사용하는 경우 가장 쉬운 방법은 Desktop App을 설치하는 것입니다.

공식 프로젝트에서는 macOS와 Windows용 Desktop App을 제공하며 Linux의 경우 별도 AppImage 배포 경로도 안내하고 있습니다. Desktop App 방식은 Node.js나 pnpm을 직접 설치하고 프로젝트를 clone할 필요가 없어 가장 간단한 시작 방법입니다.

1. Desktop App 설치

Open Design 공식 사이트의 Download 메뉴 또는 GitHub Releases에서 자신의 운영체제에 맞는 버전을 설치합니다.

설치 후 실행하면 Open Design이 시스템의 PATH에서 사용할 수 있는 Coding Agent CLI를 탐색합니다.

예를 들어 이미 다음 도구를 사용하고 있다면 연결할 수 있습니다.

Claude Code
Codex
Cursor
Gemini CLI
GitHub Copilot
OpenCode
...

Codex와 Open Design 연결하기

GUI 없이 MCP 방식으로 Coding Agent와 연결하는 것도 가능합니다.

기본 명령 구조는 다음과 같습니다.

od mcp install <agent>

Codex라면 다음과 같이 사용할 수 있습니다.

od mcp install codex

Claude Code의 경우에는 다음과 같은 형태가 됩니다.

od mcp install claude

연결이 끝난 후 해당 Coding Agent에서 Open Design을 호출해 디자인 생성을 요청할 수 있습니다. 공식 README에서도 디자인 시스템을 지정한 랜딩 페이지 생성과 같은 사용 예제를 제공합니다.

macOS에서는 한 가지 주의할 점이 있습니다.

macOS 자체에도 /usr/bin/od라는 이름의 시스템 명령어가 있기 때문에 Open Design의 od와 충돌할 수 있습니다. Desktop App으로 설치한 경우에는 Open Design의 Settings → MCP server에서 제공하는 설정 스니펫을 사용하는 방법이 권장됩니다.

실제 활용 예제: SaaS 랜딩 페이지 만들기

예를 들어 개발자를 위한 새로운 SaaS 서비스를 만든다고 가정해 보겠습니다.

Open Design에서 다음과 같이 요청할 수 있습니다.

Create a landing page for a developer SaaS product.

Target users:
Frontend developers

Sections:
- Hero
- Product demo
- Features
- Pricing
- FAQ
- CTA

Style:
Minimal and modern.
Use strong typography and generous whitespace.

첫 번째 결과가 나오면 다시 수정 요청을 합니다.

The hero section feels too generic.

Make the headline larger and reduce unnecessary decorations.
Add a product screenshot on the right side.

이후 모바일 대응을 요청할 수도 있습니다.

Optimize the entire page for mobile devices.

Use a single-column layout below 768px.

마지막으로 개발 프로젝트에 바로 사용할 수 있도록 요청할 수 있습니다.

Prepare the result so I can continue developing it in React.

Open Design의 장점은 이러한 과정에서 결과물이 단순한 채팅 답변으로 끝나는 것이 아니라 실제 프로젝트 파일 및 Artifact를 중심으로 작업하도록 설계되어 있다는 점입니다.

기존 사이트를 참고해 디자인 시스템 만들기

Open Design에서 특히 활용도가 높은 기능 중 하나는 기존 디자인을 DESIGN.md로 구조화하는 워크플로우입니다.

공식 FAQ에서는 Screenshot이나 Figma export 등을 입력하고 에이전트에게 브랜드 스타일을 추출하도록 요청한 뒤 이를 DESIGN.md로 저장하는 방식을 안내합니다.

예를 들어 다음과 같이 요청할 수 있습니다.

Analyze this design and create a DESIGN.md.

Extract:
- colors
- typography
- spacing
- border radius
- buttons
- cards
- layout rules

이후 생성된 DESIGN.md를 프로젝트의 디자인 시스템으로 사용합니다.

그러면 다음 화면을 만들 때도 같은 디자인 규칙을 활용할 수 있습니다.

Using this DESIGN.md, create a dashboard page.

프로젝트 규모가 커질수록 이런 방식이 단발성 Prompt보다 훨씬 효율적입니다.

프런트엔드 개발자에게 Open Design이 흥미로운 이유

Open Design은 특히 프런트엔드 개발자가 활용하기 좋은 구조를 가지고 있습니다.

첫 번째 이유는 결과물이 Code에 가깝기 때문입니다.

Figma에서 디자인을 받고 다시 HTML/CSS로 옮기는 전통적인 과정과 달리 처음부터 실제 HTML/CSS 기반 Artifact를 생성하고 이를 Coding Agent와 연결할 수 있습니다.

두 번째는 기존 Repository를 기반으로 작업할 수 있다는 것입니다.

공식 프로젝트는 Git repository와 DESIGN.md를 이용해 기존 컴포넌트를 브랜드 규칙에 맞게 수정하는 워크플로우와 React, Next.js, Vue 등의 코드 마이그레이션 관련 Plugin도 제공하고 있습니다.

따라서 Open Design의 궁극적인 활용 방향은 단순히

AI → 예쁜 화면

이 아니라 다음과 같은 형태에 가깝습니다.

Requirement
↓
AI Design
↓
Design System
↓
Prototype
↓
Code
↓
Coding Agent
↓
Production

이 점 때문에 기존 이미지 중심 AI 디자인 도구와 성격이 상당히 다릅니다.

Open Design AI의 장점

Open Design을 정리해 보면 다음과 같은 장점이 있습니다.

오픈소스

소스 코드를 직접 확인하고 수정하거나 자체 환경에서 활용할 수 있습니다.

Local-first

생성 결과물이 로컬 프로젝트의 실제 파일로 남기 때문에 특정 웹 플랫폼에 종속될 가능성이 상대적으로 낮습니다.

특정 AI 모델에 종속되지 않음

Claude Code, Codex, Cursor, Gemini CLI 등 다양한 Coding Agent를 선택할 수 있습니다.

개발 워크플로우와 연결하기 쉬움

HTML/CSS 기반 Artifact 및 MCP를 통해 Coding Agent가 현재 프로젝트 파일을 직접 다룰 수 있도록 설계되어 있습니다.

디자인 시스템 재사용

DESIGN.md를 통해 브랜드의 디자인 규칙을 반복적으로 사용할 수 있습니다.

다양한 결과물 생성

웹 프로토타입뿐 아니라 Deck, Image, Video 등의 워크플로우도 제공합니다.

단점과 주의할 점

물론 Open Design이 모든 사용자에게 적합한 것은 아닙니다.

완전한 No-code 서비스는 아니다

Desktop App으로 진입 장벽이 낮아졌지만 Open Design의 구조를 제대로 활용하려면 Coding Agent, CLI, MCP, Git 등의 개념을 어느 정도 알고 있는 편이 좋습니다.

따라서 Canva처럼 가입 후 바로 디자인하는 서비스를 기대한다면 상대적으로 어렵게 느껴질 수 있습니다.

AI 사용 비용은 별도일 수 있다

Open Design의 오픈소스 소프트웨어는 Apache-2.0 라이선스로 무료로 사용할 수 있습니다. 다만 BYOK 방식으로 OpenAI, Anthropic, Google 등의 모델을 연결하면 해당 공급자의 사용 비용이 별도로 발생합니다. 설정을 단순화하기 위해 선택형 Open Design Cloud를 사용할 경우에도 모델 사용량에 따른 비용이 부과될 수 있습니다.

즉,

Open Design 오픈소스 앱 = 무료

BYOK Model/API = 사용하는 Provider 정책에 따라 과금

Open Design Cloud = 선택형 모델 서비스, 사용량에 따라 과금

으로 구분해 이해하는 것이 정확합니다.

결과물의 완성도는 AI 모델과 입력 품질에 영향을 받는다

Open Design이 디자인 워크플로우를 자동화한다고 해서 항상 완벽한 UI가 자동으로 만들어지는 것은 아닙니다.

실제 프로젝트에서는 다음 요소가 여전히 중요합니다.

  • 명확한 요구사항
  • 적절한 Design System
  • 좋은 Reference
  • 정확한 Prompt
  • 결과물 검수
  • 반응형 테스트
  • 접근성 검토
  • 실제 개발 환경에서의 코드 검증

결국 Open Design은 디자이너나 개발자를 완전히 대체하는 도구라기보다 AI가 디자인과 구현 과정에 직접 참여할 수 있도록 작업 구조를 만들어주는 도구에 가깝습니다.

어떤 사람에게 적합할까?

Open Design은 특히 다음 사용자에게 흥미로운 도구입니다.

프런트엔드 개발자

디자인 시안을 빠르게 만들고 실제 코드 작업으로 연결하고 싶은 경우 활용도가 높습니다.

1인 개발자

별도의 디자이너 없이 MVP나 서비스 Prototype을 빠르게 만들 때 유용합니다.

스타트업

Landing Page, Dashboard, Pitch Deck 등의 초기 결과물을 빠르게 제작하는 데 활용할 수 있습니다.

AI Coding Agent를 적극적으로 사용하는 개발자

Claude Code, Codex, Cursor 등을 이미 사용하고 있다면 기존 개발 환경에 Open Design을 추가해 디자인 영역까지 워크플로우를 확장할 수 있습니다.

자체 디자인 시스템을 운영하는 팀

DESIGN.md를 이용해 브랜드 규칙을 AI가 읽을 수 있는 형태로 관리한다는 접근법은 반복적인 AI 디자인 작업에서 특히 의미가 있습니다.

마치며

Open Design AI에서 주목해야 할 부분은 단순히 **“AI가 예쁜 웹사이트를 만들어준다”**는 것이 아닙니다.

더 중요한 변화는 디자인 자체가 AI Agent가 읽고 수정할 수 있는 파일과 규칙으로 바뀌고 있다는 점입니다.

기존의 디자인 프로세스가

기획
→ Figma
→ 디자인 전달
→ Frontend 구현

이었다면 Open Design이 지향하는 방식은 점차 다음과 가까워지고 있습니다.

기획
→ Design System
→ AI Agent
→ 실행 가능한 Prototype
→ Coding Agent
→ 실제 서비스

특히 DESIGN.md, MCP, Coding Agent, 실제 HTML 기반 Artifact라는 요소를 결합한 접근은 프런트엔드 개발자에게 상당히 흥미로운 부분입니다. Open Design은 Desktop App뿐 아니라 CLI와 MCP를 통해 개발 환경과 직접 연결되는 구조를 제공하고 있습니다.

AI 디자인 도구가 단순히 시안을 만들어주는 단계를 넘어 디자인과 코드를 하나의 Agent Workflow로 연결하는 방향으로 발전하고 있다는 점에서 Open Design은 살펴볼 가치가 있는 오픈소스 프로젝트입니다.

이 글의 제품 정보는 2026년 8월 13일 기준 Open Design 공식 사이트와 공식 GitHub 저장소를 기준으로 작성했습니다. 프로젝트가 빠르게 개발되고 있으므로 지원 Agent, Plugin, Template 및 기능 구성은 이후 변경될 수 있습니다.

Related