117 lines
6.1 KiB
Markdown
117 lines
6.1 KiB
Markdown
---
|
|
name: "ui-ux-pro-max"
|
|
description: "웹과 모바일 전반의 UI/UX 설계 지능을 제공합니다. 새 페이지 설계, 컴포넌트 리팩터링, 디자인 시스템, 접근성, 상호작용 품질 점검이 필요할 때 호출합니다."
|
|
---
|
|
|
|
# UI/UX Pro Max
|
|
|
|
웹과 모바일 애플리케이션을 위한 종합 UI/UX 설계 가이드입니다. 다양한 스타일, 색상 팔레트, 폰트 조합, 제품 유형별 추천, UX 가이드라인, 차트 유형 관점을 바탕으로 더 완성도 높은 인터페이스를 설계하도록 돕습니다.
|
|
|
|
## 언제 적용할지
|
|
|
|
다음과 같은 작업에서는 이 스킬을 우선 사용합니다.
|
|
|
|
- 새 페이지를 설계할 때
|
|
- 버튼, 모달, 폼, 테이블, 차트 같은 UI 컴포넌트를 만들거나 리팩터링할 때
|
|
- 색상 체계, 타이포그래피, 간격, 레이아웃 시스템을 정할 때
|
|
- UI 코드의 사용성, 접근성, 시각 일관성을 검토할 때
|
|
- 내비게이션, 애니메이션, 반응형 동작을 설계할 때
|
|
- 제품 수준의 스타일, 정보 위계, 브랜드 표현을 결정할 때
|
|
- 인터페이스의 명확성, 품질감, 사용성을 개선할 때
|
|
|
|
## 반드시 사용할 상황
|
|
|
|
아래 상황에서는 이 스킬 사용을 기본값으로 둡니다.
|
|
|
|
- 랜딩 페이지, 대시보드, 어드민, SaaS, 모바일 앱 등 새 화면 구조를 만들 때
|
|
- 버튼, 모달, 폼, 테이블, 차트 같은 핵심 컴포넌트를 설계 또는 개편할 때
|
|
- 색상 체계와 타이포그래피 시스템을 결정할 때
|
|
- 접근성, 상호작용 품질, 시각 일관성 리뷰를 수행할 때
|
|
- 반응형 레이아웃과 내비게이션 구조를 정할 때
|
|
|
|
다음 경우에는 보조적으로 권장됩니다.
|
|
|
|
- UI가 "어딘가 덜 프로페셔널해 보이는데 이유가 분명하지 않을 때"
|
|
- 사용성 피드백을 받았을 때
|
|
- 출시 전 UI 품질을 정리할 때
|
|
- 웹, iOS, Android 간 디자인 정렬이 필요할 때
|
|
- 디자인 시스템 또는 재사용 가능한 컴포넌트 라이브러리를 만들 때
|
|
|
|
## 권장 상황
|
|
|
|
- UI가 덜 프로페셔널해 보이지만 원인이 명확하지 않을 때
|
|
- 제품 피드백에서 "불편하다", "헷갈린다"는 의견이 반복될 때
|
|
- 출시 직전 품질 점검에서 디자인 완성도를 끌어올려야 할 때
|
|
|
|
## 불필요한 상황
|
|
|
|
아래 작업에서는 일반적으로 이 스킬이 우선순위가 아닙니다.
|
|
|
|
- 순수 백엔드 로직만 다루는 작업
|
|
- API 계약, DB 스키마 설계만 다루는 작업
|
|
- UI와 무관한 인프라/DevOps 작업
|
|
- 시각 요소가 없는 자동화 스크립트 작업
|
|
|
|
다음 작업에는 일반적으로 필요하지 않습니다.
|
|
|
|
- 순수 백엔드 로직 개발
|
|
- API 또는 데이터베이스 설계만 하는 작업
|
|
- 인터페이스와 무관한 성능 최적화
|
|
- 인프라, DevOps, 비시각 자동화 작업
|
|
|
|
판단 기준은 단순합니다. 작업이 기능이 **어떻게 보이고, 느껴지고, 움직이고, 상호작용되는지**를 바꾼다면 이 스킬을 사용합니다.
|
|
|
|
## 핵심 원칙
|
|
|
|
- 접근성을 최우선으로 봅니다. 대비, 키보드 탐색, 레이블, 상태 표현을 먼저 확인합니다.
|
|
- 시각적 품질보다 정보 구조와 사용 흐름을 먼저 정리합니다.
|
|
- 제품 맥락에 맞는 스타일을 선택하고, 유행하는 패턴을 무조건 복제하지 않습니다.
|
|
- 타이포그래피, 색상, 간격, 그림자, 애니메이션, 반응형 규칙을 시스템으로 다룹니다.
|
|
- 웹과 모바일을 포함한 여러 플랫폼 간 일관성을 유지하되, 플랫폼 고유 상호작용은 존중합니다.
|
|
- 차트나 데이터 시각화는 미적인 취향보다 데이터 전달 목적에 맞게 선택합니다.
|
|
|
|
## 우선순위별 검토 항목
|
|
|
|
1. **접근성** - 대비, 포커스, 라벨, 키보드 접근성, 보조기기 친화성
|
|
2. **상호작용 품질** - 클릭 영역, 터치 친화성, 상태 변화, 피드백
|
|
3. **정보 위계** - 가장 중요한 내용이 첫눈에 보이는지 확인
|
|
4. **레이아웃 시스템** - 그리드, 여백, 정렬, 반응형 구조
|
|
5. **타이포그래피** - 역할이 명확한 글자 크기, 무게, 줄 간격, 폰트 조합
|
|
6. **색상 시스템** - 브랜드 적합성, 상태 색, 강조 규칙, 다크/라이트 확장성
|
|
7. **모션과 전환** - 의미 있는 움직임만 남기고 산만한 효과는 제거
|
|
8. **시각 디테일** - 경계선, 그림자, 반경, 배경 질감, 컴포넌트 완성도
|
|
|
|
## 워크플로
|
|
|
|
1. 제품 유형과 목표 사용자, 핵심 과업을 정의합니다.
|
|
2. 정보 위계와 화면 구조를 먼저 설계합니다.
|
|
3. 스타일 방향, 색상 전략, 타이포그래피 전략을 정합니다.
|
|
4. 컴포넌트와 페이지를 같은 시스템 규칙으로 맞춥니다.
|
|
5. 접근성, 반응형, 상태 표현, 상호작용 완성도를 점검합니다.
|
|
6. 필요한 경우 리뷰 결과를 우선순위별로 정리해 개선합니다.
|
|
|
|
## 작업 방식
|
|
|
|
- 먼저 제품 유형과 대상 사용자, 핵심 화면 목적을 확인합니다.
|
|
- 그 다음 스타일 방향, 컬러 전략, 타이포그래피 방향, 레이아웃 전략을 제안합니다.
|
|
- 필요한 경우 2~3개의 시각 방향을 비교하고 추천안을 제시합니다.
|
|
- 구현에 들어갈 때는 컴포넌트 단위 규칙과 페이지 단위 위계를 함께 설계합니다.
|
|
- 리뷰 작업이라면 문제를 단순 나열하지 말고, 우선순위와 수정 이유까지 설명합니다.
|
|
|
|
## 안티 패턴
|
|
|
|
- 정보 구조를 정하기 전에 시각 효과만 먼저 쌓는 방식
|
|
- 모든 화면을 같은 템플릿으로 찍어내는 방식
|
|
- 접근성 점검 없이 색상과 애니메이션만 조정하는 방식
|
|
- 컴포넌트 규칙 없이 페이지별 임시 스타일을 누적하는 방식
|
|
|
|
## 산출물 기준
|
|
|
|
이 스킬을 사용한 결과물은 다음을 만족해야 합니다.
|
|
|
|
- 보기 좋을 뿐 아니라 읽기 쉽고 사용하기 쉬워야 합니다.
|
|
- 단일 화면이 아니라 전체 시스템 관점에서 일관성이 있어야 합니다.
|
|
- 컴포넌트와 페이지의 관계가 명확해야 합니다.
|
|
- 접근성, 반응형, 상태 표현을 빠뜨리지 않아야 합니다.
|
|
- 색상, 폰트, 간격, 인터랙션이 의도적으로 선택되어야 합니다.
|