Google Stitch — 자연어로 UI 디자인 (Gemini 2.5)
Google Stitch — 자연어로 UI 디자인
Google Stitch 는 Google Labs 의 자연어·이미지 → UI 디자인 + 코드 도구. Figma 의 자동 디자인 측면과 v0.dev 의 컴포넌트 생성 측면이 Google 톤 으로 결합된 자리. 14-ai-web-ides 가 풀스택 앱 빌더라면 Stitch 는 디자인 + 프론트엔드 코드 단계에 특화.
1. 정체성
- 사이트:
stitch.withgoogle.com - 출시: 2025-05 (Google I/O 2025) — Google Labs 실험 단계
- 모델: Gemini 2.5 Pro (multimodal — 이미지·자연어 동시 입력)
- 출력: Figma 호환 디자인 (
.figexport 가능) + HTML / CSS / Tailwind / React 코드 - 한 줄 정의: "디자이너 없이도 일관된 UI 시안을 자연어로 만든다".
2. 입력 방법
| 입력 유형 | 예 |
|---|---|
| 자연어 | "신선식품 D2C 쇼핑몰 모바일 앱 홈" |
| 스케치 / 와이어프레임 이미지 | 손그림 사진 → 정돈된 디지털 디자인 |
| 스크린샷 | 경쟁 서비스 → 비슷한 톤의 신규 디자인 |
| 컬러 토큰 | 브랜드 색상 입력 → 전체 팔레트 자동 |
| 기존 디자인 (Figma URL) | 변형·확장 |
3. 핵심 기능
3.1 자연어 → 다중 화면 (Mode A)
"투두 앱 — 로그인 / 목록 / 상세 / 설정 4 화면" 한 줄로 4개 화면을 한 번에 생성. 화면 간 일관된 spacing·color·typography 자동 적용.
3.2 변형 (Variations)
각 화면의 5종 변형 자동 생성 → A/B 디자인 비교. 디자이너 없이 다양한 안 시도.
3.3 Figma export
.fig 파일로 export → 기존 Figma 워크플로 (auto layout · variants · component) 와 호환. 디자인 단계는 Stitch 에서, 정교화는 Figma 에서.
3.4 코드 export
- HTML / CSS (vanilla)
- Tailwind CSS
- React / Vue / Angular 컴포넌트 (출시 후 추가)
- 출력 코드는 시안 코드 — 실 프로덕션은 검토·정제 필요.
3.5 반복 (chat-to-edit)
생성된 디자인을 채팅 으로 수정 → "이 카드의 padding 을 더 키워줘", "primary 색상을 emerald 로", "헤더에 검색 아이콘 추가". Cursor·Claude 가 코드를 수정하듯 디자인을 수정.
4. v0.dev / Bolt.new / Figma AI 와의 자리
| 도구 | 출력 강점 | 약점 vs Stitch |
|---|---|---|
| v0.dev | shadcn/Tailwind React 컴포넌트 즉시 사용 | 다중 화면 디자인 약함 |
| Bolt.new | Vite/Next 풀스택 PoC | 디자인 수준 시안 |
| Figma AI / FigJam AI | 기존 Figma 통합 | 처음부터 자연어 생성 약함 |
| Lovable | Supabase 풀스택 | 디자인 단계 없음 |
| Stitch | Figma 호환 + 자연어 + 다중 화면 + 변형 | 백엔드 미관여 |
Stitch 는 디자인-first. 코드만 빠르게 → v0.dev. 풀스택 앱 한 번에 → Bolt.new / Lovable. 디자인 시안 → Figma 호환 → Stitch.
5. 활용 시나리오
| 시나리오 | 가치 |
|---|---|
| 신규 서비스 PoC | 디자이너 합류 전 시안 합의 |
| 디자인 시스템 초안 | 컬러·타이포·spacing 토큰의 일관성 자동 |
| 다중 화면 와이어프레임 | 흐름 검증 |
| 클라이언트 미팅 | 자연어 입력 → 시안 즉시 → 의사결정 가속 |
| 학습 | UX 패턴 (Card / List / Sheet 등) 자연어로 비교 |
6. 제약 / 주의
- Labs 단계 — UI / 가격 / 정책이 자주 변경. 프로덕션 critical path 에는 Figma 백업 권장.
- 무료 토큰 한도 — 일일 생성 한도 (시기별 다름). 한도 초과 시 다음 날까지 대기 또는 Plus 권장.
- 한국어 입력 — 가능. 단 일부 컴포넌트 라벨은 영어 default → 후처리 필요.
- 데이터 / 학습 — 무료 사용 시 입력이 학습에 사용 가능 (Google 정책). 사내 와이어프레임은 외부 노출 주의.
- Figma export 의 정밀도 — 대부분 컴포넌트는 호환되지만 일부 effect 는 손실. 최종은 Figma 정제.
- API 없음 — 2026-05 기준 자체 API 미공개. 외부 자동화는 향후.
7. 워크플로 예
[자연어 입력]
"B2B SaaS 대시보드 — 사이드바·KPI 카드 4개·차트·테이블"
↓
[Stitch 다중 화면 생성]
대시보드·고객 목록·고객 상세·설정 4 화면
↓
[채팅 수정]
"primary 색상을 brand blue 로", "차트 위에 날짜 필터 칩"
↓
[Figma export]
.fig 파일 → 디자이너가 정교화
↓
[코드 export]
Tailwind + React 컴포넌트 → Cursor 에서 백엔드 연결·refactor
8. Stitch vs 디자이너
대체 ✗. 시안 빠른 합의 보조. 일관성·접근성·브랜드 전략·복잡한 모션은 사람이 정교화. PoC → 합의 → 디자이너 정교화 → 개발 의 lead time 단축.