짧지만 정확하게

KRDS CP-185 — 레이블을 정확한 내용으로 간결하게 제공하고 있다.

0. 들어가며 — 작은 라벨에 담는 말

이번 305편은 배지 레이블을 정확한 내용으로 간결하게 제공하라는 규칙입니다.

배지는 작은 라벨입니다. 그 안에 들어가는 텍스트(레이블)는 — 상태를 정확히 전하면서도 간결해야 하죠. 길면 작은 배지에 안 들어가 잘리고, 모호하면 상태를 오해하게 합니다. ‘진행 중’, ‘마감’, ’신규’처럼 짧고 분명한 한두 단어가 이상적이죠. CP-185는 레이블의 정확성과 간결성을 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 정확·간결한 레이블

CP-185 (컴포넌트 > 배지) “레이블을 정확한 내용으로 간결하게 제공하고 있다.”

배지의 텍스트 레이블을 상태·분류를 정확히 전하는 내용으로, 동시에 짧고 간결하게 작성하라는 뜻입니다.

정리: 배지 레이블은 정확하고 간결하게. 이게 CP-185입니다.

2. 왜 정확하고 간결해야 하나

배지는 ‘상태를 한눈에 빠르게 알리는’ 도구입니다(CP-184). 이 ’빠른 인지’가 작동하려면 레이블이 — 정확하고 (오해 없이) 간결해야(즉시 읽히게) 하죠. 두 속성이 함께여야 합니다.

① 간결성 — 작은 공간, 빠른 인지. 배지는 물리적으로 작습니다. 레이블이 길면 — 배지가 비대해지거나, 텍스트가 잘리거나(…), 줄바꿈되어 모양이 망가지죠. ‘현재 신청 접수가 진행되고 있습니다’ 같은 긴 문장은 배지에 안 맞습 니다. 또 배지는 목록에서 여러 항목을 빠르게 훑을 때 쓰이는데, 레이블이 길면 한눈에 안 읽혀 ‘빠른 인지’라는 가치가 사라지죠. 그래서 ’진행 중’, ‘마감’, ’접수 완료’처럼 한두 단어로 압축합니다. 탭 바 레이블(CP-139) 에서 본 ’짧고 간결하게’와 같은 정신이죠.

② 정확성 — 오해 없는 상태 전달. 간결하다고 모호하면 안 됩니다. 레이블은 그 상태를 정확히 가리켜야 하죠. ‘완료’라는 레이블이 — ’접수 완료’인지 ’처리 완료’인지 모호하면, 사용자가 상태를 오해합니다. 민원에서 ’접수 완료’(아직 처리 안 됨)와 ‘처리 완료’(끝남)는 완전히 다른 상태인데, 둘 다 ’완료’로 표시하면 혼란이죠. 그래서 짧되 정확히 구별되는 단어를 골라야 합니다. 간결성과 정확성은 종종 긴장 관계라(짧을수록 모호해지기 쉬움), 그 균형을 잘 잡는 게 핵심이죠.

③ 일관성. 같은 상태는 항상 같은 레이블로 표현해야 합니다 — 어떤 곳은 ‘진행 중’, 어떤 곳은 ‘처리 중’, 어떤 곳은 ’진행’이면 사용자가 같은 상태인지 헷갈리죠. 상태별 표준 레이블을 정해 사이트 전체에서 일관되게 씁니다(CP-186의 색 일관성과 함께).

작성 원칙:

명사·상태 위주 — ‘신청하기’(동작)가 아니라 ‘접수 완료’(상태). 배지는 상태 표시니까요.

사용자 언어 — 내부 용어가 아니라 사용자가 이해하는 말로. ‘미처리’보다 ’대기 중’ 등.

구별 가능한 단어 — 비슷한 상태들을 명확히 구별(‘접수’/‘처리 중’/‘완료’/‘반려’).

이 정확·간결한 텍스트 레이블은 — 배지가 텍스트 레이블을 제공해야 한다는 CP-190과 직접 연결됩니다(색· 아이콘만이 아니라 텍스트로 상태를 전달). 그리고 그 텍스트의 색 대비(CP-191), 컨테이너 색의 의미(CP-186)가 함께 배지를 완성하죠. 레이블은 배지가 전하는 ’내용’의 핵심입니다.

정리하면 — 배지 레이블은 작은 공간에서 빠르게 읽히도록 간결하되, 상태를 오해 없이 정확히 가리키고, 일관되게 작성해야 합니다.

3. 점검 / 개선

무엇을 점검하나

간결성 — 레이블이 한두 단어로 짧고, 잘림·줄바꿈 없이 들어가는가.

정확성 — 상태를 오해 없이 정확히 가리키는가(비슷한 상태 구별).

일관성 — 같은 상태가 항상 같은 레이블로 표현되는가.

개선 방향

긴 레이블을 핵심 상태어로 압축(‘진행 중’, ‘마감’).

비슷한 상태를 구별되는 단어로(‘접수’/‘처리 중’/‘완료’). 상태별 표준 레이블 통일.

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

역할	책임
UX 라이팅/기획	상태별 정확·간결·일관 레이블 정의
디자이너/개발	레이블 적용·잘림 방지

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 레이블이 한두 단어로 짧고, 잘림·줄바꿈 없이 들어가나요?

□ 상태를 오해 없이 정확히 가리키나요(비슷한 상태 구별)?

□ 같은 상태가 항상 같은 레이블로 표현되나요?

❓ FAQ

Q1. 얼마나 짧아야 하나요? 보통 한두 단어입니다. 배지에 잘림 없이 들어가고 한눈에 읽히는 길이가 기준이죠. Q2. 짧게 하다 모호해지면요? 간결성과 정확성의 균형이 핵심입니다. ‘완료’가 모호하면 ’접수 완료’/’처리 완료’로 구별합니다. Q3. 같은 상태에 다른 말을 쓰면요? 사용자가 헷갈립니다. 상태별 표준 레이블을 정해 일관되게 씁니다.

6. 마무리

CP-185의 메시지:

짧지만 정확하게 — 배지 레이블을 간결하고 정확한 내용으로 제공하라.

배지는 작은 공간에서 상태를 빠르게 알립니다. 레이블이 길면 잘리고 한눈에 안 읽히며, 모호하면 상태를 오해하죠. 한두 단어로 압축하되 상태를 정확히 구별하고, 일관되게 씁니다. 다음 편은 배지 색상의 의미 체계입니다.

다음 편 예고 ▶ 「306. (CP-186) 레이블과 컨테이너의 색상은 일반적인 의미 체계, 일관성을 고려하여 적용하고 있다.」

ViewCheck는 배지 레이블이 정확하고 간결한지를 진단합니다.

📚 참고 출처

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

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

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