카드 · 스탯

카드는 한 가지 대상(센서 하나, 일지 하나)을 담는 그릇이고, 스탯은 큰 숫자 하나를 담는 카드입니다. 카드 안에 카드를 넣지 않습니다.

냉동창고 A

-18.4℃

기준 안 · 3분 전

정의

.fna-card는 표면(surface) + 1px 선 + 라운드 16 + 카드 그림자입니다. 머리(제목·부제·액션) · 본문 · 꼬리(버튼) 세 부분이 있고, 각각 생략할 수 있습니다. .fna-stat은 숫자(28px 900) + 라벨(12px) 두 줄짜리 요약 카드입니다.

언제 쓰고 언제 쓰지 않나

목록의 각 항목이 독립된 대상이고 항목마다 상태·액션이 있을 때(센서 카드, 일지 카드).
같은 열 구조가 반복되면 카드가 아니라 표. 폰에서만 카드로 바꾸지 않는다 — 표는 가로 스크롤한다.
본문 텍스트 한 덩어리를 카드로 감싸지 않는다(카드 안 카드, 카드 안 배너 금지).
스탯은 화면 맨 위 요약 줄에서만, 2~4개.

해부도

냉동창고 A FRZ-01 · 3분 전

정상

-18.4℃

기준 −22 ~ −15℃

제목 15/800대상 이름. 화면 제목과 겹치면 생략
부제 12 mutedID·마지막 수신 시각처럼 판단에 필요한 맥락
머리 액션배지 하나 또는 아이콘 버튼 하나. 우측 정렬
본문 (패딩 16)숫자·표·차트·폼. 본문끼리는 12 간격
꼬리 (surface-low)버튼 우측 정렬, 주 버튼 1개 + 보조 1개까지

변형

기본 · 평면(flat) · 부상(raised, 선택됨)

기본 — 선 + 카드 그림자

flat — 표·폼 안, 인쇄

raised — 선택된 카드

코드

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px">
    <div class="fna-card" style="margin:0"><div class="fna-card__body">기본 — 선 + 카드 그림자</div></div>
    <div class="fna-card fna-card--flat" style="margin:0"><div class="fna-card__body">flat — 표·폼 안, 인쇄</div></div>
    <div class="fna-card fna-card--raised" style="margin:0;border-color:var(--fna-primary)"><div class="fna-card__body">raised — 선택된 카드</div></div>
  </div>

스탯 타일 — 상태별 숫자 색 · 스파크라인

42건

오늘 CCP 점검

정상 센서

경보

주의

-18.4℃

냉동 A · 12점 추세

코드

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px">
    <div class="fna-stat"><div class="fna-stat__n">42<span style="font-size:.5em;color:var(--fna-text-muted)">건</span></div><div class="fna-stat__t">오늘 CCP 점검</div></div>
    <div class="fna-stat fna-stat--ok"><div class="fna-stat__n">41</div><div class="fna-stat__t">정상 센서</div></div>
    <div class="fna-stat fna-stat--alarm"><div class="fna-stat__n">2</div><div class="fna-stat__t">경보 <i class="fna-dot fna-dot--alarm fna-dot--pulse"></i></div></div>
    <div class="fna-stat fna-stat--caution"><div class="fna-stat__n">1</div><div class="fna-stat__t">주의</div></div>
    <div class="fna-stat"><div class="fna-stat__n" style="display:flex;align-items:center;gap:10px">-18.4<span style="font-size:.5em;color:var(--fna-text-muted)">℃</span><svg class="fna-sparkline" viewBox="0 0 96 28" aria-hidden="true"><path class="line" d="M2.0,14.8L10.4,18.0L18.7,11.6L27.1,22.8L35.5,26.0L43.8,19.6L52.2,13.2L60.5,8.4L68.9,2.0L77.3,11.6L85.6,21.2L94.0,16.4"/><circle class="marker" cx="94.0" cy="16.4" r="3"/></svg></div><div class="fna-stat__t">냉동 A · 12점 추세</div></div>
  </div>

센서 카드 (폰 목록) — 상태 배지 + 큰 숫자 + 기준

냉동창고 A

기준 −22 ~ −15 · 3분 전

-18.4℃

정상

냉장 1

기준 0 ~ 5 · 방금 전

7.3℃

온도 이탈

전처리실

2시간 전부터

--℃

수신 끊김

코드

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px">
    <div class="fna-card" style="margin:0"><div class="fna-card__body" style="display:flex;justify-content:space-between;align-items:center;gap:12px"><div><div style="font-weight:800">냉동창고 A</div><div class="fna-muted">기준 −22 ~ −15 · 3분 전</div></div><div style="text-align:right"><span class="metric metric--ok" style="font-size:28px">-18.4<span class="unit">℃</span></span><div><span class="fna-badge fna-badge--ok">정상</span></div></div></div></div>
    <div class="fna-card" style="margin:0;border-color:var(--fna-danger)"><div class="fna-card__body" style="display:flex;justify-content:space-between;align-items:center;gap:12px"><div><div style="font-weight:800">냉장 1</div><div class="fna-muted">기준 0 ~ 5 · 방금 전</div></div><div style="text-align:right"><span class="metric metric--alarm" style="font-size:28px">7.3<span class="unit">℃</span></span><div><span class="fna-badge fna-badge--alarm"><i class="fna-dot fna-dot--alarm fna-dot--pulse"></i>온도 이탈</span></div></div></div></div>
    <div class="fna-card" style="margin:0"><div class="fna-card__body" style="display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--fna-text-muted)"><div><div style="font-weight:800;color:var(--fna-text)">전처리실</div><div class="fna-muted">2시간 전부터</div></div><div style="text-align:right"><span class="metric" style="font-size:28px;color:var(--fna-text-placeholder)">--<span class="unit">℃</span></span><div><span class="fna-badge fna-badge--off">수신 끊김</span></div></div></div></div>
  </div>

상태

기본

냉동 A

호버(클릭 가능 카드)

냉동 A

선택

냉동 A

경보 (테두리 danger)

냉장 1

비활성·미수신

전처리실

치수

항목	값	토큰
라운드	16	`--fna-radius-lg`
테두리	1 border	경보 카드는 danger, 선택은 primary
머리 패딩	12 / 16	하단 선 1
본문 패딩	16	시니어 20
꼬리 패딩	12 / 16	배경 surface-low, 상단 선
카드 사이	16 (폰 12)	`margin-bottom` 또는 grid gap
스탯 패딩 · 숫자	16 / 20 · 28px 900	라벨 12/700 muted, 간격 2
최소 폭	스탯 150 · 카드 220	grid auto-fit

Do · Don't

9월 29일 금속검출 일지

검토 대기

Do 한 카드 = 한 대상, 액션은 꼬리에

9월 29일 일지

Don't 카드 안 카드 · 액션이 본문 여기저기

경보

Do 스탯은 상태색 숫자 + 짧은 라벨

🚨 2

현재 발생 중인 경보 건수입니다

Don't 스탯에 긴 설명 · 아이콘 장식 · 그라데이션

접근성

카드 제목은 <h3>(화면 h1 → 절 h2 → 카드 h3). 목록이면 <ul><li> 안에 카드.
카드 전체가 클릭 영역이면 제목 링크 하나만 탭 순서에 두고 나머지는 pointer-events 로 확장한다. 카드 안에 버튼이 있으면 카드 전체 클릭은 금지(중첩 인터랙티브).
스탯 숫자의 상태색은 *-text 단계(4.5:1). 라벨에 상태 글자(경보·정상)를 넣어 색 없이도 읽히게.
경보 카드는 테두리 색 + 배지 + 펄스 점 — 세 가지 신호.

문구

제목은 대상 이름 그대로(냉동창고 A · 9월 29일 금속검출 일지). 부제는 "3분 전", "FRZ-01" 같은 판단 맥락. 스탯 라벨은 2~6자 명사(오늘 CCP 점검 · 경보 · 정상 센서). 카드 안 문장은 한 줄 이내.

코드

<section class="fna-card">
  <div class="fna-card__head"><h3 class="fna-card__title">냉동창고 A <span class="fna-card__sub">3분 전</span></h3><span class="fna-spacer"></span><span class="fna-badge fna-badge--ok">정상</span></div>
  <div class="fna-card__body">…</div>
  <div class="fna-card__foot"><button class="fna-btn fna-btn--sm">상세</button></div>
</section>
<div class="fna-stat fna-stat--alarm"><div class="fna-stat__n">2</div><div class="fna-stat__t">경보</div></div>

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