flowchart TD
A[입력] --> B1[이미지 파일\n.png .jpg .webp]
A --> B2[URL\n공개 웹사이트]
B1 --> C1[손 스케치·종이 와이어프레임]
B1 --> C2[디지털 와이어프레임·목업]
B1 --> C3[앱·웹사이트 스크린샷]
B2 --> C4[공개 URL → 스타일 자동 추출]
C1 --> D[Gemini 멀티모달 분석]
C2 --> D
C3 --> D
C4 --> D
D --> E[편집 가능한 UI 생성]
입력 유형
예시
분석 항목
손 스케치
종이에 그린 앱 레이아웃
구조·영역 분할·컴포넌트 배치
디지털 와이어프레임
Figma 저충실도 목업
레이아웃·컴포넌트 타입
앱 스크린샷
iOS/Android 앱 캡처
색상·타이포그래피·간격·컴포넌트 스타일
웹 스크린샷
웹사이트 전체 캡처
디자인 시스템·색상 팔레트·폰트
공개 URL
웹사이트 주소 직접 입력
색상·타이포그래피·레이아웃 자동 크롤링
2. 스케치·와이어프레임 → UI
종이나 화이트보드에 그린 러프 스케치를 고충실도 UI로 디지털화하는 가장 빠른 방법이다.
워크플로우
1. 스케치 사진 촬영 (스마트폰으로도 충분)
2. Stitch 새 프로젝트 → 이미지 업로드 버튼 클릭
3. 스케치 이미지 첨부
4. 추가 설명 입력 (권장):
예: "이 스케치를 기반으로 주황색 테마의 배달 앱 UI 만들어줘"
5. Generate 클릭 → AI가 스케치 구조 분석 후 편집 가능한 UI 생성
스케치 품질별 결과 예측
스케치 품질
기대 결과
보완 방법
러프 (선·박스만 표시)
구조는 반영, 스타일은 AI 재량
추가 텍스트 프롬프트로 스타일 지정
중간 (레이블·계층 표시)
컴포넌트 타입과 배치 반영
색상·테마 보완 프롬프트 추가
정밀 (색상·간격 표시)
높은 충실도로 재현
미세 조정만 필요
3. 스크린샷 기반 UI 복제
기존 앱이나 웹사이트의 스크린샷을 기반으로 리디자인하거나 레이아웃을 빌려올 수 있다.
워크플로우
1. 복제할 앱/웹사이트 스크린샷 캡처
2. Stitch → 이미지 업로드로 스크린샷 첨부
3. 추가 프롬프트 입력 (선택):
예: "이 레이아웃 구조를 기반으로 다크 테마 버전으로 만들어줘"
또는: "이 디자인을 모바일 최적화 버전으로 바꿔줘"
4. AI가 레이아웃·색상·컴포넌트 분석
5. 편집 가능한 UI 생성 → 커스터마이징 시작
활용 시나리오
시나리오
프롬프트 예시
라이트/다크 모드 전환
”이 스크린샷의 라이트 버전을 다크 모드로 변환해줘”
모바일→태블릿 반응형
”이 모바일 화면을 태블릿 레이아웃으로 재설계해줘”
스타일 리브랜딩
”이 레이아웃은 유지하되 색상 팔레트를 파란색 계열로 바꿔줘”
경쟁사 분석
”이 경쟁사 앱 화면에서 레이아웃 구조만 가져와서 새 디자인 만들어줘”
4. URL 기반 스타일 추출
공개 웹사이트 URL을 입력하면 Stitch가 디자인 요소를 자동으로 분석한다.
1. Stitch → 새 프로젝트 → URL 입력 필드 클릭
2. 분석할 웹사이트 URL 입력
예: https://example-company.com
3. AI가 자동 추출하는 항목:
- 색상 팔레트 (주색·보조색·배경색)
- 타이포그래피 (폰트 패밀리·크기·굵기)
- 간격 시스템 (패딩·마진 패턴)
- 컴포넌트 스타일 (버튼·카드·입력창 형태)
4. 추출된 스타일을 기반으로 새 UI 생성 프롬프트 입력
추출 항목
활용 방법
색상 팔레트
브랜드 색상 그대로 새 화면에 적용
타이포그래피
폰트 일관성 유지
컴포넌트 스타일
기존 디자인 시스템과 통일감 유지
5. 결과 품질 개선 팁
이미지 입력 시 주의사항
상황
증상
해결 방법
이미지만 업로드
AI가 텍스트 설명 추가 요청
항상 간단한 설명 프롬프트 함께 입력
저해상도 스크린샷
컴포넌트 인식 오류
고해상도 캡처 (2x 레티나 권장)
복잡한 화면
일부 요소 누락
핵심 영역만 잘라서 부분 입력
다국어 텍스트
레이아웃 왜곡
텍스트 영역 설명 별도 프롬프트 추가
보완 프롬프트 패턴
이미지 업로드 후 아래 형식으로 보완:
"[이미지 설명] + [원하는 변형] + [스타일 방향]"
예시:
- "이 앱 스크린샷의 레이아웃 구조를 유지하되, 더 현대적인 미니멀 스타일로 만들어줘"
- "이 와이어프레임 기반으로 Material Design 3 스타일의 안드로이드 앱 UI 만들어줘"
- "이 경쟁사 화면에서 카드 레이아웃 패턴만 참고해 음식 배달 앱 버전으로 만들어줘"