Google Stitch 사용법이 궁금한 분들을 위해 정리했다. Google Labs가 만든 AI UI 디자인 툴 Stitch는 텍스트 한 줄이면 앱 UI를 자동 생성하고, HTML/CSS 코드까지 뽑아준다. 2026년 3월 대규모 업데이트로 Voice Canvas, 무한 캔버스, Vibe Design 등 혁신적 기능이 추가됐다. 이 글에서는 Google Stitch 사용법의 기초부터 실전 활용, 다른 툴과의 조합까지 전부 다룬다.
【실체험】Google Stitch 사용법으로 내 앱 UI가 완전히 바뀐 이야기
필자가 개발 중인 픽셀아트 게임 “Pixel Office”의 UI 리디자인에서 Google Stitch 사용법을 직접 시험한 결과를 공유한다.
Before: 최소한의 UI
원래 Pixel Office는 기본 레이아웃만 있는 소박한 화면이었다. 방 배치는 있지만 인테리어는 최소한, 직원 프로필 화면도 없고, 낮밤 구분도 없었다. “기능은 돌아가지만 보기에 매력이 없는” 상태.
After: Stitch로 다시 태어난 UI
Stitch에 프롬프트를 넣고 약 1분. 출력된 디자인을 베이스로 다음과 같은 개선이 실현됐다.
1. 인테리어 상점 추가
오피스 가구를 구매해서 배치하는 상점 화면이 탄생했다. 인체공학 의자, 게이밍 데스크, 정수기, 화분, 화이트보드, 커피머신 — 가격 포함 구매 UI까지 Stitch가 프롬프트 1번으로 생성했다.
2. 직원 프로필 개성화
각 스태프의 프로필 카드가 추가됐다. 아바타, 직책명, 에너지 게이지, 스트레스 게이지, 액션 버튼(채팅·분석·휴식)까지 갖춘 UI가 프롬프트 하나로 나온다.
3. 낮/밤 모드 구현
낮에는 밝은 오피스, 밤에는 따뜻한 조명이 켜지는 분위기로 — 같은 레이아웃에서 2가지 표정을 가진 UI가 생성됐다. 창밖으로 차가 오가는 도로까지 재현돼 있다.
소요 시간과 놀라운 포인트
| 항목 | 결과 |
|---|---|
| 1회 생성 소요 시간 | 약 1분 |
| 무료 사용 횟수 | 하루 15회 |
| MCP 연동 | Stitch → Claude Code에 직접 연결해서 구현까지 자동화 |
놀라운 건, Stitch MCP Server로 Claude Code와 직결할 수 있다는 점이다. 필자는 실제로 MCP Server로 Claude Code와 연결해서 쓰고 있는데, Stitch에서 디자인한 것이 그대로 코딩 에이전트에 넘어가서 구현까지 한 번에 끝난다. 디자인→코드 사이의 수작업이 제로. 이 경험은 “다시는 못 돌아간다” 수준으로 편하다.
“디자인은 전문 분야가 아니니까”라고 미뤄뒀던 UI가 하루 만에 완전히 딴 물건이 됐다. 이건 혁명이다.
Google Stitch 사용법 — Stitch가 뭔가?
Google Stitch는 Google Labs가 2025년 5월 Google I/O에서 발표한 AI 기반 UI 디자인 플랫폼이다. Google의 최신 AI 모델 Gemini 3.0 Flash / 3.1 Pro를 기반으로, 텍스트 프롬프트·이미지·손그림 스케치·음성에서 고품질 웹/모바일 앱 UI를 몇 초 만에 생성한다.
기존 UI 디자인은 Figma 같은 전문 툴로 와이어프레임을 그리고, 컴포넌트를 배치하고, 개발자에게 코드로 넘기는 긴 과정이 필요했다. Stitch는 이 과정을 “프롬프트 한 줄 → 완성 UI + 코드”로 압축한다.
| 항목 | 내용 |
|---|---|
| 개발사 | Google Labs |
| AI 모델 | Gemini 3.0 Flash / Gemini 3.1 Pro / Nano Banana Pro (3모델 선택제) |
| 가격 | 완전 무료 (2026년 3월 기준) |
| 생성 횟수 | 하루 15회 (무료) / Standard: 월 350회 / Pro: 월 200회 |
| 출력 형식 | HTML + CSS (Tailwind CSS) / Figma 내보내기 |
| 지원 디바이스 | 웹·모바일 (iOS / Android) |
| URL | stitch.withgoogle.com |
Figma가 “디자이너를 위한 협업 툴”이라면, Stitch는 “아이디어를 가진 모든 사람을 위한 UI 생성기”다. 디자인 경험 제로여도, 말로 전달하면 프로 수준의 UI가 나온다.
Google Stitch 사용법 — 5단계로 시작하기
Google Stitch 사용법은 놀라울 정도로 단순하다. Google 계정만 있으면 지금 바로 시작할 수 있다.
Step 1: Stitch 접속 & 로그인
stitch.withgoogle.com에 접속하고 Google 계정으로 로그인한다. 18세 이상이면 누구나 이용 가능. Gemini가 지원되는 지역이면 한국에서도 접속된다.
Step 2: 프롬프트 입력으로 UI 생성
메인 화면의 프롬프트 입력란에 만들고 싶은 UI 설명을 입력한다.
프롬프트 예시:
- “대시보드가 있는 가계부 앱. 오늘의 지출, 카테고리별 집계, 최근 거래 내역 표시”
- “미니멀한 블로그 메인 페이지. 다크 모드 대응, 카드형 기사 목록”
- “피트니스 앱의 운동 기록 화면. 타이머, 세트 수, 소모 칼로리 표시”
영어가 정확도가 높은 편이지만, 한국어로도 충분히 동작한다.
Step 3: 여러 바리에이션에서 선택 & 수정
Stitch는 여러 디자인 바리에이션을 생성한다. 마음에 드는 것을 고르고, 대화형 프롬프트로 수정을 지시할 수 있다.
- “배경을 더 어둡게 해줘”
- “네비게이션 바를 아래로 옮겨줘”
- “폰트 사이즈를 키우고 둥근 버튼으로 바꿔줘”
2026년 3월 업데이트로 텍스트 요소 클릭 편집, 스페이싱 수동 조정도 가능해졌다. 프롬프트를 다시 치지 않아도 직접 UI를 편집할 수 있다.
Step 4: 화면 연결해서 프로토타입 만들기
여러 화면을 생성하면 Stitch의 “Stitch” 기능(이름의 유래)으로 화면끼리 연결할 수 있다. 버튼이나 링크에 트랜지션을 설정하고 “Play”를 누르면 인터랙티브 프로토타입으로 동작한다.
클릭했을 때 이동할 화면이 아직 없으면, Stitch가 맥락을 읽고 “다음 화면”을 자동으로 생성해주는 기능도 있다.
Step 5: 내보내기 (코드 or Figma)
3가지 AI 모델 선택
Stitch에서는 용도에 따라 3가지 AI 모델을 전환할 수 있다.
| 모델 | 특징 | 용도 |
|---|---|---|
| Gemini 3.0 Flash | 고속 생성. HTML로 고품질 디자인을 만들어 코딩 에이전트로 내보내기 가능 | 속도 중시 일상 사용 |
| Thinking with 3.1 Pro | Gemini 3.1 Pro 사용. 속도보다 품질과 추론을 우선 | 복잡한 UI나 고품질이 필요한 상황 |
| Redesign (Nano Banana Pro) | 기존 앱이나 사이트의 스크린샷에서 리디자인 | 기존 UI 개선·리뉴얼 |
다양한 내보내기 방법
| 내보내기 방법 | 내용 | 용도 |
|---|---|---|
| HTML 코드 다운로드 | 깔끔한 HTML + Tailwind CSS를 .zip으로 다운로드 | 바로 개발에 사용 |
| Paste to Figma | Auto Layout째로 Figma에 복사 & 붙여넣기 | 디자이너가 미세 조정 |
| 코딩 에이전트로 직접 내보내기 | MCP Server 경유로 Claude Code 등 AI 코딩 툴에 직결 | 디자인→구현 완전 자동화 |
| DESIGN.md | 디자인 시스템을 마크다운 형식으로 출력 | 여러 프로젝트에서 디자인 룰 공유 |
| 프로토타입 링크 | 인터랙티브 프로토타입을 URL로 공유 | 팀 리뷰·클라이언트 확인 |
코드는 실용 수준의 퀄리티라서, 바로 바이브코딩 툴(Cursor, Lovable 등)에 넘겨서 풀 기능 구현으로 넘어갈 수 있다.
2026년 3월 업데이트 — Stitch가 “딴 물건”이 된 5가지 신기능
2026년 3월 업데이트는 Google Stitch 사용법을 근본부터 바꾸는 수준이었다. 단순 UI 생성 툴에서 “AI 탑재 디자인 스튜디오”로 진화했다.
1. 무한 캔버스 (AI-Native Infinite Canvas)
Miro나 FigJam 같은 무한 캔버스인데, 모든 노드가 AI로 생성 가능한 디자인 프레임이다. 아이디어 스케치부터 와이어프레임, 하이파이 디자인, 프로토타입까지 하나의 캔버스에서 완결된다.
2. Voice Canvas (음성 디자인)
마이크에 대고 말하면 디자인이 생성·수정된다. “메뉴 레이아웃 3가지 보여줘”라고 하면 바리에이션이 표시되고, “왼쪽 거를 다크 팔레트로”라고 이어 말하면 즉시 반영된다.
Stitch는 시키는 대로만 하는 게 아니라 질문을 던진다. “타깃 사용자의 연령대는?”, “기존 브랜드 컬러가 있나?”같은 확인을 거쳐 정확도를 높인다.
3. Vibe Design (바이브 디자인)
“구체적인 스펙” 대신 “분위기”로 디자인을 시작하는 접근법이다.
“사용자에게 안정감과 신뢰를 주는 금융 앱”이라고만 말하면, Stitch가 그 “바이브”에 맞는 색, 폰트, 레이아웃, 컴포넌트를 자동 선택한다. 바이브코딩의 디자인 버전이다.
4. Design Agent (디자인 에이전트)
캔버스 전체의 컨텍스트를 이해하는 AI 에이전트가 탑재됐다. 프로젝트 진행 상황을 횡단적으로 파악하고, 일관된 디자인 시스템을 유지하면서 새 화면을 생성한다.
5. DESIGN.md & MCP Server
DESIGN.md는 디자인 시스템(컬러 토큰, 타이포그래피, 스페이싱, 컴포넌트 로직)을 마크다운 파일로 뽑아내는 구조다. 아무 URL에서든 디자인 시스템을 추출할 수 있다.
MCP Server는 IDE에서 Stitch 디자인을 직접 가져와서 코드로 변환하는 연결 수단. Claude Code나 Google Antigravity 같은 코딩 툴과 연결하면 디자인→코드 파이프라인이 자동화된다.
Google Stitch 사용법 실전 — v0·Lovable과 어떻게 조합하나
| 툴 | 강점 | 약점 | 최적 용도 |
|---|---|---|---|
| Google Stitch | 디자인 퀄리티 압도적. Figma 연동. 무료. | 백엔드 코드 생성 불가 | UI 디자인 탐색·프로토타입 |
| v0 (Vercel) | React/Next.js 코드 품질 높음. 풀스택 대응. | 디자인 퀄리티는 Stitch에 못 미침 | 프로덕션급 프론트엔드 |
| Lovable | 인증·DB·API 통합까지 원스톱. 원클릭 배포. | 디자인 커스터마이징 한계 | 백엔드 포함 완전한 앱 구축 |
가장 생산성 높은 워크플로우:
- Stitch로 비전을 잡는다 (디자인 탐색·프로토타입)
- v0로 코드로 변환한다 (React/Next.js 구현)
- Lovable로 완성품을 배포한다 (백엔드·인증·DB 추가)
세 툴은 경쟁이 아니라 보완 관계다. Stitch에서 생성한 HTML을 v0에 넘기고, Stitch의 DESIGN.md를 Cursor에 읽히는 식으로 조합하면 진가가 나온다.
Google Stitch 사용법 — Gemini 3.1 Pro vs 3.0 Flash 실제 비교
같은 프롬프트 “A landing page for a vintage car rental service with a large hero image”로 3.1 Pro와 3.0 Flash의 출력을 비교했다.
Gemini 3.1 Pro (Thinking) 출력
3.1 Pro는 레이아웃 완성도가 높다. 타이포그래피 선택, 여백 처리, 섹션 간 시각적 흐름이 세련됐다. “The Heritage Collector”라는 브랜드 스토리까지 자동 생성하고, Featured Collection·서비스 소개·CTA·푸터까지 일관된 디자인 시스템으로 구성한다.
Gemini 3.0 Flash 출력
3.0 Flash는 생성 속도가 빠르다. 디자인 방향은 비슷하지만, 3.1 Pro에 비하면 레이아웃이 약간 단순해진다. 반면 코딩 에이전트로의 직접 내보내기에 최적화돼 있어, 일상적인 UI 생성에는 이쪽이 적합하다.
사용 분류 포인트
| 상황 | 추천 모델 |
|---|---|
| 클라이언트 제안·포트폴리오 | 3.1 Pro (품질 최우선) |
| 일상적 빠른 UI 생성·프로토타입 | 3.0 Flash (속도 우선) |
| 기존 앱 리디자인 | Redesign (Nano Banana Pro) |
같은 프롬프트라도 모델에 따라 이 정도 차이가 난다. 목적에 맞게 전환하는 것이 Google Stitch 사용법의 최대 팁이다.
Google Stitch 사용법 팁 — 7가지 실전 테크닉
1. 영어 프롬프트를 쓴다
Gemini 3.0 Flash / 3.1 Pro는 영어 쪽이 정확도가 높다. UI 텍스트 요소는 나중에 한국어로 바꾸면 된다.
2. 참조 이미지를 활용한다
Pro 모드(월 200회)에서는 이미지를 업로드해서 참조할 수 있다. 경쟁 앱 스크린샷이나 손그림 스케치를 넘기면 의도대로 디자인이 나오기 쉽다.
3. Vibe Design으로 넓혔다가 좁힌다
처음에는 “신뢰감 있는 핀테크”, “장난기 있는 SNS”처럼 추상적으로 시작하고, 여러 방향성을 비교한 다음 구체적 수정에 들어간다.
4. DESIGN.md를 재활용한다
한번 만든 DESIGN.md는 다른 프로젝트에 임포트할 수 있다. 브랜드 통일감을 유지하면서 여러 앱 UI를 빠르게 생성할 수 있다.
5. Voice Canvas로 브레인스토밍
생각하면서 말하면 Stitch가 실시간으로 형태를 잡아준다. 키보드로 치는 것보다 사고의 속도로 디자인이 진행된다.
6. 자동 프로토타입으로 검증
화면을 만들면 바로 Play 모드로 조작감을 확인한다. 이동할 곳이 없는 요소는 Stitch가 자동으로 다음 화면을 생성해준다.
7. MCP 연동으로 코딩에 직결
Stitch MCP Server를 설정하면 IDE에서 Stitch 디자인을 직접 가져와 코드 구현으로 넘어갈 수 있다.
Google Stitch 사용법 자주 묻는 질문
Q: Google Stitch 사용법은 한국어로도 괜찮나?
한국어 프롬프트로도 동작한다. 다만 영어 쪽이 디자인 정확도가 높은 경향이 있다. UI 안의 텍스트 요소는 생성 후 클릭해서 한국어로 바꿀 수 있다.
Q: Google Stitch는 진짜 무료? 제한은?
2026년 3월 기준 완전 무료. 하루 15회 생성 가능. Google Labs의 실험 프로젝트로 제공되고 있다.
Q: Figma랑 Stitch 중 뭘 써야 하나?
둘 다 쓰는 게 정답. Stitch로 아이디어를 빠르게 형태로 만들고, Figma에서 세부를 조정한다. Stitch의 “Paste to Figma” 기능으로 Auto Layout째로 넘길 수 있어서 워크플로우에 무리가 없다.
Q: 생성된 코드를 그대로 쓸 수 있나?
HTML + Tailwind CSS로 출력되며, 실용 수준의 품질이다. 다만 백엔드 로직이나 데이터베이스 연결은 포함되지 않는다. 프론트엔드 출발점으로 쓰고, Cursor나 Lovable로 기능을 추가해나가는 게 현실적이다.
Q: 바이브코딩과의 관계는?
바이브코딩이 “말로 코드를 쓰는 것”이라면, Stitch의 Vibe Design은 “말로 디자인을 만드는 것”이다. 둘을 조합하면 아이디어에서 디자인, 코드, 배포까지 말만으로 완결할 수 있다.
정리 — Google Stitch 사용법을 익히고 디자인의 벽을 없애자
- 텍스트·음성·스케치에서 프로 수준의 UI를 자동 생성하는 무료 툴
- 2026년 3월 업데이트로 무한 캔버스·Voice Canvas·Vibe Design 추가
- HTML/CSS 코드 출력 & Figma 내보내기로 바로 개발에 직결
- v0·Lovable과 조합하는 게 2026년형 최강 워크플로우
- MCP Server·DESIGN.md로 코딩 툴과 심리스 연동
“디자인을 못하니까 앱을 못 만든다”는 시대는 끝났다. Stitch는 바이브코딩의 마지막 퍼즐 조각이다.
AI 업무 자동화 30분 진단이 필요하면 “진단”이라고 DM 보내주세요 → Instagram @taro_taro609
저자: 稲邉舜太朗 (Lovable 공식 앰버서더)
참고 소스:
- Google 공식 블로그: blog.google
- Google Developers Blog: developers.googleblog.com
- Stitch 공식 사이트: stitch.withgoogle.com
- NxCode 가이드: nxcode.io