Stitch Prompt Enhancer
모호한 UI 아이디어를 Stitch에 최적화된 상세하고 구조화된 프롬프트로 변환합니다.
개요
Stitch는 상세하고 구체적인 프롬프트에서 더 좋은 결과를 생성합니다. 이 스킬은:
- 구체성 향상: 모호한 설명을 상세한 사양으로 변환
- UI/UX 키워드 추가: Stitch가 이해하는 디자인 용어 주입
- 디자인 시스템 컨텍스트:
DESIGN.md에서 스타일 정보 통합 - 구조화된 출력: 최적의 생성 결과를 위한 프롬프트 구조화
Stitch 프롬프팅 원칙
효과적인 프롬프트의 3요소
| 요소 | 설명 | 예시 |
|---|---|---|
| 콘텐츠 | 무엇을 보여줄지 | "사용자 프로필 카드" |
| 스타일 | 어떻게 보일지 | "미니멀, 둥근 모서리, 부드러운 그림자" |
| 레이아웃 | 어떻게 배치할지 | "중앙 정렬, 3열 그리드" |
프롬프트 품질 스펙트럼
❌ 나쁜 프롬프트: "로그인 페이지"
⚠️ 괜찮은 프롬프트: "이메일과 비밀번호 필드가 있는 로그인 페이지"
✅ 좋은 프롬프트: "
미니멀한 로그인 페이지:
- 중앙에 배치된 카드 형태의 로그인 폼
- 상단에 로고와 환영 메시지
- 이메일 입력 필드 (아이콘 포함)
- 비밀번호 입력 필드 (보이기/숨기기 토글)
- 파란색 기본 버튼 '로그인'
- '비밀번호 찾기' 링크
- '계정 만들기' 보조 버튼
- 부드러운 그라데이션 배경
"향상 프로세스
Step 1: 입력 분석
사용자의 원본 아이디어를 분석합니다:
입력: "대시보드 만들어줘"
분석:
- 타입: 대시보드 (관리/분석 UI)
- 누락된 정보:
- 어떤 데이터?
- 어떤 스타일?
- 주요 기능?Step 2: 컨텍스트 수집
관련 정보를 수집합니다:
- DESIGN.md 확인 (있는 경우)
- 색상 팔레트 - 타이포그래피 규칙 - 컴포넌트 스타일
- 도메인 추론
- 사용자 언급에서 도메인 파악 - 일반적인 패턴 적용
Step 3: 프롬프트 확장
확장 체크리스트
- 페이지 목적: 이 페이지의 주요 목표는?
- 사용자 유형: 누가 이 페이지를 사용하는가?
- 핵심 요소: 반드시 포함해야 할 요소는?
- 레이아웃 구조: 어떤 섹션으로 구성되는가?
- 상호작용: 주요 액션은 무엇인가?
- 시각적 스타일: 어떤 분위기를 전달하는가?
Step 4: 구조화된 출력 생성
향상 템플릿
기본 템플릿
## [페이지 유형]: [페이지 이름]
### 개요
[페이지의 목적과 주요 기능 1-2문장 설명]
### 시각적 스타일
- **분위기**: [형용사들 - 예: 모던, 미니멀, 전문적]
- **색상**: [주요 색상 설명 또는 DESIGN.md 참조]
- **타이포그래피**: [폰트 스타일 설명]
### 레이아웃 구조
1. **헤더**: [헤더 구성 요소]
2. **메인 섹션**: [주요 콘텐츠 영역]
3. **사이드바** (선택): [보조 정보]
4. **푸터**: [푸터 구성 요소]
### 핵심 요소
- [요소 1]: [설명]
- [요소 2]: [설명]
- [요소 3]: [설명]
### 상호작용
- [액션 1]: [동작 설명]
- [액션 2]: [동작 설명]
### 디자인 시스템
[DESIGN.md 섹션 6 복사 또는 스타일 가이드]향상 예시
예시 1: 간단한 입력
원본 입력:
"랜딩 페이지"향상된 프롬프트:
## 랜딩 페이지: SaaS 제품 소개
### 개요
잠재 고객에게 제품 가치를 전달하고 가입을 유도하는 현대적인 랜딩 페이지
### 시각적 스타일
- **분위기**: 신뢰감 있고 전문적, 친근한 느낌
- **색상**:
- 기본: 진한 파랑 (#2563EB) - 신뢰와 안정
- 강조: 밝은 주황 (#F97316) - CTA 버튼
- 배경: 순백색 (#FFFFFF) with 미묘한 그레이 섹션
- **타이포그래피**: Inter 폰트, 큰 헤딩 (48-72px), 넉넉한 줄간격
### 레이아웃 구조
1. **네비게이션 바**
- 좌측: 로고
- 중앙: 메뉴 링크 (Features, Pricing, About, Contact)
- 우측: "로그인" 텍스트 링크 + "무료 시작" 기본 버튼
2. **히어로 섹션**
- 좌측 (60%):
- 대형 헤드라인 (제품 가치 제안)
- 부제목 (1-2문장 설명)
- CTA 버튼 그룹 ("무료 체험" + "데모 보기")
- 신뢰 지표 (사용 기업 로고 또는 사용자 수)
- 우측 (40%):
- 제품 스크린샷 또는 3D 일러스트
- 미묘한 그림자로 떠있는 효과
3. **기능 섹션**
- 섹션 제목: "왜 [제품명]인가요?"
- 3열 그리드의 기능 카드
- 각 카드: 아이콘 + 제목 + 설명 (2-3줄)
4. **사회적 증거 섹션**
- 고객 로고 배너 (그레이스케일)
- 선택: 추천 인용문 카드
5. **CTA 섹션**
- 배경: 미묘한 그라데이션
- 대형 텍스트: 행동 유도 문구
- 큰 CTA 버튼
6. **푸터**
- 4열: 제품, 회사, 리소스, 법적 링크
- 하단: 저작권 + 소셜 아이콘
### 핵심 요소
- **CTA 버튼**: 둥근 모서리 (8px), 넉넉한 패딩, 호버 시 약간 어두워짐
- **기능 카드**: 흰색 배경, 미묘한 테두리 또는 그림자, 호버 시 살짝 상승
- **신뢰 지표**: 회색조 로고, 자연스러운 간격
### 상호작용
- 네비게이션 링크: 호버 시 색상 변경
- CTA 버튼: 호버 시 살짝 어두워지고 미세한 상승
- 기능 카드: 호버 시 그림자 강화 및 미세 상승
### 참고사항
- 모바일 반응형 고려 (DESKTOP 우선 생성)
- 이미지 플레이스홀더 사용 가능
- 접근성: 충분한 색상 대비, 큰 클릭 영역예시 2: 대시보드
원본 입력:
"분석 대시보드"향상된 프롬프트:
## 대시보드: 비즈니스 분석 개요
### 개요
핵심 비즈니스 지표를 한눈에 파악할 수 있는 데이터 중심 대시보드
### 시각적 스타일
- **분위기**: 데이터 중심, 깔끔, 전문적
- **색상**:
- 배경: 밝은 그레이 (#F3F4F6)
- 카드: 순백색 (#FFFFFF)
- 기본 텍스트: 진한 회색 (#1F2937)
- 차트 팔레트: 파랑, 초록, 보라, 주황 (데이터 시각화)
- 성공: 초록 (#10B981), 경고: 주황 (#F59E0B), 위험: 빨강 (#EF4444)
- **타이포그래피**:
- 폰트: Inter 또는 system-ui
- 숫자: tabular-nums (고정폭 숫자)
- 큰 지표 숫자는 bold, 설명은 regular
### 레이아웃 구조
1. **좌측 사이드바** (고정, 60px 접힌 상태 / 240px 펼친 상태)
- 상단: 로고
- 메뉴 아이템: 아이콘 + 텍스트
- 현재 페이지 강조 (배경색 + 좌측 강조선)
- 하단: 사용자 아바타 + 설정
2. **상단 헤더** (고정)
- 좌측: 페이지 제목 + 빵크럼
- 우측: 검색 바 + 알림 아이콘 + 프로필 드롭다운
3. **메인 콘텐츠** (스크롤 가능)
**Row 1: KPI 카드 (4열)**
- 총 매출 (금액 + 전주 대비 %)
- 신규 사용자 (숫자 + 전주 대비 %)
- 전환율 (% + 전주 대비)
- 활성 세션 (숫자 + 스파크라인)
- 각 카드: 작은 아이콘, 라벨, 큰 숫자, 변화율 배지
**Row 2: 차트 영역 (2열)**
- 좌측 (66%): 라인 차트 (주간 트렌드)
- 제목 + 기간 선택 드롭다운
- 범례
- 호버 시 툴팁
- 우측 (33%): 도넛 차트 (카테고리 분포)
- 중앙에 총합 표시
- 우측에 범례 목록
**Row 3: 데이터 테이블**
- 제목: "최근 거래"
- 컬럼: 날짜, 고객명, 금액, 상태 (배지), 액션 버튼
- 페이지네이션
- 필터/정렬 컨트롤
### 핵심 요소
- **KPI 카드**: 둥근 모서리 (12px), 미묘한 그림자, 좌측에 색상 강조선
- **변화율 배지**: 초록 (상승), 빨강 (하락), 작은 화살표 아이콘
- **차트**: 깔끔한 그리드선, 호버 시 데이터 포인트 강조
- **테이블**: 줄무늬 행, 호버 시 행 강조
### 상호작용
- 사이드바 메뉴: 호버 시 배경 변경
- KPI 카드: 클릭 시 상세 페이지 이동 암시 (커서 변경)
- 차트: 호버 시 툴팁, 범례 클릭 시 시리즈 토글
- 테이블 행: 호버 시 강조, 액션 버튼 표시UI/UX 키워드 사전
프롬프트에 추가하면 좋은 키워드들:
레이아웃 키워드
| 키워드 | 용도 |
|---|---|
| centered | 중앙 정렬 |
| grid layout | 그리드 레이아웃 |
| split view | 분할 뷰 |
| sidebar | 사이드바 |
| sticky header | 고정 헤더 |
| card layout | 카드 레이아웃 |
| masonry | 벽돌형 레이아웃 |
스타일 키워드
| 키워드 | 용도 |
|---|---|
| minimal | 미니멀 |
| modern | 현대적 |
| clean | 깔끔한 |
| rounded corners | 둥근 모서리 |
| soft shadows | 부드러운 그림자 |
| subtle gradient | 미묘한 그라데이션 |
| glassmorphism | 유리 효과 |
| frosted glass | 불투명 유리 효과 |
컴포넌트 키워드
| 키워드 | 용도 |
|---|---|
| pill button | 알약형 버튼 |
| avatar | 프로필 이미지 |
| badge | 배지/태그 |
| tooltip | 툴팁 |
| dropdown | 드롭다운 |
| modal | 모달 |
| toast | 토스트 알림 |
| skeleton | 로딩 스켈레톤 |
상태 키워드
| 키워드 | 용도 |
|---|---|
| hover effect | 호버 효과 |
| active state | 활성 상태 |
| disabled | 비활성화 |
| loading | 로딩 중 |
| empty state | 빈 상태 |
| error state | 에러 상태 |
디자인 시스템 주입
DESIGN.md가 있는 경우, 섹션 6을 프롬프트 끝에 추가합니다:
### 디자인 시스템 (DESIGN.md에서)
비주얼 스타일: 미니멀하고 공기처럼 가벼운, 넉넉한 여백
기본 색상: Deep Ocean Blue (#0066FF) - 기본 액션 버튼
보조 색상: Soft Sky (#E0F2FE) - 강조 배경
배경: Pure White (#FFFFFF) 메인, Whisper Gray (#F9FAFB) 섹션
텍스트: Midnight (#1A1A1A) 헤딩, Slate (#64748B) 본문
버튼 스타일: 알약 모양, 미묘한 호버 상승
카드 스타일: 8px 둥근 모서리, 속삭이듯 부드러운 그림자
전체적인 느낌: 신뢰감 있고 친근한, 전문적이면서 접근하기 쉬운피해야 할 것
| ❌ 피해야 할 것 | ✅ 대신 이렇게 |
|---|---|
| "예쁜 페이지" | "미니멀하고 현대적인, 충분한 여백" |
| "좋은 색상" | "#2563EB 파란색 기본 버튼, #10B981 성공 표시" |
| "큰 버튼" | "높이 48px, 패딩 24px, 둥근 모서리" |
| "어딘가에 로고" | "좌측 상단 모서리에 로고, 높이 32px" |
| "몇 개의 카드" | "3열 그리드, 각 카드에 아이콘, 제목, 설명" |
참고 리소스
- Stitch 프롬프팅 가이드: https://stitch.withgoogle.com/docs/learn/prompting/
- Stitch 갤러리 (영감용): https://stitch.withgoogle.com/gallery
- UI 패턴 참고: https://ui-patterns.com/