# UI UX Improve > UI/UX 개선 조사 및 트렌드 분석으로 실행 가능한 권장사항 생성. 종합적인 UI/UX 분석 및 개선 제안이 필요할 때 사용. Use when this capability is needed. - Skill: `tomevault-io/ui-ux-improve-3` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/ui-ux-improve-3` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/ui-ux-improve-3/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/ui-ux-improve-3 --- # UI/UX 개선 조사 커맨드 ## 사용자 입력 ```text $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. **파일 참조**: 어떤 파일이 변경되어야 하는가 --- ## 완료 보고 실행 후 요약 제공: ```markdown ## 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](https://tomevault.io/claim/kubrickcode) — claim your Tome and manage your conversions.