Open Design로 참고 이미지를 진짜 페이지로 바꾸기 (Gemini로 무료)
Open Design의 참고 이미지 워크플로 — 마음에 드는 디자인(Dribbble 작품, 아무 사이트 스크린샷)을 가져와 넣으면 Open Design이 그 시각 언어로 진짜 페이지를 만들어 줍니다. 전 과정을 Gemini CLI의 무료 등급에서 완전히 무료로 실행할 수 있습니다. Compile Future의 실습 설명을 기반으로 합니다.
이 가이드는 Open Design의 구체적이지만 잘 활용되지 않는 워크플로를 다룹니다: 참고 이미지에서 시작하기. 마음에 드는 디자인 — Dribbble 작품, 아무 사이트의 스크린샷 — 을 찾아 넣으면 Open Design이 그 시각 언어로 진짜 페이지를 만들어 줍니다. 게다가 이 모든 과정을 코딩 agent의 무료 등급에서 무료로 실행할 수 있습니다. 이 글은 Compile Future가 영상에서 보여준 실습 설명을 기반으로, 현재 릴리스에 맞게 다시 쓰고 업데이트한 것입니다. 위의 영상을 보거나, 아래의 글 버전을 읽어 보세요.
Open Design 작업 공간: 만들고 싶은 것을 설명하고 모드를 고르면, 나머지는 agent가 처리합니다.
Open Design란?
Open Design는 오픈소스이자 로컬 우선의 디자인 플랫폼 — 자신의 컴퓨터에서 실행되는 Claude Design 대안입니다. 가장 큰 차이점은, 하나의 모델에 묶이는 대신 여러분이 이미 쓰고 있는 코딩 agent — Claude Code, Codex, Cursor, Gemini, OpenCode 등 — 를 구동한다는 점입니다. 풍부한 스킬과 브랜드 디자인 시스템 라이브러리(Airbnb, Apple, Cursor, Ferrari, Figma 등 다수)를 함께 제공하므로, 생성은 일반적인 프롬프트가 아니라 진짜 미학에서 출발합니다.
- 오픈소스, Apache-2.0 — 클론하거나, 셀프호스팅하거나, 그냥 앱을 다운로드하세요.
- 로컬에서 실행 — 프로젝트는 여러분 자신의 컴퓨터에 존재합니다.
- 어떤 모델이든 — 무료 등급 포함; GPU 불필요(모델은 여러분의 하드웨어가 아니라 CLI를 통해 클라우드에서 실행됩니다).
1단계 — 설치하고 무료 모델 연결하기
open-design.ai/download에서 설치 프로그램(macOS DMG 또는 Windows .exe)을 다운로드하거나 소스에서 실행하세요. 처음 실행할 때 agent를 선택합니다. Compile Future가 Gemini CLI를 쓰는 이유는 무료 등급이 넉넉하기 때문입니다(하루에 무료 요청이 넉넉함) — 그래서 전체 워크플로가 비용이 들지 않습니다:
- 설정에서 Gemini를 고르세요. 감지되지 않으면 Gemini CLI를 설치하고(공식 사이트의 명령어 한 줄) Google 계정으로 로그인하세요.
- 다른 게 좋으신가요? 감지된 CLI는 무엇이든 작동하며, 자신의 API key를 가져와도 됩니다.
이것이 “GPU 불필요”인 이유입니다: 모델은 CLI를 통해 클라우드에서 실행되므로, 사양이 평범한 노트북이라도 괜찮습니다.
2단계 — 텍스트 프롬프트로 만들기(기본)
기본 디자인 시스템을 설정하고(Compile Future는 과감한 것을 선호), Prototype을 선택해 이름을 붙인 뒤, 최상의 결과를 위해 high fidelity를 고르세요. 브리프를 보내세요. Open Design는 몇 가지 디스커버리 질문(단일 도구 / 랜딩 페이지 / 올인원? 반응형? 톤? 브랜드 맥락?)과 시각적 방향(예: Vercel 스타일의 미니멀한 외관)을 물은 뒤, 깔끔한 첫 버전을 만듭니다. 강조색은 페이지에서 바로 조정할 수 있습니다.
미리보기에서 렌더링된 진짜 생성 프로토타입 — 어둡고 영화 같은 에이전시 랜딩 페이지.
3단계 — 참고 이미지 워크플로(핵심)
이것이 이 영상의 값어치라 할 만한 기법입니다. 외관을 말로 설명하는 대신, Open Design에 그 외관을 보여주세요:
- 마음에 드는 디자인을 찾으세요 — 영감을 얻으려고 Dribbble(예: “tools website” 검색)이나 아무 라이브 사이트를 둘러보세요.
- 그것의 스크린샷을 저장하세요.
- Open Design로 돌아가 free-form 모드에서 프로젝트를 만들고, 스크린샷을 첨부한 뒤 이렇게 프롬프트하세요: “build my [site], use the design language from the image I shared.”
- 디스커버리 질문에 답하면서, 이미지의 UI에 맞추라고 알려주세요.
Open Design는 참고 이미지로부터 브랜드 스펙을 작성하고(그것을 보여주며 확인을 요청합니다), 그 시각 언어로 페이지를 만듭니다 — 참고 이미지와 같은 레이아웃 느낌, 색상, 서체를 여러분의 콘텐츠에 적용합니다. 원하는 것이 보이지만 설명할 수 없을 때, 온브랜드한 결과를 얻는 가장 빠른 방법입니다.
플러그인 라이브러리: registry에서 곧바로 스킬을 설치하세요 — 안티슬롭 디자인 스킬 포함.
4단계 — 편집하고 배포하기
평범한 말로 다듬으세요 — “remove the sign-in button”, “adjust the card radius” — 그리고 업데이트되는 모습을 보세요. Source로 코드를 보고, Share로 ZIP, PDF, PowerPoint를 다운로드하거나, 독립 HTML을 내보내거나, 클릭 한 번으로 deploy to Vercel(Vercel token만 붙여넣으면 됩니다)하여 공유 가능한 링크를 얻으세요.
팁
- Gemini CLI의 무료 등급에서 무료로 실행(또는 무료 등급이 있는 아무 CLI) — 구독 불필요, GPU 불필요.
- 외관을 머릿속에 그릴 수 있지만 설명할 수 없을 때는 참고 이미지를 사용하세요 — Dribbble이나 아무 사이트 스크린샷.
- free-form 모드 + “match the image”가 참고 이미지를 정확히 살려내는 프롬프트 패턴입니다.
- 만들기 시작하기 전에 생성된 브랜드 스펙을 확인하여 방향이 맞도록 하세요.
- 다듬어진 결과에는 high fidelity; 평범한 말로 편집하며 반복하세요.
FAQ
GPU가 필요한가요? 아니요. 모델은 (클라우드에서) CLI를 통해 실행되며 여러분의 컴퓨터에서 돌지 않습니다 — 평범한 노트북이면 충분합니다.
정말 무료로 실행할 수 있나요? 네 — Gemini 같은 무료 등급 CLI를 가리키면 비용 없이 디자인을 생성할 수 있습니다. 유료 모델/API를 선택할 때에만 비용을 지불합니다.
마음에 드는 이미지로 어떻게 디자인하나요? free-form 모드를 사용해 스크린샷을 첨부하고, 그 이미지의 디자인 언어를 쓰라고 알려주세요. 브랜드 스펙을 추출해 그 스타일로 만들어 줍니다.
무료이며 오픈소스인가요? 네 — Apache-2.0. 로컬에서 무료로 실행하세요. 비용은 연결한 모델/미디어 사용분에 대해서만 지불합니다.
이 글 가이드는 Compile Future의 실습 설명을 기반으로 합니다. 위의 전체 영상을 보고, 더 많은 무료 AI 워크플로를 위해 Compile Future를 구독하세요.