/uiux-upgrade

description: "내 서비스의 UI/UX를 분석하고, 직접 개선해줘요."
allowed-tools:
  - Read
  - Edit
  - Write
  - Glob
  - Grep
  - Bash
  - WebSearch
  - WebFetch
  - AskUserQuestion
user-invocable: true

uiux-upgrade: UI/UX 개선 실행

내 프로젝트의 UI/UX를 분석하고, 발견된 문제를 직접 코드로 고쳐주는 커맨드예요.

모든 출력은 **한국어(토스체)**로 작성해요.

---

Step 1: 프로젝트 스캔

먼저 프로젝트 구조를 파악하세요:

1. `src/app/` — 페이지 라우트 구조 2. `src/components/` — 컴포넌트 구조 3. `src/app/globals.css` 또는 `tailwind.config.*` — 스타일 시스템 4. `package.json` — UI 관련 의존성 (DaisyUI, Radix, Framer Motion 등)

---

Step 2: UI/UX 감사 (8개 카테고리)

2-1. 다크/라이트 모드 호환성

• 하드코딩된 색상 검색: `text-white`, `text-black`, `bg-black`, `bg-white`, `bg-zinc-*`, `bg-gray-*`
• DaisyUI 시맨틱 토큰으로 변환 필요한 곳 식별
• CSS 변수 충돌 검사 (`:root` vs `[data-theme]` 우선순위)

2-2. 반응형 디자인

• 모바일 브레이크포인트 누락 확인 (`sm:`, `md:`, `lg:`)
• 터치 타겟 크기 (최소 44x44px)
• 모바일에서 가로 스크롤 발생하는 요소
• 텍스트 오버플로우 (`truncate`, `line-clamp` 누락)

2-3. 접근성 (a11y)

• `alt` 속성 누락된 이미지
• 색상 대비 부족 (특히 `text-base-content/40` 이하)
• `aria-label` 없는 인터랙티브 요소
• 키보드 네비게이션 가능 여부

2-4. 로딩 상태

• `loading.tsx` 또는 Skeleton 누락된 페이지
• 버튼 클릭 후 피드백 없는 곳
• 이미지 레이지 로딩 누락

2-5. 폼 UX

• 유효성 검사 피드백 (에러 메시지 위치, 색상)
• 포커스 상태 스타일링
• 자동완성 / 자동 포커스 설정

2-6. 네비게이션 일관성

• 활성 페이지 표시 (active state)
• 뒤로 가기 동작
• 브레드크럼 누락

2-7. 타이포그래피 & 간격

• 제목 크기 계층 (`text-4xl` > `text-2xl` > `text-xl`)
• 줄 간격 (`leading-*`)
• 섹션 간 간격 일관성

2-8. 애니메이션 & 전환

• 페이지 전환 효과 유무
• 호버 상태 누락
• 과도한 애니메이션 (성능 영향)

---

Step 3: 문제 분류 및 우선순위

발견된 문제를 분류하세요:

| 우선순위 | 기준 | 예시 | |---------|------|------| | P0 (긴급) | 사용 불가 또는 심각한 UX 결함 | 다크모드에서 글자 안 보임, 모바일에서 터치 안 됨 | | P1 (높음) | 사용자 이탈에 영향 | 로딩 상태 없음, CTA 잘 안 보임, 폼 에러 피드백 없음 | | P2 (보통) | 불편하지만 사용 가능 | 간격 불일관, 호버 상태 없음, 접근성 미흡 | | P3 (낮음) | 있으면 좋은 개선 | 애니메이션 추가, 마이크로 인터랙션 |

---

Step 4: 자동 수정

사용자에게 확인 후 수정을 진행하세요:

> {N}개 문제를 발견했어요. P0 {x}개, P1 {y}개, P2 {z}개, P3 {w}개 > > 어떤 범위까지 수정할까요? > - **P0만** — 긴급한 것만 빠르게 > - **P0 + P1** — 중요한 것까지 (추천) > - **전부** — 다 고칠게요

수정 시 규칙:

• **하드코딩 색상 → DaisyUI 시맨틱 토큰** (예: `text-white` → `text-base-content`)
• **반응형 누락 → 모바일 퍼스트 브레이크포인트 추가**
• **로딩 상태 → DaisyUI skeleton 또는 loading 컴포넌트 추가**
• **접근성 → aria 속성, alt 텍스트 추가**
• 기존 코드 스타일과 일관되게 수정
• 수정할 때 관련 없는 코드는 건드리지 않기

---

Step 5: 수정 리포트

모든 수정이 끝나면 요약을 보여주세요:

UI/UX 개선 완료!

수정한 파일: {N}개
- P0: {x}건 수정
- P1: {y}건 수정
- P2: {z}건 수정

주요 변경:
- {파일명}: {변경 내용 한 줄 요약}
- ...

남은 작업 (수동 확인 필요):
- ...

---

톤 & 스타일 가이드

• **언어**: 한국어 (기술 용어는 영어 병기)
• **문체**: 토스체
• 수정 전에 반드시 사용자 확인
• 한 번에 너무 많이 바꾸지 않기 — 단계적으로