UI 미학
의도
이 스킬은 웹 UI 결과물을 더 전문적이고 안정적이며 프로덕트 수준으로 만드는 데 사용됩니다.
기본 목표:
- 사용자가 요청한 아티팩트 범위와 콘텐츠 풋프린트를 유지합니다.
- 장식을 추가하기 전에 균형 잡힌 구성을 만듭니다.
- 계층 구조를 한눈에 읽을 수 있게 만듭니다.
- 색상을 절제하되 고급스러워 보이게 유지합니다.
- 그림자, 블러, 글로우, 하이라이트는 깊이를 명확히 할 때만 사용합니다.
- 모션을 짧고, 부드럽고, 유용하게 유지합니다.
- 컴포넌트가 스타일링되기 전에 정밀하게 느껴지도록 만듭니다.
- 상태, 모션, 깊이를 하나의 일관된 시스템 안에 유지합니다.
이 스킬은 프레임워크에 구애받지 않습니다. 페이지 구성뿐만 아니라 컴포넌트 정밀도, 상태 동작, 모션 문법, 깊이 규율도 판단하세요. 디자인 판단을 먼저 하고, 그다음 구현하세요.
작업 경로
작업을 수행하기 전에 요청을 분류하세요:
- 생성 사용자가 새 페이지, 섹션 또는 컴포넌트를 원할 때 사용합니다.
- 검토 사용자가 비평, 분석 또는 UI가 약해 보이는 이유에 대한 진단을 원할 때 사용합니다.
- 리팩토링 사용자가 기존 구현을 직접 다시 작성하기를 원할 때 사용합니다.
- 컴포넌트 폴리싱 구조는 괜찮지만 컨트롤, 카드, 테이블, 모달 또는 오버레이가 여전히 평범하거나 싸게 느껴질 때 사용합니다.
- 상태 / 모션 정제 호버, 포커스, 프레스, 선택됨, 로딩, 성공, 오류 또는 전환이 시끄럽거나, 약하거나, 극적으로 느껴질 때 사용합니다.
- 깊이 / 조명 정제 그림자, 하이라이트, 글로우, 블러 또는 다크 모드 분리가 더 엄격한 규율을 필요로 할 때 사용합니다.
요청이 검토와 리팩토링을 혼합한 경우, 먼저 진단한 후 편집하기 전에 리라이트 깊이를 선택하세요.
불가침 규칙
- 요청된 범위를 정확히 준수합니다. 컴포넌트는 컴포넌트로, 카드 세트는 경계가 있는 모듈로, 섹션은 섹션으로, 페이지는 요청된 경우에만 페이지로 남습니다.
- 구현을 건드리기 전에 시각적 테제를 결정합니다.
- 스타일링 전에 아티팩트 유형을 고정합니다. 카드, 위젯, 모달, 패널 또는 섹션 프롬프트를 전체 랜딩 페이지나 대시보드로 바꾸지 마세요.
- 레이아웃, 간격, 타입 계층 구조가 품질의 대부분을 담당하게 합니다.
- 간격이 관계를 전달할 수 있을 때마다 기본 프레이밍보다 공간적 그룹화를 선호합니다.
- '프리미엄'을 시각적 소음이 아닌 절제, 일관성, 정밀성으로 취급합니다.
- 더 적은 컨테이너, 더 적은 악센트, 더 적은 동시 아이디어를 사용합니다.
- 요청된 아티팩트가 페이지인 경우, 작은 중앙 캔버스보다 전체 뷰포트를 채우는 구성을 기본값으로 사용합니다.
- 플랫폼, 마켓플레이스, 이커머스 또는 포털 스타일 페이지의 경우 전체 너비 페이지 뼈대를 기본값으로 사용하고 전체 경험을 하나의 중앙 패널에 가두는 대신 내부 콘텐츠를 의도적으로 제한합니다.
- 사용자의 정보 밀도와 카피 풋프린트를 유지하는 것을 기본값으로 합니다.
- 요청에 필요한 경우가 아니라면 히어로 카피, 마케팅 문단, 내비게이션, 푸터, 기능 섹션, 배지 또는 CTA 클러스터를 추가하지 마세요.
- 일반 카드는 간결하게 유지합니다. 강력한 라벨, 값, 간결한 보조 텍스트를 발명된 블러브보다 선호합니다.
- 기본 표면은 선명한 중성 또는 약간 차가운 중성을 선호합니다. 크림, 베이지, 아이보리 또는 따뜻한 오프 화이트를 자동 프리미엄 신호로 사용하지 마세요.
- 컴포넌트 폴리싱은 페이지 구성에 종속되도록 합니다.
- 관련 컨트롤을 하나의 기하학적 및 행동 시스템의 구성원으로 취급합니다.
- 기본 상태를 시각적으로 조용하게 유지합니다. 더 강한 강조는 인터랙션 및 의미 상태를 위해 아껴둡니다.
- 긴장감, 비대칭 또는 시각적 자극보다 균형 잡히고 안정적인 레이아웃을 선호합니다.
- 템플릿처럼 보이지 않기 위해 비대칭이나 과장된 대비를 도입하지 마세요.
- 지속적인 선택 상태와 일시적인 활성 또는 프레스 피드백을 구별합니다.
- 깊이가 레이어링, 재료 분리 또는 포커스를 설명할 때만 사용합니다.
- 글로우를 예외적인 것으로 취급하고 구조적인 것으로 취급하지 마세요.
- 모바일을 데스크톱을 쥐어짜는 형태가 아니라 재구성된 레이아웃으로 만듭니다.
- 결과물을 출시 가능하고 유지 관리 가능하게 유지합니다.
우선순위
작업이 명확히 다른 순서를 요구하지 않는 한 다음 순서로 작업하세요:
- 요청된 범위 및 아티팩트 경계
- 구성 및 구조적 균형
- 간격 리듬 및 정보 밀도
- 타이포그래피 및 카피 적합성
- 컴포넌트 장인정신
- 인터랙션 상태 및 동작
- 색상 시스템 및 의미적 절제
- 깊이 신호: 테두리, 그림자, 블러, 하이라이트
- 모션, 피드백 및 전환
그레이스케일로도 페이지가 여전히 실패한다면 구조가 아직 해결되지 않은 것입니다.
워크플로우
생성
- 요청된 아티팩트 유형과 하드 범위를 식별합니다: 단일 컴포넌트, 컴포넌트 세트, 섹션 또는 전체 페이지.
- 범위를 확장하는 대신 해당 범위 내에서 역할, 대상 및 밀도를 추론합니다.
- 원하는 인상을
차분한 제품 명료함,엔터프라이즈 폴리시, 또는조용한 정밀함과 같은 짧은 구문으로 이름을 지정합니다. - 마크업을 작성하기 전에 안정적인 기본 블록과 지원 모듈을 선택합니다.
- 요청이 카드나 컴포넌트인 경우, 명확하게 제시하는 데 필요한 최소한의 주변 캔버스만 사용합니다.
- 사용자가 콘텐츠 디자인을 요청하지 않는 한 카피 풋프린트를 유지합니다. 필요한 경우 문구를 간결하게 다듬되, 추가 설명 텍스트를 발명하지 마세요.
- 요청이 페이지인 경우, 좁은 중앙 슬래브로 띄우는 대신 외부 레이아웃이 기본적으로 뷰포트에 걸쳐 있도록 합니다.
- 플랫폼 또는 이커머스 페이지의 경우 먼저 페이지 뼈대를 확장합니다. 내비게이션, 히어로 프레이밍, 카테고리 레일, 캠페인 영역, 제품 스트림이 개별 모듈을 카드화하기 전에 뷰포트 전체에 걸쳐 숨 쉴 수 있게 합니다.
- 색상 로직을 정의합니다: 중성 먼저, 악센트는 그다음.
- 컴포넌트 메트릭, 상태 및 동작이 폴리싱을 추가하기 전에 시스템화된 느낌을 주도록 합니다.
- 정적 구성이 작동한 후에만 깊이와 모션을 추가합니다.
- 요청된 아티팩트가 실제로 데스크톱과 모바일 모두에 걸쳐 있을 때 데스크톱 및 모바일 동작을 명시적으로 만듭니다.
시각적 방향이 여전히 모호할 때 references/design-principles.md를 읽으세요.
팔레트가 시끄럽거나, 평면적이거나, 싸게 느껴질 때 references/color-system.md를 읽으세요.
요청이 컨트롤, 폼, 카드, 테이블 또는 오버레이에 집중되어 있을 때 references/component-aesthetics.md를 읽으세요.
호버, 포커스, 활성, 선택, 로딩, 성공 또는 오류 동작이 중요할 때 references/interaction-states.md를 읽으세요.
일반적인 모션 규율을 위해 references/motion-principles.md를 읽으세요.
전환, 호버 동작 또는 드러내기 모션이 더 많은 제어를 필요로 할 때 references/motion-patterns.md를 읽으세요.
그림자, 하이라이트, 글로우, 블러 또는 다크 모드 높이 로직이 더 엄격한 제어를 필요로 할 때 references/depth-lighting-system.md를 읽으세요.
사용자가 더 구체적인 시각적 개성을 요청할 때 references/style-archetypes.md를 읽으세요.
검토
- CSS 사소한 문제가 아니라 가장 큰 구조적 실패부터 시작하세요.
- 문제가 계층 구조, 밀도, 컴포넌트 품질, 상태 동작, 팔레트, 깊이 또는 모션 중 무엇인지 설명하세요.
- 각 발견 사항을 가독성, 신뢰, 초점 또는 행동 명확성과 연결하세요.
- 일반적인 취향 언어보다 직접적인 수정을 선호하세요.
references/review-rubric.md를 사용하여 발견 사항을 구조화하세요.
UI가 AI 생성되거나 피상적으로 프리미엄처럼 느껴질 때 references/anti-patterns.md를 사용하세요.
주요 약점이 팔레트 규율 또는 악센트 오용일 때 references/color-system.md를 사용하세요.
주요 약점이 컨트롤, 카드, 테이블 또는 오버레이 품질일 때 references/component-aesthetics.md를 사용하세요.
주요 약점이 호버, 포커스, 활성, 선택, 로딩 또는 오류 동작일 때 references/interaction-states.md를 사용하세요.
주요 약점이 애니메이션 품질, 타이밍 또는 피드백 동작일 때 references/motion-principles.md 및 references/motion-patterns.md를 사용하세요.
주요 약점이 그림자 헤이즈, 글로우 오용, 약한 레이어링 또는 다크 모드 깊이일 때 references/depth-lighting-system.md를 사용하세요.
리팩토링
가벼운 폴리싱,중간 규모 재구성, 또는전체 재구축중에서 선택하세요.- 컴포넌트 외관보다 레이아웃과 그룹화를 먼저 수정하세요.
- 계층 구조가 불명확할 때 약한 스타일링을 그레이스케일 구조로 되돌리세요.
- 폴리싱을 추가하기 전에 컴포넌트 메트릭과 상태 로직을 재구축하세요.
- 인터페이스가 여전히 필요로 하는 색상, 깊이 및 모션만 다시 도입하세요.
- 데스크톱 구조가 변환되지 않는 경우 모바일을 의도적으로 재구축하세요.
- 편집하기 전에 리라이트 수준, 핵심 실패 및 의도한 방향을 명시하세요.
광범위한 시각적 변경 전에 references/rewrite-playbook.md를 사용하세요.
광범위한 컨트롤 또는 오버레이 리라이트 전에 references/component-aesthetics.md를 사용하세요.
상태 전반의 동작을 변경하기 전에 references/interaction-states.md를 사용하세요.
시끄러운 팔레트를 다시 작성하기 전에 references/color-system.md를 사용하세요.
전환을 추가하거나 단순화하기 전에 references/motion-principles.md 및 references/motion-patterns.md를 사용하세요.
높이, 글로우 또는 하이라이트 로직을 추가하거나 제거하기 전에 references/depth-lighting-system.md를 사용하세요.
안티패턴 정책
다음에 의존하는 출력물을 거부하세요:
- 컴포넌트 요청을 전체 페이지, 대시보드 셸 또는 랜딩 레이아웃으로 바꾸는 범위 인플레이션
- 요청되지 않은 필러 설명, 배지, 통계 또는 CTA 블록을 추가하는 장식적 카피 인플레이션
- 콘텐츠 이유 없이 불필요하게 좁은 중앙 셸에 갇힌 페이지 수준 레이아웃
- 전체 너비 페이지 뼈대 대신 하나의 커다란 중앙 카드에 박힌 플랫폼 또는 이커머스 페이지
- 템플릿 같은 중앙 스택 히어로에 카드 그리드 레이아웃
- 긴장감을 만들기 위해 사용되는 불안정하거나 강제된 비대칭 레이아웃
- 명확한 읽기 순서가 없는 동등한 가중치의 모듈
- 너무 많은 표면, 스트로크, 필 및 반경
- '프리미엄'에 대한 기본 지름길로 사용되는 크림, 베이지, 아이보리 또는 따뜻한 오프 화이트 중성
- 불안정한 중성 위에 놓인 시끄러운 악센트 색상
- 이미 너무 많은 강조를 소비하는 기본 상태
- 인터랙션을 안무로 바꾸는 호버, 프레스 또는 드러내기 동작
- 클릭 피드백처럼 보이는 선택된 상태
- 정교함을 가장하기 위해 사용되는 글로우, 그림자, 블러 또는 그래디언트
- 인식을 안내하는 대신 자신에게 주의를 환기시키는 애니메이션
- 모든 것이 동시에 떠 있는 깊이 시스템
- 명확히 하기 전에 인상 주기 위해 설계된 강한 시각적 처리
- 단순히 열을 축소할 뿐 강조를 재구성하지 않는 모바일 레이아웃
결과물이 폴리싱되었지만 여전히 싸게 느껴질 때 references/anti-patterns.md를 읽으세요.
자체 비판
최종 출력 전에 다음을 확인하세요:
- 결과물이 사용자의 요청된 범위 내에 머물렀으며, 주위에 페이지를 발명하지 않았습니까?
- 첫 번째 읽기가 3초 안에 명확합니까?
- 레이아웃이 그래디언트와 그림자 없이도 여전히 신뢰할 수 있고 균형이 잘 잡혀 있습니까?
- 페이지인 경우, 구성이 기본적으로 화면 너비를 차지합니까?
- 플랫폼 또는 이커머스 페이지인 경우, 외부 뼈대가 뷰포트 전체에 펼쳐지고 내부 콘텐츠 영역만 제한됩니까?
- 카피가 작업이 허용하는 만큼 짧게 유지되었습니까? 특히 일반 카드에서?
- 중성 색상이 충분히 차분하고 일관되어 악센트 색상이 의미를 가질 수 있습니까?
- 팔레트가 콘텐츠 이유 없이 크리미하거나 따뜻한 흰색의 럭셔리 큐를 기본값으로 사용하지 않았습니까?
- 관련 컨트롤이 호환 가능한 높이, 패딩 로직 및 반경 규율을 공유합니까?
- 기본 상태가 포커스, 활성 및 오류 상태를 위한 공간을 남겨둘 만큼 조용합니까?
- 선택된 상태와 프레스된 상태가 명확히 구별됩니까?
- 컴포넌트가 모두 동일한 무게를 가지지 않으면서도 관련되어 보입니까?
- 그림자와 하이라이트가 깊이를 설명할 뿐 안개를 만들지 않습니까?
- 다크 UI에서, 깊이가 블러와 그림자보다 먼저 표면 계층 구조와 가장자리 정의에서 비롯됩니까?
- 글로우가 여전히 의미를 가질 만큼 드뭅니까?
- 모션 타이밍이 통제되고 짧게 느껴집니까?
- 모션이 인터랙션 로직을 강화할 뿐 안무가 되지 않습니까?
- 구성이 주목을 끌기 위해 노력하는 대신 균형을 유지했습니까?
- 첫 번째 모바일 뷰포트가 동일한 기본 메시지 또는 행동을 유지합니까?
- 업그레이드가 더 많은 스타일링을 추가하기보다는 소음을 제거했습니까?
참고 자료
- 핵심 디자인 규칙:
references/design-principles.md - 색상 시스템 규칙:
references/color-system.md - 컴포넌트 장인정신 규칙:
references/component-aesthetics.md - 인터랙션 상태 규칙:
references/interaction-states.md - 모션 규칙:
references/motion-principles.md - 모션 패턴 규칙:
references/motion-patterns.md - 깊이 및 조명 규칙:
references/depth-lighting-system.md - 스타일 원형:
references/style-archetypes.md - 실패 패턴:
references/anti-patterns.md - 리뷰 구조:
references/review-rubric.md - 리라이트 깊이 및 출력 계약:
references/rewrite-playbook.md - 정제된 판단 예시:
references/distilled-examples.md