App이나 SaaS를 출시할 때 디자인 일정이 가장 막히는 세 가지 에셋: 스플래시 / 런치, 기능 카드, 빈 상태 일러스트. Figma 컴포넌트는 갖췄지만 스토어 스크린샷과 Onboarding용 비주얼이 부족합니다. 외주는 라운드당 일주일, 카피 수정 속도를 따라가기 어렵습니다.
Image 2에는 이런 니즈를 UI 비주얼 슬롯 생산 라인으로 다루는 편이 낫습니다——브랜드 색과 타이포 위계를 먼저 고정한 뒤 스플래시 → Onboarding → 기능 카드 → 빈 상태 → 설정 목업 → 스토어 프레임 순으로 냅니다. 이 글은 6세트 실측 image-2 프롬프트로 리뷰 가능한 App / UI 화면을 한 번에 만드는 방법을 공유합니다.
제품 디자인 플레이북으로 쓰세요: 프레임당 한 작업, 카피는 verbatim, 내보내기 전 버튼·제목 철자를 확인.
📌 아래 프롬프트는 영어 중심(Image 2는 구조화된 영어와 화면 내 텍스트가 안정적). UI 카피, 상표, 접근성 대비는 수동으로 교정하세요. 최종 마무리는 Figma에서 8pt 그리드와 실제 컴포넌트에 맞추는 것이 좋습니다.
1. Image 2가 「App / UI 화면」 작업에 맞는 이유
범용 일러스트 모델에 운을 맡기는 것보다 Image 2가 유리한 점:
-
화면 내 텍스트 가독성 — 스플래시 제목, 3줄 기능 카드, 빈 상태 CTA——공개 벤치마크 약 99% 수준의 텍스트 렌더링은 「생성 후 PS로 글자 붙이기」보다 AI 인터페이스 아트 납품에 적합합니다.
-
다회차 편집으로 카피 교체, 레이아웃은 유지 — PM이 Onboarding 한 줄을 바꾸면 채팅으로 그 줄만 교체, 일러스트와 버튼 형태는 유지——Image2 대화형 편집이 여기서 빛납니다.
-
스타일 제약을 디자인 시스템 필드로 — 브랜드 HEX, 모서리 반경, 그림자 강도, 일러스트 스타일(flat / soft 3D)을 매 prompt에 쓰면 시리즈가 하나의 Design System처럼 보입니다.
제품·디자인 협업자에게 UI 비주얼 에셋은 정보 구조에서 생성할 수 있습니다——일러스트 일정을 기다릴 필요가 없습니다.
2. 표준 워크플로(5단계)
-
UI 비주얼 슬롯 나열 — 최소 6개: ① 스플래시/런치 ② Onboarding 페이지 ③ 기능 카드(3포인트) ④ 빈 상태 ⑤ 설정/프로필 목업 ⑥ App Store / 스토어 스크린샷 프레임. 한 장에 완전한 상호작용 App을 넣지 마세요.
-
브랜드·타이포 제약 작성 — 주/보조 색, 라이트/다크 배경, 제목 글자 수 상한. 상표 OS 크롬 위조 금지(범용 상태 표시줄로 충분).
-
프레임당 한 작업 + verbatim 카피 — 각 프레임은 한 가지 사용자 질문에 답: 첫 실행 인상? 왜 남을까? 데이터 없을 때? 스토어에서 어떻게 보일까?
-
종횡비 통일 — 스플래시/스토어는 9:16이 흔함; 기능 카드는 1:1 또는 4:5; 한 세트 안에서는 한 비율군 유지.
-
Figma 전 3가지 점검 — 철자, 대비, 모서리 반경 vs DS——편차는 Image 2 다회차 편집으로, 전체 재추첨 대신.
3. 실측 UI 프롬프트 6세트(복사 가능)
예시 제품: 가상 생산성 App 「FlowDay」. 이름과 혜택은 자사 것으로 교체. 매 prompt에 브랜드 악센트 고정(예: #4F46E5 indigo).
슬롯 1: 스플래시 / 런치 화면
시나리오: 콜드 스타트 브랜드 인상——중앙 마크 + 짧은 태그라인.
App splash / launch screen mock with Image 2 for mobile UI.
Vertical 9:16, clean modern iOS-like frame (generic status bar, no trademarked icons).
Centered app mark: simple indigo rounded-square icon with white "F" monogram.
Headline exactly: "FlowDay"
Subline exactly: "Plan less. Finish more."
Background: soft indigo-to-white gradient, subtle geometric glow, ample padding.
Sharp legible type, Image2 text accuracy, premium SaaS look.
Do not clutter with fake notifications. No watermark.
결과: 리뷰 가능한 App 스플래시 비주얼.
슬롯 2: Onboarding 단일 페이지
시나리오: 첫 실행 가치 페이지——카피 + 일러스트.
Mobile onboarding screen UI mock using Image 2.
Vertical 9:16, light mode, generous bottom padding for a primary button.
Top illustration: soft 3D calendar and checkmarks, brand color #4F46E5 accents.
Title exactly: "Your day, in one timeline"
Body exactly: "Drag tasks into focus blocks. FlowDay keeps priorities visible."
Primary button label exactly: "Continue"
Keep layout airy, 8pt rhythm feel, Image 2 commercial UI quality.
Do not invent extra menus. Do not misspell.
결과: Onboarding 카피와 아트가 한 단위——A/B 카피 빠른 테스트용.
슬롯 3: 기능 카드(3포인트)
시나리오: 사이트 기능 행 또는 페이월 상단 3등분 카드.
App feature benefit cards board with Image 2 (UI marketing).
1:1 or 4:5, white background, three equal cards in a row with soft shadow.
Card icons in #4F46E5. Exact English labels:
Card1 title: "Focus Blocks" / line: "Timeboxed deep work"
Card2 title: "Smart Reminders" / line: "Nudge only what matters"
Card3 title: "Weekly Review" / line: "See progress at a glance"
Modern SaaS marketing UI, crisp type, Image2 text accuracy.
No fake App Store badges. No overcrowded icons.
결과: 구조화된 기능 카드——텍스트 정확도가 가장 중요한 한 장.
슬롯 4: 빈 상태 화면
시나리오: 작업/알림 없음——「고장」이 아니라 친절한 안내.
Empty-state mobile screen with Image 2 for product UI.
Vertical 9:16, light gray background, large friendly illustration center:
soft 3D empty inbox with a single indigo plus badge.
Title exactly: "Nothing here yet"
Body exactly: "Create your first focus block to start the day."
Secondary text button exactly: "Create task"
Clean, calm, accessible contrast, Image 2 UI illustration quality.
Do not make it look like an error. No scary red alerts.
결과: 빈 상태가 공백이 아니라 실행 가능해짐.
슬롯 5: 설정 / 프로필 목업
시나리오: 이해관계자에게 IA 제시——비상호작용 OK.
Settings / profile screen mock with Image 2 (non-interactive UI visual).
Vertical 9:16, light mode list UI, rounded group cells.
Header: avatar circle + name "Alex Chen" + plan chip "Pro".
List rows with exact labels: "Notifications" / "Calendars" / "Appearance" / "Export Data".
Accent switches and chevrons in #4F46E5, generous spacing, SF-like but generic typography.
Image2 clean UI mock quality. Do not copy real iOS glyphs trademarked details.
No tiny unreadable text.
결과: 회의에 충분한 설정 목업. 탭 가능한 척하지 않음.
슬롯 6: 스토어 스크린샷 프레임(기기 포함)
시나리오: 리스팅 에셋——폰 프레임 + 핵심 UI + 상단 캡션.
App Store screenshot composition with Image 2.
Vertical 9:16 marketing frame: large caption on top, phone device mock below.
Caption exactly: "Focus blocks that actually stick"
Inside the phone: a clean task timeline UI using brand #4F46E5, legible list titles.
Soft studio shadow under device, light gray backdrop, premium DTC style.
Image 2 commercial ASO visual. Exact text, no gibberish.
Do not invent fake star ratings. Do not overcrowded stickers.
결과: ASO 방향 프레임; 나중 Figma에서 실제 스크린샷으로 교체.
4. 범용 빈칸 템플릿
슬롯마다 작업 줄과 화면 내 카피만 변경:
Image 2 App / UI visual slot.
Brand lock: primary #[HEX], [light|dark] mode, [flat|soft-3D] illustration style.
Frame job (ONE only): [splash / onboarding / feature cards / empty state / settings mock / store screenshot].
Aspect: [9:16 | 1:1 | 4:5].
On-image copy exactly: "[titles/buttons]" — verbatim, no extra claims.
Do not: [fake OS trademarks / unreadable microcopy / cluttered chrome].
Output: review-ready UI visual, Image2 quality.
5. 외주 일러스트 vs Image 2 UI 슬롯 vs 아이콘 콜라주
| 차원 | 외주 일러스트 전체 | Image 2 UI 슬롯 라인 | 아이콘 / 스크린샷 콜라주 |
|---|---|---|---|
| 카피 수정 속도 | 느림(재작업) | 빠름(다회차 한 줄) | 빠르지만 저렴해 보임 |
| 디자인 시스템 일관성 | Brief에 따름 | HEX / 스타일 필드로 고정 | 드리프트 쉬움 |
| 적합 단계 | 브랜드 메이저 버전 | 주간 반복, 리뷰, ASO 초안 | 내부 초안만 |
| 주요 리스크 | 일정 | 타이포·그리드 수동 교정 필수 | 전환·완성도 격차 |
6. 누가 이 방법을 써야 할까?
✅ PM / 프로젝트 리드
리뷰 전 Image 2로 스플래시, 빈 상태, 스토어 방향을 채움——「비워 둔」슬라이드 감소.
✅ UI / UX 디자이너
image-2를 비주얼 탐색 레이어로: 색·타이포 고정, 생성 후 Figma에서 실제 컴포넌트 정렬.
✅ 인디 빌더 / 소규모 팀
전담 일러스트레이터 없어도 한 prompt 패밀리로 통일된 App 스플래시와 기능 카드 가능.
✅ 그로스 & ASO 운영
스토어 캡션은 자주 바뀜——다회차 편집이 기기 프레임 전체 재작업보다 빠름.
7. 흔한 실패 패턴 3가지
-
❌ 한 장으로 완전한 탭 가능 App 위조 — Image 2가 UI 스프가 됨. 슬롯별 분리; 상호작용 프로토타입은 Figma/코드로.
-
❌ 「some feature text」 같은 모호한 카피 — 타이포 드리프트가 UI 디자인 납품을 망침. 제목·버튼은
exactly: "..."필수. -
❌ 상표 OS 디테일 위조 + 대비 미점검 — 범용 상태 표시줄로 충분; 내보내기 전 라이트온라이트 접근성 확인.
8. 마무리
App / UI 비주얼용 Image 2는 「더 화려한 한 장 재추첨」이 아니라 브랜드 고정 → UI 슬롯 → verbatim 카피 → 다회차 다듬기 → Figma 마무리입니다.
다음에 스플래시, 기능 카드, 빈 상태가 부족할 때 스톡 콜라주 대신 Image2 워크벤치를 열고 이 글의 6슬롯을 실행하세요——통일되고 읽을 수 있는 AI 인터페이스 세트가 리뷰, 반복, 스토어 프레임 시작점으로 쓸 수 있습니다.
스플래시가 브랜드를 세우고, 카드가 가치를 말하고, 빈 상태가 다음 단계를 제시——그것이 image-2 제품 디자인 루프입니다.
실무 메모; 프롬프트는 자유롭게 복사·수정 가능. 출시 전 카피, 상표, 스토어 스크린샷 규정을 확인하세요.
