陌讯skills聚合平台

ui-design-principles

📁 ssiumha/dots 📅 5 days ago
2
总安装量
2
周安装量
#66158
全站排名
安装命令
npx skills add https://github.com/ssiumha/dots --skill ui-design-principles

Agent 安装分布

opencode 2
gemini-cli 2
claude-code 2
github-copilot 2
codex 2
kimi-cli 2

Skill 文档

UI Design Principles

UI/프론트엔드 코드 생성 시 디자이너가 따르는 기본 원칙을 적용합니다.

핵심 철학:

  • AI가 만드는 “안전한 선택”을 피함 (Inter, 보라색 그라데이션, 흰 ë°°ê²½)
  • 검증된 디자인 원칙으로 일관성 있는 UI 생성
  • 규칙 기반으로 주관적 판단 최소화

1. 컬러 (60-30-10 Rule)

색상 비율을 균형 있게 배분:

비율 역할 적용 영역 예시
60% Dominant (배경) 배경, 주요 컨텐츠 영역 흰색, 연한 회색, 다크모드 시 #121212
30% Secondary (보조) 카드, 사이드바, 헤더 연한 브랜드색, 회색 계열
10% Accent (강조) CTA 버튼, 링크, 아이콘 브랜드 컬러, 포인트 컬러

실제 예시:

  • Google: 흰색(60%) + 회색(30%) + 파랑(10%)
  • Spotify: 검정(60%) + 진회색(30%) + 초록(10%)
  • Slack: 흰색(60%) + 보라(30%) + 초록/빨강(10%)

적용 원칙:

  • Dominant는 중립색 권장 (흰, 검정, 회색)
  • Accent는 고대비, 눈에 띄는 색
  • Secondary는 Dominant와 조화로운 톤

2. 레이아웃 (CARP 원칙)

Contrast (대비)

요소 간 명확한 시각적 차이:

  • 헤드라인 vs 본문: 크기, 굵기 차이 2ë°° 이상
  • CTA 버튼: 배경과 높은 대비 (WCAG AA 4.5:1 이상)
  • 활성/비활성 상태: 명확한 색상 차이

Alignment (정렬)

시각적 질서 생성:

  • 좌측 정렬 기본 (읽기 흐름)
  • 정렬선 통일 (들쑥날쑥 금지)
  • 그리드 기반 배치

Repetition (반복)

일관된 패턴 유지:

  • 동일 버튼 스타일
  • 동일 카드 형태
  • 동일 간격 체계

Proximity (근접성)

관련 요소는 가깝게:

  • 라벨 ↔ 입력필드: 가깝게
  • 관련 버튼 그룹: 붙여서
  • 섹션 간: 충분한 여백으로 분리

3. 타이포그래피

위계 (Hierarchy)

Display   → 영웅 섹션 (48-72px, Bold)
H1        → 페이지 제목 (32-40px, Bold)
H2        → 섹션 제목 (24-28px, Semi-bold)
H3        → 서브섹션 (20-24px, Medium)
Body      → 본문 (16px, Regular)
Caption   → 보조 텍스트 (12-14px, Regular)

핵심 규칙

  • 폰트 패밀리: 2-3개로 제한 (헤딩용 + 본문용)
  • 크기 대비: 최소 4px 차이 (1-2pt는 효과 없음)
  • 줄 높이: 본문 1.51.75ë°°, 헤딩 1.21.3ë°°
  • 줄 길이: 45-75자 (영문), 한글은 20-40자

피해야 할 폰트 (AI 기본값)

  • Inter, Roboto, Arial, Helvetica (과다 사용)
  • 대안: SF Pro, Pretendard, Noto Sans KR, Geist

4. 여백 (Spacing)

8px Grid System

모든 간격을 8의 배수로 통일:

4px   → 아이콘 내부, 매우 좁은 간격
8px   → 인라인 요소 간격
16px  → 기본 패딩, 컴포넌트 내부
24px  → 섹션 내 그룹 간격
32px  → 카드 패딩, 중간 섹션
48px  → 섹션 간 간격
64px+ → 대형 섹션 분리

여백 유형

용어 설명 용도
Margin 요소 바깥 요소 간 분리
Padding 요소 안쪽 내부 콘텐츠 여유
Gap 그리드/플렉스 간격 자식 요소 간

원칙

  • 일관성: 같은 맥락에는 같은 간격
  • 위계: 관련성 높으면 좁게, 낮으면 넓게
  • 숨 쉴 공간: 빽빽하게 채우지 않기

5. 그리드 시스템

12컬럼 그리드 (웹 표준)

|  Container (max-width: 1200-1440px)  |
|  Margin | Column | Gutter | Column | ... | Margin |
구성요소 역할 일반적 값
Column 콘텐츠 배치 영역 12개
Gutter 컬럼 사이 간격 16-24px
Margin 양쪽 가장자리 16-80px (반응형)

반응형 브레이크포인트

Mobile:  < 640px   (4컬럼)
Tablet:  640-1024px (8컬럼)
Desktop: > 1024px  (12컬럼)

황금비율

  • 1:1.618 비율
  • 사이드바:메인 = 1:2.618 또는 1:3

6. 시각적 위계 (Visual Hierarchy)

사용자 시선을 유도하는 순서:

  1. 크기 → 큰 것이 먼저 (헤드라인)
  2. 색상 → 강조색이 시선 집중 (CTA)
  3. 대비 → 밝기 차이가 클수록 눈에 띔
  4. 위치 → 상단 > 하단, 좌측 > 우측
  5. 여백 → 여백이 많으면 중요해 보임
  6. 움직임 → 애니메이션은 최강 (남용 금지)

읽기 패턴

  • F패턴: 텍스트 위주 페이지 (블로그, 기사)
  • Z패턴: 랜딩페이지, 마케팅

7. Gestalt 원칙 (지각 심리학)

사용자가 시각 요소를 자연스럽게 그룹화하는 방식:

유사성 (Similarity)

  • 같은 색상, 크기, 형태의 요소는 그룹으로 인식
  • CTA 버튼을 다른 색상으로 → 독립적으로 인식
  • 같은 기능의 버튼은 같은 스타일로

연속성 (Continuity)

  • 시선은 부드러운 선/곡선을 따라감
  • 네비게이션, 프로그레스 바, 스텝 인디케이터에 활용
  • 요소를 선 위에 배치하면 연결감 형성

폐쇄성 (Closure)

  • 불완전한 형태도 완전한 형태로 인식
  • 로고 디자인에 활용 (IBM, NBC)
  • 테두리 없이도 카드 영역 인식 가능

공동 영역 (Common Region)

  • 같은 테두리/ë°°ê²½ 안 요소는 그룹으로 인식
  • 카드 UI, 폼 그룹, 모달에 적용
  • Pinterest, Facebook의 카드 레이아웃

전경/배경 (Figure/Ground)

  • 주 요소와 배경을 명확히 구분
  • 모달 뒤 어두운 오버레이
  • 포커스 상태의 요소 강조

8. 접근성 (a11y / WCAG)

색상 대비 기준

레벨 대상 최소 비율
AA 일반 텍스트 (< 18px) 4.5:1
AA 대형 텍스트 (≥ 18px, 14px bold) 3:1
AA UI 컴포넌트 (버튼, 입력필드) 3:1
AAA 일반 텍스트 7:1

도구: WebAIM Contrast Checker, Stark (Figma 플러그인)

키보드 접근성

  • 모든 인터랙티브 요소는 Tab으로 접근 가능
  • 포커스 인디케이터 최소 2px, 배경과 3:1 대비
  • 포커스 순서가 시각적 순서와 일치

필수 원칙

  • 색상만으로 의미 전달 금지 (아이콘/텍스트 병행)
  • 링크는 밑줄 또는 명확한 구분
  • 에러 상태는 색상 + 아이콘 + 텍스트

법적 요구사항 (2024-2027)

  • 미국: ADA → WCAG 2.1 AA 필수
  • EU: 2025년 6월부터 WCAG 2.1 AA 의무화

9. 모션/애니메이션

타이밍 가이드라인

용도 지속 시간 예시
마이크로 인터랙션 100-200ms 버튼 호버, 토글
전환 200-300ms 페이지 전환, 모달
복잡한 애니메이션 300-500ms 드로어, 아코디언

핵심: 300ms 이하로 반응성 유지

이징 (Easing)

유형 설명 용도
ease-out 빠르게 시작 → 천천히 끝 요소 등장 (권장)
ease-in 천천히 시작 → 빠르게 끝 요소 퇴장
ease-in-out 양쪽 부드럽게 위치 이동
linear 일정 속도 ❌ 로봇 같음 (피하기)

마이크로 인터랙션 4요소

  1. Trigger – 시작 이벤트 (클릭, 호버)
  2. Rules – 동작 규칙
  3. Feedback – 시각/청각 응답
  4. Loops – 반복/상태 ì¡°ê±´

접근성 주의

  • prefers-reduced-motion 미디어 쿼리 지원
  • 깜빡임/플래시 3회/초 이하 (발작 방지)
  • 필수 아닌 애니메이션은 끌 수 있게

10. 다크모드 설계

색상 원칙

요소 라이트모드 다크모드
배경 #FFFFFF #121212 (순수 검정 ❌)
표면 #F5F5F5 #1E1E1E
텍스트 #212121 #E0E0E0 (순수 흰색 ❌)
보조 텍스트 #757575 #9E9E9E

핵심: 순수 검정(#000)과 순수 흰색(#FFF) 피하기 → 눈 피로 유발

고도 (Elevation) 표현

  • 라이트모드: 그림자로 높이 표현
  • 다크모드: 밝기로 높이 표현 (높을수록 밝게)
    • 0dp: #121212
    • 1dp: #1E1E1E
    • 4dp: #272727
    • 8dp: #2D2D2D

색상 조정

  • 채도 낮추기 (눈부심 방지)
  • 브랜드 컬러 밝기 조정
  • 대비 4.5:1 유지 확인

전환 팁

  • 시스템 설정 연동 (prefers-color-scheme)
  • 부드러운 전환 애니메이션 (200-300ms)
  • 사용자 선택 저장

적용 체크리스트

UI 생성/리뷰 시 확인:

기본

[ ] 컬러가 60-30-10 비율인가?
[ ] 대비가 충분한가? (텍스트 4.5:1, 버튼 3:1)
[ ] 정렬선이 통일되어 있는가?
[ ] 관련 요소끼리 가깝게 배치되었는가?
[ ] 타이포 위계가 명확한가? (3단계 이상)
[ ] 간격이 8px 배수로 일관적인가?
[ ] 여백이 충분한가? (숨 쉴 공간)
[ ] 시선 흐름이 자연스러운가?

접근성

[ ] 키보드로 모든 기능 접근 가능한가?
[ ] 포커스 인디케이터가 보이는가?
[ ] 색상만으로 의미 전달하지 않는가?
[ ] prefers-reduced-motion 지원하는가?

다크모드 (해당 시)

[ ] 순수 검정/흰색을 피했는가?
[ ] 대비가 여전히 4.5:1 이상인가?
[ ] 고도를 밝기로 표현했는가?

피해야 할 AI 기본값

요소 AI 기본값 (피하기) 대안
폰트 Inter, Roboto Pretendard, SF Pro, Geist
컬러 보라 그라데이션 + 흰 배경 브랜드 맞춤 팔레트
버튼 둥근 파란 버튼 브랜드 컬러 + 적절한 radius
레이아웃 중앙 정렬 카드 나열 그리드 기반 비대칭
아이콘 기본 SVG 통일된 아이콘 세트

Examples

UI 컴포넌트 생성 시

User: "로그인 폼 만들어줘"
→ 60-30-10 컬러 적용
→ 라벨-입력필드 근접 배치
→ CTA 버튼 강조 (Accent 색상)
→ 8px 그리드 간격

기존 UI 개선 시

User: "이 페이지 디자인 개선해줘"
→ 체크리스트로 문제점 진단
→ CARP 원칙 위반 사항 수정
→ 시각적 위계 재정립

Technical Details

참고 자료

확장 가능 영역 (resources/)

  • 디자인 토큰 체계
  • 컴포넌트별 상세 가이드
  • 브랜드별 적용 사례
GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。