가장 강한 색은 가장 작게

KRDS DS-012 — 강조 색상을 중요한 강조 요소에만 제한적으로 사용하고 있으며, 최대 5%를 넘기지 않고 있다.

0. 들어가며 — 절제에 마침내 ’상한선’이 생기다

색상 규칙을 따라오며 우리는 ’절제’라는 말을 여러 번 만났습니다.

DS-008 — Primary를 핵심 행동에만 쓰라(정성적 절제).

DS-009 — 강조색은 10% 정도로 배치하라(면적 비율).

그리고 9편에서 한 가지를 흘려 봤습니다 — “가장 강한 강조색은 5% 이하” 라는 더 엄격한 기준이요. 그 기준이 마침내 독립된 규칙으로 못 박힌 것이 DS-012입니다.

“강조 색상을 중요한 강조 요소에만 제한적으로 사용하고 있으며, 최대 5%를 넘기지 않고 있다.”

여기서 핵심은 ‘최대 5%’ 라는 명확한 상한선입니다. 막연한 “아껴 써라”가 아니라, “이 선을 넘지 마라”는 구체적인 천장이 생긴 것이죠. 이번 편은 이 5%라는 숫자가 무엇을 의미하는지, 앞서 본 10%와는 어떻게 다른지, 그리고 가장 강한 색을 왜 가장 작게 써야 하는지를 풀어냅니다. 색상 절제 원칙의 가장 단단한 마침표입니다.

1. 규칙 원문 — 두 개의 제약

DS-012 (디자인 스타일 > 색상) “강조 색상을 ① 중요한 강조 요소에만 제한적으로 사용하고 있으며, ② 최대 5%를 넘기지 않고 있다.”

두 개의 제약이 겹쳐 있습니다.

① “중요한 강조 요소에만 제한적으로”

질적 제약입니다. 강조색을 아무 데나 쓰지 말고, ’정말 중요한 강조’에만 쓰라는 것. DS-008의 “주요 액션· 중요 정보에만”과 같은 맥락이되, 표현이 더 엄격합니다 — ’제한적으로’라는 말이 강조됩니다.

② “최대 5%를 넘기지 않고”

양적 제약입니다. 그 강조색의 화면 점유 면적이 5%를 넘으면 안 된다는 명확한 상한. DS-009의 60:30:10에서 ‘10% 강조’ 중에서도, 가장 강한 강조색은 그 절반인 5% 이하로 더 조이라는 것입니다.

정리: 가장 강한 강조색은 정말 중요한 곳에만, 화면의 5%를 넘지 않게. 이게 DS-012입니다.

2. DS-008·009와 무엇이 다른가 — ‘강조 안의 위계’

“또 강조 절제? 008·009에서 충분히 다루지 않았나?”라는 의문이 들 수 있습니다. DS-012의 고유함은 ‘강조 안에도 위계가 있다’ 는 점에 있습니다.

지금까지의 색 배분을 정리하면 이렇습니다(60:30:10).

60% — 중립색(Gray): 배경·텍스트·구분선

30% — 보조색(Secondary): 영역 구분·보조 요소

10% — 강조색(Primary): 핵심 행동·링크·강조

그런데 이 ‘10% 강조’ 안에서도 다 같은 강조가 아닙니다. 링크, 활성 탭, 강조 버튼, 그리고 가장 강렬한 포인트(브랜드 팝 컬러, 핵심 CTA). DS-012는 이 중에서 가장 강한 강조색을 따로 떼어, 그것만은 5% 이하로 더 조이라고 합니다.

즉 강조에도 단계가 있습니다.

층위	면적	내용
중립	~60%	배경·텍스트
보조	~30%	구분·보조 요소
강조	~10%	링크·활성 상태·강조 버튼
핵심 강조	≤5%	가장 강렬한 포인트(핵심 CTA·브랜드 팝)

DS-009가 ’강조 전체(10%)’의 비율이라면, DS-012는 ’그중 가장 강한 색(≤5%)’의 상한입니다. 강조 안에서도 가장 센 색일수록 더 아껴야 한다는, 한 단계 더 정밀한 규율입니다.

3. 왜 5%인가 — 가장 강한 색은 가장 작게

DS-012의 핵심 철학은 한 문장입니다 — “색이 강할수록 면적은 작아야 한다.”

이건 8편의 ’강조의 경제학’을 극한까지 밀어붙인 것입니다. 강조의 힘은 희소성에서 나오는데, 가장 강한 색일수록 그 희소성이 더 중요합니다. 화면에서 단 한 곳, 사용자가 반드시 봐야 할 그 지점에만 가장 강한 색을 쓰면, 그 색은 자석처럼 시선을 끕니다. 하지만 그 강한 색이 5%를 넘어 여기저기 퍼지면, 가장 중요한 한 곳이 어디인지 알 수 없게 됩니다.

비유하자면 가장 강한 강조색은 느낌표(!) 와 같습니다. 글에 느낌표 하나가 있으면 그 문장이 강조되지만, 모든 문장에 느낌표를 붙이면 아무 문장도 강조되지 않습니다. 느낌표는 적을수록 강합니다. 가장 강렬한 색도 마찬가지로, 화면의 5%를 넘기는 순간 ’강조’가 아니라 ’소음’이 됩니다.

또 하나, 강한 색은 시각적 피로를 유발합니다. 채도 높은 강렬한 색을 넓은 면적에 쓰면 눈이 빨리 지칩니다. 5% 상한은 사용자의 눈을 보호하는 장치이기도 합니다. 강한 색을 작게 유지하면, 그 색은 강렬한 인상을 주면서도 눈을 피로하게 하지 않습니다. 강함과 편안함을 동시에 얻는 방법이 바로 ’작게 쓰기’입니다.

명품 브랜드가 로고를 작게 쓰는 이유

이 원리는 디자인을 넘어 브랜딩 전반에 통합니다. 흥미롭게도 격이 높은 브랜드일수록 로고를 작고 절제되게 씁니다. 고급 호텔의 사인, 명품의 라벨, 품격 있는 기관의 상징은 대개 작고 차분합니다. 반대로 로고를 크게, 색을 강하게, 곳곳에 도배하는 것은 오히려 ‘자신 없어 보이는’ 인상을 줍니다. 절제가 곧 품격이라는 것을 좋은 브랜드는 압니다.

공공기관에도 같은 원리가 적용됩니다. 기관의 상징색을 화면 곳곳에 강하게 칠한다고 권위가 서는 게 아닙니다. 오히려 차분하고 정돈된 화면에 핵심 포인트만 또렷한 디자인이, 신뢰감 있고 품격 있는 공적 인상을 줍니다. 시민은 화려한 색이 아니라 명료하고 안정된 화면에서 ’믿을 만한 기관’이라는 느낌을 받습니다. 5% 상한은 단지 가독성의 문제가 아니라, 기관의 품격과 신뢰를 표현하는 방법이기도 합니다.

강조색이 ’브랜드를 각인’시키는 진짜 원리

“우리 색을 많이 보여줘야 사람들이 기억하지 않나?”라는 생각은 자연스럽지만 틀렸습니다. 기억은 노출 면적이 아니라 인상의 선명함에서 만들어집니다. 차분한 화면에 브랜드색 포인트 하나가 또렷이 빛날 때, 사용자는 그 색을 ’특별한 순간’으로 기억합니다. 반면 화면 전체가 브랜드색이면, 그 색은 배경처럼 흘러가 기억에 남지 않습니다. 강조색을 5%로 아끼는 것은 브랜드를 약화시키는 게 아니라, 오히려 가장 강하게 각인시키는 길입니다. 적게 보여주되 강하게 각인시키는 것 — 이것이 절제의 역설적인 힘입니다.

4. “중요한 강조 요소에만” — 무엇이 자격이 있나

5%라는 좁은 자리에 들어갈 자격이 있는 ’중요한 강조 요소’는 무엇일까요? 기준은 매우 까다로워야 합니다.

자격이 있는 것들:

그 화면의 핵심 CTA — “신청 완료”, “결제하기”처럼 페이지의 최종 목적이 되는 단 하나의 행동.

반드시 주목해야 할 경고·핵심 수치 — 놓치면 안 되는 마감일, 금액 등(단, 이건 System 색과도 관련).

현재 위치를 알리는 활성 표시 — 선택된 탭, 현재 페이지.

자격이 없는 것들(흔한 오용):

모든 소제목, 모든 아이콘

단순 구분선, 장식 요소

보조 버튼(“취소”, “이전”)

허전해서 채우는 색

핵심 판단 기준은 “이게 강조 안 되면 사용자가 정말 곤란한가?” 입니다. 그 답이 분명한 ’예’일 때만 가장 강한 강조색을 씁니다. “예뻐서”, “허전해서”, “강조하면 좋을 것 같아서”는 모두 자격 미달입니다. 5%라는 좁은 공간은 그만큼 엄격하게 배분되어야 합니다.

이 엄격한 선별이 실무에서 어려운 이유는, 조직 안의 거의 모든 요소가 ’자기는 중요하다’고 주장하기 때문입니다. 홈페이지를 만들 때 각 부서는 “우리 서비스도 메인에서 강조해 달라”고 요구하고, 마케팅은 “이 캠페인을 눈에 띄게 해달라”고 합니다. 모두의 요구를 들어주면 결국 모든 게 강조되고, 그건 아무것도 강조되지 않는 것과 같습니다. 5% 규율은 이런 ’강조 요구의 인플레이션’에 맞서는 방패입니다. “강조색은 화면의 5%뿐이니, 이 좁은 자리에 무엇을 넣을지 가장 중요한 것 하나만 고릅시다”라는 객관적 기준을 주는 것이죠.

그래서 DS-012는 디자인 규칙이면서 동시에 의사결정의 도구입니다. 막연히 “이것도 중요하고 저것도 중요하다”는 논쟁을, “5%라는 한정된 자원을 어디에 쓸 것인가”라는 우선순위 결정으로 바꿔줍니다. 자원이 무한하면 우선순위가 필요 없지만, 5%로 제한되면 비로소 진짜 중요한 것을 골라내게 됩니다. 제약이 오히려 더 나은 결정을 끌어내는 것입니다. 이 점에서 5% 상한은 디자이너에게 부담이 아니라 든든한 근거가 됩니다 — “규칙상 이 자리는 핵심 하나만 들어갑니다”라고 말할 수 있으니까요.

5. 5%가 화면에서 어느 정도일까 — 감각 잡기

“5%”가 추상적이니 실제 화면으로 감을 잡아봅시다. 일반적인 웹 페이지 한 화면을 떠올려 보세요. 그 화면에서 5%란 — 버튼 한두 개, 또는 작은 포인트 몇 개 정도의 면적입니다.

예를 들어 신청서 페이지라면, 화면 하단의 “제출” 버튼 하나가 가장 강한 강조색을 쓰고, 그 외엔 거의 쓰지 않는 정도가 5% 안팎입니다. 메인 페이지라면, 핵심 배너의 행동 버튼 하나와 몇몇 활성 링크 정도죠. 즉 가장 강한 색은 화면에서 ’점’처럼 박혀 있어야 합니다. ’면’으로 깔리면 이미 5%를 넘은 것입니다.

반대로 5%를 넘기는 전형적인 모습은 이렇습니다 — 헤더 전체가 브랜드색, 큰 배너 배경이 브랜드색, 여러 개의 강조 버튼이 브랜드색. 이러면 가장 강한 색이 화면의 30~50%를 차지해, 5% 상한을 한참 초과합니다. 그리고 그 결과는 늘 같습니다 — 정작 가장 중요한 행동이 그 색바다에 묻힙니다.

감각 요령: 화면을 봤을 때 가장 강렬한 색이 ’어디에 시선을 집중시키는 점’으로 느껴지면 적절하고, ‘화면을 뒤덮는 면으로 느껴지면’ 과한 것입니다. 점이냐 면이냐 — 이 직관이 5% 판단의 출발점입니다.

한 공공기관 화면을 단계별로 그려보면

추상적인 5%를 구체적인 화면으로 그려봅시다. 어떤 공공기관 메인 페이지를 만든다고 합시다. 가장 위에는 헤더가 있는데, 이건 강조색이 아니라 흰색이나 아주 연한 회색 배경에 진한 글자 메뉴로 차분하게 둡니다. 그 아래 큰 배너 영역도 강렬한 색으로 채우지 않고, 차분한 이미지나 중립 톤 배경에 핵심 메시지를 얹습니다. 여기까지 강조색은 거의 0%입니다.

그리고 배너 안, 사용자가 가장 먼저 해야 할 행동 — 가령 “민원 신청 바로가기” 버튼 하나에만 강렬한 브랜드색을 씁니다. 이 버튼이 화면에서 가장 강한 색을 가진 유일한 큰 요소입니다. 그 아래로 내려가면 빠른 메뉴, 공지사항, 관련 서비스 링크들이 이어지는데, 여기서는 링크 색이나 작은 활성 표시에 강조색이 점점이 쓰일 뿐, 면으로 깔리지 않습니다. 이 모든 강조색을 합쳐도 화면의 5% 안팎입니다.

이렇게 만들면 사용자가 페이지에 들어온 순간 시선이 곧장 “민원 신청” 버튼으로 향합니다. 화면은 차분하고 신뢰감 있으며, 핵심 행동은 또렷합니다. 반대로 같은 페이지를 헤더도 브랜드색, 배너도 브랜드색, 버튼마다 브랜드색으로 만들면 — 강조색이 40%를 넘고, 사용자의 시선은 어디에도 집중하지 못한 채 어수선함만 느낍니다. 같은 콘텐츠, 같은 브랜드색인데 5% 규율을 지켰느냐 아니냐가 전혀 다른 화면을 만드는 것입니다.

6. 흔한 위반 패턴

DS-012 위반은 거의 ’브랜드색 남용’의 형태입니다.

함정 ① 브랜드색을 넓은 면에. 헤더·배너·섹션 배경을 강렬한 브랜드색으로 칠함. 가장 강한 색이 화면의 절반 가까이 차지. → 강한 색은 핵심 버튼·포인트로 한정.

함정 ② 강조 버튼 다수. 한 화면에 가장 강한 색 버튼이 여러 개. → 핵심 하나만, 나머지는 약한 강조나 중립으로.

함정 ③ 강조 텍스트 인플레이션. 본문 곳곳을 강렬한 색 굵은 글씨로 강조. → 정말 핵심인 한 곳만.

함정 ④ 채도 높은 색의 넓은 사용. 가장 채도 높은(눈에 띄는) 색을 면적 크게 사용해 눈 피로·강조 희석. → 채도 높을수록 면적은 더 작게.

네 함정의 뿌리는 하나 — “강한 색이니까 많이 쓰면 더 강조되겠지” 라는 착각. 정반대입니다. 강한 색은 적게 써야 강합니다. DS-012는 그 착각을 5%라는 숫자로 차단합니다.

7. 색 배분의 완성 — 60 / 30 / 10 / 5

DS-012까지 오면 색의 면적 배분 그림이 완성됩니다. 정리해 봅시다.

60% 중립 — 배경·텍스트가 조용히 화면을 채움.

30% 보조 — 영역 구분·보조 요소가 짜임새를 줌.

10% 강조 — 링크·활성·강조 버튼이 행동을 안내함.

5% 이하 핵심 강조 — 가장 강한 색이 단 하나의 핵심을 가리킴.

이 네 층위가 지켜지면, 화면에는 명확한 시선의 위계가 생깁니다. 사용자의 눈은 가장 강한 5%로 먼저 가고, 그다음 10% 강조를 훑고, 30% 보조로 구조를 파악하며, 60% 중립 위에서 편안히 정보를 읽습니다. 색이 곧 시선의 안내판 역할을 하는 것이죠.

DS-008(강조에만)·009(60:30:10)·012(5% 상한)는 따로 노는 규칙이 아니라, 이 위계를 함께 완성하는 한 세트입니다. 정성적 원칙(008)에서 면적 비율(009)로, 다시 가장 강한 색의 상한(012)으로 — 절제가 점점 더 정밀해지는 흐름입니다. 이 세 규칙을 함께 지키면, ‘차분하면서도 핵심이 또렷한’ 공공 서비스다운 화면이 됩니다.

8. 무엇을 점검하나

DS-012는 가장 강한 강조색의 면적과 사용처를 봅니다.

강조색 면적 — 가장 강한 강조색의 화면 점유가 5%를 넘지 않는가.

사용 제한 — 강조색이 ’중요한 강조 요소’에만 쓰였는가, 장식·배경에 퍼졌는가.

위계 존재 — 핵심 강조(≤5%)와 일반 강조(~10%)가 구분되는가.

채도-면적 관계 — 채도 높은 강한 색이 넓은 면을 점유하지 않는가.

화면의 색 점유 면적을 추출해 가장 강한 강조색의 비율을 집계하면 5% 초과 여부를 판정할 수 있습니다.

9. 누가 담당하나

역할	책임
디자이너	가장 강한 강조색을 핵심에만, 5% 이하로 배치
기획/UX	각 화면의 ’단 하나의 핵심’을 정의
퍼블리셔/개발	시안의 강조색 면적을 구현에서 유지(임의 강조 추가 금지)

DS-012도 출발은 기획입니다. “이 화면에서 가장 강조해야 할 단 하나”가 정해져야, 5%를 어디에 쓸지 결정됩니다.

10. 우리 사이트에 해당될까?

적용 대상

기관 유형	DS-012 적용
중앙행정기관(대표)	✅ 필수
중앙행정기관(운영)	✅ 필수
공공기관	✅ 필수
지방자치단체	✅ 필수

강조색을 쓰는 모든 사이트 = 해당. 특히 강렬한 브랜드색을 가진 기관이 가장 주의해야 합니다 — 그 색을 넓게 쓰고 싶은 유혹이 가장 크기 때문입니다.

예외(N/A)

강조색이 전혀 없는 순수 텍스트 문서가 아니라면 사실상 모든 화면이 대상입니다.

11. 단계별 개선 방법

Before / After

❌ Before — 헤더·배너·강조 버튼 다수가 브랜드색 → 가장 강한 색이 화면의 ~40%, 핵심이 묻힘 ✅ After — 헤더·배경은 중립색, 핵심 CTA 버튼 하나만 브랜드색(≤5%) → 가장 강한 색이 '점'처럼 박혀 시선을 집중

정비 순서

핵심 하나 식별 — 각 화면에서 가장 강조할 단 하나를 정함.

그 외 강등 — 나머지 강조색 사용을 약한 강조·중립으로.

면적 측정 — 가장 강한 색이 5% 이하인지 확인.

넓은 면 중립화 — 헤더·배경의 브랜드색을 중립색으로 교체.

12. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 가장 강한 강조색이 화면에서 ’점’처럼 박혀 있나요, ’면’처럼 깔려 있나요?

□ 헤더·배너 배경을 강렬한 브랜드색으로 칠하지 않았나요?

□ 한 화면에 가장 강한 색 버튼이 하나인가요?

□ 채도 높은 색을 넓은 면에 쓰고 있지 않나요?

□ 강조색을 줄였더니 핵심이 더 또렷해지지 않나요?

❓ FAQ

Q1. 9편의 10%와 12편의 5%, 뭐가 다른가요? 10%는 ’강조색 전체(링크·활성·강조 버튼 등)’의 면적이고, 5%는 그중 ’가장 강한 강조색’의 상한입니다. 강조에도 위계가 있어, 가장 센 색일수록 더 좁게 씁니다. 10% 안에 5% 이하의 핵심 강조가 포함되는 구조입니다.

Q2. 정확히 5%를 자로 재나요? 아닙니다. ’대략의 감각’입니다. 가장 강한 색이 점처럼 보이면 OK, 면처럼 보이면 과한 것입니다. 4%냐 6%냐는 따지지 않지만, 30%·40%는 명백한 위반입니다.

Q3. 우리 브랜드색이 강렬한데 작게만 쓰라니 아쉬워요. 강렬할수록 더 작게 써야 그 색이 빛납니다. 강렬한 색을 넓게 쓰면 눈이 피로하고 강조가 희석되지만, 핵심에만 작게 쓰면 매번 강한 인상을 줍니다. 강한 색일수록 ’점’으로 쓰는 게 그 색을 살리는 길입니다.

Q4. 가장 강한 강조색이 5%면 화면이 심심하지 않나요? 심심하지 않습니다. 30%의 보조색과 10%의 일반 강조가 화면에 짜임새와 생동을 줍니다. 5%는 ’가장 센 색’의 상한일 뿐, 화면 전체가 무채색이라는 뜻이 아닙니다.

Q5. 경고(빨강) 같은 System 색도 5% 안에 포함되나요? System 색(상태 신호)은 강조색과 역할이 다릅니다(DS-007 참고). 다만 그것 역시 필요할 때만 제한적으로 쓰는 것이 원칙입니다. 화면이 경고색으로 뒤덮이면 그 또한 강조가 죽습니다.

13. 마무리 — 강함을 지키는 법은 절제다

DS-012의 메시지는 색상 절제 원칙의 정점입니다.

가장 강한 색을 가장 강하게 유지하는 방법은, 그것을 가장 작게 쓰는 것이다.

역설적이지만 진실입니다. 강한 색을 아끼면 그 색이 빛나고, 남발하면 그 색이 죽습니다. 5%라는 상한은 인색함이 아니라, 가장 중요한 한 곳을 또렷이 가리키기 위한 전략적 절제입니다. 특히 강렬한 브랜드색을 가진 기관일수록 이 절제가 그 브랜드색을 더 강하게 각인시킵니다.

이로써 색의 ‘역할·사용·배분·상한’(007~009, 012)이 모두 정리됐습니다. 다음 편은 색상 카테고리의 또 다른 축, 상태를 알리는 System 색으로 돌아갑니다. DS-013 — “시스템 색상을 시각적 보조수단과 함께 사용하고 있다.” 6편(색약 고려)에서 본 “색만으로 전달하지 말라”가, 상태 색(성공·경고·오류)에 어떻게 적용되는지 구체적으로 다룹니다.

다음 편 예고 ▶ 「013. 시스템 색상을 시각적 보조수단과 함께 사용하고 있다.」

우리 사이트의 강조색이 5%를 넘는지 확인하려면? ViewCheck는 화면의 색 점유 면적을 추출해 가장 강한 강조색의 비율을 집계하고, 강조색이 핵심에 집중돼 있는지·넓은 면을 점유하지 않았는지를 시각화해 보여줍니다.

📚 참고 출처

KRDS 색상(Color) 스타일 가이드 (강조색 5% 이하) — https://www.krds.go.kr/html/site/style/style_02.html

U.S. Web Design System — Using color (60/30/10) — https://designsystem.digital.gov/design-tokens/color/overview/

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준