OpenDesign 전체 기능 투어 — 슬라이드, 프로토타입, 이미지, 동영상, 그리고 데스크톱 펫

이 가이드는 OpenDesign을 폭넓게 둘러보는 투어입니다. 하나를 깊게 만들어 보는 것이 아니라, 이 워크스페이스가 만들어 낼 수 있는 모든 것을 훑어봅니다 — 슬라이드 덱, 포스터, 스케치에서 만든 이미지, 스케치에서 만든 앱 프로토타입, 코드 기반 모션 그래픽, 동영상, 심지어 데스크톱 펫까지. 硅基麻辣拌이 자신의 워크스루에서 진행하는 기능 투어를 따라가되, 영어로 다시 쓰고 현재 릴리스에 맞춰 업데이트했습니다. 실시간 진행은 위의 동영상을 보고, 글로 된 버전은 이어서 읽어 보세요.

OpenDesign 워크스페이스 — 프로토타입, 슬라이드 덱, 이미지, 동영상이 하나의 차분하고 익숙한 캔버스에 담겨 있습니다.

OpenDesign이란?

OpenDesign은 이미 사용하고 있는 코딩 에이전트 위에서 동작하는 오픈소스 로컬 우선 디자인 플랫폼입니다. 프로젝트 전체가 로컬에 배포되는 웹 앱이며, 직접 쓰는 코딩 에이전트를 완전히 지원하는 모델 레이어를 갖추고 있습니다 — API 키로 연결하든, OAuth 구독으로 연결하든, 기존 CLI를 직접 연결하든 상관없습니다.

硅基麻辣拌은 진정한 강점으로 한 가지를 꼽습니다. API 키나 인증 토큰을 절대 노출할 필요가 없다는 점입니다. OpenDesign을 로컬의 Codex나 Claude Code에 CLI로 연결하면, 생성 작업이 기기를 절대 벗어나지 않는 자격 증명을 통해 실행됩니다 — 더 많은 오픈소스 에이전트 프로젝트가 따라 했으면 하는 보안 특성입니다. 동영상에서는 GPT-5.5 기반 OpenAI Codex 구독으로 모든 것을 구동합니다.

1단계 — 에이전트 설치 및 연결

가장 빠른 길은 open-design.ai/download에서 받는 데스크톱 앱입니다 — 설정이 필요 없고, 설치된 에이전트 CLI를 자동으로 감지합니다. 소스에서 실행하려면:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

출력되는 로컬 URL을 엽니다(포트는 동적으로 정해지므로 하드코딩하지 마세요). 硅基麻辣拌이 짚어 주듯, 문서를 아예 읽지 않아도 됩니다. 에이전트에게 레포 링크를 건네고 dev 모드 설정으로 OpenDesign을 설치하라고 시키면 됩니다. 첫 실행 시 로컬 CLI — Codex, Claude Code, Cursor, OpenCode — 를 가리키도록 설정하면 준비가 끝납니다.

실제로 만들 수 있는 것

시작 화면은 예시로 가득합니다 — 웹 페이지, 포스터, 앱 아이콘, 모션 그래픽, 아티클 커버 이미지, 픽셀 스타일 애니메이션, 슬라이드 덱, 재무 보고서, 매거진 포스터. 모든 예시는 OpenDesign의 내장 프롬프트와 스킬이 직접 만들어 낼 수 있는 결과물이며, 각 예시는 그 뒤에 있는 프롬프트와 디자인 시스템을 함께 보여 줍니다.

디자인 시스템 라이브러리: 각 항목은 실제 브랜드를 팔레트, 타이포그래피, 컴포넌트, 그리고 재사용할 수 있는 비주얼 분위기로 분해해 보여 줍니다.

이제 기능을 하나씩 살펴보겠습니다.

슬라이드 덱 (PPT)

Slideshow를 클릭하고 이름을 붙인 뒤 디자인 시스템을 고릅니다(硅基麻辣拌은 Anthropic/Claude 스타일 시스템을 사용합니다). 그러면 OpenDesign은 단순히 에이전트에게 슬라이드를 요청하는 것과 차별화되는 일을 합니다. 프롬프트를 바탕으로 동적 디스커버리 폼을 생성하는 것입니다 — 캔버스 비율, 대상 청중, 슬라이드 수, 리서치 포지셔닝, 비주얼 방향성 — 그리고 만들기 전에 원하는 바를 확인합니다. 이 폼은 하드코딩되어 있지 않습니다. 프롬프트로부터 생성되어 프롬프트의 빈틈에 맞춰 조정됩니다. 결과물은 선택한 브랜드 스타일의 깔끔한 가로형 덱입니다.

손으로 그린 스케치에서 만드는 이미지

OpenDesign은 손으로 그린 입력을 지원합니다. 무언가를 거칠게 스케치하고 — 동영상에서는 의도적으로 추상적인 “용” — 그 스케치에서 실제 이미지를 생성해 달라고 요청합니다. 방향과 배경에 대한 질문을 한 뒤 이미지를 생성해 디자인 파일에 다시 넣어 줍니다. 핵심이 와닿습니다. 그림 실력은 필요 없고, 아이디어만 있으면 됩니다.

스케치에서 만드는 앱 프로토타입

같은 방식, 다른 결과물입니다. 거친 와이어프레임을 그리고 — 여기에 원 하나, 저기에 사각형 하나 — 스케치 파일을 저장한 뒤 이를 참조해 모바일 앱 화면을 요청합니다. OpenDesign은 동일한 폼-확인-생성 루프를 사용해 추상적인 스케치를 완성도 높아 보이는 화면으로 바꿔 줍니다.

코드로 만드는 모션 그래픽

내장 모션 스킬을 사용해 硅基麻辣拌은 의인화된 아이폰 두 대가 만나 대화하는 애니메이션을 생성합니다. 전적으로 SVG와 CSS 애니메이션으로 만들어집니다 — 모든 비주얼 요소가 코드입니다 — 그래서 무언가를 움직이게 해야 할 때 덱이나 페이지에 깔끔하게 들어갑니다.

템플릿 라이브러리: 유형별로 필터링하고 포크해서 시작할 수 있는 프로토타입, 슬라이드, 이미지, 동영상 출발점.

이미지와 동영상 생성

이미지 라이브러리는 GPT Image 같은 일반적인 사례를 다루며, 프롬프트가 미리 패키징되어 있습니다 — 하나를 골라 생성하면 됩니다. 동영상도 지원되며, 모델이 생성한 클립과 제품/동적 덱 효과도 포함됩니다. 모션 비중이 큰 동영상 작업은 hyperframes 프로젝트와 협업해 이루어지며, 이 프로젝트는 코드를 사용해 제품 프로토타입과 데이터 시각화 애니메이션을 구동합니다.

데스크톱 펫

가장 매력적인 기능: 펫 기르기. 하나를 고르고 — 커뮤니티가 기여한 캐릭터도 포함됩니다 — 저장을 누르면 데스크톱에 나타나 상호작용할 수 있습니다. 작은 기능이지만, 결과물만이 아니라 도구의 감성적인 결까지 신경 쓰는 프로젝트라는 신호입니다.

솔직한 평가

硅基麻辣拌은 장단점에 공정합니다. 내부적으로 OpenDesign은 조합 가능한 스킬 세트(OpenDesign 안에서 사용하거나 혹은 자신의 Codex/Claude Code로 추출할 수 있음)와 잘 알려진 브랜드를 다루는 깊이 있는 디자인 시스템 라이브러리를 제공합니다 — 그리고 Claude-Design 스타일 프레임워크 전체가 레포에 오픈소스로 공개되어 있어, 새로운 디자인 유형을 직접 추가할 수 있습니다.

현재의 한계: 일부 다듬기 기능은 아직 빠져 있습니다 — 특히 렌더링된 페이지를 주석 달고 수정하는 픽셀 단위 코멘트 모드가 그렇습니다. 하지만 이를 상쇄하는 강점은 분명합니다. 폭넓은 에이전트 지원(Codex, Claude Code, Cursor, OpenCode)에 API 키 노출이 없고, 빠르게 발전하는 프로젝트라는 점입니다. 확장 가능하고 직접 기여할 수 있는 플랫폼을 원한다면 훌륭한 출발점입니다.

팁

• 로컬 CLI로 구동하세요 — API 키가 기기를 벗어나지 않고, 생성 작업은 이미 결제하고 있는 구독에 얹혀 실행됩니다.
• 디스커버리 폼이 제 역할을 하게 두세요 — 그 질문들에 먼저 답하는 것이 덱과 프로토타입을 첫 시도에서 제대로 나오게 하는 비결입니다.
• 형태가 중요할 때는 설명하지 말고 스케치하세요 — 손으로 그린 입력은 이미지와 앱 프로토타입 모두에 통합니다.
• 덱이나 페이지에 움직임이 필요하면 모션 스킬을 활용하세요. 코드이므로 어디든 옮길 수 있습니다.
• GUI 밖에서 어떤 기능을 쓰고 싶을 때는 스킬을 자신의 에이전트로 추출하세요.

FAQ

API 키를 노출해야 하나요? 아니요 — 그게 바로 강조되는 강점입니다. 로컬의 Codex, Claude Code, Cursor, OpenCode로 CLI를 통해 OpenDesign을 구동하면 자격 증명이 기기를 절대 벗어나지 않습니다.

정적 디자인뿐 아니라 정말 동영상과 애니메이션도 만들 수 있나요? 네. 코드 기반 모션 그래픽(SVG + CSS), 이미지와 동영상 생성, 그리고 hyperframes 프로젝트와 협업한 모션 비중이 큰 작업까지 해냅니다.

아직 빠져 있는 건 무엇인가요? 워크스루 시점에는 렌더링된 페이지에 주석을 다는 픽셀 단위 코멘트 모드가 아직 제공되지 않았습니다. 프로젝트가 빠르게 움직이니 현재 릴리스를 확인하세요.

무료인가요? 앱은 Apache-2.0 하에 오픈소스이며 로컬에서 무료로 실행할 수 있습니다. 연결하는 에이전트와 제공업체의 모델 및 미디어 사용량에 대해서만 비용을 냅니다.

---

이 글로 된 가이드는 硅基麻辣拌의 기능 투어를 바탕으로 합니다. 위의 전체 동영상을 보고, 더 많은 AI 도구 워크스루를 원한다면 硅基麻辣拌을 구독하세요.