UX 플레이북은(는) 무엇을 하나요?
훌륭한 인터페이스는 세 가지 요소가 함께 작용할 때 만들어집니다: 명확한 관점(누가, 어떤 작업, 어떤 느낌), 일관된 시스템(토큰 + 컴포넌트), 그리고 수백 개의 올바른 세부 사항(상태, 모션, 접근성, 카피). 이 플레이북은 각 부분을 담당하는 다양한 스킬들을 조율합니다.
모든 UI 작업을 위한 워크플로우
규모에 맞게 조정하세요: 버튼 하나 수정은 5~7단계만 필요하고, 새로운 앱은 모든 단계가 필요합니다.
- 브리핑 — 사용자는 누구인지, 수행할 작업(동사)은 무엇인지, 어떤 컨텍스트/디바이스인지, 어떤 느낌이어야 하는지(구체적인 단어) 파악합니다. 코드베이스와 요청으로부터 추론하고, 중요한 제약 조건(플랫폼, 기존 브랜드, 대상 사용자)을 알 수 없는 경우에만 한 가지 질문을 합니다.
- 방향 설정 — 코드를 작성하기 전에 미적 감각과 상호작용 특성을 선택합니다. 이 화면 유형에 대한 실제 참고 자료 2~4개를 살펴봅니다 (
ui-stack-advisor/references/inspiration.md). - 시스템 — 토큰과 DESIGN.md (
design-system-builder; 색상은color-theory활용). 기존 프로젝트인 경우? 시스템을 읽고 따르며 확장하고, 포크하지 마세요. - 스택 — 컴포넌트/모션 라이브러리 (
ui-stack-advisor). 접근 가능한 프리미티브를 사용하고, 다이얼로그, 메뉴, 콤보박스, 데이트 피커, 토스트는 직접 만들지 마세요. - 빌드 — 구조와 계층을 먼저(레이아웃, 타이포그래피, 간격) 잡고, 그다음 색상, 마지막으로 세부 사항을 추가합니다. 로렘 입숨이 아닌 실제 콘텐츠를 사용합니다. 모든 상태: 로딩, 빈 상태, 오류, 부분 성공, 비활성화, 긴 콘텐츠.
- 모션 — 목적이 있는 경우에만 사용합니다(피드백, 연속성, 상태 변경); 모션 관련 스킬을 참조하세요.
- 보고 확인하기 — 렌더링(dev 서버 + Playwright/Chrome MCP/시뮬레이터)하고 실제 크기(390, 768, 1280+; 작은 폰, 태블릿)에서 확인하며, 두 테마, 키보드 전용, 200% 줌/최대 Dynamic Type도 확인합니다. 발견한 문제를 일괄 수정합니다.
- 리뷰 — 아래 출시 전 체크리스트 또는 리뷰 스킬을 실행합니다.
어떤 작업에 어떤 스킬(라우팅)
| 필요 | 로드할 스킬 |
|---|---|
| 랜딩 페이지, 마케팅, 독특한 비주얼 디자인을 위한 미적 방향 | frontend-design |
| 지속적인 디자인 메모리가 있는 제품 UI(대시보드, SaaS, 관리자, 도구) | interface-design |
| 디자인 시스템, 토큰, 테마, 멀티 플랫폼 토큰, DESIGN.md | design-system-builder |
| 색상 선택/도출, 팔레트, 다크 모드 색상, 대비, 색맹 안전성 | color-theory (생성) · better-colors (감사) |
| 타이포그래피: 스케일, 줄바꿈, 글꼴 기능, 생략 | better-typography |
| 레이아웃: 그룹화, 정렬, 반응형, i18n 공간 | better-layout |
| 다듬기: 둥근 모서리, 그림자, 아이콘, 광학 정렬 | better-ui |
| 접근성 리뷰/수정 (WCAG 2.2) | better-accessibility |
| UX 카피, 레이블, 오류, 빈 상태 | better-writing |
| 위의 모든 항목에 대한 전체 화면 순위 리뷰 | better-interface · 브랜치/PR 리뷰: interface-review |
| 컴포넌트/애니메이션/위젯 라이브러리 선택 | ui-stack-advisor |
| 애니메이션 철학, 이징, 지속 시간, 스프링, 컴포넌트 느낌 | emil-design-eng |
| 웹 애니메이션 구축 | animate · 여러 요소 함께: choreograph |
| 버벅이는 애니메이션 리뷰/감사/수정 | review-animations · improve-animations · animation-performance |
| Apple 스타일의 부드러운 모션, 제스처, 머티리얼 (웹 또는 네이티브) | apple-design |
| 네이티브처럼 느껴지는 모바일 웹 (PWA, 터치, 100vh, safe areas) | mobile-native |
| React Native / Expo 디자인 및 리뷰 | mobile-design · 애니메이션: animate-expo · Expo 플러그인 스킬: expo-native-ui, expo-ui, expo-design-system, expo-animation, expo-router |
| shadcn/ui 세부 사항 | shadcn (Vercel 플러그인) |
| 컴포넌트 변형 / 상태 갤러리 / 스트레스 테스트 | variant · state-machine · break (사용자 호출) |
| 차트 및 대시보드 데이터 시각화 | dataviz |
| Figma ↔ 코드 | Figma MCP 스킬 (figma-design-to-code, figma-generate-library, …) |
충돌 규칙: 두 스킬이 의견이 다를 때는 프로젝트의 기존 DESIGN.md/시스템이 우선이고, 그다음 사용자의 브리핑, 마지막으로 더 구체적인 스킬(예: Expo 앱에서는 emil-design-eng보다 animate-expo)이 우선합니다. 하나의 작업에 여러 미적 방향 스킬을 중복해서 쌓지 마세요 — 하나만 선택하세요 (frontend-design 또는 interface-design).
표준 요약 참조
접근성 (WCAG 2.2 AA — 미국(ADA/508), EU(2025년 6월 발효된 유럽 접근성법) 등에서 법적 기준)
- 대비 4.5:1(텍스트), 3:1(큰 텍스트 및 UI 컴포넌트/의미 있는 그래픽)
- 모든 항목을 키보드로 조작 가능; 가시적 포커스(2.4.7)가 스티키 UI에 가려지지 않음(2.4.11); 논리적 순서
- 대상 크기 ≥ 24×24 CSS px (2.5.8) — 44×44로 디자인 권장
- 드래그에 단일 포인터 대안 제공(2.5.7)
- 모든 입력에 레이블, 텍스트로 오류 식별, 색상만으로 정보 전달 금지
- 텍스트 200%까지 크기 조정 / 320px 너비에서 가로 스크롤 없이 리플로우(1.4.10)
- reduced motion 설정 존중; 3/s 초과 깜빡임 금지; 5초 이상 자동 이동 콘텐츠는 일시 정지 가능
- 일관된 도움말 위치(3.2.6), 중복 입력 불필요(3.3.7), 인지 테스트 없는 접근 가능한 인증, 붙여넣기/비밀번호 관리자 허용(3.3.8)
- 시맨틱 HTML 우선; ARIA는 빈틈을 메울 때만 사용. 네이티브: 접근성 레이블/특성(iOS), contentDescription/의미(Android/Compose),
accessibilityLabel/accessibilityRole(RN)
플랫폼
- iOS (HIG): 44×44pt 대상, 최상위 탐색용 탭 바(≤5), 뒤로 스와이프 내비게이션 스택, detents가 있는 시트, SF Symbols, Dynamic Type, 시맨틱 색상, 컨트롤 레이어용 Liquid Glass(iOS 26+), 의미 있는 이벤트에 햅틱
- Android (Material 3 / Expressive): 48×48dp 대상, 너비 클래스별 내비게이션 바/레일/드로어, 예측 뒤로 가기, 인셋 포함 edge-to-edge, 동적 색상, M3 타입 스케일
- 세부 사항 및 차이점:
references/mobile-standards.md
성능 (Core Web Vitals, 75번째 백분위수): LCP ≤ 2.5초 · INP ≤ 200ms · CLS ≤ 0.1. 입력에 약 100ms 이내 응답; 400ms 초과(Doherty 임계값)에는 진행률 표시; 콘텐츠에는 스켈레톤, 액션에는 스피너; 안전한 경우 낙관적 UI. 모바일: 60/120fps, JS 스레드 유지(Reanimated worklets), 리스트 가상화.
UX 원칙: Nielsen의 10가지 휴리스틱 + UX 법칙(Fitts, Hick, Jakob, Miller/청킹, Tesler, Doherty, peak-end, 미적-사용성, Von Restorff, 게슈탈트). 폼, 내비게이션, 검색, 테이블, 온보딩, 빈/오류/로딩 상태, 알림, 설정, 파괴적 작업에 대한 패턴 가이드: references/ux-principles-and-patterns.md
윤리: 다크 패턴 금지(confirmshaming, roach-motel 취소, 사전 체크된 동의, 거짓 긴급성, 숨겨진 비용, 성가심). 점점 더 불법화되고 있으며(EU DSA/DMA, FTC click-to-cancel 규칙, GDPR 동의 규칙), 신뢰를 떨어뜨립니다.
출시 전 UI 체크리스트
- 각 화면의 목적이 5초 안에 명확하고, 뷰당 기본 액션 하나
- 계층 구조가 눈을 가늘게 뜨고 봤을 때 읽기 쉬움(크기/두께/대비, 색상만으로 판단 금지)
- 간격, 둥근 모서리, 타이포그래피, 색상이 토큰에서만 나오고, DESIGN.md와 일관됨
- 로딩, 빈 상태, 오류, 부분 성공, 오프라인, 긴 콘텐츠 상태가 디자인됨
- 폼: 레이블, 올바른 입력 타입/자동완성, 인라인 오류, 오류 시 입력 유지, 붙여넣기 차단 금지
- 키보드: 탭 순서, 가시적 포커스, Escape는 오버레이 닫기, 포커스가 트리거로 돌아옴
- 스크린 리더: 이름/역할/상태, 비동기 업데이트용 live regions, 제목 구조
- 두 테마에서 대비 측정 완료, 색상만으로 전달되는 정보 없음
- 320 / 390 / 768 / 1024 / 1440에서 반응형; 터치 대상 ≥ 44; hover 전용 기능 금지
- 모션은 목적이 있고, 300ms 이하, 중단 가능, reduced-motion 설정 존중
- 카피: 버튼에 구체적인 동사, 오류는 해결 방법 설명, 일관된 용어, i18n 준비(문자열 연결 금지, 30~40% 텍스트 공간 확보, RTL 안전 논리 속성)
- 성능: 이미지 크기 조정/레이지, 폰트 사전 로드/스왑, 레이아웃 시프트 없음, 긴 리스트 가상화
- 렌더링 결과를 실제 크기 스크린샷으로 확인함(코드만으로 확인 금지)
전체 규칙 세트를 사용한 웹 코드 감사(포커스, 폼, 애니메이션, 타이포그래피, 콘텐츠, 이미지, 성능, 내비게이션, 터치, 테마, i18n, 하이드레이션, 카피, 안티패턴): references/web-interface-guidelines.md를 읽고 file:line - issue 형식으로 보고합니다.
참고 자료
references/web-interface-guidelines.md— Vercel의 Web Interface Guidelines(벤더 제공, MIT 라이선스) 코드 감사용references/ux-principles-and-patterns.md— 휴리스틱, UX 법칙, 패턴 수준의 모범 사례references/mobile-standards.md— iOS HIG + Material 3 필수 요소 및 플랫폼 차이점references/arsenal.md— 설치된 모든 UI 스킬: 출처, 라이선스, 용도, 업데이트 방법; 선택적 추가 기능