Question 1

Gemini CLI는 실제 디자인 작업을 할 수 있나요?

Accepted Answer

가능합니다 — 미학 skill, 디자인 시스템, 그리고 실제 참조 이미지가 컨텍스트에 있으면 Gemini CLI는 프로덕션 품질의 반응형 UI를 생성하며, 강력한 멀티모달 모델이 참조 이미지와 결과물을 대조하여 검증합니다. 이러한 컨텍스트가 없으면 일반적인 형태로 회귀하는 경향이 있는데, 이 공백을 OpenDesign이 채워줍니다.

Question 2

Gemini CLI로 디자인하려면 비용을 지불해야 하나요?

Accepted Answer

아닙니다 — Google 계정으로 로그인하면 넉넉한 무료 등급을 이용할 수 있으며, Gemini API 키(BYOK)를 직접 가져오거나 Vertex AI를 사용할 수도 있습니다. OpenDesign은 어느 경우에도 자격 증명을 중계하지 않습니다.

Question 3

디자인에서 가장 중요한 Gemini CLI 특성은 무엇인가요?

Accepted Answer

두 가지입니다: 모델이 강력한 멀티모달 성능을 갖추어 참조 스크린샷을 잘 읽어내며, 1M-token 컨텍스트로 디자인 시스템과 참조 자료 전체를 한 번에 담을 수 있습니다. 둘 다 도움이 되지만, 심미성은 여전히 제공한 디자인 시스템, skill, 참조 자료에서 나옵니다.

Question 4

프런트엔드 디자인을 위해 Gemini CLI와 Claude Code 중 선택하기

Accepted Answer

둘 다 강력합니다. Claude Code는 코드베이스를 이해한 구체적인 디자인 판단으로 알려져 있고, Gemini CLI의 강점은 멀티모달 이해력과 거대한 컨텍스트, 그리고 무료 등급입니다. 많은 팀이 두 가지를 함께 사용하며, OpenDesign에서는 디자인 워크플로우를 바꾸지 않고도 에이전트를 전환할 수 있습니다.

Question 5

Gemini CLI는 Figma에 어떻게 연결되나요?

Accepted Answer

~/.gemini/settings.json의 mcpServers 아래에 Figma MCP 서버를 추가합니다. 그러면 Gemini가 컴포넌트, 변수, 레이아웃 데이터 등 실제 디자인 컨텍스트를 가져올 수 있어, 생성된 코드가 원본을 근사하는 대신 그대로 일치하게 됩니다.

Question 6

실제로 Gemini CLI란 무엇인가

Accepted Answer

Gemini CLI는 Google이 터미널용으로 제공하는 오픈소스(Apache-2.0) AI 에이전트입니다. 저장소를 읽고, 파일을 편집하고, 셸 명령을 실행하고, 웹을 가져오며, Google Search로 답변을 근거 있게 뒷받침할 수 있습니다. 단순히 코드 줄을 완성하는 것이 아니라 자연어 작업에서 계획을 세우고 작업을 검증합니다. 같은 엔진이 VS Code 내부의 Gemini Code Assist 에이전트도 구동합니다.

디자인 작업에서는 두 가지 속성이 눈에 띕니다. 모델이 기본적으로 멀티모달이라 스크린샷을 건네면 실제 레이아웃에 대해 추론합니다. 또한 컨텍스트 창이 최대 1M 토큰에 이르러, 전체 디자인 시스템과 컴포넌트 라이브러리, 참조 세트를 요약해 없애버리는 대신 한 번에 담을 수 있을 만큼 큽니다.

컨텍스트 파일: Gemini CLI는 지속적인 프로젝트 컨텍스트를 위해 GEMINI.md 파일을 읽습니다. 디자인 관례, 토큰, 리뷰 체크리스트를 담기에 자연스러운 위치입니다. 개인 및 팀 설정이 그 위에 층층이 쌓입니다.

내장 도구 + MCP: 파일, 셸, 웹 가져오기, Google Search 도구를 기본 제공하며, MCP 서버(~/.gemini/settings.json에서 구성)를 지원해 실제 Figma 파일 같은 외부 컨텍스트를 추가할 수 있습니다.

무료로 시작: 개인 Google 계정으로 로그인하면 넉넉한 무료 등급의 Gemini 요청을 받을 수 있고, Gemini API 키를 가져오거나 Vertex AI를 사용할 수도 있습니다.

자격 증명: Google 계정(무료 등급) 또는 AI Studio의 Gemini API 키(BYOK) 또는 Vertex AI

제공 업체: Google

라이선스: Apache-2.0, 오픈소스

Question 7

멀티모달 모델과 거대한 컨텍스트가 디자인에 잘 맞는 이유

Accepted Answer

Gemini CLI의 디자인 강점은 두 가지 모델 속성에서 나옵니다. 다만 모든 에이전트가 그렇듯, 취향은 여전히 사람이 공급해야 합니다.

강력한 멀티모달 이해: Gemini 모델은 기본적으로 멀티모달이라, 에이전트가 참조 스크린샷을 잘 읽습니다. 산문 설명에서 추측하는 대신 렌더링한 결과물을 이미지와 비교합니다.

1M 토큰 컨텍스트 창: 컨텍스트가 크면 전체 디자인 시스템, 토큰, 여러 참조 상태가 한 번에 들어가므로 에이전트가 일회성 스타일을 만들어내는 대신 실제 프리미티브를 재사용합니다.

GEMINI.md의 관례: GEMINI.md(Figma MCP 서버 포함)가 에이전트를 당신의 토큰, 컴포넌트, 실제 스펙으로 안내하므로 기본 룩이 아니라 브랜드에 맞춰 작업합니다.

취향은 당신이 제공하는 세 가지 입력에서 나옵니다: 디자인 시스템, 스킬, 실제 참조 이미지.

교훈은 모든 에이전트가 가르치는 것과 같습니다. Gemini CLI는 기본적으로 취향이 없습니다. 제약을 주면 — 디자인 시스템, 미학 스킬, 구체적인 참조 — 좋은 디자인을 만들어냅니다. OpenDesign이 바로 그 입력들을 패키징하며, 그래서 둘이 잘 맞습니다(아래에서 더 설명).

Question 8

처음부터 디자인 작업을 위한 Gemini CLI 설정하기

Accepted Answer

설정 순서: 설치 → 인증 → GEMINI.md 구성 → 스킬 추가 → 브라우저 검증 활성화.디자인 규칙을 담기: 토큰, 프리미티브, 관례를 GEMINI.md에 넣고 Gemini가 그것을 가리키게 하면, 출력이 일반적인 룩으로 기본 설정되는 대신 브랜드에 맞습니다.브라우저 검증 추가: Playwright 또는 브라우저 MCP를 연결해 Gemini가 실제 브라우저에서 렌더링하고 빌드 통과만 확인하는 대신 여러 브레이크포인트에서 출력을 확인하게 합니다.명령과 버전별 세부 사항은 현재 설정 섹션을 사용하세요. 이는 변경될 수 있습니다.# 1. Install Gemini CLI (Node 20+)
npm install -g @google/gemini-cli
# or run without installing: npx https://github.com/google-gemini/gemini-cli

# 2. Start it in your project and authenticate on first run
cd your-project
gemini            # sign in with your Google account, or set GEMINI_API_KEY

# 3. Generate project context
/init             # scaffolds a GEMINI.md for this project

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it under "mcpServers" in ~/.gemini/settings.json이전 가이드의 과거 명령 예시입니다. 현재 문법은 링크된 벤더 문서에서 확인하세요.

Question 9

Gemini CLI로 스크린샷을 UI로 전환하기

Accepted Answer

Gemini CLI에서 가장 효과가 큰 디자인 루프는 참조 이미지를 실제로 동작하는 반응형 UI로 바꾸고 일치할 때까지 반복하는 것입니다. 멀티모달 모델이 출력을 참조와 비교하도록 활용합니다.가장 명확한 시각 참조에서 시작하세요. 그리고 히어로 샷 하나만이 아니라 여러 상태(데스크톱과 모바일, 호버, 비어 있음, 로딩)를 포함하세요.프롬프트에서 구체적으로 하세요. 모호한 프롬프트는 강력한 모델이라도 일반적인 UI를 만듭니다.디자인 시스템과 관례를 GEMINI.md에 두고, 토큰과 표준 프리미티브가 어디 있는지 Gemini에게 알려주세요.개발 서버를 실행하고 Gemini가 실제 브라우저에서 렌더링하며 브레이크포인트로 크기를 조정해 결과를 확인하게 하세요.Gemini가 자신의 구현을 스크린샷과 비교하게 하여 반복하세요. 빌드된다는 것만 확인하는 것이 아닙니다.@로 이미지를 참조해 프롬프트에 첨부한 다음 구체적인 제약을 주세요:프롬프트는 작고 집중되게 유지하고, 좋은 반복은 커밋하고 나쁜 것은 되돌리세요(되돌릴 때 Gemini에게 알려주며). 그래야 각 패스가 깨끗한 기반 위에서 쌓입니다.gemini
# in the prompt:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from GEMINI.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.이전 가이드의 과거 명령 예시입니다. 현재 문법은 링크된 벤더 문서에서 확인하세요.

Question 10

GEMINI.md, MCP 서버 및 확장

Accepted Answer

세 가지 확장 지점이 Gemini CLI를 지속적인 디자인 작업에 실용적으로 만들며, 셋 모두 열린 디자인 워크플로에 깔끔하게 대응합니다.

GEMINI.md 컨텍스트: 프로젝트 규칙은 저장소 루트의 GEMINI.md에 있습니다(전역 및 팀 계층 포함). 디자인 관례의 지속적인 집이며, 실행할 때마다 읽힙니다.

MCP 서버: MCP 서버를 ~/.gemini/settings.json 아래에서 구성하세요. 디자인 컨텍스트와 외부 도구 — 가장 관련성 높게는 Figma MCP 서버 — 를 가져오는 이식성 있는 방식이며, Gemini뿐 아니라 여러 에이전트에서 작동합니다.

확장 기능과 내장 도구: Gemini CLI 확장 기능과 내장된 Google Search, 파일, 셸, 웹 가져오기 도구 덕분에 터미널을 떠나지 않고 참조를 모으고 검증 루프를 돌릴 수 있습니다.

이는 이식성 있는 멀티 에이전트 기능이며, 프로젝트마다 새로 만드는 대신 OpenDesign이 조율하도록 만들어진 바로 그런 것입니다.

Question 11

디자인을 위한 Gemini CLI vs Codex vs Claude Code vs Cursor

Accepted Answer

디자인 작업에 단일 승자는 없습니다. 각 에이전트는 서로 다른 강점이 있고, 경험 많은 팀은 이들을 조합합니다. 공정한 요약은 다음과 같습니다:

Gemini CLI — 강력한 멀티모달 이미지 이해와 1M 토큰 컨텍스트; 무료 등급이 있는 오픈소스 — 스크린샷이 많은 작업과 전체 디자인 시스템을 컨텍스트에 유지하기

Codex — 프런트엔드 스킬을 통한 강력한 시각적 완성도; 샌드박스 비동기 빌드 — 위임된 비동기 빌드와 이식성 있는 AGENTS.md 규칙

Claude Code — 구체적인 디자인 결정(hex, 간격, 타이포)과 코드베이스 인식 UX — 프런트엔드 추론과 대규모 컨텍스트 리팩터링

Cursor — 라이브 프리뷰와 인라인 편집이 있는 시각적 빌드 후 확인 루프 — IDE 안에서 촘촘하게 반복하고 지켜보는 UI 작업

커뮤니티에서 반복해서 나오는 결론은 취향은 인간에게서 온다는 것입니다. 스킬, 참조, 제약 없이는 모두 일반적인 미학으로 기본 설정됩니다. 그것이 풀어야 할 진짜 문제이며, 모델 형태가 아니라 디자인 도구 형태의 문제입니다.

에이전트 — 디자인 강점 — 최적 용도

Question 12

흔한 함정과 “AI slop” 느낌을 피하는 방법

Accepted Answer

AI가 생성한 디자인에 대한 가장 흔한 불만은 일반적으로 보인다는 것입니다. 부드러운 그라디언트, 떠 있는 패널, 과도하게 큰 둥근 모서리, 극적인 그림자, “AI가 만들었다고 소리치는” Inter와 보라색 분위기 말입니다. 그 밖에 보고된 문제로는 깨진 모바일 레이아웃과 지시문이 UI 문구로 새어 나오는 것이 있습니다. 이 중 어느 것도 Gemini CLI만의 문제가 아닙니다. 이는 어떤 에이전트든 잘 다듬어진 디자인 컨텍스트 없이 실행될 때 벌어지는 일입니다.

미학 스킬 추가: 잘 다듬어진 디자인 스킬은 에이전트가 기본 룩 대신 실제 방향에 전념하게 만듭니다.

실제 브라우저에서 검증: 멀티모달 모델로 렌더링하고 여러 브레이크포인트에서 자체 점검해 모바일에서 레이아웃이 조용히 깨지지 않게 하세요.

토큰과 참조 공급: 실제 디자인 토큰과 참조 스크린샷은 출력 품질에 가장 큰 단일 지렛대입니다.

GEMINI.md에 규칙 담기: “히어로 카드 금지, 서체 최대 두 개, 브랜드 우선 계층” 같은 스타일 규칙을 에이전트가 매 실행마다 읽는 곳에 두세요.

모든 완화책이 에이전트에게 잘 다듬어진 디자인 컨텍스트를 주는 것에 관한 것임을 주목하세요. 그 컨텍스트를 프로젝트마다 손으로 유지하는 것이 OpenDesign이 없애는 수고입니다.

Question 13

OpenDesign 내부에서 Gemini CLI를 에이전트로 사용하기

Accepted Answer

OpenDesign은 위 워크플로가 계속 요구해 온 오픈소스 디자인 레이어입니다. Gemini CLI를 자사 어댑터로 취급하고, 잘 다듬어진 스킬 및 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감쌉니다. 그래서 Gemini를 좋게 만드는 디자인 컨텍스트가 첫 실행부터 존재하며, 매번 손으로 조립하지 않아도 됩니다. 둘 다 오픈소스이자 로컬 우선이라 이 조합은 자연스럽습니다.

Google 계정 또는 Gemini API 키(BYOK)로 인증하세요. 자격 증명은 당신의 머신에 남고 우리를 통해 프록시되지 않습니다.

디자인 시스템과 스킬을 고른 다음, 일관된 취향으로 덱, 프로토타입, 랜딩 페이지를 생성하세요.

모든 결과물과 DESIGN.md 파일은 호스팅된 클라우드가 아니라 당신의 저장소에 있습니다.

같은 Gemini CLI 에이전트, 같은 키 — 그리고 그 주위에 실제적이고 이식성 있는 오픈소스 디자인 워크플로를 더했습니다. 로컬 우선이고 Apache-2.0이라, 당신의 작업이나 자격 증명에 관한 어떤 것도 머신을 떠나지 않습니다.

OpenDesign을 설치하고 Gemini CLI를 에이전트로 선택하세요.

Question 14

OpenDesign은 Google과 제휴 관계인가요?

Accepted Answer

아니요. OpenDesign은 독립적이며, Gemini는 Google의 상표입니다.

OpenDesign에서
Gemini(으)로
디자인하기.

Gemini CLI로 들어가는 진입점 고르기

Gemini CLI로 제품 인터페이스 생성하기

Gemini를 처음부터 설정하기

Gemini와 다른 에이전트 비교

하나의 Gemini 작업: 화이트보드 브리프에서 렌더링된 인터페이스까지

1디자인 브리프와 제약 조건

2누가 무엇을 하는가: 여러분, Gemini CLI, OpenDesign

3Gemini의 아티팩트: 1440px 및 390px에서의 운영 대시보드

4인수인계 전 검토

그리드와 여백

시각적 계층 구조

모바일 레이아웃

인터랙션 점검

Gemini CLI가 디자인 작업에 맞는 곳 — 그리고 맞지 않는 곳

Gemini가 적합한 경우

다른 워크플로를 선택해야 하는 경우

시작 전 Gemini 요구 사항

도구 범위Gemini, by Google

계정 및 인증Google 계정(무료 등급) 또는 Gemini API

시스템 및 버전데스크톱 앱 또는 소스

연결 확인성공 신호

세 단계로 진행하는 Gemini 설정

OpenDesign 데스크톱 앱 다운로드

Gemini 연결 준비하기

작은 Gemini 작업 하나 실행하기

Gemini의 디자인 루프를 통과하는 다섯 단계

디자인 브리프

디자인 제약 조건

인터페이스 생성

미리보기

수정 및 검증

Gemini 디자인 리소스

Gemini 관련 추가 자료

디자인 스킬

디자인 시스템

템플릿

Gemini CLI 한계, 수동 점검 및 대체 경로

Gemini와 OpenDesign에 대해 자주 묻는 질문

OpenDesign에서 Gemini(으)로 디자인하기.