Open Design 딥다이브 — Claude Design의 오픈소스 대안, "내 노트북에 살고 있는 디자이너"

2026년 4월, Anthropic이 Claude Design을 공개했다. LLM이 산문을 그만 쓰고 "디자인 산출물(artifact)"을 만들기 시작한 순간이었다. 입소문은 났지만 클로즈드 소스 · 유료 · 클라우드 전용 · Anthropic 모델 락인. Open Design (OD)은 그 정확한 자물쇠를 푼다. 에이전트를 직접 만들지 않는다 — 당신의 노트북에 이미 있는 24개 코딩 에이전트 CLI(Claude Code · Codex · Gemini · Cursor Agent · Pi · DeepSeek TUI…)를 PATH에서 자동 감지해서, 155+ Skill과 142+ Design System으로 묶어 로컬 데몬에 꽂는다. 결과는 Anthropic이 막 둔 그 자리, 그대로다. 단지 모두 당신 것이다.

0먼저, "디자인 에이전트 플랫폼"이 뭐길래

대화창 한쪽에 "디자이너"가 살고 있고, 당신은 그냥 브리프만 던진다.

1한 줄 요약

한국어 한 문장으로 끝내본다.

Open Design은 로컬 데몬 + Next.js 16 + SQLite로 구동되는 Apache-2.0 라이선스의 오픈소스 디자인 에이전트 플랫폼으로, 사용자 PATH에 이미 깔린 24개 코딩 에이전트 CLI를 자동 감지해서 그중 하나를 "디자인 엔진"으로 삼아 — 155+ Skill 파일과 142+ Design System Markdown을 조합해 매거진 피치덱 · SaaS 랜딩페이지 · 모바일 앱 목업 · PM 스펙 문서 · 인보이스 등 다채로운 산출물을 30초 안에 sandboxed iframe으로 뽑아내고, HTML / PDF / PPTX / ZIP / Markdown으로 내려받게 해주는 "내 노트북에 살고 있는 시니어 디자이너 시뮬레이터"다.

2왜 지금 주목받는가

"오픈소스 Claude Design"이라는 단어 자체가 6개월간 비어 있었다.

2026년 4월 17일, Anthropic이 Claude Design (Opus 4.7)을 공개했을 때 디자인 커뮤니티는 진동했다. LLM이 "디자인을 흉내내는" 단계를 넘어, 진짜 시니어 디자이너처럼 브리프 → 방향 결정 → 산출물 → 자기 비평의 풀 사이클을 돌렸기 때문이다. 트위터/X에는 한 달 내내 "Claude Design으로 만든 ___" 스레드가 도배됐다.

그런데 문제: 전부 닫혀 있다. 모델, 스킬, 호스팅, 결제 — 어느 레이어도 만질 수 없다. 셀프 호스팅 옵션 없음, Vercel 배포 옵션 없음, API 키 가져오기 옵션 없음. "닫힌 채로 우리가 만든 최고를 써라"는 자세다.

여기에 OD가 더 흥미로워지는 결정적 포인트가 있다 — "우리는 에이전트를 만들지 않는다". 이미 당신 노트북에 살고 있는 가장 강력한 에이전트들(Claude Code · Codex CLI · Gemini CLI · Cursor Agent · Pi · DeepSeek 등)을 PATH에서 스캔해 그중 하나를 디자인 엔진으로 채택한다. 모델 피커에서 원클릭 교체. 24개 CLI 어댑터가 stdio로 각 CLI와 통신하며, ACP(Agent Client Protocol) / RPC / claude-stream-json / plain 등 다양한 프로토콜을 표준화한다.

3기술 스택 전체 지도

웹 · 데몬 · 에이전트 전송 · 저장 · 미리보기 · 익스포트 — 6개 레이어로 갈라본다.

3-1. 프론트엔드

3-2. 데몬 (로컬 백엔드)

3-3. 에이전트 전송 (24개 CLI 어댑터)

3-4. 미리보기 · 익스포트 · 라이프사이클

• Preview: Sandboxed iframe (srcdoc 속성으로 HTML 주입). 클린한 격리 환경에서 렌더 — 부모 페이지 DOM/JS와 차단
• Export: HTML (inline assets) · PDF (브라우저 print, 덱 모드 자각) · PPTX (에이전트가 스킬로 만들어줌) · ZIP (archiver) · Markdown
• Lifecycle: pnpm tools-dev start | stop | run | status | logs | inspect | check 한 진입점으로 데몬 + 웹(+ 데스크탑) 통합 관리
• Desktop (선택): Electron + sidecar IPC. STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN 채널로 E2E 테스트 자동화 가능
• Sidecar IPC: /tmp/open-design/ipc/<ns>/<app>.sock — 데스크탑 앱과 웹 앱이 포트 추측 없이 통신

4아키텍처 심화 — 사용자 → 데몬 → CLI까지

"내가 채팅창에 한 줄 던졌을 때 노트북에서 무슨 일이 벌어지나"의 전체 흐름.

┌────────────────────── 브라우저 (Next.js 16) ──────────────────────┐
│  채팅 · 파일 워크스페이스 · iframe 미리보기 · 설정 · 임포트         │
└──────────────┬───────────────────────────────────┬────────────────┘
               │ /api/* (개발 시 rewrite)            │
               ▼                                    ▼
   ┌──────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  로컬 데몬 (Express + SQLite)     │   ─→ 모든 OpenAI 호환 엔드포인트
   │                                  │       (BYOK + SSRF blocking)
   │  /api/agents       /api/skills   │
   │  /api/design-systems  /api/projects/…
   │  /api/chat (SSE)   /api/proxy/{provider}/stream (SSE)
   │  /api/templates    /api/import/claude-design
   │  /api/artifacts/save  /api/artifacts/lint
   │  /api/upload       /api/projects/:id/files…
   │  /artifacts (static)  /frames (static)
   │
   │  옵션: sidecar IPC at /tmp/open-design/ipc/<ns>/<app>.sock
   │  (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
   └─────────┬────────────────────────┘
             │ spawn(cli, [...], { cwd: .od/projects/<id> })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · devin (ACP) · gemini · opencode · cursor-agent │
   │  qwen · qoder · copilot · hermes (ACP) · kimi (json-event-stream) · pi (RPC)   │
   │  · kiro (ACP) · kilo (ACP) · vibe (ACP) · deepseek               │
   │  SKILL.md + DESIGN.md를 Read → 아티팩트를 디스크에 Write          │
   └──────────────────────────────────────────────────────────────────┘

핵심은 "데몬이 에이전트의 cwd를 프로젝트 폴더로 고정한다"는 점이다. 에이전트는 spawn될 때 cwd: .od/projects/<id>/를 받는다. 그 결과:

• 에이전트가 Read를 호출하면 → 그 프로젝트의 스킬 템플릿(assets/template.html)을 진짜로 읽는다
• grep을 호출하면 → 그 프로젝트의 브랜드 색상 hex를 진짜로 찾는다
• Write로 brand-spec.md를 만들면 → 진짜 파일이 디스크에 생긴다
• Bash로 PDF 변환 명령을 돌리면 → 진짜 PDF가 생성된다

즉, 에이전트는 "디스크가 있다고 가정한 시니어 디자이너"로 작동한다. 가짜 환경에서 흉내내는 게 아니라, 진짜 파일시스템을 다룬다. 결과물은 자연스럽게 폴더에 쌓이고, 워크스페이스 UI에 "다운로드 칩"으로 뜬다. 내일 다시 열어도 todo 카드와 열려있던 파일들이 그대로다 (SQLite가 다 기억하고 있다).

핵심 설계 패턴 — "Prompt Stack as Product"

OD의 6번째 핵심 아이디어: "프롬프트 스택 자체가 제품"이다. 채팅창에 한 줄 입력해도, 데몬이 LLM에 보내는 진짜 프롬프트는 이렇게 조립된다:

DISCOVERY directives  (turn-1 폼, turn-2 브랜드 브랜치, TodoWrite, 5차원 비평)
  + identity charter   (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
  + active DESIGN.md   (142+ 시스템 중 선택 — Linear / Stripe / Vercel / Notion …)
  + active SKILL.md    (155+ 스킬 중 선택 — saas-landing / dashboard / mobile-app …)
  + project metadata   (kind, fidelity, speakerNotes, animations, inspiration ids)
  + skill side files   (auto-injected pre-flight: read assets/template.html + references/*.md)
  + (deck 모드) DECK_FRAMEWORK_DIRECTIVE   (nav / counter / scroll / print)

이 스택의 모든 레이어가 파일이다. apps/daemon/src/prompts/system.ts, apps/daemon/src/prompts/discovery.ts, apps/daemon/src/prompts/directions.ts를 열어서 직접 수정할 수 있다. 즉 "디자인 결과물의 품질"이 모델이 아니라 프롬프트 스택의 디자인에서 나온다는 게 OD의 베팅이다.

5디렉토리 구조 해부

monorepo 구조 — pnpm workspace 기반.

open-design/
├── apps/                    # 메인 애플리케이션
│   ├── daemon/              # 로컬 백엔드 (Express + SQLite + Skill 파서)
│   │   └── src/prompts/     # 시스템 프롬프트 — system.ts / discovery.ts / directions.ts
│   ├── web/                 # Next.js 16 프론트엔드
│   │   └── src/artifacts/   # <artifact> 파서, sandboxed iframe 렌더링
│   └── desktop/             # Electron 데스크탑 (선택)
│
├── packages/                # 공유 패키지 (pnpm workspace)
│
├── skills/                  # 155+ SKILL.md 폴더 (Claude Code 규약 + od:확장)
│   ├── web-prototype/       # 단일 페이지 HTML 랜딩
│   ├── saas-landing/        # 마케팅 레이아웃
│   ├── dashboard/           # 어드민/분석 + 사이드바
│   ├── mobile-app/          # iPhone 15 Pro 프레임 앱 화면
│   ├── deck-guizang-editorial/  # ★ op7418/guizang-ppt-skill verbatim 번들
│   ├── critique/            # 5차원 자기 비평 (Philosophy/Hierarchy/Detail/Function/Innovation)
│   ├── invoice/             # 단일 페이지 인보이스
│   ├── eng-runbook/         # 인시던트 런북
│   └── ... (총 155개+)
│
├── design-systems/          # 142+ 디자인 시스템 (하위 디렉토리 구조)
│   ├── linear/ (DESIGN.md · USAGE.md · design-tokens.json …)
│   └── (VoltAgent/awesome-design-md 70개 + bergside/awesome-design-skills 57개)
│
├── design-templates/        # 디자인 템플릿
│
├── prompt-templates/        # 105개 ready-to-replicate 미디어 프롬프트
│   ├── image/               # 47개 — 이미지 생성 프롬프트
│   └── video/               # 58개 — 동영상 프롬프트
│
├── assets/
│   └── frames/              # 디바이스 프레임 — iPhone 15 Pro, Pixel, iPad Pro, MacBook
│
├── specs/                   # 스펙 문서
├── story/                   # Storybook 컴포넌트 카탈로그
├── e2e/                     # End-to-End 테스트
├── craft/                   # 빌드/패키징 헬퍼
├── deploy/                  # 배포 설정
├── nix/                     # Nix flake (재현 가능 빌드)
├── scripts/                 # 빌드 스크립트
├── tools/                   # 개발 툴 (pnpm tools-dev)
├── docs/                    # 문서 (skills-protocol.md, screenshots/)
│
├── AGENTS.md                # 에이전트용 컨텍스트 (Claude Code 규약)
├── CLAUDE.md                # Claude Code 추가 컨텍스트
├── QUICKSTART.{lang}.md     # 13개 언어 빠른 시작 (한국어 포함)
├── README.{lang}.md         # 14개 언어 README (한국어 포함)
├── flake.nix / flake.lock   # Nix 빌드
├── pnpm-workspace.yaml      # monorepo 정의
└── vercel.json              # Vercel 배포

6학습 포인트 — 기술별 무엇을 배울 수 있나

"OD 코드를 읽으며 배울 수 있는 핵심 패턴" 5가지를 추린다.

6-1. Next.js 16 + Express 데몬 하이브리드

OD는 "풀스택은 Next.js로 다 해결한다"는 통념을 깬다. 프론트엔드는 Next.js 16, 백엔드는 별도 Express 데몬. 왜? 로컬 파일시스템 접근 + child_process.spawn + 장시간 SSE 스트림이 필요한데, Vercel 서버리스에서 이걸 다 하기 힘들기 때문이다. 그래서 OD는 "Vercel에 배포할 수 있는 웹 레이어"와 "노트북에서만 도는 데몬"을 분리했다. 학습 포인트: 어떤 코드는 서버리스에 안 맞는다 — 그땐 분리해라. Tauri / Electron / 로컬 Express 데몬 중 선택할 수 있다.

6-2. 24개 CLI를 1개 인터페이스로 — Adapter 패턴

OD의 진짜 영리한 부분이다. 24개 CLI는 각자 출력 포맷이 다르다: Claude Code는 claude-stream-json, ACP 그룹(Devin/Hermes/Kiro/Kilo)은 acp-json-rpc, Pi는 pi-rpc, Qwen은 plain. OD는 각 CLI당 어댑터 하나씩을 만들고, 모두 같은 delta/end/error 이벤트로 정규화한다. 결과: UI 코드는 "어떤 에이전트인지 몰라도 똑같이 렌더링"한다. 학습 포인트: 다양한 외부 도구를 다룰 때는 항상 어댑터 + 공통 이벤트 스키마 패턴을 떠올려라.

6-3. SSE + SSRF 방어가 들어간 BYOK 프록시

BYOK(Bring Your Own Key)를 구현할 때 가장 흔한 보안 실수가 SSRF(Server-Side Request Forgery)다. 사용자가 baseUrl로 http://169.254.169.254(AWS metadata) 같은 걸 입력하면? OD는 loopback은 허용(Ollama, LM Studio용)하되, link-local · CGNAT · multicast · reserved · redirect targets를 데몬 엣지에서 거부한다. 또 /api/proxy/{anthropic,openai,azure,google}/stream으로 프로바이더별 SSE를 정규화. 학습 포인트: 사용자가 URL을 입력할 수 있는 곳은 모두 SSRF allow-list가 필요하다.

6-4. Sandboxed iframe + srcdoc — 안전한 LLM 출력 렌더링

LLM이 만든 HTML을 그냥 페이지에 innerHTML로 박으면? XSS의 천국이다. OD는 <iframe sandbox srcdoc="...">로 렌더한다 — 같은 origin도 차단, 부모 페이지의 쿠키/localStorage도 보이지 않게. iframe 안에서 자바스크립트가 뭘 하든 격리된다. 학습 포인트: AI가 만든 HTML/JS는 신뢰되지 않는 코드로 다뤄라. sandbox 속성 조합(allow-scripts 만, allow-same-origin 빼고)을 외워둬라.

6-5. SQLite 영속성 + cwd 스위칭으로 "내일 다시 열어도 그대로"

OD의 사용자 경험에서 가장 잔잔하게 좋은 부분이다. .od/app.sqlite 하나에 projects · conversations · messages · tabs · templates를 다 저장. 내일 노트북을 다시 열어도 채팅 히스토리, 열린 탭, todo 상태가 정확히 어제 그대로다. better-sqlite3는 동기 API라서 코드가 깔끔하고, 단일 파일이라 백업도 쉽다. 학습 포인트: 작은 데스크탑/CLI 도구에는 PostgreSQL 같은 큰 DB가 필요 없다. better-sqlite3 + Drizzle ORM 조합이면 충분하다.

7핵심 설계 패턴 — "5단계 디자인 사이클"

OD 한 번의 디자인 산출물을 만들 때 내부에서 돌아가는 5단계 파이프라인.

사용자 입력
   ↓
[1] DISCOVERY: question-form 폼이 뜬다
    surface · audience · tone · brand · scale · constraints
   ↓
[2] DIRECTION: 브랜드 없으면 5 visual school 라디오
    Editorial Monocle | Modern Minimal | Warm Soft | Tech Utility | Brutalist
   ↓
[3] PLAN: TodoWrite로 라이브 todo 카드 스트림
    pending → in_progress → completed (사용자가 중간에 redirect 가능)
   ↓
[4] EXECUTE: 에이전트가 cwd=프로젝트폴더에서
    Read SKILL.md + DESIGN.md → Write artifact.html
   ↓
[5] CRITIQUE: 5차원 자기 비평 (critique 스킬)
    Philosophy · Hierarchy · Detail · Function · Innovation
   ↓
sandboxed iframe에 srcdoc으로 렌더 → 다운로드 칩

8하드웨어 / 시스템 요구사항

"내 노트북에서 굴릴 수 있나?" 체크리스트.

설치 방법 3가지

# 방법 1: 데스크탑 앱 다운로드 (Node, pnpm, 클론 모두 불필요)
# https://open-design.ai/ → 다운로드
# 또는 GitHub Releases에서 .dmg / .exe / .AppImage

# 방법 2: Docker (Node 없이)
docker run -p 7456:7456 -v $(pwd)/.od:/app/.od vanjayak/open-design:latest

# 방법 3: 소스에서 빌드 (개발/커스텀용)
git clone https://github.com/nexu-io/open-design
cd open-design
pnpm install
pnpm tools-dev start    # → 데몬 + 웹 + (선택)데스크탑 모두 부팅
# http://localhost:3000 열기

9직접 해볼 수 있는 실습 과제

난이도 ★~★★★. 각 과제는 OD의 한 가지 핵심을 깊이 파고드는 형태.

10관련 기술 심화 학습 로드맵

"OD를 완전히 이해하고 비슷한 거 만들 수 있는 수준까지" 8주 코스.

1주차 — Next.js 16 App Router + SSE 스트리밍

• App Router의 Server Components vs Client Components 구분
• ReadableStream으로 SSE 응답 만들기 — chunk push, abort signal 처리
• 실습: 채팅 UI에 라이브 스트림 메시지가 흘러내리도록 구현

2주차 — Express + better-sqlite3 데몬

• 왜 Next.js API Routes 대신 별도 Express? — 장시간 SSE, 파일시스템, child_process 이유
• better-sqlite3 동기 API의 장점 — 코드 단순, 한 파일 백업, WAL 모드
• 실습: projects · conversations · messages 3-테이블 스키마 + CRUD API

3주차 — child_process.spawn으로 CLI 통합

• stdout/stderr 스트림 파싱, 줄단위 처리(readline)
• JSON Lines, JSON-RPC, ACP, stream-json 등 출력 포맷의 차이
• Windows ENAMETOOLONG 함정과 stdin/prompt-file fallback
• 실습: 자기가 자주 쓰는 CLI(예: ffmpeg) 하나를 어댑터로 감싸기

4주차 — Sandboxed iframe + srcdoc 렌더링

• <iframe sandbox> 속성 조합 — allow-scripts는 OK, allow-same-origin은 위험
• srcdoc vs src 차이 — Content Security Policy 영향
• 실습: AI 출력 HTML을 안전하게 렌더하는 마이크로 데모 만들기

5주차 — SSRF 방어 + BYOK 프록시

• SSRF 공격 시나리오 (AWS metadata, internal IP, link-local)
• allow-list 기반 호스트 검증 — IPv4/IPv6 모두 커버
• 실습: 사용자가 baseUrl을 입력할 수 있는 프록시 엔드포인트 구현

6주차 — 시스템 프롬프트 엔지니어링

• OD의 6-layer 프롬프트 스택을 직접 읽기: apps/daemon/src/prompts/system.ts
• RULE 1 ~ RULE N 형식의 강제 규칙 — 모델이 어기지 못하게 만드는 기법
• 실습: 자기 도메인용 시스템 프롬프트 6-layer 스택 설계

7주차 — Skill 패턴 (Claude Code 규약 + 확장)

• SKILL.md YAML frontmatter 표준
• auto-injected side files (template.html + references/*.md) 패턴
• 실습: 자기 작업 흐름의 한 가지를 SKILL.md로 추상화 (예: "주간 보고서 작성")

8주차 — Electron + sidecar IPC + E2E 자동화

• Electron의 main / renderer 분리, contextIsolation, sandbox 옵션
• Unix socket으로 main 프로세스와 별도 데몬 통신
• screenshot/click/eval IPC로 E2E 테스트 자동화
• 실습: tools-dev inspect desktop screenshot과 같은 E2E 헬퍼 구현

11핵심 키워드 사전

OD를 읽다가 막힐 만한 용어들.

12참고 링크

더 깊이 파고들고 싶다면.