Open Design로 기존 브랜드에 어울리는 사이트 디자인하기

이 가이드는 Open Design의 대표 기능에 초점을 맞춥니다. 기존 웹사이트를 가리키면 에이전트가 당신의 진짜 브랜드 — 폰트, 색상, 톤 — 를 사양으로 끌어와 당신의 목소리로 디자인합니다. 원클릭 데스크톱 설치와, 왜 오픈 대안을 찾게 되는지에 대한 솔직한 해설도 다룹니다. 이 글은 Brendan O'Connell이 실습 영상에서 진행하는 실전 빌드를 따르며, 현재 릴리스에 맞춰 다시 쓰고 업데이트했습니다. 실시간 실행은 위 영상을, 글로 된 버전은 아래를 읽어 보세요.

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

Open Design이란?

Open Design은 오픈소스이자 로컬 우선의 디자인 플랫폼으로, 이미 쓰고 있는 코딩 에이전트 위에서 동작합니다 — Claude Code, Codex, Cursor, Gemini, OpenCode 등 — 또는 자신의 API 키로요. 본질적으로 Claude-Design 스타일의 작업 공간을 자기 컴퓨터에서 돌리는 것으로, 특정 벤더의 클라우드에 묶이지도, 그 도구의 사용량 한도에 묶이지도 않습니다. Apache-2.0 라이선스이며, 방대한 스킬과 디자인 시스템 라이브러리를 기본 제공하고, 그 위에 미디어 생성(이미지, 동영상, 오디오)을 더합니다.

왜 오픈 대안을 찾는가

Brendan의 동기는 구체적이고 다시 짚을 만합니다. 많은 사람에게 이것이 결정적 요인이기 때문입니다. 그는 폐쇄형 클라우드 도구에서 단 하나의 디자인 시스템을 생성했을 뿐인데 주간 한도의 약 75%를 소진했고 — 다음 주까지 발이 묶였습니다. 이 한도는 일반 요금제 할당량과 별개라서, 진짜 반복 작업을 하기에는 워크플로가 사실상 쓸 수 없을 지경으로 느껴집니다. 자신의 Claude Code(또는 어떤) 구독으로 돌리면 그 벽이 사라집니다. 별도의 디자인 한도에 부딪히지 않고, 하나의 생태계에 묶이지도 않습니다.

1단계 — 설치 (원클릭 경로)

가장 쉬운 길이자 Brendan이 권하는 것은 데스크톱 앱입니다. open-design.ai/download에 가서 macOS 또는 Windows용 실행 파일을 받으세요. 앱은 금세 구동되며, 이미 컴퓨터에 있는 에이전트 CLI를 자동 감지합니다 — Brendan은 아무것도 설정하지 않았고, 그의 Claude Code 구독을 인식해 바로 쓸 준비가 됐습니다.

터미널을 선호하나요? 소스에서:

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

출력되는 로컬 URL을 여세요(포트는 동적입니다 — 하드코딩하지 마세요). 오른쪽에 설정이 있습니다. 감지된 에이전트와 함께 미디어 제공자(이미지는 OpenAI, 동영상은 MiniMax, 음성은 ElevenLabs), 커넥터(Composio MCP), 심지어 데스크톱 펫까지 있습니다. 어떤 제공자든 자신의 키를 가져와 쓸 수도 있습니다.

2단계 — 기존 브랜드에서 디자인하기

이것이 입장료가 아깝지 않은 기능입니다. 프로젝트를 만들고 고충실도를 선택한 뒤, 브리프에서 기존 사이트를 위해 디자인하라고 알려 주세요. 에이전트에는 웹 가져오기 도구가 있어서, 운영 중인 사이트를 읽으러 가 거기서 브랜드 사양을 도출합니다.

영상에서 Brendan이 자신의 사이트를 가리키자 Open Design은:

1. 페이지를 가져오고 실제 콘텐츠를 긁어옵니다.
2. brand-spec.md를 작성해, 그가 실제로 쓰는 폰트(Fig Tree를 정확히 잡아냈습니다), 색상, 디자인 선택 — “알약 모양 버튼 금지, 완전 둥근 카드 금지, 강조색은 절제해서, 여백은 넉넉히” — 그리고 톤(“숨 가쁜 마케팅 어조 금지”)까지 포착합니다.
3. DESIGN.md를 생성하고 그 목소리로 페이지를 구축해, 기존 브랜드와 더 깔끔한 레이아웃을 어우러지게 합니다.

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

구축에 앞서 Open Design은 짧은 디스커버리 양식을 실행합니다(한 페이지인가 몇 페이지인가? 비주얼 방향은? 현재 사이트에 맞출까? 사실적인 플레이스홀더로? ). 그래서 올바른 방향을 확정합니다. 결과물은 그의 태그라인, 파란색, 폰트를 유지하면서 그 위에 더 또렷한 레이아웃을 얹습니다 — 클릭해 둘러볼 수 있는 다중 페이지 출력입니다.

3단계 — 안티슬롭 자가 점검을 확인하고 내보내기

마무리하면서 Open Design은 안티슬롭 자가 점검을 실행합니다 — Brendan은 “이모지 없음, 서체 하나, 결정적인 장식 하나, 전반에 걸쳐 진짜 포지셔닝 카피”라고 확인하는 것을 봅니다. 이것이 출력물이 생성물처럼 보이지 않게 막아 주는 가드레일입니다.

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

예시와 디자인 시스템 탭을 둘러보며 출발점을 찾고(각 디자인 시스템은 완전히 편집 가능한 DESIGN.md를 제공합니다), 마음에 들면 결과물을 HTML, PDF, 또는 ZIP으로 내보내세요. 모든 것이 자신의 에이전트 위에서 로컬로 돌기 때문에, 반복하는 동안 부딪힐 별도의 디자인 한도가 없습니다.

팁

• 운영 중인 사이트를 가리키면 진짜 폰트, 색상, 톤을 물려받습니다 — 온브랜드 출력으로 가는 가장 빠른 길입니다.
• 제로 설정 경로를 위해 데스크톱 앱을 사용하세요. 에이전트를 자동 감지합니다.
• 자신의 CLI 구독으로 돌려 폐쇄형 도구의 별도 주간 디자인 한도를 피하세요.
• 생성된 brand-spec.md / DESIGN.md를 읽으세요 — 편집 가능한 파일이라, 스크레이프가 잘못 잡은 부분은 무엇이든 고칠 수 있습니다.
• 프롬프트에 조금 공을 들이세요 — 더 풍부한 브리프는 눈에 띄게 더 나은 초안을 만들어 냅니다.

자주 묻는 질문

정말 제 기존 웹사이트에서 디자인할 수 있나요? 네 — 에이전트에는 웹 가져오기 도구가 있습니다. 당신의 사이트를 위해 디자인하라고 알려 주면 폰트, 색상, 레이아웃 선택, 톤을 brand-spec.md로 긁어와 그 목소리로 디자인합니다.

에이전트를 설정해야 하나요? 대개는 아닙니다. 데스크톱 앱은 이미 설치된 에이전트 CLI(Claude Code, Codex, Gemini 등)를 자동 감지합니다. 자신의 키를 가져와 쓸 수도 있습니다.

폐쇄형 도구의 사용량 한도가 있나요? 별도의 디자인 한도는 없습니다 — 생성은 연결한 에이전트/구독에 얹혀 가므로, 디자인 하나를 만든 뒤 막히는 일이 없습니다.

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

---

이 글 가이드는 Brendan O'Connell의 실습 영상에 기반합니다. 위의 전체 영상을 보시고, 더 많은 오픈소스 도구 분석을 위해 Brendan O'Connell을 구독하세요.