① 품질 판정 화면
시험 결과를 보여주고 적합 여부를 알립니다. 제니트리에만 있는 패턴이고, 가장 조심해야 하는 화면입니다.
🚫
이 화면은 흑백으로 인쇄되어 유통됩니다. COA·시험성적서는 팩스·복사로 거래처에 전달됩니다. 판정을 색으로만 표시하면 복사되는 순간 정보가 통째로 사라집니다.
배치 순서
위에서부터 정체 → 맥락 → 근거 → 조치 순입니다. 급한 사람이 위 두 줄만 보고 나가도 되게 합니다.
| # | 구획 | 쓰는 컴포넌트 |
|---|---|---|
| 1 | LOT · 품목명 · 최종 판정 | 배지 — 크게, 오른쪽 위 |
| 2 | 시험 조건 (품목코드·시험일·시험자) | 라벨-값 목록 .jt-desc |
| 3 | 항목별 규격 vs 측정값 vs 판정 | 표 + 판정 배지 |
| 4 | 주의가 필요한 사항 | 알림 |
| 5 | 다음 행동 | 버튼 — 발행 · 이력 |
규칙
판정은 색 + 글자
<!-- ✅ -->
<span class="jt-badge jt-badge-pass">적합</span>
<!-- 🚫 색 원만 -->
<span style="background:green;width:10px;height:10px"></span>판정 4종은 일반 상태와 다릅니다
| 판정 | 클래스 | 뜻 |
|---|---|---|
| 적합 | jt-badge-pass | 규격 충족 |
| 부적합 | jt-badge-fail | 규격 미달 — 출고 불가 |
| 시험중 · 보류 | jt-badge-hold | 판정 전 |
| 관리한계 이탈 | jt-badge-oos | 규격은 통과하나 관리 범위를 벗어남 |
jt-badge-success(일반 성공)와 jt-badge-pass(시험 적합)를 섞어 쓰지 마세요. 나중에 판정색만 바꿔야 할 때 서로를 건드리게 됩니다.
관리한계와 판정을 헷갈리게 두지 마세요
미리보기의 점도처럼 관리한계는 벗어났지만 규격은 통과하는 경우가 실제로 자주 생깁니다. 최종 판정(상단 배지)과 항목 판정(표 안)이 다를 수 있으므로, 알림으로 왜 그런지 문장으로 설명합니다.
측정값은 숫자 서식으로
<td class="jt-num" style="text-align:right">4,180</td>.jt-num이 Figtree + 자릿수 고정을 적용합니다. 규격과 측정값이 세로로 정렬되어야 눈으로 비교할 수 있습니다.
하지 말 것
- 판정을 색만으로 전달 — 흑백 인쇄에서 사라집니다
- 규격 없이 측정값만 보여주기 — 적합인지 판단할 근거가 없습니다
- 근거를 툴팁에만 넣기 — 모바일에서 안 열립니다. 토글팁을 쓰세요
- 부적합인데 다음 행동(재시험 의뢰·이의 제기) 버튼이 없는 것
접근성
- 최종 판정을
role="status"영역에 넣으면 화면이 바뀔 때 스크린리더가 읽습니다 - 표 헤더에
<th>사용 — 시각적 굵기만으로 헤더를 표현하지 마세요 - 규격 근거 아이콘 버튼에
aria-label필수
인쇄
@media print에서 그림자·애니메이션을 제거하고, 문서 영역은 라이트 고정으로 둡니다.
자세한 규칙은 인쇄 · PDF 출력.