인쇄 양식

화면에서 인쇄하면 그대로 심사 서류가 되어야 합니다. A4 세로, 가로형 로고 머리글, 화면 ID·문서 ID·출력 시각, 판정은 ○/✕ 기호, 서명란 3칸, 흑백에서 읽히는 표.

FNA 스마트해썹 · (주)한결식품

금속검출기 점검 일지

2026-09-29 (화)
CCP2-PT-20260929

시각	라인	Fe	SUS	판정
08:00	1	○	○	적합
12:00	1	○	○	적합
12:00	3	○	✕	부적합

작성 김현장검토 이품질승인 최공장장

제안 컴포넌트: .fna-print 는 components.css 에 없습니다. 현재 components.css 의 @media print 는 토스트·모달·버튼 숨김과 카드 그림자 제거만 합니다. 실제 양식 구조는 여기서 정의합니다.

정의

인쇄 양식은 일지·리포트·경보 조치 기록을 종이(또는 PDF)로 내는 고정 레이아웃입니다. 화면 CSS 와 별개로 항상 흰 배경·검정 글자·1px 검정 선이며, 색은 브랜드 네이비 머리글 선 하나에만 씁니다.

언제 쓰고 언제 쓰지 않나

결재가 끝난(승인 완료) 문서, 경보 조치 기록, 월 요약. 심사관 열람 모드의 "인쇄" 버튼.
작성 중·검토 대기 문서는 "미승인" 워터마크 없이는 인쇄하지 않는다.
차트는 추세선·막대만 흑백으로. 히트맵·도넛은 표로 대체.

해부도

FNA 스마트해썹 · (주)한결식품 평택공장

금속검출기 점검 일지 (CCP-2)

2026-09-29 (화)
문서 ID CCP2-PT-20260929
화면 CCP-JNL-01 · 출력 2026-09-30 09:12
승인 완료

시각	라인	Fe 1.5	SUS 2.5	비철 2.0	판정	담당
08:00	1	검출	검출	검출	적합	김현장
12:00	1	검출	검출	검출	적합	김현장
12:00	3	검출	통과	검출	부적합	박현장

부적합 조치 · 12:05 3라인 정지, 감도 재조정(SUS 2.5 → 검출 확인), 12:00~12:20 생산품 격리 후 재검출 — 박현장 / 확인 이품질

작성김현장09-29 18:02

검토이품질09-29 18:40

승인최공장장09-30 08:30

기록 무결성: 승인 후 수정 불가 · 정정 이력 2건 별지1 / 1

머리글가로형 로고 + 업체·사업장 + 문서명(18/900). 네이비 2px 밑선 — 색은 여기만
메타날짜 · 문서 ID · 화면 ID · 출력 시각 (고정폭)
결재 스탬프승인 완료 / 미승인 (미승인이면 워터마크)
기록 표1px 검정 테두리, 헤더 연회색, 판정은 ○/✕ 기호 + 글자
서명란 3칸작성 · 검토 · 승인, 이름 + 시각 + 서명 이미지 28px
바닥글무결성 문구 · 쪽 번호

변형

양식	방향	내용	서명
CCP 점검 일지 (금속검출 · 가열)	A4 세로	시각별 표 + 부적합 조치	3칸
온도 기록 일보	A4 세로	센서 × 2시간 표 + 추세선(흑백)	3칸
경보 · 개선조치 보고	A4 세로	사건 · 원인 · 조치 · 재발 방지, 전후 온도	2칸 (조치 · 확인)
월 요약	A4 가로	일별 건수 막대 + 부적합 목록	1칸 (승인)
정정 이력 별지	A4 세로	수정 이력 표(누가·언제·무엇을·왜)	—

상태

결재 상태	인쇄
승인 완료	스탬프 "승인 완료", 서명 3칸 채움
승인 대기 · 검토 대기	스탬프 "미승인", 대각선 워터마크 "미승인 · 참고용", 빈 서명란
반려	인쇄 불가(버튼 비활성, "반려된 문서는 인쇄할 수 없습니다")
정정 있음	바닥글에 "정정 이력 n건 별지" + 별지 자동 첨부

치수

항목	값
용지 · 여백	A4 · 상하 14mm 좌우 12mm (`@page`)
본문 글자	11px (표 10.5) · 행간 1.45
문서명	18 / 900
표 선	1px #333 · 셀 패딩 4/6
서명란	3열 · 높이 62 · 서명 이미지 28
머리글 선	2px #1b284f
페이지 나눔	표 행·서명란 `break-inside:avoid`, 머리글은 매 쪽 반복(thead)

Do · Don't

○ 적합

✕ 부적합

Do 판정은 기호 + 글자 (흑백)

적합

부적합

Don't 색으로만 구분

CCP2-PT-20260929 · CCP-JNL-01 · 출력 2026-09-30 09:12

Do 문서 ID · 화면 ID · 출력 시각이 항상 있다

Ctrl+P 로 관제 화면 출력

Don't 화면 스크린샷 그대로 인쇄사이드바·버튼·파란 배경이 같이 나온다

접근성 · 무결성

PDF 로 저장할 때 텍스트가 살아 있어야 한다(이미지 PDF 금지) — 검색·복사·스크린리더.
서명 이미지에 alt="김현장 서명".
출력물의 값은 화면과 같은 소수 자릿수·단위. 반올림 금지.
인쇄 버튼은 아티팩트 뷰어 등 일부 환경에서 동작하지 않으므로 "PDF 내려받기"를 서버 생성으로 함께 제공한다.

문구

문서명은 규정 명칭 그대로: "금속검출기 점검 일지 (CCP-2)", "가열공정 온도 기록 (CCP-1)", "냉장·냉동 온도 기록 일보". 스탬프: 승인 완료 · 미승인. 바닥글: "기록 무결성: 승인 후 수정 불가 · 정정 이력 n건 별지". 서명란 라벨: 작성 · 검토 · 승인.

코드

<article class="fna-print">
  <header class="fna-print__head">
    <div><div class="fna-print__brand"><svg …/>FNA 스마트해썹 · (주)한결식품 평택공장</div><h1 class="fna-print__title">금속검출기 점검 일지 (CCP-2)</h1></div>
    <div class="fna-print__meta"><b>2026-09-29 (화)</b><br>문서 ID <span class="fna-print__id">CCP2-PT-20260929</span>…<span class="fna-print__stamp">승인 완료</span></div>
  </header>
  <table><thead>…</thead><tbody><tr><td class="ok">적합</td>…<td class="bad">부적합</td></tr></tbody></table>
  <div class="fna-print__sign"><div><small>작성</small><b>김현장</b><img src="sig.png" alt="김현장 서명"></div>…</div>
  <footer class="fna-print__foot">…</footer>
</article>
@media print{ @page{size:A4;margin:14mm 12mm} .fna-toast,.fna-modal,.fna-bottom-nav,.fna-btn{display:none!important} }

제안 (소스 미반영)마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 제안 — proposed.css .fna-print · components.css @media print · 식약처 HACCP 기록 양식 관행Components · FNA 디자인 시스템 v1.0