1. 구글 스티치란 무엇인가?
구글 스티치란? AI로 UI/UX 디자인을 만드는 새로운 방식
구글 스티치(Google Stitch)는 텍스트 프롬프트나 이미지, 스케치, 기존 디자인 자료를 바탕으로 앱과 웹 화면을 생성해주는 AI 기반 UI/UX 디자인 도구입니다.
처음에는 “말로 설명하면 화면을 만들어주는 도구”에 가까웠지만, 최근에는 단순한 UI 생성기를 넘어 디자인 시스템, 프로토타입, 접근성 점검, Figma 연동, 코드 내보내기까지 지원하는 AI 디자인 작업공간으로 확장되고 있습니다.
즉, 구글 스티치는 빈 화면에서 디자인을 시작해야 하는 부담을 줄이고, 아이디어를 실제 화면으로 빠르게 바꿔주는 도구라고 볼 수 있습니다.
좀 더 자세한 내용은 이전 글을 참고하세요
바이브 코딩 시대에 구글 스티치가 필요한 이유
요즘은 AI 코딩 도구를 활용해 앱이나 웹서비스를 빠르게 만드는 경우가 많습니다. 이를 흔히 바이브 코딩이라고 부릅니다.
바이브 코딩은 구현 속도가 빠르다는 장점이 있습니다. 하지만 실제로 사용하다 보면 기능은 구현되었는데 화면이 어색하거나, 버튼과 카드 디자인이 평범하거나, 모바일 사용성이 떨어지는 경우가 많습니다.
이때 구글 스티치가 유용합니다.
AI 코딩 도구가 “기능 구현”에 강하다면, 구글 스티치는 “사용자가 보게 될 화면과 디자인 기준”을 먼저 잡아주는 역할을 합니다. 그래서 바로 코딩부터 시작하기보다, 스티치에서 화면 구조와 디자인 방향을 먼저 만든 뒤 Antigravity, Claude Code, AI Studio 같은 개발 도구로 넘기면 훨씬 안정적인 결과를 얻을 수 있습니다.
2. 구글 스티치 시작하기
처음 스티치에 접속하면 이런 화면을 보시게 됩니다.
Stitch의 시작 화면으로, 기본 모바일 앱 디자인을 위한 프롬프트 입력창과 예시 아이디어 칩이 표시되어 있습니다.
모바일 앱과 웹 화면을 나누어 시작하기
구글 스티치를 사용할 때 먼저 확인해야 할 것은 모바일 앱과 웹 화면을 구분하는 것입니다.
모바일 앱은 스마트폰 사용성을 기준으로 화면이 구성됩니다. 큰 버튼, 하단 네비게이션, 간단한 입력 흐름, 한 손 조작 등이 중요합니다.
반면 웹 화면은 관리자 페이지, 대시보드, 통계 화면, 표와 필터가 많은 업무 시스템에 적합합니다.
구글 스티치 모델 선택 가이드
구글 스티치에서는 작업 목적에 따라 여러 방식의 모델 또는 작업 모드를 선택할 수 있습니다.
3 Flash는 빠른 시안 제작에 적합합니다. 아직 기획이 완전히 정리되지 않았거나 여러 디자인 방향을 빠르게 비교하고 싶을 때 좋습니다.
Thinking with 3.1 Pro는 복잡한 화면 구조를 설계할 때 적합합니다. 전자결재 시스템, 관리자 권한이 있는 업무앱, 통계 대시보드처럼 사용자 역할과 흐름이 복잡한 경우에 유용합니다.
Redesign은 기존 화면을 다시 디자인할 때 좋습니다. 이미 만든 앱의 화면이 촌스럽거나 모바일 사용성이 부족할 때, 기존 기능은 유지하면서 디자인만 개선하는 용도로 사용할 수 있습니다.
Ideate는 바로 화면을 만들기보다 서비스 아이디어와 사용자 흐름을 먼저 정리할 때 적합합니다.
정리하면 3 Flash는 빠른 초안, Thinking은 복잡한 설계, Redesign은 기존 화면 개선, Ideate는 기획 정리에 적합합니다.
DESIGN.md로 디자인 기준 만들기
구글 스티치에서 중요한 기능 중 하나는 DESIGN.md를 활용할 수 있다는 점입니다.
DESIGN.md는 서비스의 디자인 규칙을 정리한 문서입니다. 색상, 폰트, 버튼 스타일, 카드 구조, 접근성 기준, 브랜드 톤을 미리 정리해두면 AI가 더 일관된 화면을 만들 수 있습니다.
저 같은 경우는 앱을 처음으로 만들 때 ChatGPT나 클로드 같은 앱에 제가 원하는 디자인에 대해 간략하게 입력하고(사실 많은 경우 애플과 같은 멋진 디자인으로 만들어 달라고 합니다) DESIGN.md 형식으로 디자인을 정리해 달라고 합니다. 그러면 한결 멋진 디자인으로 앱을 제작할 수 있습니다.
예시는 다음과 같습니다.
# DESIGN.md
## Brand
서비스명: WorkFit
목적: 장애인 취업자의 근무 적응 상태를 쉽게 확인하고, 담당자가 빠르게 지원할 수 있도록 돕는 앱
## Tone
따뜻함, 신뢰감, 명확함, 공공기관 서비스다운 안정감
## Colors
Primary: 차분한 블루 계열
Success: 안정감을 주는 그린
Warning: 주의가 필요한 오렌지
Danger: 긴급 확인이 필요한 레드
Background: 밝고 정돈된 회색 계열
## Components
버튼은 모바일에서 누르기 쉽게 크게 만든다.
카드는 넉넉한 여백과 둥근 모서리를 사용한다.
상태 표시는 색상만 사용하지 않고 아이콘과 텍스트를 함께 사용한다.
## Accessibility
글자 크기는 작게 만들지 않는다.
중요 버튼은 한 손으로 누르기 쉬운 위치에 둔다.
색상 대비를 충분히 확보한다.
발달장애인 사용자를 고려해 문장을 짧고 명확하게 작성한다.DESIGN.md를 사용하면 화면마다 색상이나 버튼 스타일이 달라지는 문제를 줄일 수 있습니다. 또한 이후 개발 도구에 넘길 때도 “이 디자인 기준을 유지해줘”라고 명확하게 요청할 수 있습니다.
3. 구글 스티치 핵심 기능 사용법
구글 스티치를 제대로 이해하려면 기능 설명만 보는 것보다 실제로 하나의 서비스를 가정하고 화면을 만들어보는 것이 좋을 것 같습니다.
이번 예시는 “AI 여행 플래너 모바일 앱”으로 잡아보겠습니다.
구글 스티치에 넣어볼 최적화 프롬프트 예시
아래 프롬프트는 구글 스티치에서 모바일 앱 화면을 만들 때 사용할 수 있는 예시입니다.
프리미엄 AI 여행 플래너 모바일 앱 UI를 디자인해줘.
앱 이름은 “Routeé”야.
사용자는 바쁜 직장인, 커플, 친구 여행자, 혼자 여행하는 20~40대 사용자야.
이 앱은 사용자의 취향, 예산, 여행 기간, 날씨, 이동 동선을 분석해서 감각적인 여행 일정을 자동으로 제안해주는 서비스야.
전체 디자인 목표는 다음과 같아.
- 누가 봐도 깔끔하고 아름다운 프리미엄 모바일 앱처럼 보여야 해
- Apple, Airbnb, Arc, Linear, Raycast 같은 제품에서 느껴지는 정제된 디자인 감각을 참고해줘
- 단순한 카드 나열이 아니라 시각적 리듬과 여백, 깊이감, 타이포그래피 위계가 살아 있어야 해
- 너무 화려한 스타트업 랜딩페이지 느낌은 피하고, 고급스럽고 조용한 아름다움을 보여줘
- AI가 만든 흔한 앱처럼 보이지 않게 디테일이 살아 있어야 해
- 화면은 실제 앱스토어에 올려도 어색하지 않을 정도의 완성도를 목표로 해줘
핵심 화면은 다음 5개를 만들어줘.
1. 홈 화면
- 상단에는 “Where to next?” 같은 짧고 감각적인 문구
- 사용자의 다음 여행 추천 카드
- 날씨, 예산, 여행 스타일을 반영한 AI 추천 섹션
- 큰 이미지 카드와 섬세한 오버레이 텍스트
- 하단 네비게이션 포함
2. 여행 생성 화면
- 목적지, 날짜, 예산, 여행 스타일을 선택하는 화면
- 선택지는 버튼형 칩으로 구성
- “slow travel”, “food focused”, “hidden gems”, “romantic”, “architecture” 같은 취향 태그 포함
- 입력 흐름이 복잡하지 않고 감각적으로 이어져야 함
3. AI 추천 일정 화면
- Day 1, Day 2, Day 3 일정 타임라인
- 오전, 점심, 오후, 저녁 코스가 자연스럽게 이어지는 구조
- 장소 카드에는 사진, 이동 시간, 예상 비용, 추천 이유가 포함됨
- AI가 추천한 이유를 짧고 우아한 문장으로 표시
4. 장소 상세 화면
- 큰 장소 이미지
- 장소 이름, 한 줄 설명, 평점, 예상 체류 시간
- “왜 추천했는지”를 설명하는 AI insight 영역
- 지도 미리보기와 주변 추천 장소
- 저장하기, 일정에 추가하기 버튼
5. 저장된 여행 화면
- 사용자가 저장한 여행 목록
- 각 여행은 도시 이미지, 일정 기간, 여행 스타일, 예산 요약이 보이게 구성
- 아직 저장된 여행이 없을 때의 empty state도 아름답게 디자인
디자인 시스템은 다음 조건을 지켜줘.
- 배경은 순백색이 아니라 아주 은은한 warm gray 또는 soft ivory 계열
- Primary color는 깊이감 있는 muted blue 또는 ink navy 계열
- Accent color는 sunset coral 또는 soft amber를 아주 절제해서 사용
- 카드에는 과한 그림자 대신 얇은 border, subtle shadow, soft blur를 사용
- Radius는 16~24px 사이로 고급스럽게
- Typography는 고급 산세리프 느낌으로, 제목은 크고 단단하게, 본문은 읽기 쉽게
- 이미지와 텍스트가 겹칠 때는 가독성을 위해 섬세한 gradient overlay 사용
- 아이콘은 얇고 정제된 라인 아이콘 스타일
- 버튼은 크고 명확하지만 과하게 튀지 않게
반드시 포함해야 할 UI 디테일은 다음과 같아.
- 첫 화면에서 시선을 사로잡는 hero travel card
- AI가 분석 중인 느낌을 주는 작은 micro-interaction 영역
- 취향 태그 선택 UI
- 일정 타임라인 UI
- 장소 카드 UI
- 지도 미리보기 UI
- 저장 완료 상태
- 빈 상태 화면
- 로딩 상태 화면
- 오류 상태 화면
문구 톤은 짧고 감각적으로 작성해줘.
예:
- “A quiet weekend in Kyoto”
- “Built around coffee, gardens, and slow walks”
- “Matched to your pace”
- “3 days · ₩620,000 estimated”
- “Less planning. More arriving.”
최종 결과물은 단순한 와이어프레임이 아니라, 실제 프리미엄 앱 디자인 시안처럼 보여야 해.
특히 홈 화면은 보는 순간 “이 앱 써보고 싶다”는 느낌이 들도록 디자인해줘.이 프롬프트를 입력하면 다음과 같은 결과를 얻을 수 있습니다.
이 프롬프트의 핵심은 단순히 “예쁜 앱을 만들어줘”라고 하지 않는다는 점입니다.
사용자가 누구인지, 어떤 상황에서 쓰는지, 어떤 화면이 필요한지, 어떤 디자인 톤을 원하는지, 접근성에서 무엇을 고려해야 하는지까지 함께 전달합니다.
구글 스티치는 프롬프트가 구체적일수록 더 좋은 결과를 보여줍니다. 특히 업무앱이나 복지서비스처럼 사용자의 이해도와 접근성이 중요한 서비스는 처음부터 조건을 명확히 넣는 것이 좋습니다.
디자인 개선하기
모바일 화면을 만든 뒤에는 디자인을 전반적으로 개선할 수 있습니다.
아래쪽의 채팅 창에 다음과 같은 프롬프트를 입력해 보겠습니다.
좋아. 현재 디자인을 유지하되 더 고급스럽게 다듬어줘.
카드 간 여백, 타이포그래피 위계, 이미지 오버레이, 버튼 스타일을 더 세련되게 조정해줘.
AI가 만든 흔한 앱처럼 보이는 부분은 줄이고, 실제 프리미엄 iOS 앱처럼 완성도를 높여줘.이렇게 입력하면 기존 디자인 아래쪽에 새로운 디자인이 추가되어 나타납니다.
두 디자인 중 더 나은 디자인을 남기고 지우시는 것을 추천합니다.
Theme 설정으로 디자인 톤 정리하기
스티치에서 화면을 생성한 뒤에는 오른쪽의 Theme 패널을 활용해 전체 디자인 분위기를 조정할 수 있습니다.
여기서는 Light/Dark 모드, Seed Color, Primary·Secondary·Tertiary·Neutral 색상, 글꼴, 모서리 반지름 등을 설정할 수 있습니다. 즉, 단순히 색을 바꾸는 기능이 아니라 앱의 첫인상과 브랜드 감각을 정리하는 공간입니다.
예를 들어 여행 앱이라면 깊은 네이비를 Primary로 두고, 코랄이나 옐로우를 포인트 색상으로 사용하면 고급스럽고 감성적인 분위기를 만들 수 있습니다. 업무용 앱이라면 차분한 블루와 그레이 계열을 중심으로 잡아 신뢰감 있는 화면을 만들 수 있습니다.
특히 좋은 점은 색상과 글꼴을 조정한 뒤 Save & Apply를 누르면 현재 디자인에 바로 적용할 수 있다는 점입니다. 처음 생성된 결과물이 마음에 안들더라도 이 단계에서 색상, 폰트, 카드의 둥근 정도를 다듬으면 훨씬 완성도 있는 화면이 됩니다.
또한 옆에 있는 DESIGN.md 탭을 함께 활용하면 이 디자인 규칙을 문서처럼 정리해둘 수 있습니다. 이렇게 저장한 디자인 기준은 이후 다른 화면을 만들거나 개발 도구로 넘길 때 일관성을 유지하는 데 도움이 됩니다.
정리하면, 스티치에서 좋은 결과물을 얻으려면 프롬프트만 입력하고 끝내기보다 Theme에서 한 번 더 색상과 글꼴을 다듬는 과정이 필요합니다. 이 과정이 들어가야 AI가 만든 흔한 화면이 아니라, 하나의 브랜드처럼 정돈된 UI에 가까워집니다.
Generate 메뉴: 만든 디자인을 실제 서비스처럼 확장하기
스티치에서 첫 화면을 만든 뒤에는 수정하고 싶은 디자인에서 마우스 오른쪽 버튼을 클릭하면 위와 같은 메뉴를 확인할 수 있습니다. 이 메뉴 중Generate 기능을 활용해 디자인을 더 완성도 있게 확장할 수 있습니다. 이 메뉴는 단순히 화면을 다시 만드는 기능이 아니라, 프로토타입, 사용자 시선 분석, 상태 화면, 애니메이션, 마케팅 자료, 접근성 점검까지 이어주는 후속 작업 도구에 가깝습니다.
인스턴트 프로토타입
인스턴트 프로토타입은 정적인 화면을 실제 앱처럼 클릭 가능한 흐름으로 연결해주는 기능입니다. 예를 들어 여행 앱에서 홈 화면 → 일정 생성 → 추천 일정 → 장소 상세 화면으로 이동하는 흐름을 확인할 수 있습니다.
클릭하여 들어가면 별도의 디자인이 새로 만들어지고 새로운 화면으로 전환되면서 프로토타입 편집기에 들어갈 수 있습니다.
이 기능은 “화면이 예쁜가”보다 “실제로 사용하기 편한가”를 확인할 때 유용합니다. 버튼을 눌렀을 때 다음 화면이 자연스러운지, 사용자가 길을 잃지 않는지, 중요한 기능이 잘 보이는지 점검할 수 있습니다.
특이한 기능으로 큐알코드를 불러올 수 있는데 이 큐알코드를 활용하면 내 핸드폰 등의 기기에서 이 부분을 확인할 수 있습니다.
예측 히트맵
예측 히트맵은 사용자의 시선이나 관심이 어디에 모일지 예측해보는 기능입니다. 화면에서 중요한 버튼, 핵심 문구, CTA 영역이 충분히 눈에 띄는지 확인할 때 활용할 수 있습니다.
예를 들어 홈 화면에서 가장 중요한 “여행 만들기” 버튼보다 이미지나 장식 요소가 더 강하게 보인다면 디자인을 조정해야 합니다. 이 기능은 랜딩페이지, 앱 첫 화면, 결제 화면, 신청 화면처럼 사용자의 행동을 유도해야 하는 화면에서 특히 유용합니다.
누락된 상태
누락된 상태는 실제 앱에서 빠지기 쉬운 화면을 추가해주는 기능입니다. AI가 처음 만들어주는 디자인은 보통 정상 상태 중심이지만, 실제 서비스에는 데이터가 없을 때, 로딩 중일 때, 오류가 발생했을 때, 권한이 없을 때의 화면이 필요합니다.
예를 들어 여행 앱이라면 저장된 여행이 없을 때의 빈 화면, 일정 생성 중 로딩 화면, 네트워크 오류 화면, 장소 검색 결과가 없을 때의 화면을 추가할 수 있습니다.
이 기능을 활용하면 디자인이 단순한 시안이 아니라 실제 서비스에 가까워집니다.
애니메이션
애니메이션 기능은 화면 전환, 버튼 반응, 로딩, 저장 완료 같은 순간에 자연스러운 움직임을 더할 때 사용합니다.
다만 애니메이션은 많이 넣는 것보다 적절하게 넣는 것이 중요합니다. 여행 앱이라면 일정이 생성되는 순간, 장소 카드가 열리는 순간, 저장 완료 표시 정도에만 부드러운 움직임을 주는 것이 좋습니다.
실제 사용해보니 애니메이션 효과가 적절하게 들어갔습니다. 프롬프트를 넣어서 애니메이션을 수정할 수 있습니다.
App Store Assets
App Store Assets는 앱스토어에 등록할 때 필요한 소개 이미지나 홍보용 스크린샷을 만들 때 활용할 수 있습니다.
앱 화면을 그대로 보여주는 것보다 핵심 기능을 잘 보여주는 이미지로 정리할 수 있어, 실제 앱 출시나 포트폴리오 자료를 만들 때 유용합니다.
예를 들어 “AI가 여행 일정을 자동으로 추천합니다”, “취향에 맞는 장소를 저장하세요” 같은 문구와 함께 앱 화면을 보기 좋게 구성할 수 있습니다.
Web Assets
Web Assets는 웹사이트, 랜딩페이지, 배너, 소개 페이지에 사용할 시각 자료를 만드는 기능입니다.
앱을 소개하는 블로그 글이나 서비스 안내 페이지를 만들 때 유용합니다. 특히 스티치로 만든 앱 화면을 기반으로 웹용 홍보 이미지나 기능 소개 섹션을 만들 수 있어, 디자인 시안과 마케팅 자료를 이어서 제작하기 좋습니다.
Marketing Kit
Marketing Kit는 앱을 소개하기 위한 문구와 시각 자료를 함께 준비할 때 활용할 수 있습니다.
서비스 소개 문구, 핵심 기능, 사용자에게 전달할 가치, 홍보용 카피 등을 정리하는 데 도움이 됩니다. 단순히 UI만 만드는 것이 아니라 “이 앱을 어떻게 설명할 것인가”까지 확장할 수 있는 기능입니다.
이 여행 앱을 소개하기 위한 Marketing Kit를 만들어줘.
앱 소개 문구, 핵심 기능 3가지, 타깃 사용자, 앱스토어용 짧은 문구, 랜딩페이지용 카피를 포함해줘.Accessibility Audit
Accessibility Audit은 접근성 점검 기능입니다. 색상 대비, 글자 크기, 버튼 크기, 터치 영역, 색상만으로 정보를 구분하는 문제 등을 확인할 수 있습니다.
예쁜 디자인도 실제 사용자가 읽기 어렵거나 누르기 불편하면 좋은 디자인이라고 보기 어렵습니다. 그래서 앱을 만들 때는 마지막 단계가 아니라 중간중간 접근성을 점검하는 것이 좋습니다.
이 화면을 접근성 기준으로 점검해줘.
색상 대비, 글자 크기, 버튼 터치 영역, 색상만으로 상태를 구분하는 문제를 찾아줘.
문제가 있다면 더 읽기 쉽고 사용하기 편한 방향으로 수정해줘.데스크톱 웹 버전
데스크톱 웹 버전은 모바일 중심으로 만든 화면을 웹 화면으로 확장할 때 유용합니다.
예를 들어 여행 앱의 모바일 화면을 먼저 만든 뒤, 같은 서비스를 웹 대시보드나 데스크톱 랜딩페이지로 바꿔볼 수 있습니다. 모바일 앱에서는 한 화면에 적은 정보를 보여주는 것이 중요하지만, 데스크톱에서는 지도, 일정표, 추천 장소 목록을 더 넓게 배치할 수 있습니다.
이 기능을 활용하면 하나의 아이디어를 모바일 앱, 웹앱, 랜딩페이지로 자연스럽게 확장할 수 있습니다.
정리
Generate 메뉴는 스티치에서 만든 첫 디자인을 실제 제품에 가깝게 다듬는 기능입니다.
처음에는 프롬프트로 화면을 만들고, 그다음 인스턴트 프로토타입으로 흐름을 확인합니다. 이후 예측 히트맵으로 중요한 요소가 잘 보이는지 점검하고, 누락된 상태와 접근성 점검을 추가합니다. 마지막으로 App Store Assets, Web Assets, Marketing Kit를 활용하면 앱 소개 자료까지 한 번에 확장할 수 있습니다.
즉, Generate 메뉴는 “화면 생성 이후의 완성도”를 높이는 핵심 기능이라고 볼 수 있습니다.
정리: 구글 스티치는 “프롬프트 → 디자인 → 검토 → 개발” 흐름으로 써야 한다
구글 스티치는 단순히 한 번 프롬프트를 넣고 결과물을 받는 도구가 아닙니다.
좋은 결과를 얻으려면 다음 흐름으로 사용하는 것이 좋습니다.
서비스 목적과 사용자를 명확히 적는다.
모바일 앱과 웹 대시보드를 나누어 요청한다.
첫 디자인을 만든 뒤 Generate 기능으로 변형과 프로토타입을 확인한다.
누락된 상태와 접근성 점검을 추가한다.
Modify 기능으로 필요한 영역만 정교하게 수정한다.
Preview로 실제 기기에서 확인한다.
Figma 또는 개발 도구로 넘겨 실제 서비스로 구현한다.
이 흐름을 따르면 구글 스티치는 단순한 AI 디자인 생성기가 아니라, 바이브 코딩의 앞단에서 디자인 기준을 잡아주는 강력한 도구가 됩니다.
4. 구글 스티치를 잘 쓰는 실무 프롬프트 작성법
종이 스케치와 프롬프트를 함께 사용하기
가장 쉬운 방법은 종이에 대략적인 화면을 그리고 사진으로 올리는 것입니다.
버튼 위치, 카드 구조, 메뉴 배치처럼 말로 설명하기 어려운 부분은 스케치가 더 빠릅니다. 여기에 디자인 방향을 프롬프트로 설명하면 결과가 좋아집니다.
이 손그림 스케치 구조를 기반으로 모바일 앱 UI를 만들어줘.
전체 분위기는 현대적인 대시보드 느낌으로 해줘.
단, 버튼은 크고 명확하게 만들고, 정보는 카드 단위로 정리해줘.AI가 만든 티가 나는 UI 줄이기
AI가 만든 UI는 종종 너무 반듯하고 평범해 보입니다. 카드가 일정하게 반복되고, 버튼과 아이콘이 일반적이며, 화면에 개성이 부족할 수 있습니다.
이럴 때는 타이포그래피, 여백, 카드 크기, 버튼 스타일, 색상 팔레트를 구체적으로 지정하는 것이 좋습니다.
AI가 만든 것처럼 보이는 뻔한 카드 배열을 피하고 싶어.
상단 핵심 지표 영역은 크게 강조하고, 보조 정보는 비대칭 카드 레이아웃으로 배치해줘.
타이포그래피 위계를 더 강하게 만들고, 버튼은 기본 Material 스타일처럼 보이지 않게 커스텀해줘.접근성 조건을 처음부터 넣기
나중에 접근성을 수정하려면 시간이 더 오래 걸립니다. 처음 프롬프트부터 접근성 조건을 넣는 것이 좋습니다.
WCAG 접근성 기준을 고려해줘.
색상만으로 상태를 구분하지 말고, 아이콘과 텍스트를 함께 사용해줘.
글자 크기는 작게 만들지 말고, 모바일 터치 영역은 충분히 크게 확보해줘.DESIGN.md를 개발 도구에 함께 넘기기
스티치에서 만든 화면만 개발 도구에 넘기면 AI가 디자인을 다시 해석하면서 결과가 흔들릴 수 있습니다.
그래서 DESIGN.md를 함께 넘기는 것이 좋습니다.
첨부한 DESIGN.md의 디자인 규칙을 기준으로 구현해줘.
색상, 버튼, 카드, 입력창, 여백, 접근성 규칙을 임의로 바꾸지 마.
새 컴포넌트가 필요하면 기존 디자인 토큰을 사용해서 만들어줘.5. 추천 워크플로우: 구글 스티치에서 실제 개발까지
구글 스티치의 장점은 화면을 만드는 데서 끝나지 않는다는 점입니다. 만든 디자인을 Figma, AI Studio, Netlify, Lovable, Bolt, ZIP 파일, 코드 복사, 프로젝트 요약 등 다양한 방식으로 내보낼 수 있습니다.
즉, 스티치는 단순한 디자인 생성 도구라기보다 “아이디어를 디자인으로 만들고, 그 디자인을 실제 개발 도구로 넘기는 출발점”에 가깝습니다.
1단계: 스티치에서 화면과 디자인 방향 만들기
먼저 스티치에서 앱이나 웹 화면을 만듭니다. 이때 처음부터 완벽한 결과물을 기대하기보다 여러 방향을 빠르게 뽑아보는 것이 좋습니다.
예를 들어 여행 앱을 만든다면 홈 화면, 일정 생성 화면, 장소 상세 화면, 저장 목록 화면처럼 주요 화면을 먼저 생성합니다. 이후 Theme와 DESIGN.md를 활용해 색상, 폰트, 버튼, 카드 스타일을 정리합니다.
이 단계의 목표는 실제 개발 전에 “이 앱이 어떤 모습이어야 하는가”를 시각적으로 정하는 것입니다.
2단계: DESIGN.md로 디자인 기준 정리하기
마음에 드는 디자인 방향이 나오면 DESIGN.md로 기준을 정리합니다.
색상, 글꼴, 버튼 스타일, 카드 모양, 여백, 접근성 기준을 문서화해두면 이후 개발 도구로 넘겼을 때 디자인이 흔들리는 것을 줄일 수 있습니다.
특히 AI 개발 도구를 사용할 때는 DESIGN.md가 중요합니다. 단순히 화면 이미지만 넘기면 AI가 디자인을 다시 해석하면서 버튼 모양이나 여백을 임의로 바꿀 수 있기 때문입니다.
3단계: 목적에 맞는 내보내기 방식 선택하기
스티치에서는 여러 내보내기 방식을 선택할 수 있습니다. 각각의 목적이 다르기 때문에 상황에 맞게 선택하는 것이 좋습니다.
AI Studio로 내보내기
AI Studio는 빠르게 프로토타입을 이어서 만들고 싶을 때 유용합니다. 스티치에서 만든 디자인을 기반으로 간단한 동작, 화면 흐름, 인터랙션을 붙여보는 데 적합합니다.
아이디어 검증이나 초기 시연용이라면 AI Studio로 넘기는 방식이 빠릅니다.
Figma로 내보내기
디자인 완성도를 더 높이고 싶다면 Figma로 넘기는 것이 좋습니다.
스티치가 만든 화면은 좋은 출발점이지만, 실제 서비스 수준으로 다듬으려면 세부 여백, 타이포그래피, 컴포넌트 상태, 반응형 규칙을 더 정교하게 정리해야 할 때가 많습니다.
디자이너와 협업하거나 포트폴리오, 발표 자료, 최종 UI 시안을 만들 목적이라면 Figma가 적합합니다.
Netlify로 내보내기
Netlify는 만든 결과물을 빠르게 웹에 공개하고 싶을 때 사용할 수 있습니다.
간단한 랜딩페이지, 서비스 소개 페이지, 데모 페이지를 바로 공유해야 한다면 Netlify 내보내기가 편합니다. 다만 실제 서비스 운영용이라면 로그인, 데이터베이스, 권한, 보안 구조는 별도로 점검해야 합니다.
Lovable, Bolt로 내보내기
Lovable이나 Bolt는 빠르게 웹앱 형태로 구현을 이어가고 싶을 때 사용할 수 있습니다.
디자인을 바탕으로 프런트엔드와 기본 기능을 빠르게 붙이는 데 강점이 있습니다. 다만 복잡한 업무 로직, 권한 관리, 장기 유지보수가 필요한 프로젝트라면 이후 코드 구조를 다시 점검하는 과정이 필요합니다.
ZIP으로 내보내기
가장 안정적인 개발 흐름을 원한다면 ZIP으로 내보낸 뒤 Codex, Antigravity, Claude Code 같은 개발 도구에서 이어서 작업하는 방식을 추천합니다.
ZIP으로 내보내면 생성된 코드와 파일 구조를 직접 확인할 수 있고, 필요한 부분을 수정하거나 프로젝트 구조에 맞게 재정리하기 좋습니다.
특히 실제 서비스로 개발할 계획이라면 이 방식이 가장 현실적입니다.
ZIP 파일을 받은 뒤에는 AI 개발 도구에 다음처럼 요청할 수 있습니다.
첨부한 ZIP은 구글 스티치에서 내보낸 UI 프로젝트입니다.
이 디자인을 기준으로 실제 동작하는 웹앱으로 발전시켜주세요.
디자인의 색상, 폰트, 카드 구조, 버튼 스타일, 여백은 최대한 유지해주세요.
다만 실제 개발에 필요한 구조는 정리해주세요.
- 컴포넌트 재사용 구조로 분리
- 모바일과 데스크톱 반응형 정리
- 라우팅 구성
- 상태 관리 추가
- 로딩, 오류, 빈 상태 처리
- 실제 데이터 연동을 고려한 구조 설계
- 접근성 점검
- 빌드 오류 수정
디자인을 임의로 크게 바꾸지 말고, 스티치에서 만든 UI를 실제 서비스 코드로 다듬는 방향으로 진행해주세요.클립보드에 코드 복사
작은 컴포넌트나 특정 화면 일부만 가져가고 싶다면 클립보드에 코드 복사 기능이 편합니다.
예를 들어 버튼, 카드, 헤더, 가격표, 소개 섹션처럼 작은 UI 조각만 기존 프로젝트에 붙이고 싶을 때 사용할 수 있습니다. 전체 프로젝트보다는 부분 활용에 적합합니다.
프로젝트 요약
프로젝트 요약은 다른 AI 개발 도구나 협업자에게 현재 디자인 의도를 설명할 때 유용합니다.
스티치에서 어떤 화면을 만들었고, 어떤 디자인 방향을 잡았고, 어떤 기능이 필요한지 요약해두면 다음 단계로 넘길 때 맥락이 끊기지 않습니다.
4단계: 실제 개발은 ZIP 또는 Antigravity 연동으로 이어가기
실제 개발까지 생각한다면 가장 추천하는 흐름은 두 가지입니다.
첫 번째는 스티치에서 바로 Antigravity나 AI Studio로 넘겨 빠르게 개발을 이어가는 방식입니다. 속도가 중요하고, 빠르게 프로토타입을 확인하고 싶다면 이 방식이 좋습니다.
두 번째는 ZIP으로 내보낸 뒤 Codex, Antigravity, Claude Code에서 프로젝트를 열고 구조를 정리하며 개발하는 방식입니다. 실제 배포할 앱, 장기적으로 유지보수할 앱, 데이터베이스와 로그인 기능이 들어가는 앱이라면 이 방식이 더 안정적입니다.
정리하면 다음과 같습니다.
빠른 프로토타입: 스티치 → AI Studio 또는 Antigravity
디자인 고도화: 스티치 → Figma
빠른 웹 공개: 스티치 → Netlify
실제 서비스 개발: 스티치 → ZIP → Codex / Antigravity / Claude Code
부분 UI 활용: 스티치 → 코드 복사
협업 전달: 스티치 → 프로젝트 요약정리: 가장 추천하는 흐름
가장 실무적인 흐름은 다음과 같습니다.
1. 스티치에서 화면 생성
2. Theme와 DESIGN.md로 디자인 기준 정리
3. Figma에서 필요하면 세부 디자인 보정
4. ZIP으로 내보내기
5. Codex, Antigravity, Claude Code에서 실제 기능 구현
6. 실제 기기에서 테스트
7. 다시 디자인과 코드를 보완빠르게 보여줄 프로토타입이라면 스티치에서 바로 AI Studio나 Antigravity로 넘기면 됩니다.
하지만 실제 서비스로 개발할 계획이라면 ZIP으로 내보내서 AI 개발 도구에서 코드 구조를 확인하고, 기능과 데이터 연동을 차근차근 붙이는 방식이 가장 안정적입니다.
결국 스티치의 역할은 완성된 앱을 한 번에 만들어주는 것이 아니라, 개발이 따라갈 수 있는 좋은 디자인 출발점을 만들어주는 것입니다. 이 출발점을 ZIP, Figma, Antigravity, Codex 같은 도구와 연결할 때 비로소 바이브 코딩의 속도와 디자인 품질을 함께 가져갈 수 있습니다.
6. 구글 스티치의 한계와 활용 방향
구글 스티치는 완성품 자동 생성기가 아니다
구글 스티치는 좋은 출발점을 만들어주는 도구입니다. 하지만 최종 디자인과 실제 서비스 구현을 모두 자동으로 해결해주는 도구라고 보기는 어렵습니다.
화면 간 일관성이 깨질 수 있고, AI 특유의 평범한 UI가 나올 수 있습니다. 복잡한 업무 로직이나 권한 구조는 별도로 설계해야 합니다. 접근성도 사람이 다시 확인해야 합니다.
실제 개발에서는 로그인, 데이터 저장, 보안, 예외 처리, 성능 최적화가 필요합니다.
따라서 구글 스티치는 완성품 자동 생성기라기보다, 초안과 프로토타입을 빠르게 만드는 AI 디자인 파트너로 보는 것이 현실적입니다.
마무리: 구글 스티치는 바이브 코딩의 디자인 기준을 만들어준다
구글 스티치의 가장 큰 장점은 디자인의 시작점을 바꿔준다는 점입니다.
이전에는 앱이나 웹 화면을 만들기 위해 빈 캔버스에서 구조를 고민해야 했습니다. 이제는 말로 서비스 목적과 분위기를 설명하고, 스케치를 올리고, DESIGN.md를 참고시켜 빠르게 첫 화면을 만들 수 있습니다.
그리고 거기서 끝나는 것이 아닙니다.
특정 부분만 수정하고, 누락된 상태를 만들고, 접근성을 점검하고, 모바일·태블릿·데스크톱 화면을 미리 보고, Figma나 개발 도구로 넘기는 흐름까지 이어집니다.
바이브 코딩 시대에 중요한 것은 단순히 코드를 빨리 만드는 것이 아닙니다. 사람이 실제로 쓰기 좋은 화면을 만들고, 그 디자인 기준을 개발 과정에서도 유지하는 것입니다.
정리하면 이렇게 말할 수 있습니다.
바이브 코딩이 앱을 빠르게 구현하게 해준다면, 구글 스티치는 그 앱이 따라갈 디자인 기준을 빠르게 만들어준다.
작은 업무앱, 내부 시스템, 관리자 대시보드, 모바일 서비스, MVP를 만들고 있다면 바로 코딩부터 시작하기보다 구글 스티치에서 먼저 화면을 잡아보는 것을 추천합니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.