토큰을 태우지 않고 Claude Design 수준의 품질로 디자인하기

이 가이드는 비용 문제를 정면으로 다룬다. 폐쇄형 클라우드 디자인 도구를 써봤다면 그 마법을 알 것이다 — 그리고 토큰이 얼마나 빨리 바닥나는지도. Open Design은 작업을 당신이 원하는 어떤 모델로든 돌리게 해주기 때문에 비슷한 품질로 디자인할 수 있다 — 이미 비용을 내고 있는 에이전트든, 자신의 키든 — 그래서 별도의 디자인 예산을 아껴 쓸 필요가 없다. Roy Shavit이 자신의 실습 영상에서 진행하는 빌드 과정을 영어로 다시 쓰고 현재 릴리스에 맞춰 최신화한 것이다. 라이브 실행은 위 영상을, 글로 된 버전은 아래에서 읽으면 된다.

HyperFrames 갤러리: 코드 기반의 모션과 비디오 작품을 포크하고 리믹스할 수 있습니다.

Open Design이란?

Open Design은 오픈소스이자 로컬 우선의 디자인 플랫폼이다. 그 폐쇄형 클라우드 도구처럼 프롬프트를 주면 진짜 결과물 — 랜딩 페이지, 앱, 또는 덱 — 을 VS Code나 자신의 에디터에서 계속 작업할 수 있는 편집 가능한 HTML로 돌려준다. 이를 차별화하는 세 가지가 있는데, 그중 앞의 두 가지가 운영 비용이 더 저렴한 이유다:

• 오픈소스다(Apache-2.0) — 코드를 읽고, 포크하고, 직접 호스팅할 수 있다.
• 당신의 컴퓨터에서 실행된다 — 파일은 자신의 기기에 머무르며, 어떤 것도 제3자 클라우드로 가지 않는다.
• 원하는 어떤 모델이든 사용한다 — 기존 CLI를 통해 Codex, Claude, 또는 15개 이상의 다른 모델을, 혹은 자신의 API 키(BYOK)를.

비용 이야기: 토큰을 아껴 쓰는 일을 멈추자

Roy의 표현은 직설적이고, 그게 바로 핵심이다. 폐쇄형 클라우드 디자인 도구는 할당된 토큰을 매우 빠르게 소진하므로, 결국 디자인 작업을 아껴 쓰게 된다. Open Design은 그 천장을 없앤다. 왜냐하면 생성이 이미 보유한 에이전트/구독, 또는 당신이 통제하는 키를 통해 돌아가기 때문이다. 비용/품질의 절충은 프로젝트마다 직접 결정한다 — 초안에는 저렴한 모델을, 최종 마무리에는 최상위 모델을 — 남의 별도 디자인 상한에 의해 계량당하는 대신에. 직접 호스팅한다는 것은 또한 작업이 자신의 기기에서 일어난다는 뜻이며, 그것이 전체를 군더더기 없이 유지한다.

1단계 — 설치하고 모델을 감지하기

가장 간단한 경로는 데스크톱 앱이다: open-design.ai/download로 가서 OS를 고르고, 다운로드한 뒤, 끌어다 넣는다. 소스에서 설치하고 싶다면:

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은 로컬에 설치된 모델을 즉시 인식한다 — Roy는 Codex와 Claude를 가지고 있으며, OpenCode나 다른 것들도 잡아낼 것이다. 기본값을 설정하거나, 어느 제공업체에서든 자신의 키를 가져오면 CLI를 설치할 필요조차 없다. 이것이 독자성이다: 한 벤더에 강제로 묶이지 않는다.

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

2단계 — 랜딩 페이지를 만들고, 저렴하게 반복하기

Roy는 게임 스트리밍 서비스의 랜딩 페이지를 만든다. 요구사항을 보내면 Open Design이 디스커버리 폼(출력 유형, 대상, 브랜드 방향, 범위, 모션 수준)을 돌려주고, 그가 답하면 빌드한다 — 여기서는 그의 CLI가 그렇게 설정되어 있어 Claude Opus로 돌아간다. 결과는 탄탄한 첫 버전이다: 히어로, 데모 수치, 플랫폼 지원, 가격 페이지, 후기, FAQ — 데스크톱, 태블릿, 휴대폰에 걸쳐 반응형이다.

반복 도구들은 변경 비용을 낮게 유지한다: 영역을 선택하고 메모를 추가하거나, 댓글을 남기거나, 인라인 편집으로 텍스트를 직접 바꾼다. 코드 뷰로 전환하면 생성된 HTML과 디자인 파일을 볼 수 있다. 만족하면 공유 버튼으로 PDF로 내보내거나 Vercel 또는 Cloudflare Pages에 곧장 배포한다(토큰을 넣으면 사이트가 공개된다). 또는 소스로 넘어가 VS Code, Cursor, 또는 자신의 에디터에서 계속 작업한다.

미리보기에 렌더링된 실제 생성 프로토타입 — 어둡고 영화 같은 에이전시 랜딩 페이지.

3단계 — 페이지를 넘어: 영상 생성하기

Open Design은 정적 디자인에 국한되지 않는다. Roy는 hyperframes 모션 스킬을 사용해 뉴욕 타임스 스타일의 애니메이션 막대 차트를 생성한다 — 몇 분이 걸리고, 더 긴 영상에 넣거나 브랜드 스니펫으로 쓸 수 있는 진짜 MP4를 만들어낸다. 고를 수 있는 디자인 시스템 플러그인도 170개 이상 있고(Apple, PlayStation 등), 라이브러리가 열려 있기 때문에 커뮤니티가 계속 추가하고 있다.

언제 무엇을 쓸지 (솔직한 판단)

Roy는 이 부분을 공정하게 말한다. 모델 유연성, 더 낮은 비용, 또는 직접 호스팅을 원할 때는 Open Design을 택하라 — 작업은 자신의 기기에 머무르고, 제3자 모델을 포함해 당신이 고른 어떤 모델로든 돌아간다. 최소한의, 설치가 필요 없는 설정과 시작하기까지 가장 적은 수고를 원할 때는 폐쇄형 클라우드 도구를 택하라 — 그리고 그쪽이 기본 상태에서 여전히 조금 더 다듬어져 있다는 점은 짚어두자. 같은 콘텐츠라도 그쪽이 마감이 약간 더 높고, 이쪽은 훨씬 더 큰 통제력과 더 낮은 운영 비용을 준다.

팁

• 이미 비용을 내고 있는 에이전트로 돌려라(또는 BYOK) — 별도의 토큰 상한에서 벗어나기 위해.
• 초안은 저렴한 모델로, 마무리는 강력한 모델로 — 비용/품질 다이얼을 프로젝트마다 직접 쥔다.
• 인라인 편집과 영역 댓글을 사용하라 — 전체 재생성 대신 저렴하고 정밀한 변경을 위해.
• 코드로 내보내거나 Vercel/Cloudflare에 배포하라 — 끝났을 때 공유에서 곧장.
• hyperframes 스킬을 시도하라 — 정적 페이지뿐 아니라 모션/영상이 필요할 때.

FAQ

폐쇄형 클라우드 도구에 비해 이건 어떻게 토큰을 아끼나요? 생성이 자신의 에이전트/구독, 또는 자신의 API 키를 통해 돌아가므로 소진해야 할 별도의 계량형 디자인 예산이 없다 — 모델과 비용을 직접 고른다.

결과물을 내 에디터에서 계속 작업할 수 있나요? 네 — 출력은 편집 가능한 HTML/파일이다. 소스로 넘어가 VS Code, Cursor, 또는 어떤 에디터에서든 이어가거나, Vercel/Cloudflare Pages에 배포할 수 있다.

웹 페이지 말고 더 만들 수 있나요? 네 — 프로토타입, 덱, 이미지, 영상(hyperframes 모션 스킬을 통해), 그리고 방대한 디자인 시스템 라이브러리.

무료인가요? 앱은 Apache-2.0 하에 오픈소스이며 로컬에서 실행하는 것은 무료다. 연결한 에이전트와 키의 모델 및 미디어 사용분에 대해서만 비용을 낸다.

---

이 글 가이드는 Roy Shavit의 실습 영상을 바탕으로 한다. 위의 전체 영상을 보고, 더 많은 실용적인 AI 빌드 콘텐츠를 위해 Roy Shavit을 구독하라.