빨강은 경고, 초록은 정상

KRDS CP-186 — 레이블과 컨테이너의 색상은 일반적인 의미 체계, 일관성을 고려하여 적용하고 있다.

0. 들어가며 — 색에도 약속이 있다

이번 306편은 배지 레이블과 컨테이너 색상을 일반적인 의미 체계와 일관성을 고려해 적용하라는 규칙입니다.

배지는 색으로 상태를 빠르게 구분시킵니다 — 빨간 배지, 초록 배지, 회색 배지처럼요. 그런데 이 색에는 사람들이 공유하는 의미 약속이 있죠 — 빨강은 경고·위험·마감, 초록은 정상·완료·성공, 노랑은 주의·진행 중. 이 관습을 따라야 사용자가 색만 보고 상태를 직관적으로 압니다. CP-186은 색의 의미 체계와 일관성을 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 의미 체계·일관성 고려 색상

CP-186 (컴포넌트 > 배지) “레이블과 컨테이너의 색상은 일반적인 의미 체계, 일관성을 고려하여 적용하고 있다.”

배지의 텍스트 색과 배경(컨테이너) 색을, 사람들이 공유하는 일반적 색 의미(빨강=경고 등)와 사이트 내 일관성을 고려해 적용하라는 뜻입니다.

정리: 배지 색은 일반적 의미 약속과 일관성을 따라 적용하라. 이게 CP-186입니다.

2. 왜 의미 체계와 일관성을 따르나

색은 텍스트를 읽기 전에 즉각 인지되는 시각 신호입니다. 사람들은 색에 학습된 의미를 자동으로 부여하죠. 배지가 이 ‘색의 의미 약속’을 따르면, 사용자는 레이블을 읽기도 전에 색만으로 상태의 성격을 직관적으로 파악 합니다. 두 축이 있죠 — ’일반적 의미 체계’와 ’일관성’.

① 일반적 의미 체계(관습). 색에는 문화·관습적으로 공유되는 의미가 있습니다 — 특히 ’신호등 체계’가 대표적 이죠:

빨강 — 경고·위험·오류·마감·긴급. (마감된 공고, 반려된 신청, 오류 상태)

초록 — 정상·성공·완료·승인. (처리 완료, 승인됨, 정상 운영)

노랑/주황 — 주의·대기·진행 중. (처리 중, 검토 대기)

회색/중립색 — 비활성·일반·종료. (마감 후 비활성, 일반 분류)

파랑 — 정보·신규·안내. (신규 항목, 정보성 상태)

배지가 이 관습을 따르면 — ‘마감’을 빨강, ’완료’를 초록으로 표시하면 사용자가 색만 보고 직관적으로 압니다. 반대로 관습을 어기면(완료를 빨강, 마감을 초록) 색이 잘못된 신호를 줘 혼란스럽죠. ’완료(긍정)’인데 빨강(경고) 이면 사용자가 ’뭔가 잘못됐나?’ 오해합니다.

② 일관성. 같은 의미의 배지는 사이트 전체에서 같은 색이어야 합니다. ’진행 중’을 어떤 페이지는 노랑, 어떤 페이지는 파랑으로 하면 — 사용자가 색의 의미를 신뢰할 수 없죠. 상태별 색을 정해(디자인 토큰) 모든 배지에 일관 적용하면, 사용자는 한 번 익힌 색 규칙을 모든 곳에 적용합니다. 색이 일관된 ’의미 언어’가 되는 것이죠 (탭 바 색 일관성 CP-136, 달력 상태 일관성 CP-161과 같은 정신).

레이블과 컨테이너 함께. 규칙은 ‘레이블과 컨테이너의 색상’을 함께 말합니다 — 배경(컨테이너) 색과 글자 (레이블) 색이 어우러져 의미를 전하고, 동시에 서로 충분한 대비를 가져야 하죠(CP-191의 4.5:1 대비). 예를 들어 ’마감’ 배지는 빨강 계열 배경 + 충분히 대비되는 글자색으로, 의미(경고)와 가독성을 모두 충족합니다.

색만으로는 안 된다. 단, 색의 의미 체계를 따르되 — 색만으로 상태를 구분하면 안 됩니다(색맹 배려, KWCAG ‘색 무관 인식’). 그래서 배지는 색 + 텍스트 레이블(CP-190)을 함께 제공하죠. 색은 빠른 직관, 텍스트는 정확한 의미 — 둘이 함께라야 색맹 사용자도 텍스트로 상태를 알고, 모든 사용자가 색으로 빠르게 인지합니다. 색의 의미 체계(CP-186)는 ’보조·강화’이고, 텍스트(CP-190)가 ’주된 정보’인 셈입니다.

정리하면 — 배지 색은 사람들이 공유하는 일반적 의미 약속(빨강=경고 등)을 따르고 사이트 내 일관되게 적용해, 사용자가 색만으로 상태를 직관적으로 파악하게 하되, 텍스트 레이블로 정확성을 보강합니다.

3. 점검 / 개선

무엇을 점검하나

의미 부합 — 배지 색이 일반적 의미(빨강=경고, 초록=완료 등)에 맞는가.

일관성 — 같은 의미의 배지가 사이트 전체에서 같은 색인가.

색 비의존 — 색에 더해 텍스트 레이블로도 상태가 전달되는가(CP-190).

개선 방향

상태별 색을 신호등 체계 등 관습에 맞춰 정의(토큰화). 어긋난 색 교정.

색만 의존 금지. 텍스트 레이블 병행(CP-190), 대비 충족(CP-191).

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

역할	책임
디자이너	상태별 색 의미 체계(토큰) 정의
퍼블리셔/개발	색 일관 적용·텍스트 병행

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

배지를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 배지 색이 일반적 의미(빨강=경고, 초록=완료 등)에 맞나요?

□ 같은 의미의 배지가 사이트 전체에서 같은 색인가요?

□ 색에 더해 텍스트 레이블로도 상태가 전달되나요?

❓ FAQ

Q1. 색 의미를 꼭 따라야 하나요? 사람들이 학습한 약속(빨강=경고)을 어기면 잘못된 신호를 줘 혼란스럽습니다. 관습을 따르는 게 직관적입니다. Q2. 브랜드 색으로 통일하면 안 되나요? 상태 구별이 목적이라 의미별 색이 필요합니다. 단 배경에 주조색을 쓰는 건 버튼 오인 방지 차원에서 별도 규칙(CP-189)입니다. Q3. 색만으로 구분하면요? 색맹 사용자가 못 구별합니다. 텍스트 레이블(CP-190)을 함께 제공해야 합니다.

6. 마무리

CP-186의 메시지:

빨강은 경고, 초록은 정상 — 배지 색을 일반적 의미 체계와 일관성에 맞춰 적용하라.

색은 텍스트보다 먼저 인지되는 신호라, 관습적 의미(신호등 체계)를 따르면 사용자가 직관적으로 상태를 파악합니다. 같은 의미는 같은 색으로 일관되게 쓰고, 색만이 아니라 텍스트도 병행하죠. 다음 편은 배지를 대화형으로 만들지 않는 규칙입니다.

다음 편 예고 ▶ 「307. (CP-187) 배지를 대화형 요소로 마크업 또는 역할을 부여하거나 부적절한 속성을 적용하고 있지 않다.」

ViewCheck는 배지 색상이 의미 체계·일관성을 따르는지를 진단합니다.

📚 참고 출처

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

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

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