구글 스티치가 뭐냐?
구글 스티치(Google Stitch)는 말이나 텍스트로 앱 화면을 만드는 AI 디자인 도구다. 구글 랩스(Google Labs)에서 만들었고, 공식 명칭은 “AI-native software design canvas”다.
포토샵이나 Figma처럼 직접 픽셀을 다루는 게 아니라, 아이디어를 설명하면 AI가 UI를 그려주는 방식이다. “가계부 앱 대시보드를 만들어줘”라고 하면, 지출 내역, 카테고리, 차트가 포함된 화면이 자동으로 생성된다.
2025년 5월 1.0으로 처음 공개됐고, 2026년 3월 18일 2.0으로 대폭 업그레이드됐다. 발표 다음 날 Figma 주가가 8.8% 하락할 정도로 업계에 파장을 일으켰다.
현재 베타 기간이라 완전 무료다. stitch.withgoogle.com에서 구글 계정만 있으면 바로 시작할 수 있다.
2.0에서 달라진 5가지 핵심 기능
① 무한 캔버스 (Infinite Canvas)
이전 버전은 프롬프트를 입력하면 결과물이 나오는 선형 구조였다. 2.0부터는 무한 캔버스로 바뀌어서, 텍스트 설명이든 참고 이미지든 기존에 만든 디자인이든 모두 같은 공간 안에서 작업할 수 있다.
초안을 잡고, 수정하고, 다른 버전과 비교하는 작업이 화면을 오가지 않고 한 캔버스 안에서 이뤄진다.
웹 디자인과 모바일 디자인을 같은 캔버스에서 동시에 작업할 수 있게 된 것도 큰 변화다. 웹 화면을 만든 뒤 “모바일 버전도 디자인해 줘”라고 하면 바로 같은 캔버스에 모바일 화면이 추가된다.
여러 디자인 방향을 동시에 탐색하는 Agent Manager 기능도 함께 제공된다.
② 스마트 디자인 에이전트
1.0의 아쉬운 점은 마지막 프롬프트 기준으로만 반응했다는 것이다. 화면 5개를 만들었는데 갑자기 처음 지시한 디자인 시스템을 무시하는 식이었다.
2.0에서는 AI가 전체 프로젝트 히스토리를 기반으로 추론한다. 이전 화면에서 선택했던 컬러 테마를 새 아트보드 생성 시에도 일관되게 유지한다.
공식 소개 기준으로는 속도와 품질의 균형이 다른 AI 모델 선택지가 제공된다. 다만 베타 기간에는 모델명과 옵션 구성이 바뀔 수 있으니, 실제 프로젝트에서는 Stitch UI에서 현재 노출되는 모델명을 직접 확인하는 편이 안전하다.
DirectEdit 기능도 추가됐다. 특정 컴포넌트를 선택한 뒤 AI와 직접 대화하면서 세부적으로 수정할 수 있다.
원하는 웹사이트 URL을 붙여 넣으면 해당 사이트의 스타일 시스템을 자동으로 추출해 주는 기능도 있다. Google Apps URL을 입력하면 색상, 둥근 모서리, 타이포그래피까지 Google Apps 스타일로 화면이 재생성된다.
③ 보이스 모드 (Voice Mode)
Gemini Live 기반의 실시간 음성 대화 기능이 추가됐다. “Live Mode” 버튼 하나로 바로 음성 대화 모드로 전환되며, 디자인 에이전트가 음성으로 답한다.
실제 사용 예시:
- “메뉴 옵션을 세 가지 다른 버전으로 보여줘”
- “이 화면을 다른 컬러 팔레트로 바꿔줘”
- “가계부용 모바일 앱 대시보드를 만들어줘”
한국어 지원도 된다. “한국어로 대답해봐”라고 하면 즉시 한국어로 응답한다. 키보드를 두드리는 것보다 말하는 것이 더 자연스러운 사람에게 특히 유용하다.
④ 인스턴트 프로토타이핑
정적인 디자인 화면을 실제로 클릭해볼 수 있는 인터랙티브 프로토타입으로 자동 변환한다.
Figma에서 화면 사이를 연결할 때 일일이 “파란 국수”(연결선)를 끌어다 이어야 했던 것과 달리, Stitch 에이전트가 아트보드 사이의 연결을 자동으로 생성한다.
“Artists Profile 화면에서 아티스트를 눌렀을 때 상세 페이지로 이동하는 것을 시뮬레이션해줘”라고 요청하면 바로 연결된 프로토타입이 생성된다. QR 코드로 실제 모바일 기기에서 미리보기도 가능하다.
⑤ 디자인 시스템 + DESIGN.md
1.0 버전의 가장 큰 불만 중 하나가 “디자인 시스템을 적용하라고 해도 AI가 무시한다”는 것이었다. 2.0에서 이 부분이 구조적으로 해결됐다.
이제 디자인 시스템이 Single Source of Truth, 즉 모든 생성물이 따르는 유일한 기준으로 설계되어 있다. 화면을 아무리 많이 만들어도 컬러, 타이포그래피, 컴포넌트 스타일이 일관되게 유지된다.
DESIGN.md는 색상, 타이포그래피, 간격, 컴포넌트 규칙을 담은 마크다운 파일로, AI 에이전트가 바로 읽을 수 있는 형식이다.
- 프로젝트 시작 시 Stitch가 자동으로 생성
- 회사에서 이미 쓰고 있는 디자인 시스템을 그대로 붙여 넣기 가능
- 원하는 웹사이트 URL을 입력하면 그 사이트의 스타일을 자동으로 추출
바이브 디자인 (Vibe Design)이란?
스티치를 다른 AI 디자인 도구와 차별화하는 핵심 개념이 “바이브 디자인”이다.
기존 방식은 “12열 그리드에 16px 거터 사용”과 같은 기술적 사양을 입력해야 했다. 하지만 바이브 디자인에서는 원하는 것의 “느낌”을 설명한다.
예시:
- “깔끔하고 현대적인 느낌으로”
- “친근하고 따뜻한 분위기”
- “기업용으로 전문적인 느낌”
AI가 이 “분위기”를 해석해서 디자인을 생성한다. 비개발자가 디자인 용어를 몰라도 원하는 결과물을 얻을 수 있게 해주는 핵심 차별점이다.
Figma vs Google Stitch 2.0 비교
Stitch 2.0 발표 다음 날 Figma 주가가 하루 동안 8.8% 하락했다. 타이밍상 Stitch 2.0 발표와 맞물려 시장이 반응한 것으로 보이지만, 두 도구는 서로 다른 역할을 맡고 있다.
| 항목 | Google Stitch 2.0 | Figma |
|---|---|---|
| 가격 | 무료 (베타) | 유료 (무료 티어 제한적) |
| AI 통합 | 핵심 (AI-native) | 플러그인 방식 |
| 실시간 협업 | 미지원 (현재 한계) | 업계 최고 수준 |
| 코드 출력 | HTML + Tailwind CSS | Dev Mode (개발자 핸드오프) |
| 보이스 입력 | 지원 (한국어 포함) | 미지원 |
| 플러그인 생태계 | 초기 단계 | 2,000개 이상 |
| 디자인 시스템 | DESIGN.md (AI 친화적) | 업계 표준 수준 |
| 시작 난이도 | 낮음 (비개발자 가능) | 중간 |
전문가들 사이에서 정착된 포지셔닝: “Stitch가 0에서 1을 담당하고, Figma가 1에서 100을 담당한다.”
아직 이름도 없는 아이디어를 화면으로 빠르게 만들어보고 방향을 잡는 초기 단계에서는 Stitch가, 픽셀 단위 정밀 작업이나 팀 전체가 실시간으로 함께 작업하는 단계에서는 Figma가 강점을 발휘한다.
실제로 Stitch 공식 Export 옵션에 “Figma로 복사” 기능이 있다. Stitch에서 만든 아트보드를 Figma에 컴포넌트 형태로 붙여 넣으면 auto layout까지 그대로 전달된다.
개발자를 위한 MCP 서버 연동
개발자라면 MCP(Model Context Protocol) 서버 지원이 주목할 만하다.
공식 소개에 따르면 Stitch는 MCP 서버와 SDK를 통해 다른 개발 도구와 연동할 수 있다. 다만 베타 기능은 문서 경로와 공개 저장소 위치가 바뀔 수 있으니, 실제 연동 전에는 Stitch 공식 문서에서 최신 설정 페이지를 다시 확인하는 것이 안전하다.
워크플로우:
- Stitch에서 컨셉 디자인
- MCP로 코딩 에이전트에 전달
- 풀스택 앱 구현
Export 옵션:
- Google AI Studio
- Figma
- ZIP 다운로드
- 클립보드 복사
- MCP 서버 연결
누가 쓰면 좋은가?
디자이너
클라이언트 미팅 전날 밤 컨셉 방향을 빠르게 여러 개 만들어보는 데 유용하다. Stitch에서 분위기와 방향을 잡은 뒤, 공식 Figma Export 기능을 통해 작업물을 Figma로 넘겨 픽셀 정밀도 작업과 디자인 시스템 적용을 이어가는 흐름을 사용하는 디자이너들이 늘고 있다.
개발자
MCP 서버 연동이 핵심이다. Stitch에서 UI를 디자인한 뒤, Cursor나 Claude Code 같은 코딩 도구로 컨텍스트를 넘겨 후속 구현에 활용할 수 있다. 다만 이 흐름은 베타 단계라 자동 양방향 동기화처럼 기대하기보다, 현재 제공되는 export·연동 방식에 맞춰 수동 검증을 포함한 워크플로우로 보는 편이 안전하다.
비개발자, 창업자
코딩이나 디자인 배경 없이도 서비스 아이디어를 화면으로 옮길 수 있다. 보이스 모드로 대략적인 아이디어를 말하면 초안이 만들어지고, 인스턴트 프로토타이핑으로 화면 사이를 연결하면 클릭 가능한 데모가 된다. 팀원이나 투자자에게 보여줄 수 있는 수준의 시연 자료를 빠르게 만들 수 있다.
5분 만에 첫 화면 만들기
1. 접속 및 로그인
stitch.withgoogle.com에 접속해 구글 계정으로 로그인한다. 만 18세 이상이면 전 세계 어디서든 사용할 수 있다.
2. 새 프로젝트 생성 및 디자인 시스템 설정
새 프로젝트를 시작하면 가장 먼저 디자인 시스템을 선택하게 된다. 미리 설정된 프리셋을 고르거나, URL을 붙여 넣어 원하는 스타일을 자동 추출할 수 있다.
3. 텍스트 프롬프트로 첫 화면 생성
원하는 앱이나 사이트를 텍스트로 설명한다. “소규모 카페를 위한 예약 앱 메인 화면” 정도면 충분히 구체적이다.
4. DirectEdit으로 세부 수정
생성된 화면에서 바꾸고 싶은 컴포넌트를 선택한 뒤 AI에게 직접 수정 지시를 내린다.
5. QR 코드로 모바일 미리보기
오른쪽 상단 Preview 버튼을 누르면 QR 코드가 생성된다. 스마트폰으로 스캔하면 실제 모바일 화면으로 디자인을 확인할 수 있다.
요금과 사용 제한은 꼭 최신 화면으로 확인하자
Stitch는 베타 서비스라서 무료 제공 범위, 생성 횟수, 기능 제한이 수시로 바뀔 수 있다. 따라서 블로그 글이나 커뮤니티 후기의 숫자를 그대로 믿기보다, 실제 사용 시점에 계정 화면이나 공식 안내 문구를 직접 확인하는 편이 안전하다.
특히 팀 단위로 많이 생성하거나 리디자인 기능을 자주 돌릴 계획이라면, 베타 종료 이후 유료 전환 가능성까지 같이 감안해야 한다.
현재 한계점
실시간 협업 미지원
Figma처럼 팀원 여럿이 동시에 같은 파일에서 작업하는 기능은 아직 없다. 팀 단위 디자인 작업에는 현재로서는 적합하지 않다.
AI의 컴포넌트 “망각”
특정 컴포넌트를 마음에 들게 만들었는데, AI가 이후 작업에서 그 스타일을 잊거나 이상하게 재해석하는 경우가 생긴다. 디자인 시스템 기능이 이 문제를 상당히 줄여줬지만 완전히 해결된 것은 아니다.
프로덕션 수준 완성도
Stitch 출력물은 아이디어 검증과 초기 프로토타입에는 매우 유용하지만, 실제 서비스에 바로 투입할 수준의 코드라고 보기는 어렵다. 시맨틱 구조, 접근성, 반응형 세부 조정, 상태 관리, API 연결 같은 부분은 별도 보완이 필요하고, 실무에서는 생성 코드를 참고용 초안으로 쓰고 다시 정리하는 경우가 많다.
구글의 실험 프로젝트 리스크
Google Labs 산하 서비스이기 때문에 장기적으로 이 도구에 깊이 의존하는 계획을 세울 때는 구글이 실험 프로젝트를 중단한 전례를 감안해야 한다. 여기에 더해 무료 베타가 언제까지 유지될지, 정식 출시 후 어떤 가격 정책이 붙을지도 아직 변수다.
데이터 보안과 프라이버시
Stitch는 클라우드 기반 도구라서 화면 설명, 참고 자료, 디자인 시스템 정보가 외부 서비스로 올라간다. 따라서 NDA가 걸린 고객 프로젝트나 민감한 내부 화면을 다룰 때는 업로드 가능한 범위를 먼저 정하고, 필요하면 더미 데이터로만 테스트하는 편이 안전하다.
마무리
Stitch 2.0은 디자인이 전문가만의 영역이 아니라는 방향을 가장 명확하게 보여주는 도구다. 화면 설계에 익숙하지 않아도, 키보드 대신 말로 아이디어를 전달하고 몇 분 안에 움직이는 프로토타입을 얻을 수 있게 됐다.
현재는 무료 베타 기간인 만큼, 부담 없이 한 번 써보기에 지금이 가장 좋은 타이밍이다.
실제로 이 도구를 직접 써본 디자이너들 사이에서는 “지금 이 변화에 주의를 기울이지 않는 디자이너는 뒤처질 수 있다”는 말이 나올 정도로 빠른 발전이다. 위협이라기보다 변화의 속도를 체감하고 새 도구를 익히는 기회로 보는 편이 생산적이다.
