디자인 비전공 개발자를 위한 색상 선택 5단계: 메인·보조·중립색 정하는 법

색을 많이 고르기 전에 역할부터 정한다

디자인 비전공 개발자가 색상에서 자주 막히는 이유는 감각이 부족해서라기보다, 색마다 맡은 일이 정해져 있지 않아서입니다. 처음부터 예쁜 팔레트를 찾으려 하면 선택지가 너무 많아집니다. 반대로 색을 역할로 나누면 훨씬 단순해집니다.

기본 구조는 이렇게 잡으면 충분합니다.

핵심은 “색상표를 많이 만드는 것”이 아니라 “같은 상황에서 같은 색을 쓰는 것”입니다. 1인 빌더에게는 화려함보다 일관성이 더 큰 신뢰를 만듭니다.

첫 단계는 브랜드 컬러 1개를 고르는 것입니다. 이 색은 버튼, 링크, 선택된 탭처럼 사용자가 행동해야 하는 지점에 반복해서 등장합니다. 너무 많은 곳에 쓰면 강조가 사라지므로, “사용자가 눌러야 하는 곳”에 우선 배정하세요.

고르는 기준은 단순합니다.

처음부터 완벽한 색을 찾으려 하기보다, 하나를 정한 뒤 실제 화면에 넣어보는 편이 낫습니다. 로고, 랜딩페이지, 앱 버튼을 따로 보지 말고 한 화면 안에서 같이 봐야 합니다.

메인색을 정했다면 같은 계열의 밝고 어두운 단계를 만듭니다. 보통 5~10단계 정도면 MVP에는 충분합니다. 예를 들어 기본 메인색을 기준으로 더 연한 배경용 색, hover 색, 눌림 상태 색, 진한 강조 색을 나누는 방식입니다.

이때 중요한 것은 색을 새로 고르는 것이 아니라 같은 색의 가족을 만드는 것입니다. 버튼 hover에 전혀 다른 색을 쓰면 화면이 산만해집니다. 연한 색은 배경 하이라이트나 선택 영역에, 기본 색은 CTA에, 진한 색은 텍스트 강조나 active 상태에 쓰면 됩니다.

개발자라면 토큰 이름을 먼저 붙여두는 것도 좋습니다.

primary-50
primary-100
primary-500
primary-700
primary-900

숫자는 정확한 표준이 아니어도 괜찮습니다. 중요한 것은 프로젝트 안에서 primary-500이 언제나 기본 메인색이라는 약속입니다.

실제 UI에서 가장 많이 쓰이는 색은 메인색이 아니라 중립색입니다. 배경, 카드, 테두리, 본문, 보조 텍스트가 모두 그레이 계열에 가깝기 때문입니다. 그래서 중립색을 대충 고르면 전체 화면이 어색해집니다.

중립색은 최소한 아래 용도를 나누세요.

밝은 테마라면 배경은 거의 흰색에 가깝게, 본문은 진한 회색에 가깝게 둡니다. 다크 테마라면 완전한 검정보다는 근블랙을 쓰는 편이 눈이 덜 피곤한 경우가 많습니다. 테두리는 “보일 듯 말 듯” 해야 하고, 본문 텍스트는 충분히 읽혀야 합니다.

보조색은 화면을 풍성하게 만들지만, 잘못 쓰면 메인 CTA와 경쟁합니다. 그래서 보조색은 버튼의 주인공이 아니라 보조 정보의 표시자로 생각하는 편이 안전합니다.

예를 들어 카테고리 배지, 비교 표의 구분, 작은 상태 표시, 차트의 일부 항목처럼 사용자의 핵심 행동을 빼앗지 않는 곳에 쓰면 좋습니다. 보조색은 1~2개면 충분합니다. 더 필요해 보인다면 색이 부족한 것이 아니라 정보 구조가 복잡한 것일 수 있습니다.

실무적으로는 메인색과 색상환에서 너무 가까우면 구분이 약하고, 너무 멀면 튀어 보일 수 있습니다. 화면에 직접 올려보고 “버튼보다 눈에 먼저 들어오는가?”를 확인하세요. 먼저 들어온다면 채도나 밝기를 낮추는 편이 낫습니다.

성공, 경고, 에러, 정보 색은 브랜드 취향보다 의미가 우선입니다. 사용자는 초록을 성공, 노랑이나 주황을 주의, 빨강을 에러로 받아들이는 데 익숙합니다. 물론 서비스 톤에 맞게 조정할 수 있지만, 의미를 뒤집는 것은 대체로 피하는 편이 좋습니다.

시맨틱 색도 하나만 두지 말고 최소 3단계로 나누면 쓰기 편합니다.

상태	연한 배경	기본 표시	진한 텍스트
성공	성공 배경	성공 아이콘	성공 문구
경고	경고 배경	경고 아이콘	경고 문구
에러	에러 배경	에러 아이콘	에러 문구

주의할 점은 에러 색을 마케팅 강조색처럼 쓰지 않는 것입니다. 빨간색이 할인, 인기, 신규 같은 의미로 섞이면 실제 오류 메시지의 긴급성이 약해질 수 있습니다.

색을 다 정한 뒤에는 비율로 점검합니다. 흔히 말하는 60-30-10은 엄격한 공식이라기보다 화면 균형을 보는 기준입니다. 대체로 중립색이 60, 보조 배경과 면이 30, 강한 강조색이 10 정도라고 생각하면 됩니다.

1인 개발자는 여기서 더 단순하게 봐도 됩니다.

색상 선택은 감각의 문제가 아니라 운영 규칙의 문제에 가깝습니다. 메인색 하나, 톤 스케일, 중립 그레이, 보조색, 시맨틱 색 순서로 정리하면 이후 화면을 추가할 때도 매번 처음부터 고민하지 않아도 됩니다.