20+ 에이전트 백엔드, 하나의 Artifacts 캔버스 — 셀프호스팅

Anthropic의 Claude Design은 아티팩트 캔버스를 구독 뒤에, 그리고 Anthropic 클라우드 안에 둡니다. Open Design은 같은 상호작용 방식, 즉 계속 프롬프트를 넣어 다듬는 라이브 캔버스를 가져오되, 이미 내 컴퓨터에 있는 에이전트를 구동하는 오픈소스 소프트웨어로 전체를 사용자에게 넘겨줍니다.

유료 캔버스가 제공하지 못하는 Open Design의 장점

Open Design은 호스팅 캔버스 안에 갇힌 픽셀이 아니라 실제로 내보낼 수 있는 파일을 생성하는 오픈소스 로컬 우선 디자인 작업 공간입니다 . 랜딩 페이지, 대시보드, 앱 목업 같은 단일 페이지 HTML 프로토타입, PPTX와 PDF로 내보낼 수 있는 피치덱, 정지 이미지, MP4 모션 그래픽을 만들 수 있습니다 . HyperFrames라는 브랜드명의 애니메이션 하위 시스템은 HTML+CSS+GSAP 모션을 실제 비디오로 렌더링합니다. 예를 들어 1920×1080, 30fps 영상도 가능합니다 .

비용 구조도 유료 캔버스와는 분명히 다릅니다. 애플리케이션은 Apache-2.0 라이선스라 소프트웨어 자체는 비용이 들지 않습니다. 추론 비용은 사용자가 이미 쓰고 있는 CLI나 API에서 발생하며, Open Design은 여기에 마진을 붙이지 않습니다 . 이는 Anthropic이 2026년 가격 정책에서 Claude Design을 연간 결제 기준 월 17달러부터 시작하는 요금제에 묶어 제공하는 것과 대비됩니다 .

또 다른 차이는 소유권입니다. 아티팩트는 라이브 미리보기를 위해 샌드박스 처리된 iframe에서 렌더링되고, 원본 소스 파일로 다운로드되어 내 디스크에 저장됩니다. 벤더 클라우드에 머무는 것이 아니라 내 저장소에 커밋할 수 있습니다 . 다듬는 과정도 전체를 다시 프롬프트하지 않고 캔버스 위에서 진행됩니다. 렌더링된 요소를 클릭해 글꼴, 너비, 색상을 수정하거나, 스크린샷과 코멘트를 함께 보내 특정 영역만 CLI에 다시 전달할 수 있어 전체 페이지를 재생성하며 토큰을 더 쓰지 않아도 됩니다 . “Claude Design의 클론”이라는 표현은 1차 공식 출시 노트가 아니라 바이럴 데모 영상을 포함한 커뮤니티에서 나온 것입니다 .

시작 전에 내 컴퓨터에 준비해야 할 것

Open Design은 이미 내 컴퓨터에 설치된 에이전트에 생성을 맡기므로, 설정은 대체로 현재 무엇을 실행하고 있느냐에 달려 있습니다. 반드시 필요한 의존성은 Node 24입니다. 데몬, 데스크톱 앱, 스킬 런타임에 필요하며, 데몬은 기본적으로 127.0.0.1에 바인딩됩니다. 텔레메트리는 없고, 내부 IP 대역을 차단하는 SSRF 보호도 포함됩니다 . 네이티브 빌드는 macOS Apple Silicon 및 Intel, Windows x64, Linux AppImage를 지원합니다. 호스팅 데몬을 선호한다면 Docker 배포와 Sealos 클라우드 템플릿도 사용할 수 있습니다 .

런타임 외에는 연결 가능한 지원 백엔드가 하나 이상 필요합니다. Open Design은 Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Qwen, DeepSeek, Grok, Aider, Trae, OpenCode 등을 포함한 20개 이상의 코딩 에이전트 CLI를 지원한다고 밝힙니다. 또한 OpenAI, Azure, Google 호환 baseUrl + apiKey + model 조합을 받는 BYOK 프록시도 제공합니다 . 이 프록시 덕분에 OpenAI SDK의 드롭인 대체재처럼 수백 개 모델을 하나의 엔드포인트로 제공하는 OpenRouter , Groq, vLLM, LM Studio, 또는 비공개 엔드포인트가 모두 같은 루프를 구동할 수 있습니다. 토큰당 과금이 없는 완전 로컬 경로를 원한다면 Qwen, DeepSeek, Gemma 같은 오픈 모델용으로 localhost:11434에서 REST API를 여는 Ollama를 지정하면 됩니다 .

Open Design 계정은 필요하지 않으며, 이미 비용을 내고 있는 구독이나 키를 그대로 재사용합니다 . 과금이 어디서 발생할지 선택하면 됩니다:

데몬을 띄우고 백엔드를 고른 뒤 첫 HTML 페이지를 프롬프트로 만들어보기

클론한 뒤 렌더링된 결과물까지 가는 과정은 네 단계입니다. 설치하고, 데몬을 시작하고, 제공자를 고르고, 프롬프트를 입력하면 됩니다. github.com/nexu-io/open-design를 클론하고 의존성을 설치한 다음 데몬을 실행하세요. 기본적으로 127.0.0.1에 바인딩되고 텔레메트리는 없으며, SSRF 보호 기능이 내부 IP 대역을 기본 차단합니다 . 따라서 프롬프트로 에이전트를 유도해 로컬 네트워크를 탐색하게 만들 수 없습니다. Node 24가 실행되는 곳이면 어디서든 동작하고, macOS, Windows x64, Linux AppImage용 네이티브 빌드도 제공합니다 .

데몬이 실행되면 UI를 열고 Provider Settings로 이동하세요. PATH에 이미 잡혀 있는 이름 있는 CLI, 예를 들어 Claude Code, Codex, Cursor, Gemini CLI를 선택하거나, OpenAI, Azure, Google 호환 엔드포인트라면 원하는 곳에 맞춰 커스텀 baseUrl + apiKey + model 문자열을 입력하면 됩니다 . 이 BYOK 프록시 덕분에 Ollama, LM Studio, vLLM, Groq, OpenRouter가 모두 같은 루프를 구동합니다. 제공자 교체는 재설치가 아니라 한 번의 클릭으로 끝납니다 .

이제 프롬프트를 입력합니다. "SaaS landing page, dark mode, three-column pricing table"처럼 구체적으로 쓰면 CLI 에이전트가 HTML을 작성합니다. 캔버스는 샌드박스 처리된 iframe에서 실시간 미리보기를 렌더링하고 Download Source 버튼도 제공하므로, 결과물은 호스팅 계정 안의 픽셀이 아니라 사용자가 소유하는 실제 파일입니다 . 다듬을 때는 캔버스 위 도구들, 즉 스크린샷, 요소 코멘트, 마커 하이라이트, 글꼴·너비·색상 직접 편집을 사용해 전체 재생성이나 추가 토큰 없이 작은 디테일을 조정할 수 있습니다 .

UI와 선택한 백엔드 사이의 계약은 제공자가 무엇이든 고정되어 있습니다. 아래 검증된 예시는 22개의 이름 있는 백엔드에서 하나의 캔버스를 렌더링해 그 패턴을 구체적으로 보여줍니다.

"""20+ agent backends, one self-hosted Artifacts canvas.

Run: python snippet.py
Output: artifacts_canvas.html
"""

from html import escape
from pathlib import Path


BACKENDS = [
    "OpenAI", "Anthropic", "Gemini", "Mistral", "Cohere", "Groq", "Ollama",
    "vLLM", "llama.cpp", "TGI", "Bedrock", "Vertex AI", "Azure OpenAI",
    "Together", "Fireworks", "Perplexity", "DeepSeek", "xAI", "NVIDIA NIM",
    "HuggingFace", "Replicate", "Local Mock",
]


def call_agent(backend: str, task: str) -> dict:
    # Replace this adapter with real SDK/API calls; the canvas contract stays fixed.
    return {
        "agent": backend,
        "title": f"{backend} artifact",
        "body": f"{backend} handled: {task}",
    }


def render_canvas(artifacts: list[dict]) -> str:
    cards = "\n".join(
        f"<article><h2>{escape(a['title'])}</h2><p>{escape(a['body'])}</p></article>"
        for a in artifacts
    )
    return f"""<!doctype html>
<meta charset="utf-8">
<title>Artifacts Canvas</title>
<style>
body{{font:14px system-ui;margin:0;background:#f6f7f9;color:#18202a}}
main{{max-width:1100px;margin:auto;padding:24px}}
section{{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}}
article{{background:white;border:1px solid #d8dde6;border-radius:8px;padding:14px}}
h1{{margin:0 0 16px}} h2{{font-size:15px;margin:0 0 8px}} p{{margin:0;color:#485465}}
</style>
<main><h1>One Artifacts canvas, {len(artifacts)} agent backends</h1><section>{cards}</section></main>"""


if __name__ == "__main__":
    task = "summarize a customer support transcript"
    artifacts = [call_agent(backend, task) for backend in BACKENDS]
    Path("artifacts_canvas.html").write_text(render_canvas(artifacts), encoding="utf-8")
    print(f"wrote artifacts_canvas.html with {len(artifacts)} backend artifacts")

정적 HTML을 넘어 영상이 필요하다면 HyperFrames 모드로 전환하면 됩니다. 공식 GSAP 플러그인은 애니메이션 HTML+CSS 모션을 실제 MP4로 변환하며, 문서상 기본값은 1920×1080, 30fps입니다 . 슬라이드의 경우 덱 내보내기 경로가 PPTX와 PDF를 만들어 클라우드 계정이 아니라 프로젝트 디렉터리 안의 파일로 저장합니다 . Open Design 제작자들이 명확히 말하듯, 이 도구는 "is not an infinite pixel canvas or a Figma replacement" (source: open-design.ai)입니다. 커밋하고 버전 관리할 수 있는 코드와 미디어를 출력합니다.

솔직한 기대치: 토큰 과금, 하드웨어 한계, 초기 단계에서 알아둘 점

여기서 "무료"란 애플리케이션 코드가 무료라는 뜻이지, 그 뒤의 추론 비용까지 무료라는 뜻은 아닙니다. Open Design은 관대한 라이선스로 배포되고 직접 요금을 청구하지 않지만, 호스팅되는 프런티어 모델에 연결하는 순간 해당 제공업체의 일반 요금을 내야 합니다. Anthropic의 Claude Sonnet은 입력 토큰 100만 개당 3달러, 출력 토큰 100만 개당 15달러로 출시되었고, Claude Pro 좌석은 자체 사용량 한도와 함께 연간 결제 기준 월 17달러입니다. Open Design이 이 비용을 대신 부담해 주지는 않습니다. 기존 ChatGPT나 Claude 구독 키로 캔버스를 구동한다면, 새 무제한 티어가 생기는 것이 아니라 그 요금제의 한도를 그대로 따르게 됩니다.

진짜로 비용이 0인 방법은 로컬 실행입니다. 데몬을 Ollama와 함께 쓰고 Qwen, DeepSeek, Gemma를 실행하면 모든 프롬프트와 생성 파일이 사용자 컴퓨터 안에 머물며 토큰당 비용도 없습니다. 대신 하드웨어가 변수입니다. XDA의 커뮤니티 실습기는 로컬 모델도 작동은 하지만 중급 사양 머신에서는 느릴 수 있다고 짚습니다. 특히 여러 섹션으로 구성된 복잡한 UI 레이아웃에서는 프런티어 모델이 여전히 더 깔끔한 코드를 만들어 내는 경우가 많습니다.

두 프로젝트 모두 아직 초기 단계로 보는 편이 좋습니다. Open Design과 인접한 Open CoDesign은 빠르게 변하고 있습니다. Open CoDesign은 PATH에 이미 있는 CLI를 호출하는 대신 자체 런타임을 번들로 포함한 MIT 라이선스 Electron 대안입니다. 둘 중 하나를 프로덕션 파이프라인에 연결하기 전에, 설치한 릴리스에서 내세우는 기능이 실제로 작동하는지 확인하세요. 직접 쓰는 모델로 HyperFrames MP4를 생성하고 PPTX로 덱을 내보낸 뒤, 마케팅 페이지를 그대로 믿기보다 공식 저장소의 주장과 출력물을 대조하는 것이 좋습니다.

마지막으로 보안 표면도 신경 써야 합니다. API 자격 증명은 로컬 스토리지에 저장되며 보호 책임은 사용자에게 있습니다. 캔버스는 생성된 HTML과 JavaScript를 샌드박스 처리된 iframe 안에서 실행합니다. 또한 데몬은 기본적으로 SSRF 보호가 켜진 상태에서 127.0.0.1에 바인딩되지만, localhost 밖으로 노출하기 전에 엔드포인트 설정을 점검해야 합니다. 핵심은 분명합니다. 추론 비용을 예산에 넣고, 자신의 하드웨어에서 벤치마크하고, 검증된 릴리스를 고정하세요. 그러면 파일도, 키도, 작업 루프도 사용자가 소유하게 됩니다.

자주 묻는 질문

Open Design은 무료로 쓸 수 있나요?

애플리케이션은 무료입니다. Open Design은 Apache-2.0 라이선스 로 제공되며 무료로 다운로드할 수 있지만, 추론 비용은 연결한 제공업체가 별도로 청구합니다. Ollama에서 Qwen, DeepSeek, Gemma 같은 오픈 모델 을 실행해 함께 쓰는 방식이 진짜로 비용이 0인 경로입니다. 대신 OpenAI나 Anthropic에 연결하면 표준 토큰당 요금이 붙으므로, 여기서 "무료"란 앱 코드가 무료라는 뜻이지 프런티어 추론까지 무료라는 뜻은 아닙니다.

Open Design은 Anthropic의 Claude Artifacts와 무엇이 다른가요?

Claude Artifacts는 클라우드 전용 기능입니다. Anthropic은 2024년 6월 21일 Claude 3.5 Sonnet과 함께 이 기능을 도입했으며, 채팅 옆 창에 표시되고 생성된 아티팩트는 구독 티어 뒤의 claude.ai 안에 머뭅니다 . 반면 Open Design은 사용자 컴퓨터에서 실행되고, 모든 아티팩트를 디스크의 실제 파일로 저장하며, BYOK를 통해 모델에 구애받지 않고, Apache-2.0 기반 오픈소스로 제공됩니다 . 호스팅 캔버스를 빌려 쓰는 대신 파일과 키, 작업 루프를 직접 소유하는 방식입니다.

기본으로 지원되는 CLI와 제공업체는 무엇인가요?

Open Design은 Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Qwen, DeepSeek, Grok, Aider, Trae, OpenCode를 포함한 20개 이상의 코딩 에이전트 CLI를 내세웁니다 . 이름이 명시된 에이전트 외에도 BYOK 프록시는 OpenAI, Azure, Google 호환 baseUrl + apiKey + model 조합을 받을 수 있어 Ollama, OpenRouter, Groq, vLLM, LM Studio까지 범위가 넓어집니다 . UI에서 제공업체를 고르고 한 번의 클릭으로 바꿀 수 있습니다.

Open Design으로 실제 MP4 영상을 내보낼 수 있나요?

네. HyperFrames라는 이름의 하위 시스템을 통해 HTML+CSS+GSAP 애니메이션을 실제 MP4로 렌더링하며, 문서화된 기본값은 1920×1080, 30fps입니다 . 공식 GSAP 플러그인은 웹 애니메이션을 에이전트 루프 안으로 가져옵니다. 다만 이 주장은 가정하기보다 검증해야 합니다. 출력 품질은 연결한 모델에 따라 달라지므로, 프로덕션 워크플로에서 쓰기 전에 본인이 사용할 CLI와 프롬프트로 내보내기를 테스트하세요.

Open CoDesign은 무엇이며 Open Design과 어떻게 비교되나요?

Open CoDesign(opencoworkai/open-codesign)은 별도의 MIT 라이선스 Electron 기반 "Claude Design 대안"으로, BYOK, ChatGPT 구독 로그인, 로컬 Ollama 지원 등 유사한 기능을 제공합니다 . 핵심 아키텍처 차이는 번들링입니다. Open CoDesign은 앱 내부에 자체 런타임을 포함해 배포되는 반면, Open Design은 에이전트를 번들하지 않고 사용자의 PATH에 이미 있는 CLI에 작업을 위임합니다. 별도 에이전트 바이너리를 설치하는 방식이 마음에 들지 않는다면 Open CoDesign의 자체 포함형 접근이 더 맞을 수 있습니다.

이 글이 도움이 되셨다면, 새 글이 올라올 때마다 이메일로 받아보세요.

구독하기