서명 패드

결재 서명은 한 번 등록하면 이후 제출·검토·승인에 자동으로 쓰입니다. 패드는 2:1 비율, 잉크 2.4px, 등록 후에는 미리보기와 등록 시각을 보여줍니다.

김현장 · 09-29 18:02

제안 컴포넌트: 웹용 .fna-signpad 는 components.css 에 없습니다. RN 앱의 SignatureScreen 과 로컬 웹의 캔버스 서명(선 2.4px, round cap) 동작을 기준으로 정리했습니다.

정의

서명 패드는 손가락·펜으로 서명을 그려 PNG 로 저장하는 입력입니다. 결재(제출·검토·승인) 시 자동 첨부되며, 등록된 서명이 없으면 결재 버튼이 "서명하고 진행"으로 바뀝니다. 서명 이미지는 기록의 일부이므로 한 번 결재에 쓰인 서명은 삭제해도 그 문서에서 지워지지 않습니다.

언제 쓰고 언제 쓰지 않나

결재 서명 등록(설정 화면), 결재 직전 서명 없을 때(모달 안), 심사 확인 서명(태블릿).
매 결재마다 다시 그리게 하지 않는다 — 등록 서명을 자동 사용.
타이핑 이름·체크박스로 대신하지 않는다(식약처 점검 시 서명 요구).

해부도

여기에 서명하세요

손가락 또는 펜으로 그리세요

캔버스 2:1점선 테두리 2px border-strong, 라운드 16. 잉크가 생기면 실선 primary
기준선하단 22% 위치의 얇은 선 — 서명 위치 안내
힌트"여기에 서명하세요" placeholder 색. 첫 획에 사라짐
지우기텍스트 버튼. 확인 없이 즉시(아직 저장 전)
등록잉크가 있을 때만 활성

변형

등록된 서명 보기 · 다시 등록 · 삭제

김현장2026-09-12 09:14 등록

코드

<div style="display:flex;flex-direction:column;gap:12px;max-width:420px">
    <div class="fna-signpad__preview"><svg viewBox="0 0 120 40" aria-label="등록된 서명 이미지"><path d="M8 30c8-18 14-18 18-6s6 2 12-8 10 4 16 6 12-16 18-8 8 14 16 4 10-6 20-2" fill="none" stroke="var(--fna-text)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg><div><b style="display:block">김현장</b><span class="fna-signpad__meta">2026-09-12 09:14 등록</span></div></div>
    <div class="fna-btn-group"><button class="fna-btn fna-btn--outline">서명 다시 등록</button><button class="fna-btn fna-btn--danger">서명 삭제</button></div>
  </div>

시니어 — 3:2 큰 패드, 64px 버튼

서명 등록

아래 칸에 손가락으로 서명하세요.

여기에 서명

상태

상태	표현
비어 있음	점선 테두리, 힌트 표시, 등록 버튼 비활성
그리는 중	실선 primary 테두리, 힌트 숨김. 스크롤 잠금(touch-action:none)
등록 중	버튼 "등록 중", 캔버스 잠금
등록됨	미리보기 + 이름 + 등록 시각. 다시 등록 · 삭제
오류	배너: "서명 등록 실패 · 이미지가 너무 큽니다(2MB 이하)" / "서명 이미지를 읽지 못했습니다"

치수

항목	기본	시니어
비율	2 : 1	3 : 2
최소 폭	280	전체폭
테두리	2 점선 → 실선	3
잉크	2.4px round · text 색	3px
저장 해상도	800 × 400 PNG, 투명 배경	같음
미리보기 높이	36	48
인쇄 높이	28 (서명란 안)	—

Do · Don't

"이 서명은 내 결재 서명으로 등록되어 이후 결재에 자동 사용됩니다."

Do 등록 서명 자동 사용, 결재 전 확인 문장

매번 "서명을 그려 주세요" · 이름 입력란으로 대체

Don't 결재마다 새 서명 강요 · 이름 타이핑 대체

"등록된 서명을 삭제하면 다시 등록할 때까지 결재를 처리할 수 없습니다."

Do 삭제는 결과를 말한다

서명 삭제 → 승인된 리포트의 서명란이 비워짐

Don't 삭제하면 과거 결재 서명까지 사라지는 구현기록 무결성 위반

접근성

캔버스에 aria-label="서명 영역". 키보드만으로는 그릴 수 없으므로 대체 경로(관리자 등록·스캔 업로드)를 설정 화면에 둔다.
지우기·등록 버튼 44px. 시니어 64px.
잉크 색은 --fna-text: 다크에서 그리면 밝은 잉크가 되므로 저장 시 항상 #1a2340 로 고정한다(인쇄·라이트 화면에서 읽히도록).

문구

상황	문구
힌트	여기에 서명하세요
등록 안내	등록한 서명은 리포트 결재(제출·검토·승인) 시 자동으로 사용됩니다
등록 완료	서명을 등록했습니다
없음	등록된 서명이 없습니다 · 결재에는 등록된 서명이 필요합니다
결재 직전	버튼 "서명하고 진행"
삭제 확인	서명 삭제 — 등록된 서명을 삭제하면 다시 등록할 때까지 결재를 처리할 수 없습니다

코드

<div class="fna-signpad" id="pad">
  <div class="fna-signpad__canvas"><canvas width="800" height="400" aria-label="서명 영역"></canvas><div class="fna-signpad__guide"></div><div class="fna-signpad__hint">여기에 서명하세요</div></div>
  <div class="fna-signpad__bar"><span class="fna-signpad__meta">손가락 또는 펜으로 그리세요</span><span class="fna-spacer"></span>
    <button class="fna-btn fna-btn--text fna-btn--sm" data-clear>지우기</button><button class="fna-btn fna-btn--sm" disabled>서명 등록</button></div>
</div>
ctx.lineWidth=2.4; ctx.lineCap='round'; ctx.lineJoin='round'; ctx.strokeStyle='#1a2340';  // 저장 잉크 고정
/* RN */ SignatureScreen (react-native-signature-canvas) → PNG base64 → POST /me/signature

제안 (소스 미반영)마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 제안 — proposed.css .fna-signpad · RN SignatureScreen.tsx · 로컬 웹 main.js 캔버스(2.4px round)Components · FNA 디자인 시스템 v1.0