Open Design의 작동 원리 — 셀프 호스팅 가능한, 자기 키 가져오기 아키텍처

이 가이드는 자신이 실제로 무엇을 돌리고 있는지 이해하고 싶은 사람들을 위한 것입니다. Open Design이 내부에서 어떻게 작동하는지, 왜 모든 계층에서 셀프 호스팅과 BYOK가 가능한지, 그리고 그 스킬과 디자인 시스템이 왜 fork할 수 있는 그저 파일들일 뿐인지를 다룹니다. 이 글은 AI Stack Engineer가 전체 영상에서 제시한 아키텍처 우선 해설을 따르되, 현재 릴리스에 맞춰 다시 쓰고 최신화한 것입니다. 라이브 실행은 위 영상을, 글 버전은 계속 읽어 보세요.

플러그인 허브: 레지스트리를 둘러보고, 플러그인을 가져오고, 팀을 위해 준비하세요.

Open Design이란?

Open Design은 클라우드형 디자인 도구를 완전히 오픈소스로 대체하는 도구입니다. 로컬 우선, 웹 배포 가능, 그리고 모든 계층에서 BYOK. “BYOK”란 자기 키를 가져온다(bring your own key)는 뜻입니다. Open Design은 자체 모델이나 에이전트를 끼워 넣는 대신, 당신의 머신에 이미 있는 코딩 CLI — Claude Code, Codex, Cursor, Gemini, OpenCode 등 — 를 스캔해 그것을 엔진으로 사용합니다. 경로에 하나도 없다면 Anthropic API 폴백이 있습니다. 라이선스는 Apache-2.0이므로 fork하고, 사내에 배포하고, 자유롭게 수정할 수 있습니다.

AI Stack Engineer가 거듭 돌아오는 핵심은 이것입니다. 클라우드형 디자인 도구는 오직 한 공급사의 모델 위에서, 그들의 클라우드 안에서, 유료 요금제 뒤에서 돌아가며, 셀프 호스팅 선택지가 전혀 없습니다. Open Design은 이 세 가지를 모두 뒤집습니다 — 당신의 머신, 당신의 에이전트, 당신의 키.

어떻게 만들어졌는가 (이해할 가치가 있는 부분)

아키텍처는 의도적으로 단순합니다.

• 프런트엔드 — Vite + React + TypeScript 앱.
• 백엔드 — Node + Express 데몬으로, 프로젝트, 대화, 메시지, 탭을 SQLite로 관리.
• 데몬이 유일하게 권한을 가진 프로세스입니다. 당신이 고른 CLI를 띄우며, 작업 디렉터리를 숨김 .od 디렉터리 아래의 프로젝트별 폴더로 설정합니다.

바로 이 마지막 지점이 Open Design을 채팅 상자 이상으로 만듭니다. 에이전트는 실제 파일 시스템에 대한 진짜 읽기 / 쓰기 / bash / 웹 가져오기 도구를 손에 넣습니다. 산출물을 생성할 때, 그것은 디스크에 실제 파일을 쓰는 것이며, 당신은 그것을 열고, 편집하고, 버전 관리하고, 내보낼 수 있습니다 — 채팅 창에 덩어리를 돌려주는 것이 아닙니다.

스킬과 디자인 시스템은 그저 파일

두 가지 구성 요소가 대부분의 일을 해내며, 둘 다 당신이 소유하는 평범한 파일입니다.

• 스킬은 실무적인 영역을 아우릅니다 — 웹 프로토타입, SaaS 랜딩, 대시보드, 가격 페이지, 문서, 블로그, 모바일 앱, 슬라이드 덱(잡지 스타일 PPT 스킬 포함) — 여기에 PM 사양서, 주간 업데이트, 회의록, 런북, 재무 보고서, 청구서, 칸반 보드, OKR 같은 산출물 템플릿까지. 각각은 당신이 읽고, 편집하고, 덧붙일 수 있는 파일입니다.
• 디자인 시스템은 평범한 markdown DESIGN.md 파일로 저장됩니다. 각각은 실재하는 브랜드에서 끌어온 색상, 타이포그래피, 간격, 레이아웃, 컴포넌트, 모션, 톤, 브랜드 규칙, 안티패턴을 정의합니다.

Open Design 워크스페이스: 만들고 싶은 것을 설명하고 모드를 선택하면 나머지는 에이전트가 처리합니다.

둘 다 파일이기 때문에, 당신의 디자인 워크플로 전체가 버전 관리 가능하고 fork 가능해집니다 — 팀은 자체 내부 스킬과 브랜드 DESIGN.md를 git에 두고, 어떤 에이전트든 그것들을 기준으로 생성하게 할 수 있습니다.

설치와 셀프 호스팅

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install   # 의존성을 많이 받아옵니다 — 잠시 기다려 주세요
pnpm tools-dev run web

출력된 로컬 URL을 엽니다(포트는 동적이니 — 하드코딩하지 마세요). 설정 없이 바로? open-design.ai/download의 데스크톱 앱은 Node와 pnpm을 건너뜁니다. 처음 실행하면 PATH를 스캔해 찾은 에이전트를 나열합니다. 하나를 고르거나(AI Stack Engineer는 OpenCode로 Claude가 아닌 경로를 테스트합니다), Anthropic의 BYOK 옵션을 사용하세요.

프롬프트 스택에는 알아 둘 만한 영리한 장치가 두 가지 있습니다. 하나는 디스커버리 폼(작성 전에 영역, 대상, 톤, 브랜드, 규모를 묻습니다 — 라디오 버튼 30초가 방향 수정 30분을 아껴줍니다), 다른 하나는 방향 선택기(결정론적 팔레트를 갖춘 엄선된 다섯 가지 시각적 방향으로, 모델이 분위기를 즉흥적으로 어긋나게 하지 않도록 합니다)입니다.

슬라이드 덱 모드: 덱 카테고리를 선택하고 예시를 포크해 시작점으로 삼으세요.

끝나면 HTML, PDF, ZIP으로 내보내거나 — 배포하세요. 웹 배포가 가능하고 로컬 우선이므로, 그 무엇도 제3자의 클라우드에 닿을 필요가 없습니다.

솔직한 평가

AI Stack Engineer의 평가는 공정합니다. 하나의 최상위 모델에 맞춰 다듬어진 잘 닦인 클라우드 도구는, 즉시 쓸 수 있는 완성도와 내보내기 폭에서는 여전히 앞섭니다. 반면 Open Design은 많은 사람에게 정말 중요한 점에서 앞섭니다 — 무료이고 Apache-2.0이며, 자기 에이전트와 키를 가져오고, 모델 유연성은 조용한 초능력입니다. 어떤 공급사가 값을 올리거나, 두 모델이 같은 레이아웃을 어떻게 다루는지 비교하고 싶다면, 드롭다운에서 에이전트를 바꿔 다시 실행하면 됩니다. 솔직한 메모 몇 가지: 아직 리서치 프리뷰 초기 단계라는 점; Claude Code는 가장 풍부한 스트리밍(구조화된 stream-JSON)을 얻는 반면 다른 CLI들은 줄 단위 버퍼링이라는 점; 출력 품질은 당신이 연결한 모델에 크게 좌우된다는 점; 그리고 코멘트 모드의 정밀 편집 같은 일부 기능은 아직 로드맵에 있다는 점.

팁

• .od 프로젝트 폴더를 이해하세요 — 당신의 산출물은 그곳에 있는 실제 파일입니다. 백업하고 / 커밋하세요.
• 스킬과 DESIGN.md를 git에 두세요. 버전 관리되고 팀에서 공유 가능한 워크플로가 됩니다.
• 로컬 CLI를 사용하세요. 그러면 생성이 이미 지불 중인 구독 위에서 돌아갑니다.
• 엔진을 신중히 고르세요 — 약한 모델은 훌륭한 디자인 시스템을 줘도 여전히 약한 결과를 냅니다.
• 프라이버시나 통제가 필요할 때는 셀프 호스팅 / 배포하세요 — 그 무엇도 당신의 머신을 떠날 필요가 없습니다.

FAQ

“모든 계층에서의 BYOK”란 무슨 뜻인가요? 당신은 자기 에이전트 CLI와 자기 모델 키를 가져옵니다. Open Design은 디자인 영역, 스킬, 디자인 시스템을 제공합니다. 모델과 그 비용은 당신 쪽에 남습니다.

제 작업은 실제로 어디에 있나요? 당신의 머신 위, .od 아래의 프로젝트별 폴더에, 로컬 데몬(SQLite + 실제 파일)이 관리합니다. 셀프 호스팅 가능하며 웹 배포도 가능합니다.

스킬과 디자인 시스템을 커스터마이즈할 수 있나요? 네 — 모두 평범한 파일입니다(스킬은 폴더, 디자인 시스템은 DESIGN.md). 편집하고, 자기 것을 추가하고, 버전 관리에 두세요.

무료인가요? 앱은 Apache-2.0 오픈소스이며 로컬 실행은 무료입니다. 당신이 연결한 에이전트와 키의 모델 사용량만 지불하면 됩니다.

---

이 글 가이드는 AI Stack Engineer의 전체 실습 해설을 바탕으로 합니다. 위의 전체 영상을 보시고, 더 실용적인 AI 스택 해부를 위해 AI Stack Engineer를 구독하세요.