버튼처럼 보이지 않게

KRDS CP-189 — 배지의 배경색으로 서비스의 주조색을 사용하여 버튼으로 오인하지 않게 하고 있다.

0. 들어가며 — 배지가 버튼처럼 보이면

이번 309편은 배지의 배경색으로 서비스의 주조색을 사용해 버튼으로 오인하지 않게 하라는 규칙입니다.

배지(읽는 상태 라벨)와 버튼(누르는 컨트롤)은 둘 다 작고 색 채운 사각 모양이라 — 시각적으로 헷갈리기 쉽죠. 특히 배지가 버튼처럼 보이면, 사용자는 ‘눌러야 하나?’ 오해합니다(CP-187의 비대화형 정신을 시각으로 보강). CP-189 는 배지 배경에 서비스 주조색(브랜드 색)을 적절히 활용해 버튼과 구별하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 주조색 배경으로 버튼 오인 방지

CP-189 (컴포넌트 > 배지) “배지의 배경색으로 서비스의 주조색을 사용하여 버튼으로 오인하지 않게 하고 있다.”

배지의 배경색을 정할 때 서비스의 주조색(브랜드 기준색) 체계를 고려해, 배지가 버튼(특히 주요 액션 버튼)과 시각적으로 혼동되지 않게 하라는 뜻입니다.

정리: 배지 배경색을 주조색 체계로 다뤄 버튼과 헷갈리지 않게 하라. 이게 CP-189입니다.

2. 왜 버튼 오인을 막아야 하나

배지와 버튼은 형태가 비슷합니다 — 둘 다 작은 사각형(또는 둥근 사각형)에 색 배경 + 짧은 텍스트죠. 그런데 둘의 역할은 정반대입니다:

배지 — 상태를 표시하는 정적 라벨. 읽는 것이지 누르는 게 아니죠(CP-187).

버튼 — 동작을 실행하는 대화형 컨트롤. 누르는 것입니다.

이 둘이 시각적으로 비슷하면 — 사용자는 배지를 ’누를 수 있는 버튼’으로 오인합니다. 그래서 누르려 시도했다가 반응이 없어 혼란스럽거나, 반대로 진짜 버튼을 배지(못 누르는 라벨)로 여겨 안 누르기도 하죠. 어포던스(보이는 대로 작동) 원칙이 깨집니다.

특히 문제가 되는 건 — 배지가 주요 액션 버튼과 같은 색일 때입니다. 많은 서비스에서 주요 버튼(CTA)은 강조색 (주조색/브랜드 색)으로 채워집니다 — 예를 들어 ‘신청하기’ 버튼이 진한 파란색이라면. 그런데 배지도 같은 진한 파란색 배경이면, 사용자는 배지를 ’주요 액션 버튼’으로 오인하기 딱 좋죠.

여기서 규칙이 ’서비스의 주조색을 사용’하라는 의미를 짚어야 합니다. 이는 — 배지의 배경색을 서비스의 색 체계 (주조색 팔레트) 안에서 일관되게 다루되, 주요 버튼과 구별되는 방식으로 쓰라는 것입니다. 구체적 접근:

버튼은 강조색 채움, 배지는 옅은 톤(tint) — 주요 버튼이 진한 주조색으로 꽉 차 있다면, 배지는 같은 색 계열의 옅은 배경(연한 톤) + 진한 글자 식으로 차별화합니다. 같은 색 가족이라 브랜드 일관성은 유지하되, 명도·채도 차이로 ’이건 버튼이 아니다’를 시각적으로 알리죠.

형태·크기 차별화 — 버튼과 배지의 모서리 둥글기, 크기, 패딩 등을 다르게 해 형태로도 구별. 배지는 보통 더 작고 둥글죠(pill 형태).

상태색은 의미 체계로 — CP-186에서 본 상태 색(빨강=경고 등)을 쓰는 배지는 자연히 버튼색과 달라지기도 하죠. 주조색 버튼과 의미색 배지가 구별됩니다.

핵심은 — 배지가 **버튼처럼 ‘눌러야 할 것’으로 보이지 않게** 하는 것입니다. 색(주조색 체계 안에서 버튼과 차별), 형태, 크기로 ’이건 상태 라벨이지 버튼이 아니다’를 시각적으로 전하죠. 이는 CP-187(비대화형 마크업)의 시각적 짝입니다 — CP-187이 코드(역할)로 ’배지는 안 눌린다’를 보장하고, CP-189가 시각(외형)으로 ’배지는 버튼이 아니다’를 보여줍니다. 코드와 외형 양쪽에서 배지의 ’읽는 라벨’ 성격을 분명히 하는 것이죠.

정리하면 — 배지와 버튼은 형태가 비슷하나 역할이 반대이므로, 배지 배경색을 서비스 색 체계 안에서 버튼과 구별 되게 다뤄, 사용자가 배지를 버튼으로 오인하지 않게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

버튼 비혼동 — 배지가 주요 액션 버튼과 시각적으로 구별되는가(색·형태·크기).

주조색 체계 — 배지 배경색이 서비스 색 체계 안에서 일관되게 다뤄지는가.

어포던스 — 배지가 ’누르는 것’으로 보이지 않는가.

개선 방향

버튼이 강조색 채움이면 배지는 옅은 톤+진한 글자 등으로 차별화.

형태·크기(pill 등)로도 버튼과 구별. 비대화형 마크업(CP-187)과 병행.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자이너	배지 vs 버튼 시각 구별 체계 정의
퍼블리셔/개발	배경색·형태 차별화 구현

기관 유형	CP-189 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (배지 사용 시)

배지와 버튼이 함께 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 배지가 주요 액션 버튼과 시각적으로 구별되나요(색·형태·크기)?

□ 배지 배경색이 서비스 색 체계 안에서 일관되게 다뤄지나요?

□ 배지가 ’누르는 것’으로 보이지 않나요?

❓ FAQ

Q1. 배지와 버튼이 왜 헷갈리나요? 둘 다 작은 색 채운 사각에 짧은 텍스트라 형태가 비슷합니다. 역할은 정반대 인데도요. Q2. 주조색을 쓰라면서 버튼과 구별하라니 모순 아닌가요? 같은 색 가족 안에서 톤(옅은 배경 등)·형태로 차별화 하라는 뜻입니다. 브랜드 일관성은 유지하되 버튼과 구별하죠. Q3. CP-187과 무슨 관계인가요? CP-187(코드로 비대화형)과 CP-189(외형으로 버튼 비혼동)가 짝입니다. 양쪽 에서 배지의 ‘읽는 라벨’ 성격을 분명히 합니다.

6. 마무리

CP-189의 메시지:

버튼처럼 보이지 않게 — 배지 배경색을 주조색 체계로 다뤄 버튼과 구별하라.

배지와 버튼은 형태가 비슷하나 역할이 반대입니다. 배지가 버튼처럼 보이면 사용자가 누르려 오해하죠. 주조색 체계 안에서 톤·형태·크기로 버튼과 구별해 ’읽는 라벨’임을 시각적으로 전합니다. CP-187(비대화형 코드)의 시각적 짝 이죠. 다음 편은 텍스트 레이블 제공입니다.

다음 편 예고 ▶ 「310. (CP-190) 텍스트 레이블을 제공하고 있다.」

ViewCheck는 배지가 버튼으로 오인되지 않게 배경색이 다뤄지는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 배지(Badge) 가이드 — https://www.krds.go.kr/html/site/component/component_17.html

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

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