최고의 모델은 필요 없다 — Open Design이 어떤 엔진에서도 멋져 보이는 이유

Open Design에 대해 회의론자가 던질 만한 타당한 질문이 있다. Claude Opus 4.7은 프런트엔드 디자인에 정말 뛰어난데, 사람들이 아무 모델이나 고르게 하는 것이 말이 될까 — 대부분의 모델은 디자인을 못하지 않을까? 이 가이드는 저가 모델을 테스트하고 그 결과가 통하는지 살펴봄으로써 이 질문에 답한다. Better Stack이 자신들의 영상에서 한 리뷰를 따르되, 현재 릴리스에 맞게 다시 쓰고 업데이트한 것이다. 위의 영상을 보거나, 계속해서 글 버전을 읽어보라.

Open Design 워크스페이스: 무엇을 만들고 싶은지 설명하고 모드를 선택하면, 나머지는 에이전트가 처리한다.

Open Design이란?

Open Design은 Claude Design의 오픈소스 대안으로, 이미 가지고 있는 어떤 에이전트나 모델이든 사용해 웹 프로토타입, 모바일 앱, HTML 슬라이드 덱을 생성할 수 있다 — 브랜드급 디자인 시스템 한 벌이 내장되어 있고, 모든 프로젝트는 당신의 기기에 머문다(아무것도 클라우드로 가지 않는다). 폐쇄형 도구는 독점적이고, 클라우드 전용이며, 단일 모델에 고정되어 있고, 구독으로 제한된다. Open Design은 이 네 가지 제약을 모두 제거한다.

모델과 무관하게 결과물이 좋은 이유

회의론자의 걱정은 모델이 모든 디자인 사고를 한다고 가정한다. Better Stack의 핵심 통찰은 Open Design에서는 두 가지가 품질을 떠받치기 때문에 원본 모델이 생각만큼 중요하지 않다는 것이다.

• 디자인 시스템 — 타이포그래피, 간격, 컬러 토큰을 갖춘 완전한 브랜드 사양으로, Linear, Stripe, Spotify 같은 브랜드에서 가져왔다. 외관은 모델이 즉흥적으로 만드는 것이 아니라 시스템이 정의한다.
• 스킬 — 출력 유형마다 하나씩. 덱 스킬은 슬라이드를 어떻게 구성할지 알고, 랜딩 페이지 스킬은 어떤 섹션이 있는지 안다. 모든 프롬프트에는 반(反) AI 티 체크리스트까지 내장되어 있으며, 생성 전에 당신의 대상 독자, 톤, 브랜드에 대해 묻는다.

그러니까 모델은 디자인을 즉흥적으로 짜내는 것이 아니라 잘 명세된 시스템을 실행하는 것이다. 그래서 최상위가 아닌 모델도 정말로 내놓을 만한 결과를 만들어낸다.

플러그인 허브: 레지스트리를 둘러보고, 플러그인을 가져와 팀을 위해 준비한다.

1단계 — 설치하고 (저가) 모델 고르기

macOS/Windows용을 내려받거나, Docker로 클론해 실행하거나, 소스에서 실행한다. 실행한 뒤 로컬 URL을 연다. 설정에는 감지된 에이전트 하니스 — Claude Code, Codex, OpenCode — 가 표시된다. Better Stack은 “어떤 모델이든”이라는 주장을 스트레스 테스트하기 위해 일부러 OpenCode를 고르고 모델을 저가 옵션(GLM)으로 전환한다. (Codex에서는 추론 강도까지 설정할 수 있으며, GPT Image와 ElevenLabs 같은 미디어 제공자도 연결할 수 있다.)

플러그인 라이브러리: 레지스트리에서 곧바로 스킬을 설치한다 — 슬롭 방지 디자인 스킬도 포함된다.

2단계 — 스트레스 테스트: 저가 모델로 실제 앱을 다시 디자인하기

디자인 시스템을 고르고(Better Stack은 Miro 것을 좋아한다 — 토큰과 DESIGN.md를 보여준다), Prototype를 선택한 뒤, 실제 과제를 준다: 기존 앱을 다시 디자인하라. Better Stack은 가동 중인 앱의 URL을 전달하고 더 보기 좋은 버전을 요청한다. Open Design의 에이전트는 먼저 탐색 질문을 진행하고, 이어서 에이전트 브라우저를 사용해 실제로 사이트를 방문하고 입력란과 페이지를 읽고 진짜 데이터를 가져온다 — 수동 복사는 없다. 약 20분 후(저가 모델이 가장 빠르지는 않다), 깔끔한 멀티페이지 재디자인을 만들어냈다 — 고급 필터가 있는 검색 페이지, 진짜 데이터를 쓰는 결과 페이지, 즐겨찾기 페이지, 숨김/보관 상태 — 모두 Claude가 아닌 저가 모델에서. 평결: 디자인 시스템 + 스킬이 그것을 떠받쳤다.

3단계 — 마무리하고 출시하기

끝나면 디자인 패키지를 마무리해 모든 것(트랜스크립트, 디자인 시스템, 산출물)을 단일 DESIGN.md로 합치거나, Share로 여러 형식으로 내보낸다 — 실제 프로젝트를 위해 Claude Code에 넘길 독립형 HTML로, 또는 Vercel이나 Cloudflare Pages에 배포로.

정직한 평결

Better Stack은 공정하다. 이미 (Claude가 아닌) 코딩 에이전트에 비용을 내고 있고 원하는 방향에 대한 대략적인 감이 있다면, Open Design은 두말할 것 없는 선택이다 — 디자인 시스템 더하기 스킬 조합 덕분에 하니스나 모델과 무관하게 괜찮은 것을 만들어낸다. 공정한 단서: 디자인에 대해 조금은 안다고 가정하며(처음에 디자인 시스템을 고르라고 요청한다), 가장 섬세한 마무리에서는 최상위 모델이 여전히 저가 모델을 근소하게 앞선다. 하지만 핵심 주장은 유효하다 — 좋은 결과를 얻는 데 최고의 모델이 필요하지는 않다.

팁

• 모델에 과하게 집중하지 마라 — 디자인 시스템과 스킬을 골라라. 그것들이 외관을 떠받친다.
• 저가 모델(GLM/DeepSeek 등)이면 충분하다, 대부분의 디자인 작업에는. 최상위 모델은 최종 마무리를 위해 아껴둬라.
• URL을 건네주고 에이전트 브라우저가 실제 사이트/앱을 읽어 다시 디자인하게 하라.
• 디자인 패키지를 마무리해 인수인계용으로 깔끔한 DESIGN.md 하나를 얻어라.
• HTML을 내보내거나 Vercel/Cloudflare에 배포해 출시하라.

FAQ

디자인에 Claude가 아닌 모델을 쓰는 것이 말이 되나요? 됩니다 — Open Design의 디자인 시스템과 스킬이 외관과 구조를 정의하므로, 저가 모델도 내놓을 만한 결과물을 만들어냅니다. 최상위 모델은 가장 섬세한 마무리에서만 약간 앞섭니다.

기존 사이트/앱을 다시 디자인할 수 있나요? 할 수 있습니다 — URL을 주세요. 에이전트 브라우저가 사이트를 방문하고 페이지와 데이터를 읽어, 그것을 바탕으로 재디자인을 만들어냅니다.

누구에게 가장 적합한가요? 이미 (Claude가 아닌) 코딩 에이전트에 비용을 내고 있고, 원하는 디자인 방향에 대한 대략적인 감이 있는 사람들입니다.

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

---

이 글 가이드는 Better Stack의 리뷰를 기반으로 합니다. 위의 전체 영상을 보고, 더 실용적인 AI 도구 테스트를 원한다면 Better Stack을 구독하세요.