정보 밀도와 보조 설명을 유지합니다.
PATTERN · STATUS BADGE
상태를 위한 배지
배지는 이름이나 경로가 아니라 사용 가능, 진행 중, 확인 필요, 오류처럼 상태를 압축해 전달합니다.
01 · PURPOSE
무엇을 해결하는가
배지는 이름이나 경로가 아니라 사용 가능, 진행 중, 확인 필요, 오류처럼 상태를 압축해 전달합니다.
02 · USE WHEN
사용 조건
사용자가 목록을 훑으며 상태 차이를 빠르게 구분해야 할 때 사용합니다.
- 색상과 텍스트를 함께 제공
- 상태 key와 표시 색을 semantic token으로 연결
- 한 셀에는 대표 상태 하나만 표시
03 · STATUS
표준 상태와 버전
- 표준
- proposed
- 도입 버전
- 2026.10.12.3
- 배포
- source-only
04 · LIVE EXAMPLE
실행 예제
사용 가능진행 중확인 필요오류미설정
Illustrative — 실제 Worker runtime 데이터가 아닙니다.
05 · RESPONSIVE
Desktop · Tablet · Mobile
열을 축소하고 조작 순서를 보존합니다.
320px에서 page overflow 없이 단일 열로 전환합니다.
06 · STATES
상태 변형
successprogresswarningdangerneutraldisabled
07 · STRESS
콘텐츠 스트레스
- 영문 상태 key
- 긴 한국어 상태 문구
- 표와 카드가 혼합된 화면
08 · ACCESSIBILITY
키보드와 보조기술
- 색상만으로 상태를 구분하지 않음
- 고대비 테마에서도 경계 유지
- 상태 변화는 aria-live 영역에서 설명
09 · DO / DON'T
선택 기준
- 상태 문구를 짧고 명시적으로 작성
- 차트와 동일한 semantic key 사용
- 스킬명·버전·경로를 배지로 감쌈
- 동일 상태에 화면마다 다른 색 사용
10 · CODE
구현 예제
<span class="badge success">사용 가능</span><span class="badge warning">확인 필요</span>11 · VALIDATION
검증 체크리스트
- theme contrast
- non-color cue
- table alignment
- localized label
12 · ADOPTION
Worker 채택 상태
- 채택
- not-started
- 소유
- Worker 개발세션
- 실행 증거
- 없음