배지 · 상태 점

상태를 한 단어로 표시하는 알약과 7px 점. 정상·주의·경보·부적합·검토·확인·미수신 일곱 톤이 tokens.json semantic.status 와 1:1 로 대응하며, 라벨 없는 색 점만 쓰지 않습니다.

정상주의경보부적합

정의

배지는 대상의 지금 상태를 알약 안 한 단어로 보여줍니다. 상태 점은 배지를 둘 자리가 없을 때(표의 첫 셀, 사이드바 라이브 박스) 배지 앞에 붙는 보조 표시입니다. 건수를 세는 카운트 배지(드로어 항목의 "3")도 같은 모양을 씁니다.

언제 쓰고 언제 쓰지 않나

센서 상태, CCP 판정, 수신 여부, 카운트에 쓴다.
결재 단계에는 쓰지 않는다 → 결재 상태(모양이 다르다: 앞에 점).
카테고리 태그(라인·구역)에는 --outline 형만. 색 톤은 상태에만.
한 셀·한 카드에 배지 하나. 두 상태가 동시면 더 급한 것만.

해부도

온도 이탈

컨테이너pill · 패딩 .2em .75em · container 배경 · 1px 투명 테두리(outline 형에서 색)
상태 점 (선택).6em(≥7px) 원, DEFAULT 톤. 경보만 pulse
라벨11px 700 (lg 12) · on-container 색 · 줄바꿈 없음 · 2~5자

변형

7 톤 — semantic.status 라벨 그대로

정상적합 주의 경보온도 이탈 부적합 검토 확인 미수신중지

코드

<div class="fna-row">
    <span class="fna-badge fna-badge--ok">정상</span><span class="fna-badge fna-badge--ok">적합</span>
    <span class="fna-badge fna-badge--caution">주의</span>
    <span class="fna-badge fna-badge--alarm">경보</span><span class="fna-badge fna-badge--alarm">온도 이탈</span>
    <span class="fna-badge fna-badge--nonconform">부적합</span>
    <span class="fna-badge fna-badge--review">검토</span>
    <span class="fna-badge fna-badge--info">확인</span>
    <span class="fna-badge fna-badge--off">미수신</span><span class="fna-badge fna-badge--off">중지</span>
  </div>

점 동반 · 아웃라인 · 큰 크기 · 카운트

정상 경보 1라인냉동 주의 · 상한 근접 312

코드

<div class="fna-row">
    <span class="fna-badge fna-badge--ok"><i class="fna-dot fna-dot--ok"></i>정상</span>
    <span class="fna-badge fna-badge--alarm"><i class="fna-dot fna-dot--alarm fna-dot--pulse"></i>경보</span>
    <span class="fna-badge fna-badge--outline">1라인</span><span class="fna-badge fna-badge--outline">냉동</span>
    <span class="fna-badge fna-badge--caution fna-badge--lg">주의 · 상한 근접</span>
    <span class="fna-badge fna-badge--alarm">3</span><span class="fna-badge">12</span>
  </div>

상태 점 단독 (표 셀 · 사이드바)

정상 41주의 1경보 2부적합 0검토 5확인 3미수신 1

코드

<div class="fna-row" style="gap:20px">
    <span><i class="fna-dot fna-dot--ok"></i>정상 41</span><span><i class="fna-dot fna-dot--caution"></i>주의 1</span><span><i class="fna-dot fna-dot--alarm fna-dot--pulse"></i>경보 2</span><span><i class="fna-dot fna-dot--nonconform"></i>부적합 0</span><span><i class="fna-dot fna-dot--review"></i>검토 5</span><span><i class="fna-dot fna-dot--info"></i>확인 3</span><span><i class="fna-dot fna-dot--off"></i>미수신 1</span>
  </div>

네이비 크롬 위 (사이드바 라이브) — side-* 밝은 톤

경보 2주의 1정상 41

상태

배지는 상호작용하지 않으므로 호버·포커스 상태가 없습니다. 클릭해서 필터가 되면 그것은 알약 탭입니다. 경보 배지의 점만 1.4초 펄스(동작 줄이기 시 정지).

치수

항목	기본	lg	시니어(StatusPill large)
높이	≈20	≈24	32
글자	11 / 700	12 / 700	18 / 800
패딩	.2em .75em	.3em .9em	6 / 14
점	7	8	10
점–라벨 간격	.35em	.35em	8
배지 사이	8	8	8

톤 대응표

상태 키	톤	라벨 (labelAlt)	배경 / 글자	뜻
`ok`	success	정상 (적합)	success-container / on-container	기준 안 · CCP 판정 적합
`caution`	warning	주의	warning-container / on-container	기준 근접 · 배터리 부족
`alarm`	danger	경보	danger-container / on-container	지금 이탈 중
`nonconform`	error	부적합	error-container / on-container	기록된 판정 결과
`info`	info	확인	info-container / on-container	사람이 봐야 하는 안내
`off`	neutral	미수신 (중지)	neutral-container / on-container	데이터 없음 · 사용 중지
(review)	review	검토	review-container / on-container	검토 중인 항목 표시

Do · Don't

적합부적합

Do 라벨은 기록 용어 그대로

OK ✅NG🔥 HOT

Don't 영문 약어 · 이모지 · 임의 표현

경보1라인

Do 점은 배지 앞에, 색 톤은 상태에만

1라인2라인

Don't 색 점만 · 카테고리에 상태색점만으로는 색각 이상·인쇄에서 구분 불가

접근성

배지는 텍스트라 그대로 읽힌다. 점만 있을 때는 <i class="fna-dot" aria-hidden> + 시각적으로 숨긴 텍스트 또는 옆 라벨.
on-container / container 대비 ≥ 4.5:1 (7 톤 모두 라이트·다크 검증).
점(DEFAULT 톤)은 배경 대비 ≥ 3:1. warning 은 3.2:1 로 턱걸이 — 점 단독으로 쓰지 않는다.
경보 펄스는 prefers-reduced-motion 에서 정지.

문구

상태 라벨은 tokens.json semantic.status 의 label 을 그대로 씁니다: 정상·적합·주의·경보·부적합·확인·미수신·중지. 화면마다 새 표현("양호", "위험", "Fail")을 만들지 않습니다. 세부 상태가 필요하면 "온도 이탈", "수신 끊김"처럼 명사구로 확장하되 톤은 유지합니다.

코드

<span class="fna-badge fna-badge--ok">정상</span>
<span class="fna-badge fna-badge--alarm"><i class="fna-dot fna-dot--alarm fna-dot--pulse" aria-hidden="true"></i>온도 이탈</span>
<span class="fna-badge fna-badge--outline">1라인</span>
<span class="fna-badge fna-badge--caution fna-badge--lg">주의</span>
<i class="fna-dot fna-dot--off" aria-hidden="true"></i>미수신
/* RN 시니어 */ <StatusPill tone="danger" text="온도 이탈" icon="alert-circle" large/>

안정마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css .fna-badge · .fna-dot · tokens.json semantic.statusComponents · FNA 디자인 시스템 v1.0