Ch.5 60:30:10 법칙
색상 팔레트 구성법
브랜드 색상 딱 1개로 전체 UI를 완성할 수 있을까?
스타트업 디자이너에게 CEO가 말합니다: '우리 브랜드 색은 이 파란색이야'. 이 한 가지 색으로 버튼, 링크, 배경, 텍스트, 에러 메시지까지 — 어떻게 통일된 UI를 만들까요?
색상 하나만 알려줬는데, 화면에 필요한 색은 수십 가지인데?
답은 체계적인 팔레트 확장입니다. 하나의 브랜드 색에서 명도와 채도를 조절해 전체 색상 시스템을 만들 수 있습니다.
핵심 내용
색상에는 '이름'이 아니라 '역할'을 부여해야 합니다
디자인 시스템에서 색상은 red, blue 같은 색상명이 아니라, primary, error, surface 같은 역할로 정의합니다. 이것을 색상 역할 토큰(Color Role Token)이라 부릅니다.
color-red-500 (X) → color-error (O) — 역할 기반 네이밍이 유지보수의 핵심
사용자에게 상태를 알려주는 4가지 시맨틱 컬러
시맨틱 컬러는 정보의 성격을 색상으로 즉시 전달합니다. 전 세계 사용자가 직관적으로 이해하는 색상 관습을 활용하는 것이죠.
시맨틱 컬러 4종
Neutral Gray Scale (중립 회색 단계) 50 → 100 → 200 → 300 → 400 → 500 → 600 → 700 → 800 → 900 배경(50~100), 테두리(200~300), 비활성 텍스트(400~500), 본문(700), 제목(900) 균일한 명도 간격이 핵심 — 계단식으로 자연스럽게 연결되어야 합니다.
브랜드 컬러 1개가 전체 팔레트의 씨앗입니다
브랜드 컬러(예: #2563EB, Tailwind blue-600)에서 명도(Lightness)와 채도(Saturation)를 조절하면 전체 색상 스케일을 만들 수 있습니다.
1. 기준색 설정: 브랜드 컬러를 500~600번에 배치
2. Tint (밝은 변형): 명도를 올리고 채도를 약간 낮춤 → 100~400번 생성
3. Shade (어두운 변형): 명도를 내리고 채도를 유지/미세 조정 → 700~900번 생성
4. 50번 생성: 가장 연한 tint — 배경용 (거의 흰색에 가까움)
5. 역할 매핑: primary = 600, hover = 700, disabled = 300, bg = 50
도구 추천: Tailwind CSS 팔레트, Realtime Colors, Coolors — 기준색 하나만 입력하면 전체 스케일 자동 생성
디자인 시스템에서 색상을 'red-500' 대신 'error'로 명명하는 이유로 가장 적절한 것은?
브랜드 컬러에서 Tint(밝은 변형)를 만들 때 올바른 방법은?
핵심 용어
surface
페이지·카드 배경색. 가장 넓은 면적을 차지하는 중립색
on-surface
surface 위의 텍스트·아이콘 색. 충분한 대비율 필수
primary
브랜드 대표색. CTA 버튼, 활성 탭, 선택 상태에 사용
secondary
보조 행동 요소. 두 번째 중요도의 버튼, 칩, 토글
accent
시선 집중 포인트. 배지, NEW 태그, 알림 닷
primary-50
#EFF6FF — 선택 영역 배경, 태그 배경
primary-100
#DBEAFE — hover 배경, 활성 사이드바
primary-500
#3B82F6 — 링크 텍스트, 보조 버튼 테두리
primary-600
#2563EB — CTA 버튼, 활성 탭 (기준색)
primary-700
#1D4ED8 — 버튼 hover, 눌림 상태
primary-900
#1E3A5F — 극강조 제목, 다크 배지
핵심 정리
- 1색상은 이름(red)이 아니라 역할(error)로 정의한다
- 2색상 역할 토큰: surface, on-surface, primary, secondary, accent
- 3시맨틱 4종: Success(green), Error(red), Warning(amber), Info(blue)
- 4Gray Scale: 50~900 단계로 배경·테두리·텍스트 커버
- 5브랜드 1색 → Tint/Shade 확장 → 역할 매핑으로 전체 팔레트 완성
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작