[프롬프트] 웹페이지 UI/UX 개선 아이디어 프롬프트 - 최적 프롬프트 레시피
💡 한 줄 요약: "웹페이지 디자인 좀 예쁘게 고쳐줘"라는 단순 질의 시 터져 나오는 '여백을 넓히고 파스텔톤을 쓰라'는 뜬구름 피드백을 타파하고, Staff Product Designer 관점의 닐슨 노먼 10대 휴리스틱, 인지 부하 해소(힉스·피츠의 법칙), 점진적 공개(Progressive Disclosure), Tailwind CSS/shadcn 컴포넌트 코드 단위 리팩토링 스펙까지 단번에 도출하는 실무 종결 프롬프트 레시피입니다.
---
1. 페인포인트 & 작업 목표
1. 주관적 감상평 남발(Subjective Aesthetics Fallacy): "배경을 더 모던하게 바꾸세요", "여백을 시원하게 주세요" 등 디자인 시스템 토큰이나 전환율 지표와 무관한 추상적 미사여구만 나열함.
2. 사용자 행동 맥락 및 인지 부하 무시(Cognitive Blindness): 사용자가 버튼을 클릭하는 순간 직면하는 선택 과부하(힉스의 법칙)나 엄지손가락 터치 반경(피츠의 법칙)을 분석하지 못해 구조적 사용성 문제를 방치함.
3. 접근성 및 디자인 토큰 규격 부재(Accessibility Void): WCAG 2.2 명암비(4.5:1), 탭 포커스 링, 스크린 리더용 ARIA 속성, 시각적 계층(Visual Hierarchy) 규칙을 전혀 고려하지 않음.
4. 코드 구현 불가능한 공염불 제안: Figma 디자인 토큰이나 Tailwind CSS / shadcn/ui 등 프론트엔드 프레임워크와 연결되지 않아 개발자가 즉각 반영할 수 없음.
- Staff Product Designer & Design Systems Architect 페르소나 주입: 닐슨 노먼(NN/g) 휴리스틱 평가와 행동 심리학 모델을 기반으로 시각적 위계(Visual Hierarchy)를 과학적으로 해체.
- 3단계 UI/UX 리팩토링 아키텍처 강제: [인지 부하 및 사용성 마찰 진단 -> 와이어프레임 계층 재배치 -> 실행 가능한 Tailwind CSS/컴포넌트 리팩토링 스펙].
- 목적별 전용 레시피 분리: B2B SaaS 고전환 결제/가격 페이지(레시피 B)와 데이터 집약형 E-commerce 대시보드(레시피 C)로 이원화.
---
2. 프롬프트 레시피 비교
❌ 레시피 A: 기본형 (단순 질의 초안)
페이지 정보나 사용자 페르소나 없이 단순히 UI 개선 아이디어를 요구하는 초안입니다.
[영문 프롬프트 (복사용)]
Give me UI/UX improvement ideas for my webpage:
[PASTE_WEBPAGE_URL_OR_DESCRIPTION_HERE][한글 프롬프트 (1:1 매칭 복사용)]
내 웹페이지의 UI/UX 개선 아이디어를 알려줘:
[여기에_웹페이지_URL_또는_설명_붙여넣기]---
⚡ 레시피 B: 실무 종결형 Staff Product Designer 종합 리팩토링 프롬프트
사용자 여정, 시각적 위계, 닐슨 노먼 10대 휴리스틱, WCAG 접근성, 그리고 즉시 구현 가능한 Tailwind CSS 코드 스펙까지 산출하는 종합 진단 레시피입니다.
[영문 프롬프트 (복사용)]
You are a Staff Product Designer and Design Systems Architect specializing in behavioral psychology, conversion rate optimization (CRO), and Nielsen Norman Group (NN/g) usability heuristics.
Conduct a rigorous UI/UX audit and deliver an actionable component-level redesign specification for the provided webpage interface.
### Target Page Context & Telemetry:
- Page Type & Domain: [e.g., B2B SaaS Pricing Page / Subscription Checkout]
- Primary Business Goal (North Star Metric): [e.g., Free-to-Paid Upgrade Conversion Rate]
- Target Persona & Primary Pain Point: [e.g., Engineering Team Leads overwhelmed by ambiguous tier feature matrix]
- Current UI Structure or Raw HTML/JSX:
[PASTE_COMPONENT_CODE_OR_LAYOUT_DESCRIPTION_HERE]
- Observed Friction Data (Drop-off/Heatmap): [e.g., 68% bounce rate at pricing table toggle]
### UI/UX Audit & Redesign Deliverables:
1. HEURISTIC & COGNITIVE FRICTION AUDIT:
- Identify top 3 usability flaws violating NN/g heuristics (Visual Hierarchy, Recognition vs Recall, Error Prevention).
- Diagnose cognitive overload using Hick's Law and Gestalt principles (Proximity, Common Region).
2. VISUAL HIERARCHY & INFORMATION ARCHITECTURE RESTRUCTURING:
- Define strict 3-tier typographic scale, spacing tokens (4px/8px grid), and primary CTA anchoring strategy.
- Establish high-contrast focal points complying with WCAG 2.2 AA (minimum 4.5:1 contrast ratio).
3. COMPONENT REFACTORING SPEC (Tailwind CSS / shadcn/ui):
- Provide production-ready JSX/HTML with modern utility classes replacing the cluttered elements.
- Include micro-interactions (hover, active, focus-visible states) and mobile-responsive drawer/stack patterns.
4. QUANTITATIVE HYPOTHESIS & A/B TEST ROADMAP:
- Formulate testable hypothesis (If [Change], then [Metric] will increase by [X]%).
- List key telemetry event triggers for Amplitude/GA4 tracking.[한글 프롬프트 (1:1 매칭 복사용)]
당신은 행동 심리학, 전환율 최적화(CRO), 닐슨 노먼 그룹(NN/g) 사용성 휴리스틱을 전문으로 하는 수석 프로덕트 디자이너(Staff Product Designer)이자 디자인 시스템 아키텍트입니다.
제공된 웹페이지 인터페이스에 대해 엄밀한 UI/UX 감사를 수행하고 즉각 실행 가능한 컴포넌트 단위 리디자인 명세를 도출하십시오.
### 대상 페이지 맥락 및 텔레메트리:
- 페이지 유형 및 도메인: [예: B2B SaaS 요금제 안내 페이지 / 구독 결제 화면]
- 핵심 비즈니스 목표(North Star 지표): [예: 무료 체험 -> 유료 구독 전환율 극대화]
- 타깃 페르소나 및 핵심 페인포인트: [예: 모호한 기능 비교표로 인해 결정을 망설이는 엔지니어링 팀장]
- 현재 UI 구조 또는 Raw HTML/JSX:
[여기에_컴포넌트_코드_또는_레이아웃_설명_붙여넣기]
- 관찰된 사용자 마찰 데이터(이탈률/히트맵): [예: 요금제 토글 구간에서 이탈률 68% 발생]
### UI/UX 감사 및 리디자인 산출 요구사항:
1. 휴리스틱 및 인지 마찰 감사:
- 닐슨 노먼 10대 휴리스틱을 위반하는 상위 3가지 결함 진단 (시각적 위계, 회상보다는 재인식, 오류 방지).
- 힉스의 법칙과 게슈탈트 원리(근접성, 공통 영역)를 기반으로 인지 과부하 원인 규명.
2. 시각적 위계 및 정보 아키텍처 재설계:
- 엄격한 3단계 타이포그래피 스케일, 8px 그리드 간격 토큰, 주 CTA(Call to Action) 시각적 닻(Anchor) 전략 수립.
- WCAG 2.2 AA(최소 4.5:1 명암비)를 준수하는 고대비 포커스 포인트 구축.
3. 컴포넌트 리팩토링 스펙 (Tailwind CSS / shadcn/ui):
- 복잡한 요소를 대체할 현대적 유틸리티 클래스가 적용된 즉시 사용 가능한 JSX/HTML 코드 제공.
- 마이크로 인터랙션(hover, active, focus-visible) 및 모바일 반응형 스택/드로어 패턴 포함.
4. 정량적 가설 및 A/B 테스트 로드맵:
- 검증 가능한 가설 수립 ([변경 사항]을 적용하면, [지표]가 [X]% 개선될 것이다).
- Amplitude/GA4 이벤트 트래킹을 위한 핵심 원격 측정 트리거 명시.---
🚀 레시피 C: B2B SaaS / 대시보드 전환율 극대화 특화 (High-Conversion & Data-Dense Dashboard)
데이터가 과밀집된 복잡한 대시보드나 랜딩 페이지에서 인지 부하를 급격히 낮추고, 점진적 공개(Progressive Disclosure)를 통해 10분 만에 UI를 정비하는 초고속 특화 레시피입니다.
[영문 프롬프트 (복사용)]
You are a Lead Data-UX Architect specialized in high-density enterprise dashboards and high-conversion SaaS interfaces.
Redesign the provided screen to eliminate visual noise, apply Progressive Disclosure, and maximize data glanceability.
### Input Screen Spec:
- Target Interface: [e.g., E-commerce Order Management Dashboard / Real-Time Analytics]
- User Task: [e.g., Identify stuck fulfillment orders within 5 seconds and initiate batch refund]
- Cluttered UI Elements:
[PASTE_DASHBOARD_COLUMNS_METRICS_AND_BUTTONS_HERE]
### Direct Redesign Directives:
1. 10-MINUTE NOISE REDUCTION AUDIT:
- Eliminate non-critical borders, saturated background fills, and decorative icons.
- Enforce 60-30-10 color rule (60% canvas neutral, 30% structural gray, 10% high-intent action color).
2. PROGRESSIVE DISCLOSURE ARCHITECTURE:
- Elevate top 4 primary KPI metrics to the glanceable hero tier.
- Demote secondary details (raw timestamps, technical IDs) into hover tooltips or slide-over sheet drawers.
3. PRODUCTION-READY TAILWIND UI COMPONENT:
- Output refined HTML/Tailwind CSS with clean spacing, tabbed views, and clear visual hierarchy.[한글 프롬프트 (1:1 매칭 복사용)]
당신은 고밀도 엔터프라이즈 대시보드와 고전환 SaaS 인터페이스를 전문으로 하는 수석 데이터-UX 아키텍트(Lead Data-UX Architect)입니다.
시각적 노이즈를 제거하고 점진적 공개(Progressive Disclosure) 기법을 적용하여 5초 안에 데이터가 한눈에 파악되도록 인터페이스를 재설계하십시오.
### 입력 화면 명세:
- 대상 인터페이스: [예: 이커머스 주문 관리 대시보드 / 실시간 로그 분석 화면]
- 핵심 사용자 작업: [예: 5초 안에 지연 배송 주문을 식별하고 일괄 환불 처리 실행]
- 복잡한 UI 요소 목록:
[여기에_대시보드_컬럼_지표_버튼_구성_붙여넣기]
### 직접 리디자인 지시사항:
1. 10분 시각 노이즈 감축 감사:
- 불필요한 외곽선(border), 채도 높은 배경 채우기, 무분별한 장식성 아이콘 제거.
- 60-30-10 색상 배분 규칙 적용 (60% 배경 무채색, 30% 구조적 뉴트럴 그레이, 10% 핵심 액션 강조색).
2. 점진적 공개 아키텍처:
- 최상단 히어로 티어에 핵심 KPI 4종 집약 배치.
- 2차 부가 상세 정보(원시 타임스탬프, 내부 ID 등)는 호버 툴팁이나 슬라이드오버 시트(Sheet Drawer)로 격하.
3. 실무 즉시 적용 가능한 Tailwind UI 컴포넌트:
- 정돈된 여백, 탭 뷰, 명확한 시각적 위계가 적용된 정제된 HTML/Tailwind CSS 출력.---
3. 실행 결과 비교: 레시피 A vs B vs C 실전 대조
❌ 레시피 A 실행 결과: [단순 질의의 한계] "여백을 넓히고 색상을 밝게 하라"는 실행 불가능한 뜬구름 피드백
[레시피 A 출력 예시]
1. 버튼 색상을 더 밝은 파란색으로 바꾸면 사용자의 시선을 끌 수 있습니다.
2. 페이지 상단에 여백을 더 많이 두고, 글꼴을 모던한 고딕체로 변경하세요.
3. 요금제 카드가 너무 붙어 있으니 간격을 띄우고 그림자 효과를 은은하게 추가하세요.
4. 모바일에서도 잘 보이도록 반응형 웹 디자인을 적용하는 것이 좋습니다.
5. 고객 후기(Testimonial)를 추가하면 신뢰도를 높일 수 있습니다.---
⚡ 레시피 B 실행 결과: [실전 사례 1 - B2B SaaS] 결제 전환율이 저조한 SaaS 가격 정책(Pricing) 페이지 UI/UX 전면 개편
[1차 입력 데이터]
[AI 1차 출력 요약: Staff Product Designer 명세]
1. 닐슨 노먼 휴리스틱 & 인지 마찰 분석:
- [인지 과부하]: 3개 티어에 걸친 75개 불릿 포인트가 힉스의 법칙을 위반하여 '선택 마비(Choice Paralysis)' 유발.
- [시각적 위계 결여]: 유료 전환의 주력인 'Pro' 플랜이 Free/Enterprise와 완전히 동일한 시각 가중치(Visual Weight)를 가짐.
2. 시각적 닻(Visual Anchor) 및 구조 개편:
- Pro 요금제 카드를 1.05배 확대 스케일, 인디고 테두리(border-indigo-600) 및 "Most Popular" 뱃지로 시각적 닻 형성.
- 25개 기능 나열을 핵심 가치 5개로 압축하고, 전체 기능은 하단 '전체 기능 비교(Accordion Matrix)'로 격하.[AI 출력 Tailwind CSS 리팩토링 컴포넌트]
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto items-center py-12 px-4">
<!-- Free Tier -->
<div class="rounded-2xl border border-slate-200 p-8 bg-white text-slate-900 shadow-sm">
<h3 class="text-lg font-semibold text-slate-700">Starter</h3>
<p class="mt-2 text-sm text-slate-500">개인 및 소규모 프로젝트용 기본 기능</p>
<div class="mt-4 flex items-baseline text-4xl font-extrabold tracking-tight">$0</div>
<button class="mt-8 w-full rounded-xl bg-slate-100 py-3 text-sm font-semibold text-slate-900 hover:bg-slate-200 transition">무료로 시작하기</button>
</div>
<!-- Pro Tier (Visual Anchor & Highlight) -->
<div class="relative rounded-2xl border-2 border-indigo-600 p-8 bg-white text-slate-900 shadow-xl md:-translate-y-2">
<span class="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-indigo-600 px-4 py-1 text-xs font-semibold text-white tracking-wide uppercase">Most Popular</span>
<h3 class="text-lg font-semibold text-indigo-600">Pro Growth</h3>
<p class="mt-2 text-sm text-slate-500">성장하는 팀을 위한 무제한 협업 툴킷</p>
<div class="mt-4 flex items-baseline text-4xl font-extrabold tracking-tight text-slate-900">$29<span class="text-sm font-normal text-slate-500 ml-1">/월</span></div>
<ul class="mt-6 space-y-3 text-sm text-slate-600">
<li class="flex items-center"><svg class="w-4 h-4 text-indigo-600 mr-2 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>무제한 워크스페이스 생성</li>
<li class="flex items-center"><svg class="w-4 h-4 text-indigo-600 mr-2 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>실시간 고급 분석 리포트</li>
<li class="flex items-center"><svg class="w-4 h-4 text-indigo-600 mr-2 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>우선 순위 24/7 CS 지원</li>
</ul>
<button class="mt-8 w-full rounded-xl bg-indigo-600 py-3 text-sm font-semibold text-white shadow-md hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 transition">14일 무료 체험 시작</button>
</div>
<!-- Enterprise Tier -->
<div class="rounded-2xl border border-slate-200 p-8 bg-white text-slate-900 shadow-sm">
<h3 class="text-lg font-semibold text-slate-700">Enterprise</h3>
<p class="mt-2 text-sm text-slate-500">대규모 조직을 위한 커스텀 보안/인프라</p>
<div class="mt-4 flex items-baseline text-4xl font-extrabold tracking-tight">$99<span class="text-sm font-normal text-slate-500 ml-1">/월</span></div>
<button class="mt-8 w-full rounded-xl border border-slate-300 bg-white py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50 transition">영업팀 문의하기</button>
</div>
</div>[후속 체이닝 1: A/B 테스트 가설 및 GA4 이벤트 트래킹 지시문]
[후속 체이닝 2: Cursor / Claude Code 컴포넌트 교체 지시문]
[4단계 실무 UI/UX 워크플로우]:
1. 문제 포착: 이탈률 급증 및 체류 시간 5초 미만 섹션 히트맵 추출.
2. 레시피 B 주입: 인지 부하 감사와 Tailwind 코드 스펙 일괄 획득.
3. 컴포넌트 반영: Cursor/IDE에 코드를 붙여넣어 즉시 마크업 교체.
4. 정량 검증: A/B 테스트 배포 후 전환율(CVR) 20% 이상 향상 검증.
---
🚀 레시피 C 실행 결과: [실전 사례 2 - 데이터 집약형 대시보드] 정보 과부하 E-commerce 주문 분석 대시보드 인지 부하 해소
[1차 입력 데이터]
[AI 1차 출력 요약: Lead Data-UX Architect 리디자인]
1. 시각 노이즈 감축 (Noise Elimination):
- 12가지 상태 배지 색상을 3개 시맨틱 상태로 축소: 정상(Gray), 진행중(Blue), 주의/지연(Rose).
- 모든 셀을 감싸던 두꺼운 테두리(border-2)를 제거하고 `border-b border-slate-100` 및 부드러운 호버 배경으로 대체.
2. 점진적 공개(Progressive Disclosure) 레이아웃:
- 상단 히어로: [오늘 총 주문], [배송 지연 건수 (Action Required)], [당일 결제액], [반품 요청] 4개 핵심 지표 카드만 배치.
- 복잡한 8개 필터는 [자주 쓰는 빠른 필터 3종] + [상세 필터 토글 드로어]로 이원화.
- 상세 주문자 주소 및 배송 추적 히스토리는 테이블을 어지럽히지 않고 우측 '슬라이드오버 시트(Slide-over Sheet)'로 분리.[후속 체이닝: 모바일 Drawer/Sheet 변환 지시문]
[3단계 초고속 대시보드 UI 정비 워크플로우]:
1. 노이즈 컷(Noise Cut): 무분별한 테두리와 원색 배지 삭제, 60-30-10 규칙 적용.
2. 상단 4대 KPI 집약: 관리자가 화면에 진입하자마자 3초 안에 액션 여부를 판단할 수 있도록 요약.
3. 점진적 상세화: 부가 데이터는 클릭 시 우측 드로어에서 노출하여 스크롤 및 인지 피로 완전 제거.
---
4. 프롬프트 동작 원리 및 인지 공학적 메커니즘
[프롬프트 입력: 복잡한 UI 코드 + 비즈니스 지표]
│
▼
[1단계: 인지 공학적 필터링]
- 힉스의 법칙 (Hick's Law): RT = a + b log2(n) -> 선택지(n)를 줄여 의사결정 지연 해소
- 피츠의 법칙 (Fitts's Law): 이동 거리 축소 & 타깃 터치 영역(최소 44x44px) 확보
│
▼
[2단계: 게슈탈트 시지각 체계화]
- 근접성(Proximity) & 공통 영역(Common Region): 관련 데이터를 카드 단위로 격리
- 60-30-10 컬러 밸런스: 무채색 캔버스 위 고대비 단일 액션 포인트 주입
│
▼
[3단계: WCAG 2.2 AA & 프론트엔드 코드 출력]
- 명암비 4.5:1 준수, 키보드 탭 네비게이션(focus-visible) 보장
- Tailwind CSS / shadcn/ui 기반 프로덕션 레디 컴포넌트 도출1. 힉스의 법칙(Hick's Law) 기반 선택지 최적화: 선택지의 수가 늘어날수록 의사결정 시간은 로그 함수($RT = a + b \log_2(n)$)로 증가합니다. 본 프롬프트는 20~30개에 달하는 요금제 비교 항목이나 무분별한 필터 버튼을 3~5개의 핵심 시각적 앵커로 자동 압축하도록 강제하여 인지 마비(Choice Paralysis)를 방지합니다.
2. 피츠의 법칙(Fitts's Law)과 터치 타깃 엔지니어링: 목표 타깃의 크기가 클수록, 시작 위치에서 가까울수록 작업 완료 속도가 빨라집니다. 특히 모바일 뷰포트에서 주요 전환 버튼(CTA)을 엄지손가락 조작 반경(Thumb Zone)에 배치하고, WCAG 기준 최소 $44 \times 44\text{px}$의 터치 타깃 영역을 확보하도록 유도합니다.
3. 게슈탈트 시지각 원리(Gestalt Principles):
- 근접성의 원리(Law of Proximity): 서로 관련된 라벨과 입력 폼, 메트릭 수치를 좁은 간격(4px/8px)으로 묶어 시각적 결속력을 높입니다.
- 공통 영역의 원리(Law of Common Region): 무분별한 보더(Border) 대신 미세한 배경 명도 차이(bg-slate-50)나 패딩 여백을 활용해 카드로 격리함으로써 화면 스캐닝 피로도를 획기적으로 낮춥니다.
4. 점진적 공개(Progressive Disclosure) 아키텍처: 모든 데이터를 한 번에 쏟아붓지 않고, 사용자가 즉시 판단해야 하는 핵심 지표 4종만 1차 노출하며 부가 정보는 툴팁, 아코디언, 슬라이드오버 드로어로 위임하여 초보자와 파워 유저 모두의 사용성을 만족시킵니다.
5. WCAG 2.2 AA 접근성 준수: 일반 텍스트 기준 최소 4.5:1, 대형 텍스트 3:1의 명암비를 강제하고 키보드 내비게이션 포커스 링(focus-visible:ring-2)을 필수 정의하여 엔터프라이즈 레벨의 접근성을 확보합니다.
---
5. 실무 복사 적용을 위한 커스텀 템플릿
자신의 웹페이지나 제품 인터페이스를 즉시 진단하고자 할 때 아래 플레이스홀더를 채워 전달하십시오.
당신은 수석 프로덕트 디자이너이자 디자인 시스템 엔지니어입니다.
다음 웹페이지의 UI/UX를 비즈니스 목표 관점에서 전면 개편해 주십시오.
1. 제품 및 페이지 정보:
- 도메인/서비스명: [예: B2B 결제 솔루션]
- 현재 페이지: [예: 랜딩 페이지 히어로 섹션 / 회원가입 3단계 폼]
- 핵심 비즈니스 전환 지표: [예: 데모 신청 완료율 15% 이상 달성]
2. 현재 인터페이스 문제점:
- 주요 증상: [예: 폼 입력 필드가 12개라 중도 이탈률 60% 기록]
- 현재 사용 중인 마크업/컴포넌트:
[여기에_현재_HTML_또는_React_코드_붙여넣기]
3. 요구사항:
- 힉스의 법칙과 인지 부하 관점에서 불필요한 입력 요소 감축 방안 제시.
- 60-30-10 색상 배분 규칙 및 8px 단위 Spacing System 명세.
- WCAG 2.2 AA 명암비를 준수하는 Tailwind CSS / shadcn 기반 리팩토링 컴포넌트 코드 제공.
- 모바일 뷰포트(375px) 대응 반응형 스택 및 바텀 시트 인터랙션 포함.
- 클릭 전환율을 측정하기 위한 GA4 / PostHog 커스텀 이벤트 명세 포함.💡 템플릿 활용 꿀팁: AI 시각 감사(Vision Multimodal) 체이닝
---
6. 주의사항 & 실무 권장 지침
1. 디자인은 미적 취향이 아니라 가설 검증이다: "예쁘다/모던하다"는 주관적 감상에 매몰되지 마십시오. 모든 UI 변경은 반드시 "이탈률 감소", "클릭률 증가"라는 명확한 비즈니스 지표와 연결되어야 합니다.
2. 모바일 퍼스트(Mobile-First) 점검 누락 금지: 데스크톱에서 완벽해 보이는 요금제 카드 3종도 모바일에서는 세로로 끝없이 스크롤되는 재앙이 될 수 있습니다. 프롬프트 질의 시 반드시 모바일 뷰포트(375px~414px) 동작 방식을 함께 검증하십시오.
3. 다크 모드와 고대비(WCAG) 간과 주의: 세련된 다크 테마를 도입할 때 텍스트와 배경의 명암비가 4.5:1 미만으로 떨어지는 경우가 빈번합니다. AI가 제안한 Tailwind 클래스의 텍스트 색상(text-slate-400 등)이 충분한 가독성을 확보하는지 확인하십시오.
4. 한 번에 한 화면만 리디자인: 전체 웹사이트를 통째로 던지면 AI가 피상적인 조언으로 회귀합니다. [히어로 섹션], [가격 정책표], [체크아웃 폼], [대시보드 KPI 카드]처럼 독립된 모듈 단위로 나누어 프롬프트를 체이닝하십시오.
5. 디자인 토큰 시스템과의 일관성 유지: AI가 임의로 새로운 컬러나 임의 픽셀 간격(px-[17px] 등)을 생성하지 않도록 사전에 정의된 Tailwind 기본 팔레트와 8px 간격 그리드 스케일을 준수하도록 통제하십시오.
