UI UX Improve

UI/UX 개선 조사 커맨드

사용자 입력

$ARGUMENTS

사용자 입력에서 파싱:

• 집중 영역: 개선할 특정 컴포넌트, 페이지, 기능 (선택)
• 모드: research (기본) 또는 implement (즉시 실행)
• 범위: full (전체 앱) 또는 targeted (특정 영역)

비어있으면 research 모드로 전체 애플리케이션 분석.

개요

이 커맨드는 AI 기반 UI/UX 분석과 실시간 트렌드 조사를 결합하여 실행 가능한 개선 권장사항을 생성합니다.

주요 기능

• 🎨 UI/UX 디자이너 에이전트: ui-ux-designer 에이전트를 통한 전문 분석
• 🛠️ 기술 스택 어드바이저 에이전트: tech-stack-advisor 에이전트를 통한 라이브러리/프레임워크 권장
• 🔍 트렌드 조사: 웹 검색으로 현재 UI/UX 트렌드 (2024-2025)
• 📊 갭 분석: 현재 상태 vs 모범 사례 비교
• 📝 실행 가능한 보고서: 마크다운으로 개선 로드맵 생성
• 🚀 선택적 구현: 요청 시 개선사항 즉시 실행

실행 단계

1. 컨텍스트 수집

프로젝트 구조 분석

프론트엔드 프레임워크 감지:

• package.json에서 확인: React, Next.js, Vue, Svelte, Angular
• 스타일링 방식 파악: Tailwind, CSS Modules, styled-components, CSS-in-JS
• 컴포넌트 라이브러리 확인: shadcn/ui, MUI, Chakra, Radix

UI 컴포넌트 탐색:

• Glob으로 컴포넌트 파일 찾기 (**/*.tsx, **/components/**/*)
• 레이아웃 컴포넌트 식별 (Header, Footer, Sidebar, Navigation)
• 페이지 구조 및 라우팅 매핑

현재 디자인 시스템 분석:

• 색상 팔레트 (CSS 변수, 테마 설정)
• 타이포그래피 (폰트, 크기, 굵기)
• 간격 및 레이아웃 패턴
• 컴포넌트 일관성

2. UI/UX 디자이너 에이전트 호출

필수: Task 도구로 subagent_type: "ui-ux-designer" 호출하여 수행:

• 사용자 경험 평가
• 접근성 평가 (WCAG 가이드라인)
• 정보 구조 검토
• 컴포넌트 사용성 분석
• 모바일 반응형 점검

3. 기술 스택 어드바이저 에이전트 호출

필수: Task 도구로 subagent_type: "tech-stack-advisor" 호출 시점:

• 새로운 UI 컴포넌트 라이브러리 권장 시
• 애니메이션/인터랙션 라이브러리 평가 시
• 스타일링 솔루션 비교 시
• 접근성 도구 제안 시
• UI용 상태 관리 권장 시

4. 트렌드 조사 (웹 검색)

검색 쿼리 (WebSearch 도구 사용):

1. "UI/UX trends 2025" best practices
2. "{프레임워크} UI design patterns 2025"
3. "modern web design trends" accessibility
4. "{컴포넌트 유형} UX best practices" (특정 집중 영역이 있는 경우)
5. "best {라이브러리 유형} library 2025"

수집할 정보:

• 현재 디자인 트렌드 (마이크로 인터랙션, 글래스모피즘 등)
• 접근성 개선사항
• 성능 최적화 패턴
• 사용자 참여 기법
• 모바일 우선 전략
• 신흥 UI 라이브러리 및 도구
• 번들 크기 최적화 기법

5. 갭 분석

비교 및 식별:

• 현재 디자인 vs 트렌드 권장사항
• 누락된 접근성 기능
• 현대화가 필요한 구식 패턴
• 빠른 개선 vs 대규모 리팩토링
• 영향/노력 비율 기반 우선순위
• 필요한 라이브러리/도구 업그레이드 또는 추가

6. 보고서 생성

생성: 프로젝트 루트에 UI-UX-IMPROVEMENTS.md

핵심 규칙

✅ 해야 할 것

• ui-ux-designer 에이전트 반드시 호출 (전문 분석)
• tech-stack-advisor 에이전트 반드시 호출 (라이브러리/도구 권장)
• 웹 검색 수행 (현재 트렌드 및 라이브러리 비교)
• 실제 프로젝트 코드 분석 (가정이 아닌)
• 권장사항에 구체적 파일 경로 포함
• 각 권장사항에 노력 추정 포함
• 라이브러리 권장 시 번들 크기 영향 평가
• 프로젝트 루트에 보고서 생성 (UI-UX-IMPROVEMENTS.md)
• 모든 권장사항에서 접근성 고려
• 영향/노력 비율로 우선순위 지정

❌ 하지 말아야 할 것

• ui-ux-designer 또는 tech-stack-advisor 에이전트 호출 건너뛰기
• 코드 분석 없이 권장사항 제시
• 마이그레이션 경로 없이 브레이킹 체인지 제안
• 모바일/반응형 고려 무시
• 프로젝트 제약과 충돌하는 트렌드 권장
• 사용자 확인 없이 구현 (implement 모드에서)
• 모호하거나 실행 불가능한 권장사항 생성
• 번들 크기 고려 없이 라이브러리 권장
• 안정성 점수 6/10 미만인 라이브러리 제안

🎯 품질 기준

각 권장사항에 포함되어야 할 것:

1. 명확한 문제 설명: 무엇이 잘못됐고 왜 중요한가
2. 구체적 해결책: 해당 시 코드 예제와 함께 수정 방법
3. 사용자 영향: 사용자 경험이 어떻게 개선되는가
4. 노력 추정: 구현 복잡도 (낮음/중간/높음)
5. 파일 참조: 어떤 파일이 변경되어야 하는가

완료 보고

실행 후 요약 제공:

## UI/UX 개선 조사 완료

### 📊 분석 요약

- **분석된 컴포넌트**: {X}개
- **검토된 페이지**: {Y}개
- **조사된 트렌드**: {Z}개
- **평가된 라이브러리**: {W}개

### 🎯 권장사항

- **최우선**: {N}개
- **높음**: {M}개
- **중간**: {K}개

### 📄 생성된 보고서

프로젝트 루트에 `UI-UX-IMPROVEMENTS.md` 생성됨.

### 다음 단계

{모드에 따라}:

- **Research 모드**: 권장사항 검토 후 `implement`로 실행
- **Implement 모드**: {X}개 개선 적용됨, {Y}개 남음

실행

위 지침에 따라 UI/UX 개선 조사를 시작하세요.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.