UI/UX Pro Max - 디자인 인텔리전스
웹 및 모바일 애플리케이션을 위한 종합적인 디자인 가이드입니다. 67가지 스타일, 96가지 색상 팔레트, 57가지 폰트 페어링, 99가지 UX 가이드라인, 25가지 차트 유형을 13가지 기술 스택에 걸쳐 제공합니다. 우선순위 기반 추천을 제공하는 검색 가능한 데이터베이스입니다.
적용 시기
다음과 같은 경우 이 가이드라인을 참조하세요:
- 새로운 UI 컴포넌트나 페이지를 디자인할 때
- 색상 팔레트와 타이포그래피를 선택할 때
- UX 문제를 위해 코드를 검토할 때
- 랜딩 페이지나 대시보드를 구축할 때
- 접근성 요구 사항을 구현할 때
우선순위별 규칙 카테고리
| 우선순위 | 카테고리 | 영향 | 도메인 |
|---|---|---|---|
| 1 | 접근성 | 치명적 | ux |
| 2 | 터치 및 상호작용 | 치명적 | ux |
| 3 | 성능 | 높음 | ux |
| 4 | 레이아웃 및 반응형 | 높음 | ux |
| 5 | 타이포그래피 및 색상 | 중간 | typography, color |
| 6 | 애니메이션 | 중간 | ux |
| 7 | 스타일 선택 | 중간 | style, product |
| 8 | 차트 및 데이터 | 낮음 | chart |
빠른 참조
1. 접근성 (치명적)
color-contrast- 일반 텍스트의 경우 최소 4.5:1 비율focus-states- 대화형 요소에 가시적인 포커스 링alt-text- 의미 있는 이미지에 대한 설명적인 대체 텍스트aria-labels- 아이콘 전용 버튼에 대한 aria-labelkeyboard-nav- 탭 순서가 시각적 순서와 일치form-labels- for 속성과 함께 label 사용
2. 터치 및 상호작용 (치명적)
touch-target-size- 최소 44x44px 터치 대상hover-vs-tap- 기본 상호작용에는 클릭/탭 사용loading-buttons- 비동기 작업 중 버튼 비활성화error-feedback- 문제 근처에 명확한 오류 메시지cursor-pointer- 클릭 가능한 요소에 cursor-pointer 추가
3. 성능 (높음)
image-optimization- WebP, srcset, 지연 로딩 사용reduced-motion- prefers-reduced-motion 확인content-jumping- 비동기 콘텐츠를 위한 공간 확보
4. 레이아웃 및 반응형 (높음)
viewport-meta- width=device-width initial-scale=1readable-font-size- 모바일에서 본문 텍스트 최소 16pxhorizontal-scroll- 콘텐츠가 뷰포트 너비에 맞는지 확인z-index-management- z-index 스케일 정의 (10, 20, 30, 50)
5. 타이포그래피 및 색상 (중간)
line-height- 본문 텍스트에 1.5-1.75 사용line-length- 줄당 65-75자로 제한font-pairing- 제목/본문 폰트 특성 일치
6. 애니메이션 (중간)
duration-timing- 마이크로 상호작용에 150-300ms 사용transform-performance- width/height 대신 transform/opacity 사용loading-states- 스켈레톤 화면 또는 스피너
7. 스타일 선택 (중간)
style-match- 스타일을 제품 유형에 일치consistency- 모든 페이지에서 동일한 스타일 사용no-emoji-icons- 이모지 대신 SVG 아이콘 사용
8. 차트 및 데이터 (낮음)
chart-type- 차트 유형을 데이터 유형에 일치color-guidance- 접근 가능한 색상 팔레트 사용data-table- 접근성을 위한 대체 테이블 제공
사용 방법
아래 CLI 도구를 사용하여 특정 도메인을 검색하세요.
사전 요구 사항
Python이 설치되어 있는지 확인하세요:
python3 --version || python --version
Python이 설치되지 않은 경우, 사용자 OS에 따라 설치하세요:
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
이 스킬 사용 방법
사용자가 UI/UX 작업(디자인, 구축, 생성, 구현, 검토, 수정, 개선)을 요청할 때 다음 워크플로우를 따르세요:
1단계: 사용자 요구 사항 분석
사용자 요청에서 핵심 정보 추출:
- 제품 유형: SaaS, 전자상거래, 포트폴리오, 대시보드, 랜딩 페이지 등
- 스타일 키워드: 미니멀, 유쾌함, 전문적, 우아함, 다크 모드 등
- 산업: 헬스케어, 핀테크, 게임, 교육 등
- 스택: React, Vue, Next.js 또는 기본값
html-tailwind
2단계: 디자인 시스템 생성 (필수)
항상 --design-system으로 시작하여 포괄적인 추천과 그 이유를 얻으세요:
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
이 명령은:
- 5개 도메인을 병렬로 검색 (product, style, color, landing, typography)
ui-reasoning.csv의 추론 규칙을 적용하여 최적의 일치 항목 선택- 완전한 디자인 시스템 반환: 패턴, 스타일, 색상, 타이포그래피, 효과
- 피해야 할 안티 패턴 포함
예시:
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
2b단계: 디자인 시스템 유지 (마스터 + 오버라이드 패턴)
세션 간 계층적 검색을 위해 디자인 시스템을 저장하려면 --persist를 추가하세요:
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
이 명령은 다음을 생성합니다:
design-system/MASTER.md— 모든 디자인 규칙이 포함된 글로벌 진실의 원천design-system/pages/— 페이지별 재정의를 위한 폴더
페이지별 재정의와 함께 사용하기:
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
이 명령은 또한 다음을 생성합니다:
design-system/pages/dashboard.md— 마스터와 다른 페이지별 편차
계층적 검색 작동 방식:
- 특정 페이지(예: "Checkout")를 구축할 때 먼저
design-system/pages/checkout.md를 확인하세요. - 페이지 파일이 존재하면 해당 규칙이 마스터 파일을 재정의합니다.
- 없으면
design-system/MASTER.md만 사용하세요.
3단계: 필요에 따라 세부 검색으로 보충
디자인 시스템을 얻은 후 도메인 검색을 사용하여 추가 세부 정보를 얻으세요:
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
세부 검색이 필요한 경우:
| 필요 사항 | 도메인 | 예시 |
|---|---|---|
| 더 많은 스타일 옵션 | style | --domain style "glassmorphism dark" |
| 차트 추천 | chart | --domain chart "real-time dashboard" |
| UX 모범 사례 | ux | --domain ux "animation accessibility" |
| 대체 폰트 | typography | --domain typography "elegant luxury" |
| 랜딩 구조 | landing | --domain landing "hero social-proof" |
4단계: 스택 가이드라인 (기본값: html-tailwind)
구현별 모범 사례를 얻으세요. 사용자가 스택을 지정하지 않으면 기본값으로 html-tailwind를 사용하세요.
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
사용 가능한 스택: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
검색 참조
사용 가능한 도메인
| 도메인 | 용도 | 예시 키워드 |
|---|---|---|
product | 제품 유형 추천 | SaaS, 전자상거래, 포트폴리오, 헬스케어, 뷰티, 서비스 |
style | UI 스타일, 색상, 효과 | glassmorphism, minimalism, dark mode, brutalism |
typography | 폰트 페어링, Google 폰트 | 우아함, 유쾌함, 전문적, 모던 |
color | 제품 유형별 색상 팔레트 | saas, ecommerce, healthcare, beauty, fintech, service |
landing | 페이지 구조, CTA 전략 | hero, hero-centric, testimonial, pricing, social-proof |
chart | 차트 유형, 라이브러리 추천 | trend, comparison, timeline, funnel, pie |
ux | 모범 사례, 안티 패턴 | animation, accessibility, z-index, loading |
react | React/Next.js 성능 | waterfall, bundle, suspense, memo, rerender, cache |
web | 웹 인터페이스 가이드라인 | aria, focus, keyboard, semantic, virtualize |
prompt | AI 프롬프트, CSS 키워드 | (스타일 이름) |
사용 가능한 스택
| 스택 | 초점 |
|---|---|
html-tailwind | Tailwind 유틸리티, 반응형, a11y (기본값) |
react | State, hooks, 성능, 패턴 |
nextjs | SSR, 라우팅, 이미지, API 라우트 |
vue | Composition API, Pinia, Vue Router |
svelte | Runes, stores, SvelteKit |
swiftui | Views, State, Navigation, Animation |
react-native | Components, Navigation, Lists |
flutter | Widgets, State, Layout, Theming |
shadcn | shadcn/ui 컴포넌트, 테마, 폼, 패턴 |
jetpack-compose | Composables, Modifiers, State Hoisting, Recomposition |
예제 워크플로우
사용자 요청: "전문 스킨케어 서비스 랜딩 페이지 만들어줘"
1단계: 요구 사항 분석
- 제품 유형: 뷰티/스파 서비스
- 스타일 키워드: 우아함, 전문적, 부드러움
- 산업: 뷰티/웰니스
- 스택: html-tailwind (기본값)
2단계: 디자인 시스템 생성 (필수)
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
출력: 패턴, 스타일, 색상, 타이포그래피, 효과, 안티 패턴이 포함된 완전한 디자인 시스템.
3단계: 필요에 따라 세부 검색으로 보충
# 애니메이션 및 접근성에 대한 UX 가이드라인 얻기
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
# 필요한 경우 대체 타이포그래피 옵션 얻기
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
4단계: 스택 가이드라인
python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
그런 다음: 디자인 시스템 + 세부 검색을 종합하고 디자인을 구현하세요.
출력 형식
--design-system 플래그는 두 가지 출력 형식을 지원합니다:
# ASCII 박스 (기본값) - 터미널 표시에 가장 적합
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# 마크다운 - 문서화에 가장 적합
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
더 나은 결과를 위한 팁
- 키워드를 구체적으로 사용하세요 - "헬스케어 SaaS 대시보드" > "앱"
- 여러 번 검색하세요 - 다른 키워드가 다른 인사이트를 드러냅니다
- 도메인을 결합하세요 - 스타일 + 타이포그래피 + 색상 = 완전한 디자인 시스템
- 항상 UX를 확인하세요 - 일반적인 문제를 위해 "animation", "z-index", "accessibility" 검색
- 스택 플래그를 사용하세요 - 구현별 모범 사례 얻기
- 반복하세요 - 첫 번째 검색이 일치하지 않으면 다른 키워드 시도
전문가용 UI를 위한 일반 규칙
다음은 UI를 비전문적으로 보이게 하는 자주 간과되는 문제입니다:
아이콘 및 시각적 요소
| 규칙 | Do | Don't |
|---|---|---|
| 이모지 아이콘 금지 | SVG 아이콘 사용 (Heroicons, Lucide, Simple Icons) | UI 아이콘으로 🎨 🚀 ⚙️ 같은 이모지 사용 |
| 안정적인 호버 상태 | 호버 시 color/opacity 전환 사용 | 레이아웃을 이동시키는 scale 변환 사용 |
| 올바른 브랜드 로고 | Simple Icons에서 공식 SVG 조사 | 추측하거나 잘못된 로고 경로 사용 |
| 일관된 아이콘 크기 | w-6 h-6과 함께 고정된 viewBox(24x24) 사용 | 다른 아이콘 크기를 무작위로 혼합 |
상호작용 및 커서
| 규칙 | Do | Don't |
|---|---|---|
| 커서 포인터 | 모든 클릭 가능/호버 가능한 카드에 cursor-pointer 추가 | 대화형 요소에 기본 커서 유지 |
| 호버 피드백 | 시각적 피드백 제공 (color, shadow, border) | 요소가 대화형임을 나타내는 표시 없음 |
| 부드러운 전환 | transition-colors duration-200 사용 | 즉각적인 상태 변경 또는 너무 느림 (>500ms) |
라이트/다크 모드 대비
| 규칙 | Do | Don't |
|---|---|---|
| 라이트 모드 글라스 카드 | bg-white/80 이상의 불투명도 사용 | bg-white/10 (너무 투명함) 사용 |
| 라이트 텍스트 대비 | 텍스트에 #0F172A (slate-900) 사용 | 본문 텍스트에 #94A3B8 (slate-400) 사용 |
| 라이트 음소거 텍스트 | 최소 #475569 (slate-600) 사용 | gray-400 또는 더 밝은 색상 사용 |
| 테두리 가시성 | 라이트 모드에서 border-gray-200 사용 | border-white/10 (보이지 않음) 사용 |
레이아웃 및 간격
| 규칙 | Do | Don't |
|---|---|---|
| 플로팅 내비바 | top-4 left-4 right-4 간격 추가 | 내비바를 top-0 left-0 right-0에 고정 |
| 콘텐츠 패딩 | 고정된 내비바 높이를 고려 | 콘텐츠가 고정된 요소 뒤에 숨도록 함 |
| 일관된 최대 너비 | 동일한 max-w-6xl 또는 max-w-7xl 사용 | 다른 컨테이너 너비 혼합 |
전달 전 체크리스트
UI 코드를 전달하기 전에 다음 항목을 확인하세요:
시각적 품질
- 아이콘으로 이모지 사용 금지 (대신 SVG 사용)
- 모든 아이콘이 일관된 아이콘 세트에서 비롯됨 (Heroicons/Lucide)
- 브랜드 로고가 올바름 (Simple Icons에서 확인)
- 호버 상태가 레이아웃 이동을 일으키지 않음
- 테마 색상을 직접 사용 (bg-primary)하고 var() 래퍼 사용 금지
상호작용
- 모든 클릭 가능한 요소에
cursor-pointer있음 - 호버 상태가 명확한 시각적 피드백 제공
- 전환이 부드러움 (150-300ms)
- 키보드 탐색을 위해 포커스 상태 표시
라이트/다크 모드
- 라이트 모드 텍스트가 충분한 대비를 가짐 (최소 4.5:1)
- 라이트 모드에서 글라스/투명 요소가 보임
- 두 모드 모두에서 테두리가 보임
- 전달 전 두 모드 모두 테스트
레이아웃
- 플로팅 요소가 가장자리에서 적절한 간격을 가짐
- 고정된 내비바 뒤에 숨은 콘텐츠 없음
- 375px, 768px, 1024px, 1440px에서 반응형
- 모바일에서 가로 스크롤 없음
접근성
- 모든 이미지에 대체 텍스트 있음
- 폼 입력에 레이블 있음
- 색상이 유일한 표시자가 아님
-
prefers-reduced-motion존중