Files

T

2026-06-10 12:49:53 +09:00

6.1 KiB

Raw Permalink Blame History

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개의 시각 방향을 비교하고 추천안을 제시합니다.
구현에 들어갈 때는 컴포넌트 단위 규칙과 페이지 단위 위계를 함께 설계합니다.
리뷰 작업이라면 문제를 단순 나열하지 말고, 우선순위와 수정 이유까지 설명합니다.

안티 패턴

정보 구조를 정하기 전에 시각 효과만 먼저 쌓는 방식
모든 화면을 같은 템플릿으로 찍어내는 방식
접근성 점검 없이 색상과 애니메이션만 조정하는 방식
컴포넌트 규칙 없이 페이지별 임시 스타일을 누적하는 방식

산출물 기준

이 스킬을 사용한 결과물은 다음을 만족해야 합니다.

보기 좋을 뿐 아니라 읽기 쉽고 사용하기 쉬워야 합니다.
단일 화면이 아니라 전체 시스템 관점에서 일관성이 있어야 합니다.
컴포넌트와 페이지의 관계가 명확해야 합니다.
접근성, 반응형, 상태 표현을 빠뜨리지 않아야 합니다.
색상, 폰트, 간격, 인터랙션이 의도적으로 선택되어야 합니다.

6.1 KiB Raw Permalink Blame History