상태를 한눈에 알려야 할 때

KRDS CP-184 — 데이터에 2개 이상의 상태 정보가 존재하며, 이를 사용자가 명확하게 인지하는 것이 중요한 경우 배지를 사용하고 있다.

0. 들어가며 — 배지 그룹의 첫 규칙

이번 304편부터 배지(Badge) 그룹(CP-184~191, 8개)으로 들어갑니다. 첫 규칙은 데이터에 2개 이상의 상태 정보가 있고 사용자가 명확히 인지하는 게 중요할 때 배지를 사용하라는 내용이죠.

먼저 ‘배지’를 짚겠습니다. 배지는 항목의 상태나 분류를 짧은 텍스트로 표시하는 작은 라벨입니다 — ’신규’, ‘마감’, ‘진행 중’, ‘접수 완료’ 같은 작은 색 라벨이죠. 목록·카드 등에 붙어 항목의 상태를 한눈에 알립니다. CP-184는 이 배지를 ‘여러 상태가 있고 구별이 중요할 때’ 쓰라고, 용도를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 2개 이상 상태·인지 중요 시 사용

CP-184 (컴포넌트 > 배지) “데이터에 2개 이상의 상태 정보가 존재하며, 이를 사용자가 명확하게 인지하는 것이 중요한 경우 배지를 사용하고 있다.”

항목에 둘 이상의 상태(진행 중/마감, 신규/일반 등)가 있고 사용자가 그 차이를 명확히 알아야 할 때 배지를 써서 상태를 표시하라는 뜻입니다.

정리: 여러 상태가 있고 구별이 중요할 때 배지를 써라. 이게 CP-184입니다.

2. 왜 이런 경우에 배지를 쓰나

배지는 ‘상태·분류를 시각적으로 빠르게 알리는’ 도구입니다. 이 도구가 가치를 발휘하는 조건이 — ‘여러 상태가 공존’하고’그 구별이 중요’한 경우죠. 두 조건을 함께 봅니다.

① 2개 이상의 상태. 배지는 ‘구별’을 위한 것입니다. 모든 항목이 같은 상태라면 배지로 표시할 이유가 없죠 — 다 ’진행 중’이면 ’진행 중’ 배지를 다 붙이는 건 의미가 없습니다. 항목마다 상태가 다를 때(어떤 건 진행 중, 어떤 건 마감, 어떤 건 신규) 배지가 그 차이를 한눈에 보여주죠. 예를 들어 민원 신청 목록에서 ’접수/처리 중/완료/ 반려’가 섞여 있으면, 각 항목에 상태 배지를 붙여 사용자가 자기 신청이 어느 단계인지 즉시 압니다.

② 인지의 중요성. 그 상태 구별이 사용자에게 중요해야 합니다. 상태가 사용자의 행동·판단에 영향을 주는 경우죠 — ‘마감’된 공고는 신청할 수 없으니 미리 알아야 하고, ’신규’ 자료는 우선 확인하고 싶고, ’처리 중’인 민원은 기다려야 하죠. 이렇게 상태 인지가 사용자 결정에 직결될 때 배지가 유용합니다. 반대로 중요하지 않은 부가 정보를 배지로 덕지덕지 붙이면 — 시각적 노이즈만 늘고 정작 중요한 배지가 묻히죠.

이 두 조건이 충족되면 배지가 빛납니다 — 사용자가 목록을 훑으며 색 라벨로 각 항목의 상태를 즉시 파악하고, 중요한 상태(마감·신규 등)에 빠르게 반응하죠. 텍스트로 일일이 “이 항목은 마감되었습니다”라고 쓰는 것보다, 작은 ‘마감’ 배지가 훨씬 빠르게 읽힙니다.

배지를 쓰지 말아야 할 경우. 반대로 — 상태가 하나뿐이거나(구별 불필요), 상태 인지가 중요하지 않거나, 배지가 ‘장식’으로 남용되면 부적절합니다. 또 배지는 ’상태 표시’이지 ’클릭 가능한 버튼·필터’가 아니므로, 상호작용이 필요하면 다른 컴포넌트를 써야 하죠(CP-187에서 다룸 — 배지를 대화형으로 만들지 마라). 배지는 ’읽는’ 정보 라벨이지 ‘누르는’ 컨트롤이 아닙니다.

이 규칙은 배지의 ‘용도 게이트’입니다 적절한 상황(여러 상태·인지 중요)에 쓰라는 것이죠. 이어지는 규칙들이 배지를 ’제대로 만드는 법’ 간결한 레이블(185), 의미 있는 색(186), 비대화형(187), 요소당 하나(188) 등 을 다룹니다. 긴급 공지(CP-151), 모달(CP-180)에서 본 ’컴포넌트를 본분에 맞게’의 배지 버전이죠.

정리하면 — 배지는 여러 상태가 공존하고 그 구별이 사용자에게 중요할 때, 상태를 한눈에 알리는 데 씁니다.

3. 점검 / 개선

무엇을 점검하나

여러 상태 — 배지가 2개 이상의 상태를 구별하는 데 쓰이는가(단일 상태 남용 아님).

인지 중요성 — 그 상태가 사용자 행동·판단에 중요한가.

용도 적합 — 장식·과용이 아니라 상태 표시 본래 목적인가.

개선 방향

여러 상태가 공존하고 구별이 중요한 곳에 배지 적용.

단일 상태·비중요 정보의 배지 남용 제거. 상호작용은 다른 컴포넌트로(CP-187).

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

역할	책임
기획/UX	배지 사용 기준(여러 상태·인지 중요) 수립
디자이너/개발	상태 배지 적용·남용 제거

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

상태 있는 목록·카드(민원·공고·자료)를 가진 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 배지가 2개 이상의 상태를 구별하는 데 쓰이나요?

□ 그 상태가 사용자 행동·판단에 중요한가요?

□ 장식·과용이 아니라 상태 표시 본래 목적인가요?

❓ FAQ

Q1. 배지가 뭔가요? 항목의 상태·분류를 짧은 텍스트로 표시하는 작은 라벨입니다 — ‘신규’, ‘마감’, ‘진행 중’ 등. Q2. 모든 항목에 배지를 붙이면 안 되나요? 다 같은 상태면 구별 의미가 없습니다. 상태가 다를 때, 구별이 중요 할 때 씁니다. Q3. 배지를 클릭해 필터링하게 하면요? 배지는 ‘읽는’ 상태 라벨입니다. 클릭 상호작용이 필요하면 다른 컴포넌트 를 씁니다(CP-187).

6. 마무리

CP-184의 메시지:

상태를 한눈에 알려야 할 때 — 여러 상태가 있고 구별이 중요하면 배지를 쓴다.

배지는 항목 상태를 색 라벨로 빠르게 알리는 도구입니다. 여러 상태가 공존하고 그 구별이 사용자 행동에 중요할 때 가치가 있죠. 단일 상태·비중요 정보에 남용하면 노이즈만 늘고, 상호작용 용도로 쓰면 안 됩니다. 다음 편은 배지 레이블의 정확성·간결성입니다.

다음 편 예고 ▶ 「305. (CP-185) 레이블을 정확한 내용으로 간결하게 제공하고 있다.」

ViewCheck는 배지가 여러 상태 구별이 중요한 경우에 적절히 사용되는지를 진단합니다.

📚 참고 출처

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

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

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