색상 선택의 실패를 줄이는 법: 60-30-10 법칙과 대비(Contrast) 가이드

[메인 키워드]: UI 색상 조합 [보조 키워드]: 60 30 10 법칙, 명도 대비, 피그마 색상, 주색상 강조색상, 웹 디자인 컬러 [검색 의도]: 디자인 초보자가 화면에 색상을 적용할 때 자주 겪는 얼룩덜룩하고 산만한 색 조합 문제를 해결하고, 가독성과 명확한 시각적 전달력을 확보하는 컬러 배분 가이드를 익히는 목적

웹사이트나 앱 화면을 만들 때 가장 재미있으면서도 동시에 가장 실패하기 쉬운 단계가 바로 '색상(Color) 지정'이다. 마음에 드는 색을 이것저것 가져다 쓰다 보면 어느새 화면은 알록달록한 무지개처럼 변해버리고, 정작 사용자가 클릭해야 하는 주요 버튼이나 읽어야 하는 글자는 묻혀버리는 결과를 낳는다.

디자인 전공자가 아니면 감각적인 컬러 팔레트를 매번 만들어내는 것은 거의 불가능에 가깝다. 하지만 색상을 '감'으로 고르는 대신 수학적인 배분 규칙과 명도 대비 기준을 적용하면 누구나 깔끔하고 완성도 높은 화면을 연출할 수 있다.

실무에서 가장 유용하게 쓰이는 60-30-10 법칙과 가독성을 보장하는 명도 대비 가이드만 지켜도 색상 선택에서 오는 실패를 80% 이상 줄일 수 있다.

1. 실패하지 않는 색상 배분: 60-30-10 법칙

인테리어와 패션 분야에서 널리 쓰이는 '60-30-10 법칙'은 UI 디자인에서도 가장 강력한 색상 비율 공식이다. 화면 전체에 쓰이는 색상의 비율을 60% : 30% : 10%로 정해진 역할에 맞게 나누어 배치하는 기법이다.

• 60% 주 배경색 (Dominant Color): 화면 전체의 바탕이 되는 주 색상이다. 보통 흰색(#FFFFFF), 매우 밝은 회색(#F8F9FA) 또는 브랜드 고유의 아주 연한 톤을 사용한다. 눈에 자극을 주지 않고 콘텐츠가 잘 드러나도록 판을 깔아주는 역할을 한다.

• 30% 보조 색상 (Secondary Color): 카드 영역, 텍스트, 네비게이션 바, 구분선 등에 쓰이는 색상이다. 주로 주 배경색과 조화를 이루는 짙은 회색, 무채색, 혹은 브랜드의 보조 컬러를 활용한다. 60%의 배경 위에서 정보의 구획과 구조를 보여주는 중추적인 역할을 담당한다.

• 10% 포인트 강조색 (Accent Color): 사용자의 시선을 단번에 사로잡아야 하는 '구매하기', '제출', '핵심 알림' 버튼 등에 오직 10% 비율로만 사용하는 색상이다. 브랜드의 메인 시그니처 컬러나 배경/보조색과 대비가 강하게 나는 원색 계열을 지정한다.

초보자들이 많이 하는 실수는 10%만 써야 하는 강조색을 예쁘다는 이유로 카드 배경이나 헤더 전체에 남발하는 것이다. 강조색이 화면의 30~40% 이상을 차지하게 되면 포인트로서의 기능을 잃어버리고 시각적 피로도만 급격히 상승하게 된다.

2. 글자가 안 보이는 원인: 명도 대비(Color Contrast) 확보하기

원하는 색상을 잘 조합해서 배분했음에도 불구하고 막상 글씨를 읽으려니 눈이 아프거나 찌릿한 느낌이 들 때가 있다. 이는 텍스트 색상과 배경 색상 사이의 '명도 대비'가 충분히 확보되지 않았기 때문이다.

웹 접근성 가이드라인(WCAG)에 따르면 일반적인 텍스트와 배경 사이의 명도 대비 비율은 최소 4.5:1 이상을 유지하도록 권장한다.

예를 들어 연한 노란색 배경 위에 흰색 글씨를 쓰거나, 파란색 배경 위에 초록색 글씨를 쓰면 명도 차이가 거의 없어 글자가 배경에 묻혀버린다. 아무리 디자인이 예뻐도 글씨가 읽히지 않으면 웹 페이지로서의 가치는 전무하다.

가독성을 안전하게 확보하는 가장 좋은 방법은 텍스트의 색상을 고를 때 '색상(Hue)'이 아닌 '명도(Brightness)' 차이에 집중하는 것이다. 밝은 배경이라면 텍스트 명도를 확 낮추어 짙은 회색(#222222)이나 검정으로 지정하고, 어두운 배경(단크 모드 등)이라면 텍스트 명도를 90% 이상으로 끌어올려 명확한 대비를 만들어내야 한다.

3. 실무에서 바로 써먹는 색상 선택 팁

색 조합에 자신이 없을 때 실무에서 가장 안전하게 사용할 수 있는 팁 2가지를 기억해두면 좋다.

첫째, '단색(Monochromatic) 팔레트'를 활용하는 것이다. 서로 다른 여러 가지 색을 조합하려 애쓰지 말고, 내가 정한 메인 컬러 1가지의 '명도'와 '채도'만 조절하여 밝은 톤부터 어두운 톤까지 단계를 만드는 방식이다. 한 가지 색상 계열 안에서만 움직이기 때문에 색이 서로 충돌하거나 촌스러워질 위험이 전혀 없다.

둘째, 순수한 검정(#000000)의 사용을 지양하는 것이다. 완전히 까만 100% 자갈색 검정은 순백색(#FFFFFF) 배경과 부딪힐 때 눈에 강한 피로감을 준다. 실제로 많은 글로벌 IT 기업들은 본문 텍스트에 순수 검정 대신 매우 어두운 블루/회색 톤이 섞인 #111827나 #1E293B 같은 색상을 사용한다. 훨씬 자연스럽고 부드러운 인상을 전달할 수 있다.

[핵심 요약]

• 60-30-10 법칙 적용: 화면 색상은 배경 60%, 구조/텍스트 30%, 핵심 포인트 10% 비율로 나누어 강조색이 남발되지 않도록 제어한다.

• 명도 대비 4.5:1 준수: 텍스트와 배경 사이의 명도 차이를 확실하게 주어 사용자가 눈의 피로 없이 글을 읽을 수 있도록 가독성을 확보한다.

• 단색 팔레트 및 소프트 블랙 활용: 색 조합이 어려울 때는 한 가지 색의 명도 차이만 활용하고, 본문 텍스트는 순수 검정 대신 짙은 회색을 써서 자연스러운 인상을 만든다.

[다음 편 예고]

다음 편에서는 글자 형태 하나만으로도 브랜드의 인상을 바꾸는 '가독성 높은 폰트 선택 기법'과 답답하지 않은 '행간/자간 설정'의 기본을 다룹니다.