UI/UX Pro Max - 디자인 인텔리전스
웹, 모바일, 데스크톱을 위한 UI/UX 디자인 인텔리전스입니다. 페이지, 컴포넌트, 디자인 시스템, 접근성, 인터랙션, 반응형 레이아웃, 타이포그래피, 색상, 차트 및 스택별 UI 구현을 포함한 인터페이스 설계, 구축, 리뷰 또는 수정 시 이 스킬을 사용해야 합니다. 검색 가능한 로컬 데이터: 79개의 스타일(50개 활성), 192개의 제품 팔레트 및 추론 프로필, 74개의 글꼴 페어링, 119개의 UX 가이드라인, 105개의 아이콘, 17개의 GSAP 프리셋, 25개의 차트 유형 및 22개의 스택.
적용 시기
작업이 UI 구조, 시각적 디자인 결정, 상호작용 패턴 또는 사용자 경험 품질 관리와 관련된 경우 이 Skill을 사용해야 합니다.
주요 사용 사례
다음 상황에서 이 Skill이 가장 유용합니다.
- 새 페이지 설계 (랜딩 페이지, 대시보드, 관리자 페이지, SaaS, 모바일 앱)
- UI 컴포넌트 생성 또는 리팩토링 (버튼, 모달, 폼, 테이블, 차트 등)
- 색상 구성표, 글꼴 시스템, 간격 규칙 또는 레이아웃 체계 선택
- UI 코드의 사용자 경험, 접근성 또는 시각적 일관성 검토
- 네비게이션 구조, 애니메이션 또는 반응형 동작 구현
- 제품 수준의 디자인 결정 (스타일, 정보 계층, 브랜드 표현)
- 인터페이스의 지각된 품질, 명확성 또는 사용성 향상
권장 사용
다음 상황에서는 이 Skill을 사용하는 것이 좋습니다.
- UI가 "충분히 전문적이지 않아 보이지만" 원인을 모를 때
- 사용성 또는 경험 관련 피드백을 받았을 때
- 출시 전 UI 품질 최적화를 준비할 때
- 플랫폼 간 디자인(Web / iOS / Android)을 정렬해야 할 때
- 디자인 시스템 또는 재사용 가능한 컴포넌트 라이브러리를 구축할 때
생략 가능
다음 상황에서는 이 Skill을 사용할 필요가 없습니다.
- 순수 백엔드 로직 개발
- API 또는 데이터베이스 설계에만 관련된 경우
- 인터페이스와 무관한 성능 최적화
- 인프라 또는 DevOps 작업
- 비시각적 스크립트 또는 자동화 작업
판단 기준: 작업이 어떤 기능의 외관, 사용 방법, 동작 방식 또는 상호작용 방식을 변경한다면 이 Skill을 사용해야 합니다.
우선순위별 규칙 카테고리
인간/AI 참고용: 우선순위 1→10에 따라 어떤 규칙을 먼저 검토할지 결정합니다. 세부 규칙이 필요하면 --domain <Domain>으로 조회하세요. 스크립트는 이 표를 읽지 않습니다.
| 우선순위 | 카테고리 | 영향 | 도메인 | 주요 확인 사항 (필수) | 안티 패턴 (피해야 할 것) |
|---|---|---|---|---|---|
| 1 | 접근성 | 치명적 | ux | 대비 4.5:1, 대체 텍스트, 키보드 탐색, Aria-레이블 | 포커스 링 제거, 레이블 없는 아이콘 전용 버튼 |
| 2 | 터치 및 상호작용 | 치명적 | ux | 최소 크기 44×44px, 8px+ 간격, 로딩 피드백 | 호버에만 의존, 즉각 상태 변경(0ms) |
| 3 | 성능 | 높음 | ux | WebP/AVIF, 지연 로딩, 공간 확보 (CLS < 0.1) | 레이아웃 스래싱, 누적 레이아웃 이동 |
| 4 | 스타일 선택 | 높음 | style, product | 제품 유형 일치, 일관성, SVG 아이콘 (이모지 사용 금지) | 플랫과 스큐어모픽 무작위 혼합, 이모지를 아이콘으로 사용 |
| 5 | 레이아웃 및 반응형 | 높음 | ux | 모바일 우선 중단점, 뷰포트 메타, 가로 스크롤 없음 | 가로 스크롤, 고정 px 컨테이너 너비, 확대 비활성화 |
| 6 | 타이포그래피 및 색상 | 중간 | typography, color | 기본 16px, 줄 간격 1.5, 의미론적 색상 토큰 | 본문 < 12px, 회색-회색, 컴포넌트 내 원시 hex 값 |
| 7 | 애니메이션 | 중간 | ux | 맥락 인식 타이밍, 동작이 의미 전달, 공간 연속성 | 모든 전환에 동일 지속 시간, width/height 애니메이션, reduced-motion 미적용 |
| 8 | 폼 및 피드백 | 중간 | ux | 눈에 보이는 레이블, 필드 근처 오류 표시, 도움말 텍스트, 점진적 공개 | 플레이스홀더 전용 레이블, 상단에만 오류 표시, 처음부터 모든 정보 공개 |
| 9 | 네비게이션 패턴 | 높음 | ux | 예측 가능한 뒤로 가기, 하단 내비 5개 이하, 딥 링킹 | 과부하된 내비, 깨진 뒤로 가기, 딥 링크 없음 |
| 10 | 차트 및 데이터 | 낮음 | chart | 범례, 툴팁, 접근 가능한 색상 | 의미 전달을 색상에만 의존 |
빠른 참조
1. 접근성 (치명적)
color-contrast- 일반 텍스트의 경우 최소 4.5:1 비율 (큰 텍스트 3:1); Material Design 기준focus-states- 상호작용 요소에 눈에 보이는 포커스 링 (2–4px; Apple HIG, MD)alt-text- 의미 있는 이미지에 대한 설명적인 대체 텍스트aria-labels- 아이콘 전용 버튼에 aria-label; 네이티브에서는 accessibilityLabel (Apple HIG)icon-context- 의미론은 사용 방식에 따라 다름: 눈에 보이는 텍스트 옆에 있는 장식용 아이콘은 접근성 트리에서 숨김; 의미 있는 아이콘은 텍스트 대체 필요; 아이콘 컨트롤은 접근 가능한 이름과 해당 상태 필요keyboard-nav- 탭 순서가 시각적 순서와 일치; 전체 키보드 지원 (Apple HIG)form-labels-for속성과 함께 label 사용skip-links- 키보드 사용자를 위한 메인 콘텐츠로 건너뛰기 링크heading-hierarchy- 순차적 h1→h6, 레벨 건너뛰기 금지color-not-only- 색상만으로 정보 전달 금지 (아이콘/텍스트 추가)dynamic-type- 시스템 텍스트 크기 조정 지원; 텍스트가 커짐에 따라 잘림 방지 (Apple Dynamic Type, MD)reduced-motion- prefers-reduced-motion 준수; 요청 시 애니메이션 축소/비활성화 (Apple Reduced Motion API, MD)voiceover-sr- 의미 있는 accessibilityLabel/accessibilityHint; VoiceOver/스크린 리더를 위한 논리적 읽기 순서 (Apple HIG, MD)escape-routes- 모달 및 다단계 흐름에서 취소/뒤로 가기 제공 (Apple HIG)keyboard-shortcuts- 시스템 및 접근성 단축키 보존; 드래그 앤 드롭에 키보드 대안 제공 (Apple HIG)focus-not-obscured- 고정 UI, 오버레이 및 배너가 키보드 포커스된 컨트롤을 가리지 않아야 함 (WCAG 2.2 AA)focus-not-obscured-enhanced- 포커스된 전체 컴포넌트를 항상 볼 수 있도록 유지 (WCAG 2.2 AAA)focus-appearance- 포커스 표시기 영역 및 3:1 상태 대비 확인; 눈에 보이는 포커스만으로는 충분하지 않음 (WCAG 2.2 AAA)dragging-alternative- 작성자가 제어하는 모든 드래그 작업에는 단일 포인터 및 키보드 대안이 필요 (WCAG 2.2 AA)web-target-size- 웹 포인터 대상은 24×24 CSS px 또는 문서화된 예외 필요; 네이티브 단위로 대체 금지 (WCAG 2.2 AA)consistent-help- 반복되는 도움 메커니즘은 페이지 집합 내에서 동일한 상대적 순서를 유지 (WCAG 2.2 A)redundant-entry- 재입력이 필수적이지 않은 한 동일한 프로세스에서 이미 제공된 정보 재사용 (WCAG 2.2 A)accessible-authentication- 비밀번호 관리자 및 붙여넣기 허용; 비인지적 인증 경로 제공 (WCAG 2.2 최소, AA). 향상된 AAA 기준은 데이터 세트에 포함되지 않음auto-rotation-controls- 캐러셀 및 움직이는 콘텐츠에는 일시 중지/중지 컨트롤이 필요하며 포커스 또는 reduced motion 시 중지해야 함 (WAI)contextual-live-badge-updates- 포커스를 이동하지 않고 변경된 카운트/상태를 완전한 맥락 문구로 알림; 적절한 live/status 영역 하나를 사용하고 필요한 경우에만 원자적 업데이트 사용
2. 터치 및 상호작용 (치명적)
touch-target-size- 최소 44×44pt (Apple) / 48×48dp (Material); 필요한 경우 시각적 경계를 넘어 히트 영역 확장touch-spacing- 터치 대상 간 최소 8px/8dp 간격 (Apple HIG, MD)hover-vs-tap- 기본 상호작용에는 클릭/탭 사용; 호버에만 의존 금지loading-buttons- 비동기 작업 중 버튼 비활성화; 스피너 또는 진행 표시기 표시error-feedback- 문제 근처에 명확한 오류 메시지 표시cursor-pointer- 클릭 가능한 요소에 cursor-pointer 추가 (웹)gesture-conflicts- 기본 콘텐츠에서 가로 스와이프 방지; 세로 스크롤 선호tap-delay- touch-action: manipulation 사용하여 300ms 지연 감소 (웹)standard-gestures- 플랫폼 표준 제스처를 일관되게 사용; 재정의 금지 (예: 뒤로 스와이프, 핀치 줌) (Apple HIG)system-gestures- 시스템 제스처 차단 금지 (제어 센터, 뒤로 스와이프 등) (Apple HIG)press-feedback- 누를 시 시각적 피드백 (리플/하이라이트; MD 상태 레이어)haptic-feedback- 확인 및 중요한 작업에 햅틱 사용; 과도한 사용 금지 (Apple HIG)gesture-alternative- 제스처 전용 상호작용에 의존 금지; 중요한 작업에는 항상 눈에 보이는 컨트롤 제공safe-area-awareness- 주요 터치 대상을 노치, 다이내믹 아일랜드, 제스처 바 및 화면 가장자리에서 멀리 유지no-precision-required- 작은 아이콘이나 얇은 가장자리에 픽셀 단위의 정확한 탭 요구 금지swipe-clarity- 스와이프 동작은 명확한 어포던스 또는 힌트 표시 (쉐브론, 레이블, 튜토리얼)drag-threshold- 실수로 인한 드래그를 방지하기 위해 드래그 시작 전 이동 임계값 사용
3. 성능 (높음)
image-optimization- WebP/AVIF 사용, 반응형 이미지 (srcset/sizes), 중요하지 않은 에셋은 지연 로딩image-dimension- 레이아웃 이동 방지를 위해 width/height 선언 또는 aspect-ratio 사용 (Core Web Vitals: CLS)font-loading- font-display: swap/optional 사용하여 텍스트 보이지 않음 방지 (FOIT); 레이아웃 이동 감소를 위해 공간 확보 (MD)font-preload- 중요한 글꼴만 사전 로드; 모든 변형에 사전 로드를 과도하게 사용 금지critical-css- 스크롤 없이 볼 수 있는 영역의 CSS 우선 처리 (인라인 중요 CSS 또는 조기에 로드된 스타일시트)lazy-loading- 동적 임포트 / 라우트 수준 분할을 통해 비히어로 컴포넌트 지연 로딩bundle-splitting- 라우트/기능별로 코드 분할 (React Suspense / Next.js dynamic)하여 초기 로드 및 TTI 감소third-party-scripts- 타사 스크립트는 async/defer로 로드; 필요 없는 스크립트 감사 및 제거 (MD)reduce-reflows- 빈번한 레이아웃 읽기/쓰기 방지; DOM 읽기 후 쓰기 일괄 처리content-jumping- 비동기 콘텐츠를 위해 공간 확보하여 레이아웃 점프 방지 (Core Web Vitals: CLS)lazy-load-below-fold- 스크롤 아래 이미지 및 무거운 미디어에는 loading="lazy" 사용virtualize-lists- 50개 이상의 항목이 있는 목록은 가상화하여 메모리 효율성 및 스크롤 성능 향상main-thread-budget- 60fps를 위해 프레임당 작업을 ~16ms 미만으로 유지; 무거운 작업은 메인 스레드에서 이동 (HIG, MD)progressive-loading- 1초 이상의 작업에는 긴 차단 스피너 대신 스켈레톤 화면/쉬머 사용 (Apple HIG)input-latency- 탭/스크롤에 대한 입력 지연 시간을 ~100ms 미만으로 유지 (Material 반응성 표준)tap-feedback-speed- 탭 후 100ms 이내에 시각적 피드백 제공 (Apple HIG)debounce-throttle- 고빈도 이벤트(스크롤, 리사이즈, 입력)에 디바운스/쓰로틀 사용offline-support- 오프라인 상태 메시지 및 기본 폴백 제공 (PWA / 모바일)network-fallback- 느린 네트워크를 위한 저하된 모드 제공 (저해상도 이미지, 적은 애니메이션)
4. 스타일 선택 (높음)
style-match- 제품 유형에 스타일 일치 (권장 사항은--design-system사용)consistency- 모든 페이지에서 동일한 스타일 사용no-emoji-icons- SVG 아이콘(Heroicons, Lucide) 사용, 이모지 사용 금지color-palette-from-product- 제품/산업에 맞는 팔레트 선택 (--domain color검색)effects-match-style- 그림자, 블러, 라운드가 선택한 스타일(글라스 / 플랫 / 클레이 등)에 맞춰 정렬platform-adaptive- 플랫폼 관용구 존중 (iOS HIG vs Material): 내비게이션, 컨트롤, 타이포그래피, 모션state-clarity- 호버/누름/비활성화 상태를 스타일을 유지하면서 시각적으로 구분 (Material 상태 레이어)elevation-consistent- 카드, 시트, 모달에 일관된 고도/그림자 척도 사용; 무작위 그림자 값 사용 금지dark-mode-pairing- 브랜드, 대비 및 스타일 일관성을 유지하기 위해 라이트/다크 변형을 함께 설계icon-style-consistent- 제품 전반에 걸쳐 하나의 아이콘 세트/시각적 언어(스트로크 두께, 코너 반경) 사용system-controls- 완전히 커스텀 컨트롤보다는 네이티브/시스템 컨트롤 선호; 브랜딩이 필요한 경우에만 커스터마이즈 (Apple HIG)blur-purpose- 블러는 배경 해제(모달, 시트)를 나타내는 데 사용, 장식용으로 사용 금지 (Apple HIG)primary-action- 각 화면에는 하나의 기본 CTA만 있어야 함; 보조 작업은 시각적으로 하위에 배치 (Apple HIG)
5. 레이아웃 및 반응형 (높음)
viewport-meta- width=device-width initial-scale=1 (확대 비활성화 금지)mobile-first- 모바일 우선 설계 후 태블릿 및 데스크톱으로 확장breakpoint-consistency- 체계적인 중단점 사용 (예: 375 / 768 / 1024 / 1440)readable-font-size- 모바일에서 본문 텍스트 최소 16px (iOS 자동 확대 방지)line-length-control- 모바일 줄당 35–60자; 데스크톱 60–75자horizontal-scroll- 모바일에서 가로 스크롤 금지; 콘텐츠가 뷰포트 너비에 맞는지 확인spacing-scale- 4pt/8dp 증분 간격 시스템 사용 (Material Design)touch-density- 컴포넌트 간격을 터치에 편안하게 유지: 너무 좁거나 오탭을 유발하지 않도록container-width- 데스크톱에서 일관된 최대 너비 (max-w-6xl / 7xl)z-index-management- 계층화된 z-index 척도 정의 (예: 0 / 10 / 20 / 40 / 100 / 1000)fixed-element-offset- 고정 navbar/하단 바는 기본 콘텐츠에 안전한 패딩을 예약해야 함scroll-behavior- 기본 스크롤 경험을 방해하는 중첩 스크롤 영역 방지viewport-units- 모바일에서 100vh보다 min-h-dvh 선호orientation-support- 가로 모드에서 레이아웃을 읽기 쉽고 작동 가능하게 유지content-priority- 모바일에서 핵심 콘텐츠를 먼저 표시; 보조 콘텐츠는 접거나 숨김visual-hierarchy- 크기, 간격, 대비를 통해 계층 구조 구축 — 색상만으로는 안 됨compact-label-overflow- 의미론에 따라 배지, 상태 태그, 필터 칩 또는 제거 가능한 값 선택; 필수 레이블을 항상 사용 가능하게 유지하고 포인터 및 키보드 사용자에게 불가피한 잘림을 공개chip-collection-reflow- 레이블을 줄이기 전에 컬렉션을 줄바꿈;+n오버플로 요약을 값을 숨기는 대신 작동 가능한 공개 요소로 만듦
6. 타이포그래피 및 색상 (중간)
line-height- 본문 텍스트에 1.5-1.75 사용line-length- 줄당 65-75자로 제한font-pairing- 제목/본문 글꼴 개성 일치font-scale- 일관된 유형 척도 (예: 12 14 16 18 24 32)contrast-readability- 밝은 배경에 더 어두운 텍스트 (예: 흰색 위 slate-900)text-styles-system- 플랫폼 유형 시스템 사용: iOS 11 Dynamic Type 스타일 / Material 5가지 유형 역할 (display, headline, title, body, label) (HIG, MD)weight-hierarchy- font-weight를 사용하여 계층 구조 강화: 굵은 제목(600–700), 일반 본문(400), 중간 레이블(500) (MD)color-semantic- 컴포넌트에서 원시 hex 값 대신 의미론적 색상 토큰(primary, secondary, error, surface, on-surface) 정의 (Material 색상 시스템)color-dark-mode- 다크 모드는 채도가 낮은/더 밝은 색조 변형 사용, 반전된 색상 사용 금지; 대비를 별도로 테스트 (HIG, MD)color-accessible-pairs- 전경/배경 쌍은 4.5:1 (AA) 또는 7:1 (AAA)을 충족해야 함; 도구를 사용하여 확인 (WCAG, MD)color-not-decorative-only- 기능적 색상(오류 빨간색, 성공 녹색)에는 아이콘/텍스트 포함; 색상만으로 의미 전달 금지 (HIG, MD)truncation-strategy- 잘림보다는 줄바꿈 선호; 잘라야 할 경우 생략 부호를 사용하고 툴팁/확장을 통해 전체 텍스트 제공 (Apple HIG)letter-spacing- 플랫폼별 기본 자간 존중; 본문 텍스트에 좁은 자간 사용 금지 (HIG, MD)number-tabular- 데이터 열, 가격 및 표에 탭 모양/고정폭 숫자 사용