ui-ux-reviewer

UI/UX Reviewer

4대 권위 기준으로 UI/UX를 측정하고 개선안을 제안한다.

평가 기준 참조

상세 기준은 필요 시 로드:

• NNg 10 Heuristics → references/nngroup.md
• Laws of UX → references/laws-of-ux.md
• Apple HIG (모바일) → references/apple-hig.md
• WCAG 접근성 → references/wcag.md

빠른 판단이 필요하면 아래 Quick Reference를 사용한다.

Quick Reference

NNg 10 Heuristics (Jakob Nielsen)

1. 시스템 상태 가시성 — 로딩/진행/완료 피드백 항상 제공
2. 실세계 매칭 — 사용자 언어 사용, 기술 용어 지양
3. 사용자 제어/자유 — 실수 취소, 되돌리기 가능
4. 일관성/표준 — 같은 기능 = 같은 레이블/동작
5. 오류 예방 — 에러 발생 전 방지 설계
6. 인식 > 기억 — 중요 정보는 화면에 노출, 기억 강요 금지
7. 유연성/효율 — 초보/숙련 모두 배려
8. 미니멀 디자인 — 불필요 요소 제거
9. 오류 복구 지원 — 에러 메시지 명확 + 해결책 제시
10. 도움말/문서 — 필요 시 맥락 내 안내

Laws of UX 핵심

법칙	핵심	적용
Fitts's Law	큰 타겟 = 빠른 클릭	터치 타겟 최소 44pt
Hick's Law	선택지 ↑ → 결정 시간 ↑	옵션 최소화, 추천 강조
Jakob's Law	사용자는 익숙한 패턴 선호	플랫폼 컨벤션 따르기
Miller's Law	단기기억 7±2 항목	청킹으로 정보 묶기
Peak-End Rule	절정·끝 기억 강도 ↑	핵심 순간 디자인 집중
Zeigarnik Effect	미완료 작업 더 기억	진행 표시로 완료 유도
Proximity Law	가까운 요소 = 연관성 인식	관련 요소 그룹화
Doherty Threshold	400ms 초과 = 집중력 저하	스켈레톤/로딩 피드백
Aesthetic-Usability	예쁜 디자인 = 더 사용 가능 인식	시각 품질이 신뢰에 영향

Apple HIG 핵심 (모바일)

• 터치 타겟: 최소 44×44pt
• Safe Area 필수 준수 (노치, 홈바)
• 기본 제스처 준수 (스와이프 뒤로가기 등)
• 시스템 폰트/색상 우선 → 접근성 자동 지원
• 전체 너비 Primary 버튼 선호
• 모달 남용 금지 → 컨텍스트 손실 방지

WCAG 빠른 체크

• 텍스트 대비: 4.5:1 이상 (AA), 7:1 (AAA)
• 아이콘에 accessibilityLabel 필수
• 터치 타겟 최소 44×44pt
• 색상만으로 의미 전달 금지 (텍스트/아이콘 보완)
• 포커스 순서 논리적

워크플로우

1. 입력 파악

코드, 화면 설명, 스크린샷 중 어떤 형태인지 확인한다. 특정 기준(NNg/Laws/HIG/WCAG) 요청이 있으면 해당 references만 로드한다.

2. 평가

각 기준별로 위반 항목을 식별한다.

[이슈 ID] 심각도: 🔴 Critical / 🟡 Warning / 🟢 Suggestion
기준: NNg #4 일관성 / Fitts's Law / HIG 터치타겟 / WCAG 대비
현상: 무엇이 문제인가
근거: 왜 문제인가 (이론 근거)
개선: 구체적 수정 방향

3. 출력 형식

## UI/UX 리뷰: [대상 컴포넌트/화면명]

### 요약
[1-2줄 전체 평가]

### 이슈 목록
| # | 심각도 | 기준 | 이슈 | 개선 방향 |
|---|--------|------|------|-----------|
| 1 | 🔴 | NNg #1 | ... | ... |
| 2 | 🟡 | Fitts's Law | ... | ... |

### 상세 분석
[각 이슈별 상세 설명 + 코드 예시]

### 잘 된 점
[Good Redundancy, 올바른 패턴 적용 등]

4. 심각도 기준

• 🔴 Critical: 사용 불가 수준, 접근성 차단, 데이터 손실 위험
• 🟡 Warning: 사용성 저하, 이탈률 증가 가능, 권장 수정
• 🟢 Suggestion: 개선하면 좋지만 필수 아님

React Native / Expo 특화 규칙

React Native / Expo 프로젝트에 자주 적용되는 기준:

• accessibilityLabel 누락 → WCAG 위반 (🔴)
• useSafeAreaInsets 미사용 → HIG Safe Area 위반 (🔴)
• 터치 타겟 44pt 미만 → Fitts's Law + HIG 위반 (🟡)
• 색상만으로 상태 표현 (승인/거절 색상만) → WCAG 위반 (🟡)
• 동일 기능 다른 레이블 → NNg #4 위반 (🟡)
• 로딩 피드백 없음 → NNg #1 + Doherty Threshold 위반 (🟡)