🧵

Google Stitch

한 줄 설명
프롬프트로 UI를 그려주는 구글 랩스(Google Labs)의 비이브 디자인(Vibe Design) 도구입니다. 디자인할 때 어디서부터 어떻게 해야 할 지 막막하지 않나요? 그 고민의 시간을 줄여주는 도구예요.

1) 요약 정리해보면

  • 구글 스티치(Google Stitch)는 자연어 프롬프트와 이미지·스케치·URL을 입력하면 모바일과 웹 UI 시안, 디자인 시스템까지 만들어주는 무료 인공지능(AI) 디자인 도구입니다.
  • 첫 번째 특징은 제미나이 3 프로(Gemini 3 Pro) 모델을 기반으로 여러 개의 UI 시안을 동시에 만들어 비교하고 고를 수 있다는 점이에요.
  • 두 번째 특징은 구글 AI 스튜디오(AI Studio), 피그마, HTML/CSS, 리액트(React)로 바로 내보낼 수 있어 디자인에서 코드로 이어지는 흐름이 매끄럽다는 점입니다.
  • 세 번째 특징은 무한 캔버스, 음성 디자인 크리틱, 인스턴트 프로토타입(Instant Prototype)을 한 화면에서 다룰 수 있다는 점이에요.

2) 이 툴이 뭔가요

스티치는 From idea to app이라는 슬로건처럼 아이디어에서 시안, 프로토타입, 코드까지 이어지는 거리를 가장 짧게 만들어주는 도구입니다. 구글 계정만 있으면 stitch.withgoogle.com에서 바로 시작할 수 있고, 별도의 신용카드 등록도 필요하지 않아요.
핵심 작동 방식은 두 갈래로 나뉩니다. 첫 번째는 프롬프트로 UI를 만드는 방식인데, 텍스트뿐 아니라 이미지와 경쟁사 URL까지 입력 자료로 쓸 수 있어요. 두 번째는 AI 네이티브 캔버스(AI-Native Canvas)라는 무한 캔버스 위에서 화면을 늘어놓고 디자인 에이전트와 대화하며 다듬어가는 흐름입니다.

3) 비슷한 툴과 어떻게 다른가요

비교축
구글 스티치
피그마(Make/AI)
v0(Vercel)
프레이머(Framer)
강점
아이디어에서 고품질 UI 시안까지 가장 빠르게 도달
정밀 편집과 협업, 디자인 시스템 운영
섀드시엔(shadcn) 기반 리액트 코드 즉시 생성
디자인 그대로 웹사이트 게시
약점
세부 픽셀 컨트롤은 피그마보다 약함
빈 캔버스에서 시작하는 부담
비주얼 편집보다 코드 중심
인공지능 생성보다 수동 디자인 비중이 큼
가격
무료, 월 350 크레딧과 일일 한도 적용
무료 + 프로 $15/월 이상
무료 + 프로 $20/월 이상
무료 + 사이트당 $10/월 이상
추천 상황
1인이나 소규모 팀이 1차 시안을 빠르게 뽑을 때
팀 협업과 디자인 시스템 운영 단계
이미 프론트엔드 코드를 다룰 수 있을 때
디자인 결과물이 곧 배포가 되는 작업일 때
전문가의 한 줄 인사이트
스티치는 최종 디자인을 대신 그려주는 도구가 아니라, 빈 캔버스에서 시작하는 부담을 빠르게 덜어주는 도구입니다. 시안의 80%까지 끌어올린 다음 나머지 20%는 피그마나 코드 에디터에서 마무리하는 흐름이 가장 효율적이에요.

4) 핵심 기능 다섯 가지

  1. 프롬프트로 다중 UI 시안 만들기
      2. 한 번의 프롬프트로 두세 개의 시안을 동시에 만들어요. A/B로 곧장 비교할 수 있어 방향성에 대한 의사결정이 빨라집니다. 처음 써본다면 인공지능 교육 SaaS 랜딩페이지, 다크 모드, 절제된 톤처럼 한 문장으로 출발해보세요.
  1. AI 네이티브 캔버스
      2. 여러 화면을 한 캔버스에 펼쳐놓고 디자인 에이전트와 대화하며 진행 상황을 추적할 수 있습니다. 홈에서 가격, 코스 상세, 결제로 이어지는 다중 화면을 한눈에 설계하기에 좋아요. 사이트맵부터 만든 뒤 화면별로 노드를 추가해 흐름을 그려보면 감을 잡기 쉽습니다.
  1. 이미지·URL·design.md 입력
      2. 레퍼런스 이미지, 경쟁사 URL, 또는 휴대 가능한 디자인 시스템 파일인 design.md를 입력 자료로 받습니다. 리니어(Linear) 같은 톤이라거나 이 스크린샷처럼이라는 식의 비주얼 지시를 직접 전달할 수 있어 결과 편차가 줄어들어요. 처음에는 리니어, 레니스 뉴스레터(Lenny's Newsletter), 노션(Notion) 홈 URL을 레퍼런스로 넣어보면 감이 빨리 옵니다.
  1. 인스턴트 프로토타입과 음성 피드백
      2. 화면을 우클릭한 뒤 인스턴트 프로토타입을 실행하면 클릭 가능한 흐름이 자동으로 연결되고, 음성으로 디자인 피드백을 받을 수도 있어요. 발표나 고객 미팅 직전에 짧은 인터랙션 시연을 만들기에 좋습니다. 메인 CTA에서 결제 화면까지 이어지는 흐름을 묶어보면 첫 감을 잡을 수 있어요.
  1. AI 스튜디오·피그마·HTML/CSS·리액트로 내보내기
      2. 만든 디자인을 그대로 코드 또는 피그마로 내보낼 수 있습니다. 디자인과 개발이 끊어지는 단절을 줄여주는 핵심 기능이에요. 시안 한 개를 리액트로 내보낸 뒤 커서(Cursor)나 안티그래비티(Antigravity)로 가져가서 실제 페이지를 만들어보면 흐름이 한눈에 들어옵니다.

5) 활용 사례

  • 디자인에서 코드로 이어지는 풀 워크플로우는 스티치에서 시안을 만든 뒤 구글 AI 스튜디오 또는 안티그래비티로 내보내 실제 작동하는 웹 앱까지 한 세션에서 끝내는 패턴입니다. 마인드스튜디오(MindStudio)가 2026년 3월에 정리한 디자인-코드 워크플로우 가이드에 단계별로 소개돼 있어요.1
  • 랜딩페이지 빠른 A/B 비교는 동일한 프롬프트에 톤과 컬러만 바꿔 서너 개 시안을 뽑은 뒤 클라이언트에 동시 제안하는 방식입니다. UI 콜렉티브(UI Collective)가 2026년 3월 23일 공개한 영상 리뷰에서 강조한 활용법이에요.2
  • 디자인 시스템 추출은 경쟁사 URL을 입력해 컬러, 타이포, 컴포넌트 패턴을 design.md로 뽑아낸 뒤 새 프로젝트의 출발점으로 재사용하는 흐름입니다. 마인드스튜디오의 How to Use Google Stitch to Build a Website Design System 가이드가 단계별로 다루고 있어요.3
  • 모바일 앱 와이어프레임을 한 장에서 여섯 장의 화면으로 늘리는 활용 사례도 자주 언급됩니다. 부트캠프(Bootcamp) 매거진의 2026년 3월 핸즈온 리뷰가 이 패턴을 자세히 소개했어요.4

6) 가격 안내 (2026-05 기준)

  • 크레딧 제도가 있습니다. 2026년 3월 18일 업데이트로 일일 크레딧과 월 최대 약 350 크레딧 한도가 도입됐어요. 제미나이 3 프로 같은 상위 모델은 크레딧 소모량이 더 큽니다.
  • 유료 플랜은 아직 없어요. 2026년 4월 시점 기준으로 별도 구독 플랜은 출시되지 않았습니다. 다만 구글 랩스의 실험 단계 제품이라 향후 정책은 바뀔 수 있어요.
조사 시점: 2026-05-05. 최신 한도와 플랜은 공식 Pricing 페이지에서 확인하는 게 가장 정확합니다.

7) 활용 예시

  • 온라인 강의 랜딩 페이지는 스티치로 강의 소개, 커리큘럼, 수강생 후기, 결제 네 섹션 시안을 만들고 프레이머로 출시하는 흐름이 1인 강사들 사이에서 가장 많이 쓰입니다.
  • 뉴스레터 아카이브는 레니스 뉴스레터 스타일의 카드 그리드를 스티치로 만든 뒤 비하이브(Beehiiv)나 서브스택(Substack) 임베드와 연결하는 방식이 자연스러워요.
  • 인공지능 툴 디렉토리는 카테고리, 검색, 필터가 있는 디렉토리 UI를 스티치로 빠르게 그려서 워크스페이스 안의 AI Tools_DB와 연동되는 외부 사이트로 키울 수 있습니다.
  • 포트폴리오와 컨설팅 문의 페이지는 다크 무드, 작품 그리드, 캘린더 임베드인 Cal.com 흐름을 한 번에 시안화하기에 좋아요.

8) 누가 쓰면 좋을까

  • 지금 도입을 추천합니다.
      • 1인이나 소규모 팀, 디자이너가 없는 창업가, 빠른 1차 시안과 빠른 피드백이 필요한 콘텐츠 또는 교육 비즈니스에 잘 맞아요.
  • 고려해보세요!
      • 디자인 시스템을 이미 운영 중인 팀이라면 스티치 결과를 기존 시스템에 맞게 변환하는 작업이 따로 필요합니다.
  • 아직은 보류해도 좋아요.
      • 픽셀 단위 정밀 디자인이 핵심인 브랜드 작업은 여전히 피그마가 우위에 있고, 복잡한 데이터 시각화 화면도 전문 도구가 더 적합합니다.

9) 시작 가이드 (3단계)

  1. 회원가입은 구글 계정으로 stitch.withgoogle.com에 접속해 진행합니다. 신용카드 등록 없이 바로 캔버스로 들어갈 수 있어요.
  1. 첫 5분에는 한 문장 프롬프트로 두세 개 시안을 만들어보고, 우측 패널에서 컬러와 폰트가 어떻게 잡히는지 살펴봅니다.
  1. 30분 안에 사이트맵을 프롬프트로 정의해보고, 레퍼런스 URL을 두세 개 더 붙여 일관된 시스템이 잡히는지 확인합니다. 여기까지 와서 결과물이 마음에 들면 곧장 내보내기로 넘어가도 좋아요.

10) 알아두면 좋은 한계점

  • 세부 컨트롤이 부족합니다. 위치와 간격을 1~2픽셀 단위로 조정하기 어려워서 정밀 보정은 피그마에서 마무리하는 게 좋아요.
  • 웹보다 모바일 앱 UI가 더 안정적이라는 평이 다수입니다. 웹 결과물은 시안의 출발점 정도로 잡는 편이 안전해요.
  • 크레딧 한도가 있어서 실험적으로 다중 시안을 뽑다 보면 빠르게 소진될 수 있습니다.
  • 구글 랩스의 실험 단계 제품이라 정책과 UI가 자주 바뀌어요. 중요한 프로젝트는 내보내기 후 별도로 보관해두는 걸 권장합니다.

11) 참고 공식 문서

  • 구글 공식 블로그 Introducing vibe design with Stitch: blog.google