색을 고르기 전에 역할을 나눕니다
입문자는 마음에 드는 색을 먼저 고른 뒤 화면 전체에 반복해서 쓰는 경우가 많습니다. 하지만 실제 화면에서 색은 배경, 본문, 경계, 강조, 상태, 행동처럼 각각 다른 역할을 맡습니다.
색의 역할을 먼저 나누면 화면이 산만해지는 것을 막을 수 있습니다. 브랜드 색은 버튼에만 쓰고, 안내 색은 작은 라벨에만 쓰며, 경고 색은 실제 경고 상황에만 쓰는 식으로 범위를 정해야 합니다.
기본 팔레트는 적을수록 강합니다
대부분의 정보형 사이트는 3개에서 5개 정도의 핵심 색만으로도 충분합니다. 배경색, 본문색, 약한 보조색, 강조색, 상태색 정도면 화면의 질서를 만들 수 있습니다.
중요한 것은 색상 수가 아니라 대비입니다. 본문은 배경에서 충분히 읽혀야 하고, 버튼은 다른 장식 요소보다 먼저 보여야 합니다. 색상이 예뻐도 대비가 약하면 실제 사용자는 내용을 읽기 어렵습니다.
강조색은 쓰는 횟수로 힘이 정해집니다
강조색은 많이 쓸수록 약해집니다. 모든 링크, 모든 숫자, 모든 아이콘, 모든 버튼에 같은 강조색을 쓰면 독자는 무엇이 진짜 행동인지 구분하지 못합니다.
좋은 화면은 강조색의 양을 절제합니다. 본문 안에서는 링크 정도만, 카드에서는 중요한 라벨 정도만, 페이지 끝에서는 상담 버튼처럼 행동이 필요한 곳에만 강조색을 배치하는 편이 좋습니다.
상태 색은 의미를 고정해야 합니다
초록은 성공, 노랑은 주의, 빨강은 오류처럼 상태 색은 사용자가 이미 익숙한 의미를 갖습니다. 디자인 사이트라고 해서 이 규칙을 과하게 비틀면 이해 속도가 느려집니다.
상태 색은 예쁜 장식이 아니라 인터페이스 언어입니다. 선택됨, 완료됨, 주의 필요, 오류 같은 상태는 사이트 전체에서 같은 색과 같은 형태로 반복되어야 합니다.
색상 역할 예시: 브랜드 색을 화면에 배치하기
색 조합을 감각으로만 고르면 화면마다 기준이 흔들립니다. 먼저 색의 역할을 정하면 같은 팔레트로도 훨씬 안정적인 화면을 만들 수 있습니다.
Primary, Surface, Text, Warning처럼 역할을 나누면 새 화면을 만들 때마다 색을 다시 고민하지 않아도 됩니다.
역할 기반 팔레트
| Primary | 대표 행동 버튼이나 핵심 링크에 제한적으로 사용합니다. |
|---|---|
| Surface | 카드와 섹션 배경을 구분하되 본문 대비를 해치지 않습니다. |
| Text | 본문, 보조 문구, 비활성 문구의 대비를 단계별로 둡니다. |
| Warning | 오류, 주의, 삭제처럼 의미가 강한 상황에만 사용합니다. |
색상 선택을 설명하는 문장
“분위기에 맞는 색”보다 “신청 버튼과 정보 박스를 분리하기 위해 대표색은 CTA에만 쓰고 배경은 낮은 채도로 낮췄다”가 더 설득력 있습니다.
- 같은 색이 서로 다른 의미로 쓰이지 않는가?
- 본문 대비가 낮아져 읽기 어려운 지점이 없는가?
- 강조색이 너무 많아 우선순위가 흐려지지 않는가?
- 오류와 경고 색이 브랜드 장식색과 혼동되지 않는가?
작성자 검수 메모
색은 예쁜 조합보다 역할의 일관성이 중요합니다. 역할표가 있으면 디자인을 확장할 때 화면마다 다른 판단을 반복하지 않아도 됩니다.
이 글은 색 조합을 감각이 아니라 역할과 의미 중심으로 정리하는 방법을 다뤘습니다.
현장 적용 노트
색상은 감정적 인상과 기능적 역할을 동시에 갖습니다. 하지만 UI에서는 기능적 역할이 먼저 정리되어야 같은 색이 화면마다 다른 의미로 쓰이는 문제를 막을 수 있습니다.
강조색을 많이 쓰면 화면은 화려해지지만 사용자는 무엇이 중요한지 모를 수 있습니다. 대표색은 핵심 행동에 제한하고, 배경과 보조 정보는 낮은 대비로 정리하는 편이 안정적입니다.
포트폴리오 기록 포인트
포트폴리오에는 팔레트 이미지보다 역할표를 함께 넣는 것이 좋습니다. Primary, Surface, Text, Warning처럼 쓰임이 보이면 색 선택이 취향이 아니라 설계로 설명됩니다.
색 역할표를 실제 화면에 대입하기
색상표를 만들었다면 샘플 박스에만 두지 말고 실제 화면에 바로 대입해야 합니다. 안내, 경고, 성공, 비활성, 행동 버튼이 한 화면에 있을 때 서로 헷갈리지 않는지 확인하면 역할이 겹치는 색을 줄일 수 있습니다. 특히 브랜드 색을 모든 강조에 쓰면 중요한 행동과 단순 장식이 구분되지 않습니다.
- 행동 색은 클릭 가능한 요소에 우선 배정합니다.
- 경고 색은 오류와 위험 안내에만 제한합니다.
- 배경색은 본문 대비를 해치지 않는 밝기로 조정합니다.
상태 색상까지 함께 정리하기
색 역할을 정할 때 기본 브랜드 색만 정하면 실제 화면에서 부족합니다. 성공, 경고, 오류, 비활성, 선택됨, 호버 같은 상태 색상이 필요하기 때문입니다. 상태 색상을 미리 정리하면 새로운 컴포넌트가 생겨도 같은 의미를 유지할 수 있습니다.
검수할 때는 한 화면에 여러 상태가 동시에 나타난 상황을 만들어봅니다. 오류와 경고가 비슷해 보이거나, 비활성 버튼이 일반 버튼처럼 보이면 색 역할을 다시 조정해야 합니다.
색 이름을 역할로 붙이기
색 이름을 blue-01처럼 붙이면 관리하기 쉽지만 화면에서 왜 쓰는지 바로 알기 어렵습니다. action-primary, text-muted, alert-danger처럼 역할을 포함하면 새 화면을 만들 때 선택 기준이 분명해집니다. 숫자 이름은 색상표 안에서, 역할 이름은 실제 UI 안에서 더 유용합니다.