배지는 하나만

KRDS CP-188 — 하나의 요소에 한 개의 배지를 사용하고 있다.

0. 들어가며 — 라벨이 여러 개 붙으면

이번 308편은 하나의 요소에 한 개의 배지를 사용하라는 규칙입니다.

배지는 항목의 핵심 상태를 한눈에 알리는 라벨입니다. 그런데 한 항목에 배지가 두 개, 세 개 붙으면 — ‘신규’ + ‘인기’ + ‘마감임박’ 처럼 — 어느 게 핵심인지 흐려지고 시각적으로 어수선해지죠. CP-188은 요소당 배지를 하나로 제한해 핵심 상태에 집중시킵니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 요소당 배지 하나

CP-188 (컴포넌트 > 배지) “하나의 요소에 한 개의 배지를 사용하고 있다.”

하나의 항목(요소)에는 배지를 하나만 붙여, 가장 중요한 상태를 명확히 전달하고 시각적 혼란을 막으라는 뜻입니다.

정리: 한 요소엔 배지 하나만. 이게 CP-188입니다.

2. 왜 요소당 하나여야 하나

배지의 힘은 ‘핵심 상태 하나를 한눈에 알리는’ 데 있습니다. 이 힘은 희소성에서 나오죠 — 항목에 배지가 하나 있으면 그것이 도드라져 즉시 인지됩니다. 그런데 배지를 여러 개 붙이면 이 힘이 분산됩니다.

① 핵심 흐려짐. 한 항목에 ‘신규’, ‘인기’, ‘마감임박’, ‘추천’ 배지가 다 붙으면 — 사용자는 ‘이 항목의 핵심 상태가 뭐지?’ 하고 헷갈립니다. 여러 배지가 서로 시선을 다투며, 정작 가장 중요한 정보(예: ‘마감임박’)가 다른 배지들에 묻히죠. 배지를 하나로 제한하면 — ’이 항목에서 가장 중요한 상태는 이것’이라는 메시지가 또렷해집니다.

② 시각적 어수선함. 작은 항목(목록 행, 카드)에 배지 여러 개가 붙으면 — 색색의 라벨이 다닥다닥 모여 시각적 노이즈가 됩니다. 목록 전체로 보면 배지들이 난무해 어느 것도 눈에 안 들어오죠. 배지 하나면 깔끔하고, 그 하나가 제대로 주목받습니다.

③ 우선순위 결정 강제. 요소당 하나 제한은 — 설계자에게 ‘이 항목에서 가장 중요한 상태가 무엇인가’를 결정하도록 강제합니다. 여러 상태가 있더라도 그중 사용자에게 가장 중요한 하나(CP-184의 ’인지 중요’)를 골라 배지로 표시하죠. 이 우선순위 판단이 사용자에게 명료한 정보를 줍니다. 탭 바 5개 제한(CP-137), 모달 단순화 (CP-180)에서 본 ’핵심에 집중하기 위한 제한’의 배지 버전이죠.

여러 정보가 정말 필요하면? 항목에 정말 여러 상태·속성을 표시해야 한다면 — 배지를 여러 개 붙이는 게 아니라 다른 방법을 씁니다:

가장 중요한 하나만 배지로, 나머지는 본문 텍스트·아이콘·메타 정보로 표현.

상태를 통합 — ’신규 + 인기’를 합쳐 하나의 상태로 표현하거나, 정말 둘 다 핵심이면 우선순위가 높은 하나를 선택.

상세에서 펼치기 — 항목 클릭 시 상세에서 추가 속성을 보여줌.

핵심은 — 항목의 ‘한눈에 알릴 가장 중요한 상태 하나’를 배지로, 나머지는 다른 수단으로 분산하는 것입니다. 배지를 남발하면(CP-184의 ’남용’ 경고와 연결) 시각 노이즈와 핵심 흐려짐이 생기죠.

**‘요소당 하나’의 범위.** 이 규칙은 ’하나의 요소(항목)’당 배지 하나를 말합니다. 목록에 여러 항목이 있으면 각 항목에 각자 배지 하나씩 붙는 건 자연스럽죠(페이지네이션 ’한 화면에 하나’ CP-118의 ’한 목록당 하나’와 같은 정신 — 단위당 하나). 한 항목 안에 여러 배지를 욱여넣지 말라는 것입니다.

정리하면 — 배지는 핵심 상태 하나에 집중하는 도구이므로, 요소당 하나만 붙여 그 상태를 또렷이 전달하고 시각적 혼란을 막아야 합니다.

3. 점검 / 개선

무엇을 점검하나

요소당 하나 — 한 항목에 배지가 하나만 붙어 있는가.

핵심 선정 — 그 배지가 항목의 가장 중요한 상태인가.

나머지 처리 — 다른 속성·상태가 배지 외 수단(텍스트·아이콘)으로 표현되는가.

개선 방향

항목당 가장 중요한 상태 하나만 배지로, 나머지는 텍스트·아이콘·상세로 분산.

여러 배지 남발 제거. 상태 통합 또는 우선순위 선택.

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

역할	책임
기획/UX	항목별 핵심 상태 선정
디자이너/개발	요소당 배지 하나 적용·나머지 분산

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 한 항목에 배지가 하나만 붙어 있나요?

□ 그 배지가 항목의 가장 중요한 상태인가요?

□ 다른 속성·상태가 배지 외 수단으로 표현되나요?

❓ FAQ

Q1. 항목에 상태가 여러 개면요? 가장 중요한 하나만 배지로, 나머지는 텍스트·아이콘·상세로 분산합니다. 배지를 여러 개 붙이지 않습니다. Q2. 왜 여러 개면 안 되나요? 핵심이 흐려지고 시각적으로 어수선해집니다. 하나여야 도드라져 즉시 인지됩니다. Q3. 목록의 여러 항목에 배지가 있는 건요? 각 항목에 하나씩이면 괜찮습니다. 한 항목 안에 여러 배지가 문제죠.

6. 마무리

CP-188의 메시지:

배지는 하나만 — 한 요소에 가장 중요한 상태 하나를 표시하라.

배지의 힘은 핵심 상태 하나를 도드라지게 알리는 데 있습니다. 한 항목에 여러 배지가 붙으면 핵심이 흐려지고 어수선해지죠. 가장 중요한 상태 하나만 배지로, 나머지는 다른 수단으로 분산해 또렷이 전달합니다. 다음 편은 배경색에 주조색을 써서 버튼 오인을 막는 규칙입니다.

다음 편 예고 ▶ 「309. (CP-189) 배지의 배경색으로 서비스의 주조색을 사용하여 버튼으로 오인하지 않게 하고 있다.」

ViewCheck는 하나의 요소에 배지가 하나만 사용되는지를 진단합니다.

📚 참고 출처

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

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

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