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