AI와 사람이 함께하는 오픈소스 디자인 캔버스 'Doop'

핵심 요약

• Paper.design의 오픈소스 대안으로, 인간과 AI 에이전트가 실시간으로 함께 디자인하는 멀티플레이 캔버스를 제공한다.
• 프레임이라는 아트보드 단위로 실제 HTML을 샌드박스 iframe으로 렌더링하며, 사람은 브라우저에서, AI는 내장 MCP 서버를 통해 라이브로 편집한다.
• Claude Code, ChatGPT, Cursor, Codex 등 모든 MCP 클라이언트와 Claude, GPT, Gemini, DeepSeek, Qwen 등 다양한 모델을 지원한다.
• 내장된 Doop Agent는 카드를 큐에 넣거나 댓글에서 @mention하면 독립적으로 설계를 수행하며, 사용자가 연결한 모델 계정이나 서버의 API 키로 실행된다.
• 페이지 조직, 클릭 가능한 프로토타입(트리거와 액션으로 상호작용 연결), 실시간 멀티플레이(커서, 프레전스, 댓글, 활동 피드) 기능을 지원한다.
• 캔버스 에디터는 프레임, 도형, 펜 패스, 텍스트를 그리고 채우기, 스트로크, 플렉스 레이아웃을 편집할 수 있으며 8%에서 1600% 줌, 가이드와 룰러 스냅핑을 제공한다.
• 디자인 기억 기능으로 예시 프레임을 고정하고 결정사항을 기록하며, 모든 에이전트가 따르는 내구적인 스타일 규칙을 제안한다.
• Linear, Slack, Meta Ads 통합과 웹훅을 통한 외부 도구 연결을 지원하며, 프레임을 개발용으로 승인 표시하고 버전 이력을 추적할 수 있다.
• Docker Compose 또는 bun으로 한 명령어로 자체 호스팅 가능하며, 설정 없이 PGlite 내장 데이터베이스에 데이터가 유지된다.
• 사용자는 ChatGPT 구독, OpenAI/Claude/Gemini API 키, OpenRouter 키(DeepSeek, Kimi, Qwen 포함) 등 다섯 가지 모델 계정 유형을 연결할 수 있다.
• 무료 티어(`RESIDENT_TASK_LIMIT`)를 초과하면 사용자가 자신의 모델 계정을 연결하면 즉시 그 계정으로 전환되고 서버 비용이 중단된다.
• iPhone/iPad용 SwiftUI 앱은 Blitz HTML/CSS 엔진(Rust 기반)을 사용해 네이티브 캔버스를 렌더링하며, 같은 REST API와 WebSocket을 통해 작동한다.
• hosted doop.design 버전도 제공되며, 웹사이트나 GitHub 저장소에서 디자인을 가져올 수 있고, PNG/JPG/PDF로 내보낼 수 있다.