AI로 프로급 디자인 뽑는 법: 7단계 계층적 프롬프트 설계

마지막엔 클로드 스킬까지 준비되어 있으니 내용 확인 바랍니다.

Lovable, Cursor, Bolt 같은 AI 기반 웹 개발 도구에서 일관성 있고 퀄리티 높은 디자인을 뽑아내는 프롬프트 작성법을 공개합니다.

왜 AI에게 "예쁜 사이트 만들어줘"는 안 될까?

AI 웹빌더를 처음 써보면 누구나 이런 경험을 합니다.

"펫시터 매칭 앱 랜딩페이지 만들어줘"

결과물은... 뭔가 나오긴 하는데, SaaS 사이트 같기도 하고, 병원 사이트 같기도 하고. 색상도 어딘가 어울리지 않고, 전체적으로 "AI가 만든 티"가 확실히 납니다.

문제는 프롬프트입니다.

Lovable, Cursor, Bolt 같은 도구들이 놀라운 결과물을 뽑아내는 경우, 대부분 계층적으로 잘 설계된 프롬프트가 뒷받침되어 있습니다. 단순히 "뭘 만들어줘"가 아니라, AI가 디자인 시스템을 먼저 구축하도록 유도하는 것이 핵심입니다.

---

기존 4단계 vs 개선된 7단계

기존에 알려진 프롬프트 설계 방식은 보통 이렇습니다:

기존 4단계:
Identity → Target & Tone → Design System → Features

이 방식도 나쁘지 않습니다. 하지만 도메인 특성을 무시하고, 사용자 여정을 고려하지 않으며, 감성적 요소가 빠져 있어서 어떤 주제든 비슷비슷한 결과물이 나옵니다.

제가 제안하는 7단계 심화 프레임워크는 이렇습니다:

개선된 7단계:
1. Domain Research     → 업종별 UX 패턴, 경쟁사 인사이트
2. User Journey        → 핵심 사용자 흐름, 전환 포인트  
3. Emotional Design    → 감성 키워드, 무드 컨셉
4. Identity & Goal     → 브랜드 정체성, 목표
5. Design System       → 컬러, 타이포, 컴포넌트
6. Component Specs     → 핵심 컴포넌트 상세 정의
7. Micro-interactions  → 애니메이션, 인터랙션 패턴

각 단계를 자세히 살펴보겠습니다.

---

Step 1: Domain Research (도메인 리서치)

"이 업종에서 사용자가 기대하는 UX는 무엇인가?"

AI에게 디자인을 시키기 전에, 해당 도메인의 검증된 UX 패턴을 먼저 정리해줘야 합니다.

분석해야 할 것들

1. 업계 Top 3 서비스는 무엇인가?
2. 사용자가 기대하는 패턴은? (예: 배달앱은 카드 리스트, 데이팅앱은 스와이프)
3. 신뢰 시그널은 무엇이 중요한가? (리뷰, 인증 배지, 보험 등)
4. 경쟁사가 놓치고 있는 Pain Point는?

도메인별 패턴 예시

도메인 기대 패턴 신뢰 시그널 핵심 액션 플로우

펫서비스	프로필 카드, 캘린더, 펫 필터	인증배지, 리뷰, 보험	검색→확인→예약→결제
SaaS	기능비교, 가격표, 데모CTA	로고, 후기, 보안배지	학습→체험→구독
이커머스	그리드 갤러리, 필터, 장바구니	리뷰, 반품정책, 보안결제	탐색→담기→결제
교육	코스카드, 진도율, 강사프로필	수료증, 수강생수, 평점	탐색→등록→학습
헬스케어	의료진검색, 예약슬롯	자격증, 소속병원	검색→예약→상담
핀테크	대시보드, 거래내역, 퀵액션	암호화배지, 규제준수	연결→모니터→실행

프롬프트에 반영하는 방법

## Domain Context
This is a pet sitter matching service. Key UX expectations:
- Profile cards with verification badges (like Rover)
- Availability calendar integration
- Trust signals: ID verification, insurance, reviews
- Real-time service reports with photos (like Wag)

Competitor insights:
- Rover: Strong on verification, weak on personality
- Wag: Great real-time tracking, complex booking flow
→ Opportunity: Combine trust + simplicity + warmth

---

Step 2: User Journey (사용자 여정)

"사용자가 어떤 흐름으로 전환에 도달하는가?"

단순히 섹션을 나열하는 게 아니라, 사용자의 심리적 여정에 따라 페이지를 구성해야 합니다.

여정 프레임워크

[진입] → [발견] → [평가] → [결정] → [행동] → [유지]

각 단계별 설계 포인트

1단계: Entry (진입)

• 사용자 목표: 이 서비스가 뭔지 이해
• 필요한 정보: 핵심 가치 제안
• 마찰 요소: "뭔지 모르겠어"
• 설계 해결책: 명확한 헤드라인 + 3초 안에 이해되는 비주얼

2단계: Discovery (발견)

• 사용자 목표: 내 조건에 맞는 것 찾기
• 필요한 정보: 검색, 필터, 카테고리
• 마찰 요소: 너무 많은 옵션, 복잡한 필터
• 설계 해결책: 스마트 기본값 + 핵심 필터만 노출

3단계: Evaluation (평가)

• 사용자 목표: 이게 괜찮은지 판단
• 필요한 정보: 상세 정보, 리뷰, 신뢰 지표
• 마찰 요소: 정보 과다 또는 부족
• 설계 해결책: 신뢰 배지 상단 고정 + 실제 리뷰 강조

4단계: Decision (결정)

• 사용자 목표: 최종 확인
• 필요한 정보: 가격, 조건, 비교
• 마찰 요소: 숨겨진 비용, 불확실성
• 설계 해결책: 투명한 가격 + FAQ

5단계: Action (행동)

• 사용자 목표: 빠른 완료
• 필요한 정보: 단계, 진행상황
• 마찰 요소: 긴 폼, 복잡한 결제
• 설계 해결책: 3단계 이하 + 진행바

6단계: Retention (유지)

• 사용자 목표: 재사용, 추천
• 필요한 정보: 히스토리, 혜택
• 마찰 요소: 잊혀짐
• 설계 해결책: 리마인더 + 리워드

프롬프트에 반영하는 방법

## User Journey Considerations
Structure the page to match the user's psychological journey:

1. Hero: Address "what is this?" → Clear value prop + trust stats
2. How it Works: Reduce "seems complicated" → 3 simple steps  
3. Featured Items: Enable discovery → Curated, not overwhelming
4. Trust Section: Answer "can I trust this?" → Badges + reviews
5. CTA: Remove final friction → Clear pricing, guarantees

---

Step 3: Emotional Design (감성 디자인)

"이 서비스가 불러일으켜야 할 감정은 무엇인가?"

같은 파란색이라도 금융 서비스의 파란색과 어린이 교육 서비스의 파란색은 완전히 다른 뉘앙스를 가져야 합니다.

감성 키워드 매트릭스

감성 시각적 표현 컬러 방향 타이포그래피 이미지

신뢰	정돈된, 일관된	블루, 그린	안정적인 세리프/산세리프	실제 사진, 배지
따뜻함	부드러운 모서리, 유기적 형태	옐로, 오렌지	둥근, 친근한	일러스트, 미소
에너지	강한 대비, 역동적 각도	레드, 오렌지	강렬한, 임팩트	액션샷, 모션
차분함	여백, 미니멀	연한 블루/그린, 뉴트럴	가벼운 웨이트	자연, 미니멀
럭셔리	다크 배경, 골드 악센트	블랙, 골드, 딥퍼플	우아한 세리프	하이엔드 포토
플레이풀	비대칭, 애니메이션	밝고 다양한 팔레트	퀘르키, 커스텀	일러스트, 아이콘
전문적	그리드 기반, 구조적	네이비, 그레이, 화이트	클래식 산세리프	기업적, 깔끔

감성 밸런스 정하기

하나의 감성만 고르는 게 아니라, 비중을 정해서 조합합니다.

예시 - 펫시터 매칭 서비스:

- 신뢰 (Trust): 50% → 내 아이를 맡기는 결정이니까
- 따뜻함 (Warmth): 35% → 펫에 대한 사랑, 돌봄
- 편안함 (Ease): 15% → 복잡하지 않은 경험

프롬프트에 반영하는 방법

## Emotional Direction
Primary emotions and their visual translation:

- Trust (50%): Clean layouts, verification badges prominently displayed,
  real photos, consistent spacing, emerald green for verified states
- Warmth (35%): Rounded corners (12-16px), amber/orange accents,
  soft shadows, friendly illustrations, cream backgrounds  
- Ease (15%): Generous whitespace, clear CTAs, minimal form fields

Overall feel: "Like leaving your pet with a trusted friend who happens
to be a professional" - NOT cold/corporate, NOT chaotic/playful

---

Step 4: Identity & Goal (정체성과 목표)

"이 브랜드는 무엇이고, 뭘 달성해야 하는가?"

이제 구체적인 브랜드 정보를 정의합니다.

정의해야 할 요소들

Service Name: [이름]
One-liner: [10단어 이내 설명]
Category: [도메인 카테고리]
Positioning: [경쟁사 대비 차별점]
Primary Goal: [메인 전환 액션]
Secondary Goal: [서브 액션]
Brand Personality: [3가지 형용사]

예시 - PetPal

Service Name: PetPal (펫팔)
One-liner: 검증된 이웃 펫시터와 우리 아이를 연결합니다
Category: Pet Care / O2O Marketplace
Positioning: "보험 + 신원인증 + 실시간 리포트"로 가장 안심되는 펫시터 매칭
Primary Goal: 펫시터 예약 완료
Secondary Goal: 펫시터 회원가입 유도
Brand Personality: 따뜻한, 믿음직한, 전문적인

---

Step 5: Design System (디자인 시스템)

"실제로 어떤 색상, 폰트, 스타일을 쓸 것인가?"

여기서부터 AI가 실제로 구현할 수 있는 구체적인 스펙을 정의합니다.

Color System

단순히 "파란색"이 아니라, 용도별로 완전한 팔레트를 정의합니다.

Primary:     #F59E0B (Amber)      - CTAs, 핵심 액션
Secondary:   #10B981 (Emerald)    - 인증 배지, 신뢰
Accent:      #8B5CF6 (Violet)     - 프리미엄, 특별 기능
Background:  #FFFBEB (Cream)      - 따뜻한 베이스
Surface:     #FFFFFF (White)      - 카드, 모달
Text Primary:#292524 (Stone 800)  - 제목, 본문
Text Muted:  #78716C (Stone 500)  - 보조 텍스트
Success:     #10B981              - 완료, 인증됨
Warning:     #F59E0B              - 주의
Error:       #EF4444              - 오류

Typography

Headings: Nunito (700, 800) - 둥근 느낌, 친근함
Body: Inter (400, 500) - 가독성, 현대적

Scale (1.25 ratio):
- H1: 36px
- H2: 28px  
- H3: 22px
- Body: 16px
- Caption: 14px

Spacing & Components

Base unit: 8px
Border radius: 12px (버튼), 16px (카드)
Shadows: Soft (rgba 낮은 opacity)

---

Step 6: Component Specs (컴포넌트 상세)

"이 도메인에서 핵심이 되는 컴포넌트는 무엇인가?"

일반적인 버튼, 카드가 아니라 도메인 특화 컴포넌트를 정의합니다.

예시 - Sitter Card (펫시터 카드)

[Sitter Card]
├── Purpose: 시터 목록에서 핵심 정보 전달 + 클릭 유도
├── Contents:
│   ├── 프로필 사진 (80x80, 원형)
│   ├── 이름 + 인증 배지
│   ├── 별점 + 리뷰 수
│   ├── 거리
│   ├── 서비스 태그
│   └── 가격
├── States:
│   ├── Default: 흰 배경, 약한 그림자
│   ├── Hover: 4px 상승 + 그림자 강화
│   └── Favorite: 하트 filled
└── Responsive:
    ├── Desktop: 3열
    ├── Tablet: 2열
    └── Mobile: 1열

도메인별 핵심 컴포넌트

• 펫서비스: 시터카드, 펫프로필, 예약캘린더, 리뷰카드
• SaaS: 프라이싱테이블, 기능비교표, 데모버튼
• 이커머스: 상품카드, 필터사이드바, 장바구니미니
• 교육: 코스카드, 진도바, 강사프로필

---

Step 7: Micro-interactions (마이크로 인터랙션)

"움직임이 브랜드 경험을 어떻게 강화하는가?"

정적인 디자인을 넘어서, 움직임으로 감성을 전달합니다.

인터랙션 유형

유형 목적 예시

Entrance	새 콘텐츠 주목	fade in, slide up
Feedback	액션 확인	버튼 눌림, 체크마크
State Change	상태 전환 표시	로딩 스피너, 스켈레톤
Navigation	화면 전환 가이드	페이지 트랜지션
Delight	기억에 남는 순간	confetti, 바운스

스펙 정의 방법

Trigger: 시터 카드 호버
Animation: translateY(-4px) + shadow 강화
Duration: 200ms
Easing: ease-out
Purpose: 클릭 가능함을 암시, 살아있는 느낌

Trigger: 즐겨찾기 클릭
Animation: 하트 scale 1.3 → 1 + fill
Duration: 300ms  
Easing: spring
Purpose: 기분 좋은 피드백, 액션 확인

권장 기본값

• 마이크로 피드백: 150-200ms, ease-out
• 화면 전환: 250-350ms, ease-in-out
• 등장 애니메이션: 400-600ms, stagger 적용

---

실전: 7단계 통합 프롬프트 예시

위 7단계를 모두 통합하면 이런 프롬프트가 됩니다:

Build a warm, trustworthy landing page for 'PetPal', a pet sitter matching 
platform that connects pet owners with verified, caring neighborhood sitters.

## Domain Context
Reference: Rover (verification), Wag (real-time tracking)
Key patterns: Profile cards, availability calendar, trust badges
Opportunity: Combine trust + simplicity + warmth

## User Journey
1. Hero → Answer "what is this?" with clear value prop
2. How it Works → Reduce complexity with 3 steps
3. Featured Sitters → Enable discovery without overwhelming
4. Trust Section → Answer "can I trust this?"
5. CTA → Remove friction with clear pricing

## Emotional Direction
- Trust (50%): Badges, real photos, emerald accents
- Warmth (35%): Rounded corners, amber/cream, illustrations
- Ease (15%): Whitespace, minimal forms

## Design System
Colors: Primary #F59E0B, Secondary #10B981, Background #FFFBEB
Typography: Nunito headings, Inter body
Spacing: 8px base, 12-16px radius, soft shadows

## Key Components
- Sitter Card: Photo, badges, rating, distance, price, hover lift
- Trust Badges: Verified, Insured, Response rate
- Booking Flow: 3 steps max

## Interactions  
- Cards: Hover lift 4px, 200ms ease-out
- Favorite: Heart scale bounce, 300ms spring
- Page load: Sections fade in on scroll

## Requirements
- Mobile-first responsive
- Korean language primary
- Accessibility: Focus states, contrast

---

단계별 개선 프롬프트

한 번에 완벽하게 만들려고 하지 마세요. 단계별로 다듬는 것이 훨씬 좋은 결과를 냅니다.

Phase 1: "먼저 전체 섹션 구조와 컬러 시스템만 잡아줘."

Phase 2: "히어로 섹션을 개선해줘. 검색바를 더 눈에 띄게."

Phase 3: "시터 카드 디자인을 정교하게. 호버 시 정보 확장되도록."

Phase 4: "신뢰 섹션 강화. 숫자 카운트업 애니메이션 추가."

Phase 5: "전체 인터랙션 추가. 스크롤 fade-in, 버튼 호버."

Phase 6: "모바일 버전 점검. 하단 네비게이션 추가."

---

마무리: 왜 이렇게까지 해야 할까?

"그냥 AI한테 맡기면 되는 거 아닌가요?"

물론 그래도 뭔가 나옵니다. 하지만 진짜 좋은 디자인과 그냥저냥 AI가 만든 디자인의 차이는 결국 얼마나 의도를 명확하게 전달했느냐에 달려 있습니다.

7단계 프레임워크를 쓰면:

1. 도메인에 맞는 디자인이 나옵니다
2. 사용자 흐름에 최적화됩니다
3. 감성이 일관됩니다
4. 컴포넌트가 구체적입니다
5. 인터랙션까지 완성됩니다

처음엔 번거로워 보여도, 한 번 익숙해지면 훨씬 빠르게 훨씬 좋은 결과물을 얻을 수 있습니다.

AI는 도구입니다. 좋은 도구를 잘 쓰는 건 결국 사람의 몫이죠.

---

그래서 이걸 자동화 하는 클로드 스킬을 준비했습니다. 필요하신분은 사용하시면 됩니다. 

https://github.com/bear2u/my-skills/blob/master/skills/design-prompt-generator-v2/SKILL.md

my-skills/skills/design-prompt-generator-v2/SKILL.md at master · bear2u/my-skills