이게 생각보다 중요합니다. 구글 스티치는 선택한 매체에 맞게 타이포그래피 계층, 이미지 배치, 레이아웃 밀도를 자동으로 최적화하거든요.
구글 스티치 시작 방법: 3단계 무료 접속 가이드
이커머스 → Mobile App
B2B 피치덱 → Web App
첫 선택을 잘못해도 나중에 전환은 가능하지만, 처음부터 맞추면 결과물 퀄리티가 확실히 다릅니다.
구글 스티치 프롬프트 작성법: 고퀄리티 UI 만드는 공식
여기서 대부분의 사람들이 막힙니다.
“그냥 원하는 거 입력하면 되는 거 아냐?”
네, 그렇게 하면 딱 6점짜리가 나와요.
10점짜리를 원한다면 이 3요소 템플릿을 사용하세요:
항목
내용
Idea
이 앱/사이트의 목적은? 원하는 CTA는?
Theme
어떤 분위기·미학인가?
Content
어떤 정보가 있어야 사용자가 행동하나?
실제 예시 (B2B 피치덱):
“성장 마케팅 인재 배치 회사 ‘Growth Assistant’를 위한 B2B 피치덱. 테마: 클린하고 모던하며 신뢰감 있는 느낌. 블랙 앤 화이트, 굵은 타이포그래피, 미니멀 데코레이션. 포함 내용: ‘배포 준비 완료된 AI 학습 마케팅 인재’라는 태그라인이 있는 커버 슬라이드, 잘못된 채용의 비용을 보여주는 문제 슬라이드, 솔루션, 가격 정책, 30일 온보딩 타임라인, HubSpot·Notion·Reddit 클라이언트 성공 지표.”
이 정도 프롬프트 하나에 결과물이 얼마나 달라지는지 직접 경험해보세요.
구글 스티치 프롬프트 작성법: 고퀄리티 UI 만드는 공식
단계별 프롬프트 전략 4가지:
① 형용사로 분위기를 설정하라
“활기차고 격려하는 피트니스 트래킹 앱”
“미니멀하고 집중감 있는 명상 앱”
형용사 하나가 색상, 폰트, 이미지 선택 전체를 바꿉니다.
② 화면 단위로 세밀하게 요청하라
한 번에 전부 바꾸려 하지 말고, 화면 하나에 집중하세요.
“로그인 화면의 CTA 버튼을 더 크게 만들고 브랜드 블루로 바꿔줘”
③ 이미지 분위기도 묘사하라
“서버번 레전즈 음악 플레이어 페이지. 앨범 아트는 바다 수면을 클로즈업한 사진. 배경 이미지도 이 느낌으로.”
④ 테마 요소를 직접 지정하라
"프라이머리 컬러를 포레스트 그린으로 변경"
"제목에 세리프 폰트 적용"
"모든 버튼 완전 라운드 처리"
"인풋 필드에 2px 솔리드 블랙 보더"
구글 스티치 기능 완전 해부: 3가지 AI 디자인 엔진
구글 스티치는 하나의 AI가 아닙니다. 복수의 특화된 디자인 엔진이 숨겨진 메뉴 안에 있어요.
구글 스티치 기능 완전 해부: 3가지 AI 디자인 엔진
🧠 Thinking with 3.1 Pro
복잡한 대시보드, 프로덕션급 랜딩 페이지에 적합. 크레딧 소모가 크고 시간이 걸리지만, AI가 설계를 ‘추론’하면서 만들기 때문에 결과물의 논리적 완성도가 높습니다.
🎨 Redesign (Nano Banana Pro)
기존 인터페이스를 업그레이드할 때. 벤토 그리드, Glassmorphism, 듀오톤, 모노크로매틱 등 특정 시각 스타일을 적용하기에 최적입니다.
⚡ 3 Flash 모드
속도가 먼저일 때. 레이아웃 초안을 빠르게 잡고 Figma에서 마무리하는 워크플로우에 딱 맞습니다.
구글 스티치 Variations 기능: 시안 5개를 5분 만에
Variations는 구글 스티치의 진짜 무기입니다.
광범위한 방향 프롬프트 하나로 2~5개의 시안을 동시에 생성하고, 마음에 드는 것을 고르거나 각 결과물의 장점을 합칠 수 있어요.
기존 디자이너들이 6~8시간 동안 하던 일 — 여러 버전 만들고 스테이크홀더와 검토하는 과정 — 을 5분으로 압축합니다.
Variations 활용 순서:
광범위한 방향 프롬프트로 2~5개 변형 생성
비전에 가장 가까운 옵션 선택
Creative Range를 Refined(낮음) 으로 조정
다른 결과물의 색상·레이아웃 요소를 통합 요청
Creative Range 슬라이더:
Refined: 구조 유지, 폰트·간격·색상만 변경
Creative: 레이아웃·이미지·테마 전면 재구성
구글 스티치 숨겨진 기능 4가지: 튜토리얼에 없는 꿀팁
튜토리얼에서 거의 언급되지 않지만, 실무에서 가장 강력한 기능들입니다.
1. Instant Prototype
현재 화면을 기반으로 예상 사용자 플로우에 따라 다음 화면을 자동 생성합니다. 와이어프레임 하나 그리지 않고 전체 프로토타입 완성이 가능해요.
2. Live Mode (음성 디자인)
입력창 옆 버튼을 누르면 활성화됩니다. 말을 하면 실시간으로 디자인이 업데이트돼요. 처음 써본 순간 진짜 입이 벌어집니다.
3. 브랜드 킷 자동 추출
웹사이트 URL 하나로 색상, 폰트, 컴포넌트 스타일을 자동 추출해 Design System으로 저장합니다.
사용법:
Design Systems 아이콘 → + → Import from website
URL 붙여넣기
구글 스티치가 스크래핑 후 브랜드 시스템 구성
기존에 직접 브랜드를 디자인하지 않았어도 온브랜드 결과물을 만들 수 있습니다.
4. Figma 내보내기
결과물을 Figma 파일로 직접 내보내며, 편집 가능한 레이어와 Auto Layout이 그대로 유지됩니다.
구글 스티치가 Figma를 없애는 게 아니에요. 구글 스티치로 시작하고 Figma로 마무리하는 겁니다.
구글 스티치 MCP 서버 연동: 코드 자동 추출까지
구글 스티치 MCP 서버는 구글 스티치를 개발 도구와 직접 연결하는 브릿지입니다.
Cursor, Gemini CLI, Claude Code 등 MCP 호환 클라이언트에서 구글 스티치 프로젝트의 화면·코드·에셋에 직접 접근할 수 있어요.
실질적인 의미:
코딩 에이전트가 실제 화면을 “보면서” 코드를 생성 → 환각(hallucination) 현상 감소
