Open CoDesign: 프롬프트만으로 프로토타입과 슬라이드를 만드는 오픈소스 멀티 모델 디자인 도구

9bow · 5월 14, 2026, 6:30오전

Open CoDesign 소개

Anthropic의 Claude Design, Vercel의 v0, Lovable, Bolt.new와 같은 "프롬프트(prompt)에서 곧바로 UI 아티팩트(artifact)를 만들어내는" AI 디자인 도구가 빠르게 자리를 잡고 있습니다. 그러나 대부분의 도구는 클라우드 전용으로 동작하고, 사용할 수 있는 모델이 특정 공급자(provider)에 묶여 있으며, 별도의 구독료와 함께 데이터가 외부 서버를 거쳐야 한다는 제약을 가지고 있습니다. 사내 보안 정책이 엄격하거나, 이미 결제 중인 API 키 또는 ChatGPT 구독을 그대로 활용하고 싶은 사용자에게는 이 점이 작지 않은 진입 장벽이 됩니다.

Open CoDesign은 이러한 문제의식에서 출발한 오픈소스 데스크톱 애플리케이션으로, 자신이 보유한 모델과 자신의 노트북에서 직접 프롬프트를 정제된 산출물로 바꾸도록 설계되었습니다. Electron 기반으로 macOS, Windows, Linux에서 동작하며, Anthropic, OpenAI, Google Gemini, DeepSeek, OpenRouter, SiliconFlow, 그리고 로컬 Ollama 등 20여 개의 모델 공급자를 단일 인터페이스로 묶어 BYOK(Bring Your Own Key) 방식으로 사용할 수 있게 해줍니다. ChatGPT Plus, Pro, Team 구독으로 로그인하면 별도 API 키 없이 Codex 모델을 호출할 수도 있습니다.

생성된 결과물은 단순한 미리보기에 머무르지 않고, HTML(인라인 CSS), PDF(로컬 Chrome 사용), PPTX, ZIP, Markdown 등 다섯 가지 포맷으로 내보낼 수 있으며, 모바일과 태블릿, 데스크톱 화면 모두에서 동작하는 반응형(responsive) 프리뷰를 제공합니다. 모든 자격 증명과 디자인 히스토리는 사용자 기기 내 ~/.config/open-codesign/config.toml 과 로컬 워크스페이스에 저장되기 때문에, 모델 호출이 필요할 때 외에는 어떤 데이터도 외부로 전송되지 않는 로컬 우선(local-first) 워크플로우가 보장됩니다.

Open CoDesign과 유사 도구 비교

Open CoDesign은 기능 측면에서 Claude Design, v0, Lovable 등과 직접 비교할 수 있도록 설계되었습니다. 동일한 "프롬프트 → 디자인" 흐름을 지원하면서도, 오픈소스, 데스크톱 네이티브, 멀티 모델, 로컬 우선이라는 네 가지 축에서 차별점을 가집니다.

항목	Open CoDesign	Claude Design	v0 by Vercel	Lovable
오픈소스	MIT 라이선스	비공개	비공개	비공개
데스크톱 네이티브	Electron 앱	웹 전용	웹 전용	웹 전용
BYOK 지원	모든 공급자	Anthropic 전용	Vercel 전용	제한적
로컬/오프라인	완전 로컬 앱	클라우드	클라우드	클라우드
지원 모델 수	20개 이상	Claude 전용	GPT-4o 위주	멀티 LLM
버전 히스토리	로컬 세션, 워크스페이스 파일	미지원	미지원	미지원
데이터 프라이버시	기기 내 앱 상태	클라우드 처리	클라우드	클라우드
내보내기 포맷	HTML, PDF, PPTX, ZIP, Markdown	제한적	제한적	제한적
비용	앱 무료 (모델 사용료만)	구독	구독	구독

특히 BYOK과 ChatGPT 구독 직접 로그인이 함께 지원된다는 점이 Open CoDesign의 큰 차별점입니다. Claude Code나 Codex로 이미 사용 중인 API 키 설정을 원클릭으로 불러올 수 있고, 별도 API 키 없이 ChatGPT Plus/Pro 구독으로 즉시 Codex 모델을 사용할 수도 있습니다.

Open CoDesign의 핵심 동작 흐름

                  ┌─────────────────────────────┐
                  │   apps/desktop (Electron)   │
                  │  Chat panel │   Canvas      │
                  └─────┬───────┴────────┬──────┘
                        │                │
                ┌───────▼──────┐   ┌─────▼────────┐
                │   core       │   │  runtime     │
                │ orchestration│   │ sandbox iframe│
                └──┬───────────┘   └──────────────┘
                   │
        ┌──────────┼──────────────┐
        ▼          ▼              ▼
   ┌─────────┐ ┌─────────┐  ┌────────────┐
   │providers│ │artifacts│  │ exporters  │
   │ pi-ai + │ │ schema  │  │ PDF / PPTX │
   │wrappers │ └─────────┘  └────────────┘
   └─────────┘

Open CoDesign에서 디자인이 만들어지는 과정은 에이전트(agent)가 계획을 세우고, 코드를 작성하고, 결과를 자체적으로 점검한 뒤 사용자가 바로 사용할 수 있는 형태로 정리해 보여주는 흐름입니다. 화면 우측에 라이브 에이전트 패널이 있어, 모델이 어떤 도구 호출(tool call)을 수행하는지, 어떤 파일을 편집하는지, 진행 중인 작업의 진행률은 어느 정도인지 실시간으로 확인할 수 있고, 도중에 중단(interruption)도 가능합니다.

Open CoDesign이 프롬프트만으로 hover/탭/empty state까지 갖춘 화면을 자동 생성하는 모습

생성된 산출물은 단일 HTML 파일뿐 아니라 JSX/React 컴포넌트 형태로도 만들어질 수 있으며, 앱이 내부에 번들링한 React 18과 Babel을 사용해 샌드박스 처리된 iframe 안에서 즉시 렌더링됩니다. 이 덕분에 별도의 빌드 환경이나 dev server 없이도, 프롬프트 한 줄로 완성된 인터랙션을 가진 프로토타입을 확인할 수 있습니다. 일부 영역만 다시 그리고 싶다면 코멘트 모드(comment mode)에서 미리보기 위의 임의 요소를 클릭해 핀(pin)을 꽂고, 짧은 설명만 남기면 모델이 해당 영역만 재작성합니다.

또한 모델은 출력과 함께 "디자인을 미세 조정할 만한 파라미터" 를 자동으로 추출해 슬라이더와 색상 선택기 형태로 제공합니다. 사용자는 다시 긴 프롬프트를 쓰지 않고도 색상, 간격, 폰트 등의 변수를 직접 조정할 수 있어, 디자인 결과를 빠르게 다듬기에 적합합니다. 생성된 마지막 다섯 개의 디자인은 미리보기 iframe을 메모리에 유지하므로, Hub와 Workspace 사이를 이동하거나 사이드바를 클릭해 전환할 때 지연 없이 결과를 비교할 수 있습니다.

Open CoDesign의 빌트인 디자인 스킬

Open CoDesign이 생성하는 결과물이 일반적인 LLM 기반 도구보다 "취향(taste)이 있는" 결과를 내놓을 수 있는 이유 중 하나는, 앱이 자체적으로 보유한 12개의 디자인 스킬 모듈에 있습니다. 슬라이드 덱, 대시보드, 랜딩 페이지, SVG 차트, 글래스모피즘(glassmorphism), 에디토리얼 타이포그래피, 히어로 섹션, 가격표, 푸터, 채팅 UI, 데이터 테이블, 캘린더 등 자주 쓰이는 패턴이 사전 정의되어 있고, 모델은 사용자의 의도에 따라 그중 적절한 스킬을 선택해 적용합니다.

CSS를 한 줄도 쓰기 전에 모델이 먼저 레이아웃 의도, 디자인 시스템의 일관성, 색 대비를 추론하도록 설계되어 있어, 동일한 LLM을 사용하더라도 일반 챗봇보다 더 정돈된 결과를 얻을 수 있습니다. 또한 프로젝트 루트에 SKILL.md 파일을 추가하면 자신만의 디자인 취향과 가이드라인을 모델에 학습시킬 수 있어, 팀이나 브랜드 고유의 디자인 언어를 일관되게 유지하는 데 효과적입니다.

Open CoDesign 설치 및 사용법

Open CoDesign은 macOS 12 이상, Windows 10 이상, 그리고 glibc 2.31 이상의 Linux 환경에서 사용할 수 있습니다. 패키지 매니저나 GitHub Release 페이지의 직접 다운로드 중 편한 방식을 선택하면 됩니다.

# macOS - Homebrew Cask
brew install --cask opencoworkai/tap/open-codesign

# Windows - Scoop
scoop bucket add opencoworkai https://github.com/OpenCoworkAI/scoop-bucket
scoop install opencoworkai/open-codesign

# Windows - winget (PR 검토 중)
winget install OpenCoworkAI.OpenCoDesign

각 릴리스에는 SHA256SUMS.txt 와 CycloneDX SBOM(*-sbom.cdx.json)이 함께 제공되므로 다운로드한 바이너리의 무결성을 직접 검증할 수 있습니다. 현재 빌드는 코드 사이닝(code signing) 단계가 진행 중이라, macOS Sequoia 15 이상에서 첫 실행 시 다음과 같이 격리 속성을 해제하면 됩니다.

xattr -cr "/Applications/Open CoDesign.app"

앱을 처음 실행하면 설정(Settings) 화면이 열리고, 다음 세 가지 경로 중 하나로 모델 공급자를 등록할 수 있습니다. 첫째, ChatGPT 구독 로그인으로 API 키 없이 Codex 모델 사용. 둘째, Anthropic, OpenAI, Google Gemini, OpenRouter, SiliconFlow, DeepSeek 등 API 키 직접 입력. 셋째, 로컬 Ollama 혹은 OpenAI 호환 게이트웨이를 통한 키리스(keyless) 사용. 자격 증명은 모두 사용자 기기 내 설정 파일과 OAuth 토큰 저장소에만 저장되며, 모델 호출에 필요한 경우 외에는 외부로 전송되지 않습니다.

Open CoDesign이 제공하는 주요 기능

Open CoDesign은 단순한 프롬프트 입력기에 그치지 않고, 모델·생성·미리보기·내보내기 전 영역에 걸친 일체형 워크플로우를 제공합니다.

통합 공급자 모델: Anthropic, OpenAI, Gemini, DeepSeek, OpenRouter, SiliconFlow, 로컬 Ollama 그리고 OpenAI 호환 릴레이까지 단일 UI에서 사용.
원클릭 가져오기와 로그인: 기존 Claude Code 또는 Codex의 API 키 설정 가져오기, ChatGPT 구독 직접 로그인 지원.
동적 모델 선택기: 하드코딩된 목록이 아니라 공급자 API에서 실제 모델 목록을 받아 제공.
프롬프트에서 HTML/JSX 컴포넌트 생성: 샌드박스 iframe과 번들된 React 18, Babel로 즉시 렌더링.
15개 빌트인 데모와 12개 디자인 스킬 모듈: 랜딩 페이지, 대시보드, 슬라이드 덱, 가격표, 모바일 앱, 채팅 UI 등 자주 쓰이는 패턴을 즉시 생성 가능.
AI 이미지 생성: OpenAI, OpenRouter, ChatGPT 구독 로그인으로 비트맵 자산(히어로, 제품 컷, 배경, 일러스트레이션) 생성.
AI 슬라이더와 코멘트 모드: 모델이 추출한 파라미터를 슬라이더로 제공, 미리보기 위 임의 요소에 핀을 꽂아 부분 재생성 가능.
반응형 프리뷰: 폰, 태블릿, 데스크톱 프레임을 원클릭으로 전환하며 실시간 확인.
다섯 가지 내보내기 포맷: HTML(인라인 CSS), PDF(로컬 Chrome), PPTX, ZIP, Markdown.
연결 진단 패널과 토큰 카운터: 공급자 연결 상태를 원클릭으로 점검하고, 각 생성마다 사용된 토큰 수를 사이드바에서 확인.
라이트/다크 테마와 다국어: 영어와 간체 중국어 UI를 즉시 전환 가능.

이 모든 기능이 앱 자체는 무료이며, 사용자는 자신이 등록한 모델 공급자의 요금만 부담하면 됩니다.

Open CoDesign 라이선스

Open CoDesign 프로젝트는 MIT 라이선스로 공개되어 있어, 개인 및 상업적 용도로 자유롭게 사용하고 수정·재배포할 수 있습니다.

Open CoDesign 공식 홈페이지

Open CoDesign 문서 사이트

Open CoDesign 프로젝트 GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~