TIL 07-22 AI 시대의 디지털 프로덕트 UX/UI 기획 설계 - 3

김덕협·2026년 7월 23일

TIL

목록 보기

37/43

Module 3. AI 기반 UI/GUI 자동 생성 (1) : 기획·설계·GUI
한 줄 정리: 최상의 결과물은 "효과적인 프롬프트 작성 + 지속적인 아이데이션(반복)"의 결과다.

0. 오늘의 학습 범위

이번 차시는 Module 3로, 기획 산출물을 실제 UI/GUI로 자동 생성하는 과정을 다룬다. 도구는 Google Stitch가 중심.

Module 3 학습 내용

Google Stitch 개요
프롬프트 엔지니어링
Stitch 인터페이스와 기능 이해
AI 기반 UI/GUI 생성 워크플로우 이해
ChatGPT 기획 → 이미지 생성 → Stitch Import 시연 & 실습 가이드
Stitch Ideate 모델을 활용한 기획·디자인 시연 & 실습 가이드
Figma 에이전트 소개
Figma Make 소개

Part 1. Google Stitch 개요

1. Google Stitch란 무엇인가?

구글 스티치는 Google Labs에서 개발한 AI 네이티브 소프트웨어 디자인 캔버스 UI/GUI 디자인 생성형 AI 프로그램

주요 기능 및 도구
1. UI 변환: 자연어 프롬프트, 손으로 그린 와이어프레임, 또는 스크린샷을 입력하면 편집 가능한 사용자 인터페이스(UI)로 변환
2. 코드 생성: 단순한 시각적 목업에 그치지 않고, 프론트엔드 개발자가 즉시 사용할 수 있는 수준의 HTML 및 CSS(Tailwind 포함) 코드를 생성. HTML을 React, Angular, Vue, Flutter, SwiftUI 등 원하는 포맷으로 손쉽게 변환 가능
3. 프로토타이핑: 여러 개의 화면을 생성하고 이를 인터랙티브 핫스팟으로 연결하여, 백엔드 코드 작성 전에 실제 사용자 경험을 시뮬레이션할 수 있는 멀티 스크린 플로우를 만들 수 있음

2. Stitch의 새로운 진화: "바이브 디자인(Vibe Design)"과 AI 네이티브 캔버스

Stitch(v1.0)가 디자인 도구를 넘어, 자연어를 통해 고충실도(High-fidelity) UI를 구축하고 협업하는 AI 네이티브 소프트웨어 디자인 캔버스로 진화 (2026년 3월 업데이트 내용)

1) "바이브 디자인(Vibe Design)"의 개념

의도 중심의 설계: (Stitch 1.0) 와이어프레임부터 시작하는 기존 방식 대신, (Stitch 2.0) 비즈니스 목표, 사용자 감정, 현재 영감을 주는 사례 등을 설명하며 디자인 진행 (Vibe Design)
창의성 증폭: AI를 활용해 다양한 아이디어를 빠르게 탐색함으로써 최종 결과물의 품질을 높이는 "창의성 증폭기" 역할을 수행

2) 신규 AI 네이티브 캔버스 및 에이전트

무한 캔버스(Infinite Canvas): 초기 아이디어부터 실제 작동하는 프로토타입까지 모든 과정을 담을 수 있는 광활한 작업 공간 제공
컨텍스트 수용력: 이미지, 텍스트, 코드 등 어떤 형태의 데이터든 캔버스에 직접 가져와 디자인의 문맥(Context)으로 활용 가능
디자인 에이전트 및 매니저: '에이전트 매니저'를 통해 여러 아이디어를 병렬로 작업하면서도 체계적으로 관리. 프로젝트의 전체 진화 과정을 추론할 수 있는 지능형 에이전트가 탑재됨

3) 디자인 시스템의 심화: DESIGN.md

디자인 규칙의 표준화: 에이전트 친화적인 마크다운 파일인 DESIGN.md를 통해 디자인 규칙을 관리
범용성 및 재사용성: 특정 URL에서 디자인 시스템을 즉시 추출할 수 있고, 디자인 규칙을 다른 코딩 도구로 내보내거나 가져올 수 있어 새 프로젝트 시작 시 매번 기초 작업을 반복할 필요가 없음

4) 실시간 반복 및 프로토타이핑

즉각적인 인터랙션: 정적인 화면을 즉시 인터랙티브 프로토타입으로 변환하여 사용자 여정을 실시간으로 체험
자동 화면 생성: 사용자의 클릭을 기반으로 논리적인 다음 화면을 Stitch가 자동으로 생성하여 전체 앱 흐름을 손쉽게 구성
신속한 피드백 루프: 단 한 번의 클릭으로 개별 요소 수정부터 전체 흐름 재구성까지 가능하여 아이디어의 타당성을 빠르게 검증

5) AI와의 진화된 협업 방식

음성 디자인(Voice Capabilities): 캔버스에 직접 말을 걸어 디자인 비평을 받거나, AI와의 인터뷰를 통해 새로운 랜딩 페이지를 제작
실시간 업데이트: "메뉴 옵션 3가지를 보여줘", "다른 색상 팔레트로 적용해줘" 등 음성 명령으로 즉각적인 디자인 변경이 가능
역동적인 대화: AI가 단순한 도구를 넘어 아이디어를 주고받는 '브레인스토밍 파트너'로서 기능

6) 워크플로우 연동 및 개발 확장성

도구 간 가교 역할: Stitch MCP(Model Context Protocol) 서버와 SDK를 통해 팀의 기존 워크플로우에 통합됨
개발 도구 내보내기: AI Studio, Antigravity 등 전문 개발 도구로 디자인을 내보내 개발자와의 협업 간극을 줄임
전문 기술 활용: 2,400개 이상의 스타를 받은 'Skills' 및 도구 라이브러리를 활용하여 디자인의 기능을 확장

3. 외부 도구 및 AI 연동

1) Stitch → Figma 내보내기

생성된 UI를 Figma로 직접 내보낼 수 있음
이때 오토 레이아웃(Auto Layouts), 이름이 지정된 컴포넌트 레이어, 편집 가능한 텍스트 필드 등이 구조적으로 잘 정리된 상태로 유지됨

2) MCP(Model Context Protocol) 지원

외부 AI 코딩 에이전트(예: Anti-Gravity)와 원활하게 연결됨
이를 통해 AI 에이전트가 디자인을 확인하고, 레이아웃 수정을 요청하거나, 디자인 변형을 자동으로 생성하는 등 양방향 피드백 루프를 형성할 수 있음

4. 서비스 이용 정보

1) 비용

현재 무료로 제공되지만, 일일 400 크레딧으로 제한
크레딧은 UTC 기준 자정에 초기화됨

2) 이용 가능 대상

Gemini를 사용할 수 있는 국가의 18세 이상 사용자라면 이용 가능
Google 로그인이 된 상태에서만 사용 가능

5. Google Stitch 웹 사이트 소개

웹 사이트 바로가기: 프롬프트나 와이어프레임을 입력해 AI로 UI를 직접 설계하고 코드를 생성할 수 있는 메인 작업 공간 및 랜딩 페이지
- https://stitch.withgoogle.com/home
Docs 사이트: 서비스의 주요 기능 사용법, FAQ, 기술 가이드 등 상세 정보를 제공하는 문서 페이지
- https://stitch.withgoogle.com/docs/

6. Stitch 디자인 모드 — 핵심 디자인 엔진별 특징 및 용도

Stitch는 모델을 작업 목적(속도, 창의성, 논리 등)에 따라 적절한 모드를 선택하는 것이 중요함

모델명	핵심 엔진	작업 우선순위	추천 용도
3 Flash	Gemini 3.0 Flash	속도 & 코드	빠르게 결과물을 보고 코드로 변환하고 싶을 때 (HTML/CSS 기반 고품질 디자인, 빠른 프로토타이핑·레이아웃 초안 작성)
3.1 Pro (Thinking with 3.1 Pro)	Gemini 3.1 Pro	품질 & 추론	복잡한 기획을 정교하고 완벽하게 구현하고 싶을 때 (UI/UX 논리 구조와 일관성을 깊게 분석, 복잡한 멀티 스크린 플로우·인터랙션 설계)
Redesign	Nano Banana Pro	이미지 기반	기존 앱의 스크린샷을 바탕으로 새 디자인을 뽑고 싶을 때 (기존 레거시 앱·웹사이트의 현대적 리뉴얼)
Ideate	기획 전문 모델	전략 & 논리	디자인 전에 어떤 기능을 넣을지 아이디어가 필요할 때 (구체적 시각화 이전에 사용자 경험의 본질적 문제를 정의하고 최적의 솔루션 제안, 프로젝트 초기 브레인스토밍·기능 정의)

7. Stitch 디자인 에센셜: 디자인 시작부터 아이데이션까지

1) Stitch 핵심 철학 — 완벽보다 반복(Iteration)

디자인 우선 접근: 복잡한 생각보다 디자인을 먼저 시작하고 아이디어를 확장하는 것이 핵심
반복의 중요성: 최상의 디자인은 완벽한 첫 프롬프트가 아니라, 끊임없는 반복 과정을 통해 완성됨
백지 상태 탈출: 빈 화면에서 고민하기보다 Stitch의 도움을 받아 빠르게 창의성을 발휘하는 단계로 진입 가능

8. 효과적인 프롬프트 작성을 위한 공식

1) 프롬프트 포함 요소

아이디어(Idea) + 테마(Theme) + 콘텐츠(Content) + [선택 사항] 이미지(Image)

(아이디어) "The Pacing Project"라는 이름의 러닝 팟캐스트 랜딩 페이지
(테마) 현대적이고 날카로운 느낌, 고대비, 흑백 컬러와 각진 디자인 사용
(콘텐츠) "레이싱과 페이싱에 대한 이야기" 헤드라인과 플랫폼 링크가 포함된 히어로 섹션

프롬프트 작성 팁

초기 단계에서는 특정 폰트나 색상 코드(Hex code)에 얽매이지 말고 전체적인 분위기와 구체적인 콘텐츠 기술에 집중하는 것이 좋음

Google Stitch 2.0 업데이트

2.0으로 업데이트 되면서 한글 프롬프트 입력이 가능해짐
영문과 한글 프롬프트 입력 차이가 크게 없음

9. Stitch의 아이데이션 과정

Stitch는 생성된 디자인을 바탕으로 하나씩 수정하며 완성도를 높이는 것을 권장함

STEP 1. 한 번에 한 가지만 수정: 여러 요소를 동시에 바꾸기보다 가장 수정하고 싶은 한 가지에 집중
STEP 2. 구체적인 UI/UX 키워드 활용: '수정(Edit)' 기능을 통해 채팅으로 명확한 지시사항을 전달
STEP 3. 테마 일괄 편집(Edit Theme): 라이트/다크 모드, 포인트 컬러, 코너값(Corner Radius), 폰트 등을 한 번에 변경 (디자인 시스템)

예시: "가격 테이블의 중간 카드를 강조하기 위해 높이를 키우고 그림자를 추가해줘. 주변 카드는 크기를 줄여 시각적 위계를 만들어줘."

10. 프로토타이핑 및 검증

1) 프로토타입 생성: 디자인을 실제 스크롤 및 상호작용이 가능한 상태로 변환함
2) 인터랙션 확인: 버튼이나 카드의 호버(Hover) 스타일, 텍스트 박스의 크기 적절성 등을 직접 확인하며 수정 사항을 발견함

11. 결과물 출력 및 확장

1) 주요 특징: 완성된 디자인을 실제 개발 환경으로 전달할 수 있음

코드 및 이미지 다운로드: HTML 코드와 이미지 자산을 ZIP 파일 형태로 다운로드 가능
다양한 프레임워크로의 변환: Stitch에서 생성된 HTML 코드는 기본 베이스 역할을 함. LLM(차세대 언어모델)을 활용해 HTML을 React, Angular, Vue, Flutter, SwiftUI 등 원하는 포맷으로 손쉽게 변환 가능

Part 2. 프롬프트 엔지니어링

1. Stitch의 효과적인 프롬프트 작성법

1) 프로젝트 시작하기: 접근 방식의 선택
앱의 복잡도에 따라 광범위한 개념에서 시작하거나, 처음부터 구체적인 세부 사항을 입력할 수 있음

상위 수준(High-Level): 일반적인 아이디어로 가볍게 작성
- 예: "마라톤 러너를 위한 앱"
상세(Detailed): 핵심 기능을 작성하여 상위 수준보다 정확한 화면 구성 가능
- 예: "러닝 커뮤니티 활동, 파트너 찾기, 훈련 조언 및 주변 대회 정보를 제공하는 마라톤 앱"

a. 상위 수준 입력 결과 — "마라톤 러너를 위한 앱"

전문적 컨셉의 즉각적 시각화: 모호한 아이디어만으로도 완성도 높은 다크 모드 테마와 스타일 가이드(Color, Typo)를 자동 생성
표준 인터페이스 제안: 대시보드, 통계, 캘린더 등 해당 도메인(운동/기록)의 전형적이고 필수적인 UI 구성 요소를 빠르게 배치
아이디어 구체화 도구: 초기 기획 단계에서 디자인 방향성을 결정하고 전체적인 분위기(Look & Feel)를 파악하는 데 효과적

b. 상세 수준 입력 결과 (사용 모델: 3 Flash) — "러닝 커뮤니티 활동, 파트너 찾기, 훈련 조언 및 주변 대회 정보를 제공하는 마라톤 앱"

기능별 전용 화면 생성: 요청한 키워드에 맞춰 '홈/피드', '파트너 찾기', '훈련 가이드', '대회 정보' 등 목적이 명확한 독립적 화면들을 구현
사용자 여정(User Journey) 반영: 단순한 디자인을 넘어 사용자가 앱 내에서 실제로 수행할 핵심 동작과 흐름이 설계에 반영됨
고충실도(Hi-Fi) 프로토타이핑: 기획 의도가 상세할수록 AI가 의도를 정확히 파악하여, 즉시 개발 단계로 넘어갈 수 있는 수준 결과물을 제공

2) 형용사를 활용한 분위기(Vibe) 설정

형용사는 색상, 글꼴, 이미지 스타일 선정에 직접적인 영향을 미침
예시 1: "활기차고 격려하는 분위기의 피트니스 트래킹 앱"
- (색상) 강렬한 대비를 이루는 다크 모드를 기본으로, 에너지와 열정을 상징하는 오렌지, 네온 그린, 블루 등의 비비드한 포인트 컬러 사용 → 동기부여 유도
- (글꼴) 굵고 힘 있는 볼드체(Bold)와 대문자 중심의 헤드라인 → 활동적이고 단호한 느낌
- (스타일) 'Kinetic Pulse(운동 에너지)' 스타일 가이드 생성, 데이터 수치를 강조하는 원형 게이지와 날카로운 아이콘 스타일
예시 2: "명상에 집중할 수 있는 미니멀하고 차분한 앱"
- (색상) 라이트 모드와 부드러운 파스텔톤(세이지 그린, 소프트 블루, 그레이) → 시각적 평온함과 정서적 안정감
- (글꼴) 가늘고 우아한 서체, 넉넉한 자간과 여백 강조 → 압박감 없이 명상에 집중
- (스타일) 'Serene Breath(평온한 호흡)' 스타일 가이드 생성, 숲이나 호수 같은 자연 이미지·부드러운 라운딩 처리 카드 디자인

3) 화면별 반복(Iteration)을 통한 정교화

한 번에 완벽한 결과를 기대하기보다, 화면이나 컴포넌트 단위로 구체적이고 점진적인 변화를 주는 것이 효율적

수정 프롬프트 작성 공식: [대상] + [위치] + [방법]
- Stitch는 '무엇을', '어떻게' 바꿀지 명확히 지시할 때 가장 잘 작동함
- 예: "[로그인 화면]의 기본 CTA 버튼을 [더 크게 만들고], [브랜드 기본 색상인 블루로 적용해줘]."
  - 로그인 화면(위치) / 기본 CTA 버튼(대상) / 더 크게 만들고, 블루로 적용(방법)
구체적인 화면/기능 집중 예시
- (일본식 차 매장) "재팬디 스타일의 차 판매 페이지. 허브차와 도자기 판매. 중립적이고 미니멀한 색상, 검정 버튼, 부드럽고 우아한 폰트 사용."
- (남성 운동복 매장) "일본 워크웨어에서 영감받은 남성 운동복 상세 페이지. 어둡고 미니멀한 디자인, 다크 블루 포인트 컬러, 천연 소재 느낌의 절제된 이미지 사용."

3) 테마 및 시각 요소 제어 — 앱의 전체적인 룩앤필(Look & Feel)을 결정하는 요소들을 세밀하게 조정

색상(Colors): 특정 색상 지정 및 분위기 설명
- 예: "포레스트 그린으로 변경", "따뜻하고 친근한 색조로 업데이트"
폰트(Fonts): 서체 스타일 변경
- 예: "장난스러운 산세리프체 사용" 또는 "제목에 세리프체 적용"
테두리(Borders): 컴포넌트 외형 변경
- 예: "모든 버튼의 모서리를 둥글게 처리" 또는 "입력창에 2px 검정 실선 적용"
이미지(Images): 구체적인 스타일 묘사
- 예: "앨범 커버는 바닷물을 근접 촬영한 매크로 사진으로 하고, 배경도 이에 맞출 것"

4) 이미지 및 언어 설정 관리 — 디자인 내의 이미지 콘텐츠를 수정하거나 앱의 언어를 변경하는 방법

특정 이미지 타겟팅 수정: 단순히 "이미지 바꿔줘"가 아니라 위치와 내용을 정확히 지정
- 예: "'Team' 페이지의 'Dr. Carter' 이미지를 찾아, 그녀가 입고 있는 가운의 색상을 검은색으로 변경해줘."
테마와 이미지의 동기화:
- 예: "전체 테마를 라이트 오렌지로 업데이트하고, 모든 이미지와 아이콘도 이 색상에 맞게 조정해줘."
언어 변경(Localization): 프롬프트 한 줄로 전체 텍스트 언어 변경 가능
- 예: "모든 제품 설명과 버튼 텍스트를 스페인어로 바꿔줘."

5) Stitch 활용을 위한 작성 팁
1. 명확성 및 간결성 유지: 모호한 표현을 피하고 직접적으로 지시함
2. 한 번에 하나의 큰 변화: 변화의 영향을 쉽게 파악하고 조정할 수 있도록 함
3. UI/UX 전문 키워드 사용: '내비게이션 바(Navigation bar)', 'CTA 버튼', '카드 레이아웃(Card layout)' 등 전문 용어를 사용하면 정확도가 올라감
4. 구체적인 요소 참조: '가입 양식의 기본 버튼', '히어로 섹션의 이미지' 등 위치를 명확히 지정함
5. 검토 및 재시도: 결과가 만족스럽지 않다면 문장을 다르게 표현하거나 더 구체적인 타겟팅으로 다시 시도함

Part 3. Stitch 인터페이스와 기능 이해

1. Stitch 대시보드 인터페이스

1) 대시보드 구성 — 3영역
1. 좌측 사이드바: 프로젝트 및 히스토리 관리 영역
2. 중앙 메인 입력창: AI 생성 및 설정 영역
3. 우측 상단 메뉴 및 유틸리티: 지원 및 계정 설정 영역

(1) 좌측 사이드바 — 작업 중인 모든 디자인 데이터를 시간순으로 한눈에 파악·관리하는 공간

내 프로젝트: 내가 직접 생성하고 소유한 개인 작업물
나와 공유된 항목: 팀원이나 외부 협업자로 공유받은 작업물
프로젝트 검색: 검색을 통해 프로젝트를 찾을 수 있음
타임라인 리스트: '최근', '어제', '올해' 등 생성 시간에 따라 프로젝트가 자동 분류되어 별도 폴더 정리 없이 작업 확인 가능

(2) 중앙 메인 입력창 — 프롬프트 입력 및 설정 영역 (아이디어를 입력하고 생성 엔진의 세부 설정을 조정하는 핵심적인 공간)

내 디자인으로 시작하기: 기존 디자인을 업로드하여 작업하는 기능
프롬프트 입력창: 자연어를 입력하는 공간
입력창 하단 도구 모음
- + 버튼: 로컬에 저장된 이미지, 손그림 와이어프레임, 스크린샷 등 첨부
- 디바이스 토글(앱/웹): UI 기본 규격 선택
- 디자인 시스템 선택: 스타일 가이드라인이 될 디자인 시스템 선택
- 모델 선택기: 작업 목적에 따른 AI 엔진 선택
- 음성 입력: 목소리를 통한 작업 진행
- 생성 버튼: 화살표를 통해 디자인 생성 시작
프롬프트 제안 칩: Stitch가 제안하는 예시 프롬프트

(3) 우측 상단 메뉴 및 유틸리티 — 지원 및 계정 영역

Docs: Stitch 가이드 페이지로 이동하여 사용법 학습 가능
커뮤니티: 디스코드나 X(Twitter)를 통해 다른 사용자들과 정보 공유 가능
선물 아이콘: Stitch의 최근 업데이트 소식 등 확인 가능
더보기 버튼: FAQ, 포럼, 프롬프트 가이드, 의견 보내기, 개인정보처리방침 등 서비스와 소통할 수 있는 기능 제공
프로필: Stitch 설정(크레딧 확인), 계정 관리, 계정 전환, 로그아웃 기능 제공

Google Stitch 1.0 vs 2.0 기능 비교

핵심 비교	Stitch 1.0 (초기 모델)	Stitch 2.0 (업데이트 모델)
핵심 컨셉	Prompt-to-UI (도구)	Intent-to-Product (에이전트)
입력 방식	주로 텍스트 프롬프트 기반	멀티모달 (음성, 스케치, 스크린샷, '바이브')
캔버스 구조	페이지/화면 단위의 개별 생성	무한 캔버스 및 시스템 설계
AI의 역할	사용자의 지시를 수행하는 '그림 도구'	디자인 의도를 추론하고 비평하는 '디자인 파트너'
맥락 유지	새로운 프롬프트 입력 시 맥락 소실 잦음	프로젝트 전체(DESIGN.md)와 대화 이력 히스토리
협업/개발	단순한 일회성 코드/Figma 내보내기	MCP를 통한 코딩 에이전트와의 실시간 연동

2. Stitch 프로젝트 작업 화면

1) 인터페이스 구성 — 6영역
1. 상단 바: 프로젝트 전역 설정 및 최종 산출물 관리 영역
2. 캔버스: AI와 실제로 작업하는 영역
3. 우측 툴바: 작업에 도움을 주는 기능 모음
4. 하단 프롬프트 입력창: 디자인 생성 및 변경을 위한 프롬프트 입력 영역
5. 좌측 에이전트 로그: AI와 나눈 대화와 작업 히스토리 확인 영역
6. 우측 하단 캔버스 보조 기능: 작업 중 도움을 받을 수 있는 보조 기능 영역

2) 상단 바 — 프로젝트 전역 설정 및 최종 산출물 관리 영역
1. 햄버거 버튼: 프로젝트 전반적인 제어와 관리를 담당하는 메뉴 모음
2. 프로젝트 이름: 왼쪽 상단에서 현재 작업 중인 프로젝트명을 확인하고 수정 가능
3. 플레이(▷) 버튼: 생성된 여러 화면을 연결하여 실제 앱처럼 작동시켜 보는 프로토타입 미리보기 기능
4. 내보내기: 완성된 디자인을 Figma로 보내거나 프로덕션용 코드(HTML/CSS)로 추출
5. 공유: 팀원이나 이해관계자에게 프로젝트 링크를 전달하여 협업
6. 프로필: 사용자 개인 권한과 환경을 제어하는 기능 제공

3) 캔버스

(1) 2.0 캔버스 특징: 단순한 디자인 작업대를 넘어, AI가 프로젝트의 전체 맥락을 실시간으로 파악하고 사용자와 협업하는 '지능형 워크스페이스' 역할. 텍스트·이미지·코드를 구분하지 않고 디자인의 맥락(Context)으로 받아드림
- 스타일 가이드: 캔버스 왼쪽 상단에 위치하며, 해당 프로젝트의 색상·폰트·컴포넌트 규칙을 보여줌
- 멀티 스크린 레이아웃: 프롬프트에 따라 생성된 홈·커뮤니티·파트너 찾기 등 여러 화면이 논리적인 순서대로 나열됨

(2) 초기 및 동시 생성 가능 화면 수: Google Stitch는 한 번의 프롬프트로 최대 5개의 연결된 화면을 동시에 생성 가능

항목	상세 내용
동시 생성	사용자가 특정 서비스의 컨셉을 입력하면, 단일 화면이 아닌 핵심 사용자 흐름(Flow)을 구성하는 5개의 주요 화면을 한꺼번에 디자인함 (예: 랜딩 페이지, 로그인, 메인 대시보드, 설정, 상세 페이지 등)
일관성 유지	5개의 화면은 동일한 디자인 시스템(색상, 글꼴, 컴포넌트 스타일 등)을 공유하며 논리적인 흐름으로 연결된 상태로 생성됨
확장성	초기 생성 이후 '다음 화면 생성(Generate Next Screen)' 기능을 통해 기존 디자인의 맥락을 유지하며 추가 화면을 계속해서 생성할 수 있음

4) 우측 툴바 — 인터페이스 구성
1. Select (단축키 V): 캔버스 위의 화면, 컴포넌트, 업로드된 이미지 에셋을 선택·이동시키는 기본 선택 도구
2. Mark (단축키 M): 화면 내 특정 영역을 사각형으로 지정하는 영역 선택 도구. 특정 영역을 Mark로 지정하면 AI가 그 부분만 집중적으로 분석하여 수정 진행
3. Direct Edit (단축키 E): 특정 영역을 선택하여 해당 부분을 직접 수정하거나, AI에게 수정을 요청할 수 있음
4. Pan (단축키 H): 무한 캔버스 내에서 화면을 자유롭게 이동시키는 핸드(Hand) 도구
5. Upload files to canvas: 외부의 레퍼런스 이미지, 스크린샷, 손그림 스케치 등을 캔버스에 업로드
6. DESIGN.md: 프로젝트 전체의 색상(Color), 글꼴(Font), 간격(Spacing) 등 디자인 토큰을 관리함
7. Favourites: 마음에 드는 결과물을 저장할 수 있음

5) 하단 프롬프트 입력창

(1) 일반 프롬프트 입력창과 디자인 선택 상태의 입력창 비교: 디자인을 선택하지 않은 상태와 선택한 상태의 입력창 성격이 달라짐

일반 프롬프트 입력창 (화면 선택 안 함)	디자인 선택 상태의 입력창
선택하지 않은 상태에서의 입력창은 "전역적 지시"를 위한 모드임	특정 화면을 선택한 상태는 "특정 화면에 대한 지시"를 위한 모드임
프로젝트의 큰 틀을 잡거나 새로운 요소를 추가할 때 사용	다른 디자인에 영향을 주지 않고 특정 부분만 다듬을 때 사용

(2) 일반 프롬프트 입력창(선택 안 함) 구성
1. 프롬프트 입력창: 자연어를 입력하는 공간
2. + 버튼: AI가 디자인을 생성할 때 참고할 외부 자료를 제공하는 버튼 (파일 업로드, 웹사이트 URL, 변형)
3. Tools: 목적별로 이미지, 로고, 다이어그램 등을 선택하여 생성하는 도구
4. 변형 생성 버튼: 한 번의 프롬프트 입력으로 "여러 개의 디자인 시안(기본 3개)"을 동시에 생성할 수 있는 기능
5. DESIGN.md 사용: 프로젝트의 스타일 가이드를 추가하거나 설정 및 관리할 수 있는 기능 제공
6. 모델 선택기: "3 Flash / Thinking with 3.1 Pro / Redesign" 3가지 모델을 제공함
7. 음성 입력: 음성 인식 기반의 실시간 편집 모드 활성화 기능
8. 생성 버튼: 화살표를 통해 디자인 생성 시작

6) 좌측 에이전트 로그 — 인터페이스 구성
1. 좌측 상단 AI 에이전트 버튼(●● 아이콘): AI가 어떻게 작업을 진행했는지에 대한 내용이 정리된 공간, 디자인에 대한 작업 방향성을 확인할 수 있음
2. 좌측 하단 에이전트 로그 버튼: 해당 프로젝트 내에서 AI와 주고받은 작업 히스토리 확인 가능
3. 선택 에이전트 로그와 디자인 자동 동기화: 에이전트 로그를 선택하면 해당 로그에 대한 디자인이 자동 선택되며 캔버스 중앙에 위치됨

7) 컨트롤 바

(1) 특정 디자인 화면 1개 선택 시: 상단에 활성화되는 기능으로 화면에 대한 생성, 수정, 테스트 및 외부 툴 연동 기능을 제공하는 메뉴
- Generate: AI를 통해 현재 디자인을 발전시키거나 형태를 변환하는 도구 모음
- Modify: 디자인의 세부 요소를 조정하거나 디자인 시스템을 수정하는 도구 모음
- Preview: 설계한 디자인이 실제 환경에서 어떻게 보이는지 확인하는 도구 모음
- More: 외부 툴과의 협업이나 파일 관리를 위한 도구 모음
(2) 디자인 화면 다중 선택 시: 여러 개의 디자인 화면을 다중 선택하면, 상단 툴바는 개별 편집 모드에서 '일괄 처리 및 레이아웃 정리 모드'로 전환됨
- Generate: AI를 통해 현재 디자인을 발전시키거나 형태를 변환하는 도구 모음 (인스턴스 프로토타입 / 데스크톱 웹(앱) 버전 변경)
- DESIGN.md: 디자인 시스템 일괄 적용
- 정렬 버튼: 무한 캔버스에 흩어진 화면들을 시각적으로 정돈하는 기능 제공
- 간격 조정 버튼: 화면과 화면 사이의 거리를 일정하게 맞추는 기능 제공
- More: 일괄적으로 외부 툴과의 협업이나 파일 관리를 위한 도구 모음

8) 우측 하단 캔버스 보조 기능 — 캔버스의 상태를 확인하고, 화면 보기 방식을 조정하며, 사용 중 필요한 도움을 즉시 받을 수 있는 도구들이 배치됨
1. 실행 취소 / 재실행: 캔버스 작업 내용을 취소하거나 재실행 하는 기능
2. 화면 크기 설정: 무한 캔버스를 효율적으로 탐색하기 위한 확대/축소 제어 도구
3. 도움말 버튼: 스티치 사용 중 궁금한 점을 해결하거나 커뮤니티와 소통할 수 있는 도구 모음

Part 4. AI 기반 UI/GUI 생성 워크플로우 이해

1. AI를 통해 UI/GUI 생성하는 프로세스

1) 전체 프로세스 — 기본 구조

AI 기반 UI/GUI 생성은 단순히 "프롬프트를 입력해 화면을 생성하는 작업"이 아니라, 기획 → 요구사항 정리 → 화면 설계 → GUI 생성 → 검토 및 수정으로 이어지는 디자인 워크플로우에 대한 이해가 필요함
기존 UI/GUI 디자인에서는 디자이너가 화면 구조와 시각 디자인을 직접 구성하는 비중이 컸다면, AI 기반 프로세스에서는 AI가 이해할 수 있는 기획 정보와 프롬프트를 설계하는 과정이 중요해짐
따라서 이번 모듈에서는 AI를 "디자인을 대신 완성하는 도구"가 아니라, 기획안을 빠르게 화면으로 시각화하고 여러 방향의 GUI 초안을 탐색하는 도구로 다룸

2) AI 기반 UI/GUI 생성 전체 프로세스 (8단계)

[기획·요구사항 정리 단계]

STEP	단계	주요 작업	활용 가능 툴
STEP 01	서비스/화면 목적 정의	사용자가 어떤 문제를 해결해야 하는지 정의 / 생성할 화면이 홈·검색·상세·예약·결제·대시보드 중 어떤 유형인지 정리	ChatGPT, Gemini
STEP 02	사용자와 사용 맥락 정리	주요 사용자, 사용 상황, 사용자의 핵심 목표 정리 (예: "20~30대 사용자가 주말 여행지를 빠르게 탐색하고 비교하는 모바일 앱")	ChatGPT, Gemini
STEP 03	화면 요구사항 작성	화면에 포함되어야 할 정보·기능·버튼·카드·입력 요소·CTA·우선순위 정리 / UI 생성 전 요구사항을 명확한 프롬프트 구조로 바꾸는 과정이 중요	ChatGPT, Gemini
STEP 04	User Flow 및 화면 흐름 구성	단일 화면이 아니라 사용자가 목표를 달성하는 흐름 기준으로 화면을 구성 (예: 홈 → 검색 결과 → 상세 → 옵션 선택 → 결제 → 완료)	ChatGPT, Gemini, Stitch

[UI/GUI 생성 단계 / 수정·고도화 단계]

STEP	단계	주요 작업	활용 가능 툴
STEP 05	UI/GUI 프롬프트 작성	기획 내용을 AI 디자인 도구가 이해할 수 있는 생성 프롬프트로 변환 / 화면 유형, 주요 기능, 정보 위계, 스타일, 색상, 톤앤매너, 디바이스 조건 포함	ChatGPT, Gemini
STEP 06	AI 기반 UI/GUI 초안 생성	작성한 프롬프트 또는 이미지를 기반으로 UI/GUI 초안을 생성	ChatGPT, Gemini, Stitch
STEP 07	생성 결과 검토 및 수정	생성된 화면이 사용자 목표, 정보 우선순위, 화면 흐름, GUI 톤앤매너에 맞는지 검토	ChatGPT, Gemini, Stitch
STEP 08	Figma 또는 개발 연계	AI가 생성한 결과물을 Figma에서 정교화하거나 프론트엔드 코드로 연결	Stitch, Figma, Claude Code 등

3) 프로세스별 활용 가능한 AI 도구

(1) 기획·요구사항 정리 단계: STEP 01 ~ STEP 04

활용 가능 툴	세부 활용 방식
ChatGPT	서비스 아이디어 정리, 사용자 정의, 화면 요구사항 작성, User Flow 구성, UI 생성 프롬프트 작성에 활용 / 복잡한 요구사항을 단계별로 구조화하거나, 화면별 기능 목록을 정리할 때 적합 / OpenAI는 모델이 복잡한 작업을 이해하려면 명확한 지시, 목표, 형식, 조건을 제공하는 것이 중요하다고 안내함
Gemini	아이디어 정리, 리서치 기반 기획, 앱/웹 프로토타입 구상에 활용 가능 / Gemini Canvas는 문서 작성과 코드 작업을 한 공간에서 진행하고, 아이디어를 웹 앱 프로토타입이나 코드로 변환하는 용도로 소개됨

(2) UI/GUI 생성 단계: STEP 05 ~ STEP 06

활용 가능 툴	세부 활용 방식
Google Stitch	텍스트 프롬프트, 이미지, 와이어프레임을 기반으로 UI 디자인을 생성하는 데 적합 / 모바일 앱, 웹 앱 UI 초안을 빠르게 만들고, 여러 레이아웃과 스타일 방향을 탐색할 수 있음 / Google은 Stitch를 "자연어에서 고충실도 UI 디자인을 만들고, 반복하고, 협업할 수 있는 AI-native software design canvas"로 설명함
Figma (에이전트, Make)	프롬프트 기반으로 기능형 프로토타입이나 인터랙티브 UI를 빠르게 구성하는 데 활용 가능
ChatGPT, Gemini	ChatGPT와 Gemini 이미지 생성, 기타 이미지 생성 도구를 활용해 UI 콘셉트 이미지나 GUI 스타일 시안을 만들 수 있음

(3) 수정·고도화 단계: STEP 07 ~ STEP 08

활용 가능 툴	세부 활용 방식
Google Stitch	생성된 디자인을 바탕으로 다른 방향을 탐색하거나, 디자인 의도를 설명하고, 화면 흐름을 확장하는 데 활용
Figma	AI가 생성한 결과물을 세부적으로 정리하고, 컴포넌트화하고, 디자인 시스템 기준으로 다듬는 데 활용

Part 5. ChatGPT 기획 → 이미지 생성 → Stitch Import 시연 & 실습 가이드

0. 개요

1) 실습 목표 — 기본 워크플로우 이해

이번 실습의 목적은 단순히 화면을 "예쁘게 생성"하는 것이 아니라, 기획 내용을 구조화하고 → 시각화하고 → 디자인 툴로 이어지는 전체 흐름 이해
진행 내용:
- ChatGPT로 서비스/화면 기획 정리
- ChatGPT로 기획안을 바탕으로 UI/GUI 이미지 생성
- 생성된 이미지를 Stitch로 가져와 디지털 UI로 전환

2) 실습 워크플로우 (총 4단계)

STEP 01. Chat GPT를 통한 기획
   ↓
STEP 02. Chat GPT를 통한 UI/GUI 이미지 생성
   ↓
STEP 03. 생성한 이미지를 Stitch에 Import
   ↓
STEP 04. Stitch에서 수정 및 보완

실습 프로그램

Chat GPT: https://chatgpt.com/
Google Stitch: https://stitch.withgoogle.com/

1. [STEP 01] Chat GPT를 통한 기획

1) 목표 — 화면을 만들기 전에 기획안을 구조화

이 단계에서는 바로 이미지를 만들지 않고, 먼저 기획 내용을 정리함
핵심은 ChatGPT에게 "앱 화면 하나 만들어줘"라고 말하는 것이 아니라, 누가 / 왜 / 무엇을 / 어떤 방식으로 사용하는지를 먼저 정리하게 하는 것
STEP 01 산출물: 화면 요구사항이 포함된 프롬프트

2) Chat GPT에 요청할 기획 항목 (기획 시 포함할 내용 목록)

서비스 목적 / 주요 사용자 / 사용 상황 / 사용자의 핵심 목표 / 화면 유형 / 주요 기능 / 핵심 정보 / 정보 우선순위 / 톤앤매너 / 화면 구성 요소

1단계 - 기본 기획안 생성 (모델: GPT-5.5, 추론 수준: 높음, 26.07.08 기준)

프롬프트 입력:

20~30대 직장인이 점심시간에 근처의 건강식을 빠르게 찾고 주문할 수 있는 모바일 앱 홈 화면을 기획하려고 해.

다음 항목으로 구조화해서 정리해줘.
1. 서비스 목적  2. 주요 사용자  3. 사용 상황  4. 사용자의 핵심 목표
5. 홈 화면에서 제공해야 할 핵심 기능  6. 홈 화면에 포함되어야 할 주요 정보
7. 정보 우선순위  8. 추천 화면 구성  9. 전체 UI/GUI 톤앤매너

2단계 - 기획안을 UI/GUI 요구사항으로 변경

1단계에서 생성한 앱의 방향성을 기반으로, UI/GUI 이미지 생성을 위해 화면 구성 조건을 생성함

프롬프트 입력:

위 기획안을 바탕으로,
모바일 앱 홈 화면 UI 이미지를 생성하기 위한 프롬프트로 변경해줘.

다음 항목을 포함하여 프롬프트를 작성해줘.
1. 화면 유형  2. 디바이스 조건  3. 상단 영역 구성  4. 중단 영역 구성
5. 하단 영역 구성  6. 주요 UI 컴포넌트  7. 시각 스타일  8. 컬러 방향
9. 제외해야 할 요소  10. 이미지 생성 프롬프트에 꼭 들어가야 할 핵심 문장

생성 프롬프트를 복사하여 STEP 02의 이미지 생성에 사용 예정

[진행 결과] Chat GPT 제안 프롬프트 (건강식 주문 앱 예시)

20~30대 직장인이 점심시간에 회사 근처의 건강식을 빠르게 찾고 주문할 수 있는 모바일 앱 홈 화면 UI를 디자인해줘.

1. 화면 유형

모바일 건강식 주문 앱의 홈 화면 / 위치 기반으로 근처 건강식 매장과 메뉴를 추천하는 커머스형 홈 화면 / 사용자가 점심시간에 빠르게 메뉴를 선택하고 바로 주문할 수 있는 구조

2. 디바이스 조건

iPhone 기준의 세로형 모바일 화면 / 9:16 비율 / 앱 UI 목업 스타일 / 실제 사용 가능한 프로덕트 앱처럼 정돈된 화면 구성 / 상태바와 하단 내비게이션을 포함한 모바일 앱 화면

3. 상단 영역 구성

현재 위치 표시: "강남역 근처" 또는 "회사 근처" / 짧은 환영 문구: "오늘 점심, 건강하게 골라볼까요?" / 알림 아이콘 또는 장바구니 아이콘 배치 / 검색창 배치: "건강식 메뉴나 매장을 검색해보세요" / 검색창 아래에 빠른 필터 칩 배치: 저칼로리, 고단백

4. 중단 영역 구성

가장 눈에 띄는 메인 추천 카드 배치 / "오늘의 추천 건강식" 섹션 구성 / 신선한 음식 사진이 포함된 큰 카드형 UI / 메뉴명, 칼로리, 단백질, 가격, 거리, 픽업 예상 시간을 간결하게 표시 / 예시 메뉴: 닭가슴살 포케, 연어 샐러드, 고단백 도시락 / 카드 안에 "바로 주문" 버튼 포함 / 그 아래에는 "최근 주문한 메뉴" 또는 "자주 먹는 건강식" 섹션 배치

5. 하단 영역 구성

주변 건강식 매장 리스트를 카드형으로 배치 / 각 매장 카드에는 매장명, 대표 메뉴 이미지, 거리, 예상 준비 시간, 평점, 가격대 표시 / 하단 고정 내비게이션 포함 / 하단 메뉴는 홈, 검색, 주문내역, 찜, 마이페이지로 구성

6. 주요 UI 컴포넌트

위치 기반 헤더 / 검색창 / 건강식 필터 칩 / 추천 메뉴 카드 / 음식 이미지 카드 / 영양정보 뱃지 / 거리 및 시간 뱃지 / 바로 주문 CTA 버튼 / 주변 매장 리스트 / 하단 탭 내비게이션 / 둥근 모서리의 카드형 레이아웃

7. 시각 스타일

깔끔하고 현대적인 모바일 앱 UI / 건강식 서비스에 어울리는 신선하고 밝은 분위기 / 복잡하지 않고 빠른 선택이 가능한 정보 구조 / 넓은 여백, 명확한 정보 위계, 부드러운 카드 디자인 / 음식 이미지는 밝고 신선하게 표현 / 직장인이 점심시간에 빠르게 사용할 수 있는 실용적인 UI

8. 컬러 방향

전체 배경은 화이트 또는 아주 연한 크림색 / 포인트 컬러는 신선한 그린 계열 / 보조 컬러는 라이트 베이지, 라이트 그레이, 소프트 민트 / CTA 버튼은 선명한 그린으로 강조 / 영양정보 뱃지는 연한 그린 또는 연한 민트 배경 사용 / 전체적으로 깨끗하고 건강한 느낌 유지

9. 제외해야 할 요소

너무 복잡한 대시보드형 UI 제외 / 과도한 텍스트 정보 제외 / 어두운 배경 제외 / 배달앱처럼 과도하게 자극적인 할인 배너 제외 / 패스트푸드 중심 이미지 제외 / 복잡한 영양성분표 형태 제외 / 너무 많은 메뉴 카드로 화면이 혼잡해 보이지 않게 구성 / 브랜드 로고, 실제 상표, 워터마크 제외 / 깨진 텍스트, 읽기 어려운 작은 글씨 제외

2. [STEP 02] UI/GUI 이미지 생성

1) 목표 — 기획안을 시각적 UI 콘셉트 이미지로 변환

앞서 정리한 기획안을 바탕으로 UI/GUI 콘셉트 이미지를 생성함
여기서 생성된 이미지는 최종 산출물이 아니라, Google Stitch에 사용할 시각적 참고자료이자 UI 초기 방향성임
STEP 02 산출물: 초기 방향성이 담긴 UI/GUI 이미지

1단계 - UI/GUI 생성 프롬프트 입력
1. STEP 01에서 생성된 프롬프트 입력 (앞 슬라이드에 배치된 프롬프트 확인)
2. + 버튼 → 이미지 만들기 선택
3. 모델 선택: GPT-5.5, 추론 수준: 높음 (26.07.08 기준)

2단계 - 정교한 수정을 위해 추가 프롬프트 입력

생성된 이미지를 바로 사용하거나, 추가적인 프롬프트를 입력하여 수정 (예: 레이아웃 변경, 색상 변경 등 요청)

이미지 편집 화면에서 프롬프트 입력:

정보량을 조금 줄이고,
핵심 정보 위주로 정돈된 홈 화면으로 수정해줘.

상단 검색, 추천 음식 카드, 카테고리, 하단 내비게이션만 명확하게
유지하고 나아지는 미니멀하게 정리해줘.

3. [STEP 03 & 04] Stitch 업로드 및 수정

1) 목표 — 이미지 기반으로 Stitch에서 실제 UI 초안 생성

이 단계에서는 ChatGPT에서 생성한 UI 이미지를 Stitch에 넣고, 이를 기반으로 실제 디지털 UI 화면을 생성
즉, ChatGPT 이미지는 콘셉트 시안이고, Stitch는 이를 바탕으로 더 구조화된 UI를 만드는 역할을 함
STEP 03 산출물: Stitch에서 디지털 UI 제작

2) Stitch Import 시 입력할 내용 — 기본 설명 구조

Stitch에 이미지만 올리는 것이 아닌, 아래 내용을 함께 입력하는 것이 좋음
- 이 이미지가 어떤 화면인지
- 어떤 요소를 유지해야 하는지
- 무엇을 더 명확하게 정리해야 하는지
- 어떤 스타일로 정돈해야 하는지

1단계 - Chat GPT 이미지 다운로드
1. 이미지 편집 버튼 클릭
2. 이미지 편집 화면에서 우측 상단의 다운로드 버튼 클릭

2단계 - Stitch에 이미지 업로드 및 프롬프트 입력 (모델: 3 Flash)

Stitch는 이미지를 해석해 UI를 생성하는 방식이기 때문에, 이미지와 함께 프롬프트를 입력하는 것이 권장됨

Stitch 접속: https://stitch.withgoogle.com/
1단계에서 다운로드 받은 이미지 업로드
프롬프트 입력:

첨부한 이미지를 참고해서 모바일 앱 홈 화면 UI를 생성해줘.
이 이미지는 건강식 주문 앱의 홈 화면이야.
다음 요소를 유지해서 더 실제 앱 UI처럼 정리해줘.

상단 위치 정보와 검색창, 추천 음식 카드 리스트, 카테고리 또는 빠른
탐색 메뉴, 프로모션 배너, 하단 내비게이션 전체 레이아웃은 모바일 앱에
적합하게 정돈하고, 정보 위계와 버튼 구조를 더 명확하게 만들어줘.

디자인 스타일은 깔끔하고 건강한 느낌의 모던 GUI로 유지해줘.

디바이스: 앱 선택
모델 선택: 3 Flash (26.07.08 기준)

디자인 시스템 확인 — Stitch에서 생성한 디자인 시스템 확인 (제공 항목)

(1) 색상 시스템: Primary / Secondary / Tertiary / Neutral
(2) 타이포그래피: Headline / Body / Label
(3) UI 컴포넌트: 버튼 시스템 / 입력 및 검색 필드 / 텍스트 블록 가이드 / 유틸리티 및 내비게이션 아이콘 / 배지 및 태그

생성 이미지 확인

업로드한 이미지와 프롬프트로 생성된 결과 확인
해당 디자인은 Figma로 내보내고, 코드를 보고 애니메이션 등 기능을 사용할 수 있음
(3 Flash 모델 / 3.1 Pro 모델로 각각 생성한 결과를 Figma에서 확인 가능)

실습 프롬프트 (전체 정리)

→ 프롬프트

<step 1. chatGPT를 통한 기획>

[1단계]
20~30대 직장인이 점심시간에 근처의 건강식을 빠르게 찾고
주문할 수 있는 모바일 앱 홈 화면을 기획하려고 해.

다음 항목으로 구조화해서 정리해줘.
1. 서비스 목적
2. 주요 사용자
3. 사용 상황
4. 중단 영역 구성
5. 홈 화면에서 제공해야 할 핵심 기능
6. 홈 화면에 포함되어야 할 주요 정보
7. 정보 우선순위
8. 추천 화면 구성  9. 전체 UI/GUI 톤앤매너


[2단계]
+ 1단계에서 나온 기획안 (프롬프트를 여기에 배치)

위 기획안을 바탕으로,
모바일 앱 홈 화면 UI 이미지를 생성하기 위한 프롬프트로 변경해줘.

다음 항목을 포함하여 프롬프트를 작성해줘.
1. 화면 유형  2. 디바이스 조건  3. 상단 영역 구성  4. 중단 영역 구성
5. 하단 영역 구성  6. 주요 UI 컴포넌트  7. 시각 스타일  8. 컬러 방향
9. 제외해야 할 요소  10. 이미지 생성 프롬프트에 꼭 들어가야 할 핵심 문장

STEP 02 - Chat GPT를 통한 UI/GUI 이미지 생성

STEP 01에서 작성된 프롬프트를 입력하여 이미지 생성

STEP 03~04 - Stitch에서 작업 진행

첨부한 이미지를 참고해서 모바일 앱 홈 화면 UI를 생성해줘.
이 이미지는 건강식 주문 앱의 홈 화면이야.
다음 요소를 유지해서 더 실제 앱 UI처럼 정리해줘.

상단 위치 정보와 검색창, 추천 음식 카드 리스트, 카테고리 또는 빠른
탐색 메뉴, 프로모션 배너, 하단 내비게이션 전체 레이아웃은 모바일 앱에
적합하게 정돈하고, 정보 위계와 버튼 구조를 더 명확하게 만들어줘.

디자인 스타일은 깔끔하고 건강한 느낌의 모던 GUI로 유지해줘.

다음 시간 예고

Part 6. Stitch Ideate 모델을 활용한 기획·디자인 시연 & 실습 가이드

🧠 오늘의 회고 (핵심 정리)

완벽한 첫 프롬프트보다 "반복(Iteration)"이 핵심. 백지에서 고민하지 말고 일단 생성한 뒤 하나씩 고쳐 나간다.
Stitch는 자연어 → 편집 가능한 UI + 실사용 가능한 HTML/CSS(Tailwind) 코드까지 뽑아준다. React/Vue/Flutter/SwiftUI로도 변환 가능.
모델 4종을 목적별로 골라 쓴다: 속도·코드는 3 Flash, 품질·추론은 3.1 Pro, 기존 앱 리뉴얼은 Redesign, 기능 아이디어 발산은 Ideate.
프롬프트 공식 = 아이디어 + 테마 + 콘텐츠 (+ 이미지). 초기엔 Hex 코드 같은 디테일보다 "분위기(형용사) + 콘텐츠"에 집중.
수정 프롬프트 공식 = [대상] + [위치] + [방법]. "무엇을, 어디서, 어떻게" 바꿀지 명확히 지시할 때 가장 잘 작동한다.
형용사 하나(활기찬 vs 차분한)가 색상·글꼴·이미지 스타일 전체를 좌우한다.
Stitch 2.0의 진짜 변화는 도구 → 파트너. 무한 캔버스, DESIGN.md(디자인 규칙 표준화), 음성 디자인, MCP 연동, 한글 프롬프트 지원.
캔버스는 한 번에 최대 5개의 연결된 화면을 동일 디자인 시스템으로 생성하고, 'Generate Next Screen'으로 계속 확장.
AI 기반 UI/GUI 생성은 8단계 워크플로우(목적 정의 → 사용자·맥락 → 요구사항 → User Flow → 프롬프트 → 초안 생성 → 검토·수정 → Figma/개발 연계). AI는 "대신 완성하는 도구"가 아니라 "초안을 빠르게 탐색하는 도구".
실습 흐름은 ChatGPT 기획(구조화) → ChatGPT 이미지(콘셉트 시안) → Stitch Import(구조화된 UI) → Stitch 수정. 이미지만 올리지 말고 "어떤 화면인지 / 무엇을 유지·정리·정돈할지"를 함께 설명하는 게 포인트.
Stitch 이용은 무료지만 일일 400 크레딧 제한(UTC 자정 초기화), 18세 이상 + 구글 로그인 필요.

김덕협

뭘봐

이전 포스트

TIL 07-21 보호 필름

다음 포스트