시안 마감이 임박했을 때 가장 오래 붙잡게 되는 작업이 색 고르기입니다. 빠른 컬러팔레트 구성법을 익혀 두면 감각에만 의존하지 않고도 5분 안에 쓸 만한 조합을 만들 수 있습니다. 이 글에서는 기준색 선정부터 대비 검증까지, 실무에서 바로 적용 가능한 절차를 정리합니다.
색 고르기에서 시간이 새는 이유
팔레트 작업이 길어지는 원인은 대부분 취향 문제가 아니라 절차 문제입니다. 다음 세 가지 패턴이 반복되면 시간이 배로 늘어납니다.
- 시작점이 없는 상태에서 색을 고릅니다. 컬러 피커를 열고 무작위로 클릭하면 선택지가 1,600만 개로 벌어집니다. 기준색 하나만 정해도 후보가 수십 개로 줄어듭니다.
- 색을 낱개로 봅니다. 단독으로 예뻤던 색이 배경 위에 올라가면 탁해지는 경우가 많습니다. 색은 항상 인접한 색과 함께 판단해야 합니다.
- 대비 검증을 마지막에 합니다. 완성한 팔레트가 접근성 기준에 걸려 다시 뜯어고치는 일이 자주 발생합니다. 검증은 중간 단계에 넣어야 손실이 적습니다.
빠른 컬러팔레트 만드는 5가지 방법
상황에 따라 적합한 방식이 다릅니다. 아래 다섯 가지 중 프로젝트 조건에 맞는 것을 골라 쓰면 됩니다.
1. 기준색 하나에서 HSL로 확장하기
브랜드 색이나 주요 버튼 색을 기준색으로 잡습니다. 그다음 색상(H)은 고정한 채 명도(L)만 10%씩 올리고 내려서 5단계에서 9단계를 만듭니다. 이렇게 만든 단계형 팔레트는 배경, 테두리, 호버 상태, 비활성 상태에 그대로 배정할 수 있습니다. 가장 빠르고 실패 확률이 낮은 방식입니다.
2. 색상환 규칙을 그대로 적용하기
기준색의 색상값에 각도를 더해 보조색을 뽑는 방식입니다. 계산이 단순해서 암산으로도 가능합니다.
| 규칙 | 각도 차이 | 인상 | 적합한 용도 |
|---|---|---|---|
| 단색 조화 | 0도 | 차분하고 정돈됨 | 문서형 서비스, 대시보드 |
| 유사색 | ±30도 | 부드럽고 자연스러움 | 브랜드 사이트, 소개 페이지 |
| 보색 | 180도 | 강한 대비, 시선 집중 | 강조 버튼, 배너 |
| 삼각 배색 | 120도씩 | 활기차고 다채로움 | 어린이, 게임, 이벤트 |
3. 사진에서 색 추출하기
이미 톤이 정해진 사진이나 일러스트가 있다면 거기서 색을 뽑는 편이 훨씬 빠릅니다. 다만 사진에서 추출한 색은 채도가 제각각이라 그대로 쓰면 산만합니다. 추출 후 채도를 비슷한 수준으로 맞추는 보정 단계를 반드시 거쳐야 합니다.
4. 기존 디자인 시스템 토큰 재사용하기
회사에 이미 디자인 시스템이 있다면 새로 만들 이유가 없습니다. 공개된 시스템의 색 단계 구조를 참고하는 것도 방법입니다. 색 값 자체를 복사하기보다 단계 나누는 방식과 명도 간격을 참고하는 편이 응용하기 좋습니다.
5. 자동 생성 도구로 초안 잡기
손으로 하나씩 만드는 대신 규칙 기반으로 조합을 뽑아 주는 도구를 쓰면 초안 단계를 통째로 건너뛸 수 있습니다. 기준색만 넣고 여러 조합을 한 번에 훑어본 뒤 마음에 드는 것을 골라 다듬는 컬러 팔레트 방식이 실무에서는 가장 효율적입니다. 도구가 뽑아 준 결과를 그대로 쓰기보다 시작점으로 삼고 명도와 채도를 프로젝트에 맞게 조정하는 것이 좋습니다.
60-30-10 비율로 배분하기
색을 고르는 것보다 중요한 것이 비율입니다. 인테리어에서 쓰이는 60-30-10 법칙은 화면 디자인에도 그대로 적용됩니다.
- 60%는 배경색입니다. 흰색이나 아주 밝은 회색처럼 채도가 낮은 색을 씁니다. 여기에 브랜드 색을 넣으면 화면이 금세 피곤해집니다.
- 30%는 보조색입니다. 카드 배경, 구분선, 사이드바처럼 구조를 나누는 요소에 배정합니다.
- 10%는 강조색입니다. 주요 버튼, 링크, 알림 배지처럼 사용자가 눌러야 하는 지점에만 씁니다. 이 10%를 아껴 쓸수록 클릭률이 올라갑니다.
대비와 접근성 검증하기
팔레트가 완성됐다면 텍스트와 배경의 명도 대비를 확인해야 합니다. WCAG 기준은 다음과 같습니다.
| 대상 | AA 기준 | AAA 기준 |
|---|---|---|
| 일반 텍스트(16px 내외) | 4.5:1 이상 | 7:1 이상 |
| 큰 텍스트(18.66px 굵게 또는 24px 이상) | 3:1 이상 | 4.5:1 이상 |
| 아이콘, 입력 필드 테두리 | 3:1 이상 | 해당 없음 |
연한 회색 글씨가 흰 배경 위에 올라간 조합이 가장 흔한 실패 사례입니다. 디자이너의 고해상도 모니터에서는 잘 보이지만, 야외에서 스마트폰으로 보면 거의 읽히지 않습니다.
5분 안에 끝내는 3단계 워크플로
지금까지의 내용을 실제 순서로 압축하면 다음과 같습니다.
- 1분, 기준색 결정. 브랜드 색이 있으면 그것을, 없으면 서비스 성격에 맞는 색상값 하나를 정합니다. 신뢰가 중요하면 파랑 계열, 활력이 중요하면 주황이나 빨강 계열이 무난합니다.
- 2분, 확장과 조합. 기준색을 명도 단계로 펼치고 색상환 규칙으로 보조색과 강조색을 더합니다. 중립색 두 개를 추가해 총 5개 안쪽으로 정리합니다.
- 2분, 검증과 배정. 대비 비율을 확인하고 60-30-10 비율에 맞춰 각 색의 용도를 문서에 적어 둡니다. 용도를 적어 두지 않으면 다음 화면에서 같은 고민을 반복하게 됩니다.
이 절차의 핵심은 색을 고르는 시간을 줄이는 것이 아니라, 고민할 지점 자체를 줄이는 데 있습니다. 기준색과 규칙과 비율이 정해져 있으면 나머지는 기계적인 작업으로 바뀝니다. 팔레트를 한 번 제대로 만들어 두면 이후 화면 작업 속도는 계속 누적된 이득으로 돌아옵니다.