UI 디자인을 위한 Google Stitch 활용법
*원문 출처를 번역한 글입니다.
"아이디어에서 앱까지(From idea to app)"는 구글의 AI 기반 UI 생성 도구인 'Stitch'가 내세우는 슬로건입니다. 한동안 이 툴을 직접 사용해 보며 한 가지 명확한 사실을 깨달았습니다. Stitch는 단순히 "대신 최종 UI 디자인을 완성해 주는" 툴이 아니라는 점입니다. 그보다는 디자이너가 겪는 '빈 캔버스 증후군(blank-canvas problem)'에서 더 빠르게 벗어나도록 돕는 도구에 가깝습니다.
https://youtu.be/Psk0clgsZnY?si=-j6IkNFlhKEk-4M9
이전에 제가 Google Stitch를 사용해 본 모습입니다. 이 글에서는 Stitch를 활용한 저의 3단계 워크플로우를 살펴보고, 이 툴을 최대한 활용하기 위해 반드시 고려해야 할 핵심 포인트들을 공유하고자 합니다.
1단계: 프롬프트 작성 및 AI 모델 선택
Google Stitch를 사용할 때 가장 먼저 해야 할 일은 제대로 된 프롬프트를 작성하는 것입니다. 다른 AI 도구들과 마찬가지로, 자신의 의도를 더 명확하고 구체적으로 표현할수록 AI는 여러분에게 훨씬 더 적합한 결과물을 만들어 줍니다.
제가 프롬프트 작성에 사용하는 프레임워크는 '줌아웃-줌인' 방식입니다.
우선 제품의 적절한 컨텍스트(맥락)를 설정하고 타겟 사용자를 설명하며 시작합니다(줌아웃).
그 다음, 실제로 생성하고자 하는 화면이나 페이지 디자인으로 초점을 좁혀(줌인),
해당 화면의 목적, 레이아웃 계층 구조, 그리고 AI가 고려해야 할 디자인 제약 사항들을 설명합니다.
마지막으로, AI가 생성할 화면에 대해 제가 기대하는 바를 덧붙입니다.
아래는 제가 데모 제작에 사용한 샘플 프롬프트입니다.
Context: Design a mobile app screen for a personal finance app that helps users track daily spending.
User: Young professionals who check expenses multiple times per day, often on the go.
Goal of the screen: Help users quickly understand
- Today’s total spending
- Top spending categories
- Whether they are over or under budget
Screen type: Home / Dashboard (iOS-style mobile UI)
Layout & hierarchy:
- Sticky header with app name and current month
- Primary focus: large total spending number for today
- Secondary section: horizontal category cards (Food, Transport, Shopping, Other)
- Tertiary section: simple list of recent transactions (last 3–5 items)
Components:
- Header with subtle divider
- Large numeric value with supporting label
- Card-based category summaries with icons
- List items with merchant name, category tag, and amount
Visual direction:
- Clean, minimal, calm
- Neutral background with soft accent colors for categories
- Emphasis on readability and glanceability
- No heavy gradients or decorative elements
Constraints:
- One-hand usage
- Prioritize clarity over density
- Accessible text sizes and spacing
Output expectation:
Generate a structured mobile UI layout that clearly communicates hierarchy and component placement, suitable for handoff to Figma for visual refinement.
컨텍스트: 사용자가 일일 지출을 추적할 수 있도록 돕는 개인 금융 앱의 모바일 화면 디자인.
사용자: 이동 중에도 하루에 여러 번 지출 내역을 확인하는 사회 초년생 및 젊은 직장인.
화면의 목표: 사용자가 다음의 내용을 빠르게 파악하도록 함
- 오늘의 총 지출액
- 주요 지출 카테고리
- 예산 초과 또는 미달 여부
화면 유형: 홈 / 대시보드 (iOS 스타일 모바일 UI)
레이아웃 및 계층 구조
- 앱 이름과 현재 월이 표시된 Sticky header
- 1순위: 오늘 총 지출액을 큰 숫자로 강조
- 2순위: 가로형 카테고리 카드 섹션 (음식, 교통, 쇼핑, 기타)
- 3순위: 최근 거래 내역 리스트 (최근 3~5개 항목)
컴포넌트:
- 은은한 디바이더(구분선)가 포함된 헤더
- 보조 레이블이 포함된 큰 수치 데이터
- 아이콘이 포함된 카드 형태의 카테고리 요약
- 가맹점명, 카테고리 태그, 금액이 포함된 리스트 아이템
비주얼 방향성:
- 깔끔하고 미니멀하며 차분한 느낌
- 중립적인 배경색과 카테고리별 부드러운 포인트 컬러 사용
- 가독성과 훑어보기 편한 디자인(glanceability) 강조
- 과도한 그라데이션이나 장식적 요소 배제
제약 사항:
- 한 손 조작 가능성 고려
- 정보 밀도보다 명확성을 우선시
- 접근성 있는 텍스트 크기와 간격 유지
결과물 기대치: 계층 구조와 컴포넌트 배치가 명확히 드러나는 구조화된 모바일 UI 레이아웃을 생성할 것. 피그마(Figma)에서 시각적 정교화 작업을 진행할 수 있는 수준이어야 함.
프롬프트 외에도 몇 가지 선택해야 할 사항이 있습니다.
1. 매체: 앱 또는 웹 디자인 중 선택합니다. 제 경험상 Google Stitch는 모바일 앱 디자인에서 가장 뛰어난 성능을 발휘하며, 웹 디자인에서는 상대적으로 효과가 덜했습니다.
2. AI 모델: 저는 제미나이(Gemini)에도 탑재된 최신 모델인 'Google 3 Pro'를 사용합니다. 이 모델은 디자인을 생성할 때 AI 기반 리서치를 병행할 수 있다는 장점이 있습니다. AI가 추가적인 조사를 수행하거나 제품의 특정 영역을 깊게 파고들어 최적의 솔루션을 찾아야 할 때 매우 유용합니다.
Google Stitch의 프롬프트 입력 필드 화면입니다.2단계: AI 결과물 분석 및 정교화 작업
프롬프트를 제출하면 Google Stitch가 작업을 시작합니다. 이 툴의 장점 중 하나는 디자인 생성에 소요되는 예상 시간을 미리 알려준다는 점입니다. 위에서 언급한 모바일 앱 예시의 경우, 약 90초가 소요될 것으로 예상되었는데 이는 매우 놀라운 속도입니다. 더 인상적인 점은 이 예상 시간이 실제 소요 시간과 거의 일치할 정도로 정확하다는 것입니다.
Google Stitch가 UI 디자인을 생성하는 데 걸리는 시간입니다.다음은 Google Stitch가 저를 위해 생성한 결과물입니다. 보시다시피 고해상도(High-fidelity)의 최종 디자인이라기보다는 중해상도(Mid-fidelity)의 와이어프레임 혹은 목업에 가까운 기본적인 UI입니다. 참고로 저는 AI가 이 정도의 완성도로 결과물을 주는 것을 선호합니다. 최종 완성본처럼 보이지 않기 때문에, 오히려 AI와 함께 디자인을 더 발전시키고 다듬고자 하는 의욕을 불러일으키기 때문입니다.
Google Stitch가 생성한 초기 결과물입니다.Google Stitch의 훌륭한 점은 후속 프롬프트를 제출하여 AI에 세부 사항을 추가하고, 결과물을 쉽게 정교화할 수 있다는 것입니다. 저의 경우에는 화면 배경을 다크 그레이로 변경하고, WCAG 2.1 가이드라인 준수의 중요성을 언급해 보겠습니다. 결국 저는 접근성이 뛰어난 UI를 만들고 싶으니까요.
전체 프롬프트:
Change background to dark gray, ensure you follow WCAG 2.1
배경을 다크 그레이로 변경하고, WCAG 2.1 지침을 준수해 주세요.
Stitch가 생성해 준 결과물은 다음과 같습니다:
후속 프롬프트에 따른 Google Stitch의 결과물 화면입니다.3단계: 솔루션 내보내기
Google Stitch는 생성된 결과물을 내보낼 수 있는 몇 가지 옵션을 제공합니다.
먼저, 코드를 추출할 수 있습니다('View Code' 클릭). 그러면 툴이 코드를 생성해 줍니다. 다만, 사용자가 직접 기술 스택(Tech stack)을 선택할 수는 없다는 점에 유의하세요. 결과물은 HTML과 TailwindCSS 기반으로 제공되는데, 만약 SwiftUI로 작업 중이라면 이 코드가 본인에게는 적합하지 않을 수도 있습니다.
Google Stitch가 생성한 솔루션 코드입니다.'Export' 버튼을 클릭하면 코드와 이미지 에셋이 포함된 전체 데이터를 아카이브 형태로 내보낼 수 있는 메뉴가 나타납니다. 아쉽게도 디자인을 피그마(Figma)로 직접 내보내는 옵션은 아직 지원되지 않습니다.
AI가 생성한 화면의 내보내기 화면입니다.원문 출처: https://uxplanet.org/google-stitch-for-ui-design-544cf8b42d52
