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

참고 자료

• Laws of UX - UX 법칙 모음
• WebAIM Contrast Checker - 대비 검증
• Material Design - Google 디자인 시스템
• Apple HIG - Apple 휴먼 인터페이스 가이드

확장 가능 영역 (resources/)

• 디자인 토큰 체계
• 컴포넌트별 상세 가이드
• 브랜드별 적용 사례