서명 생성기

1. 소개

서명 생성기는 마우스, 터치패드 또는 터치스크린을 사용하여 손글씨 디지털 서명을 만들 수 있는 브라우저 기반 도구입니다. 캔버스에 직접 서명을 그릴 수 있으며, 색상과 두께를 사용자 지정하고, 배경(투명 포함)을 조정한 뒤 SVG, PNG, JPG, WEBP와 같은 다양한 이미지 형식으로 내보낼 수 있습니다.

이 도구는 디지털 문서 서명, PDF에 서명 추가, 이메일 하단에 서명 삽입, 또는 디자인 프로젝트를 위한 투명 서명 이미지 준비에 적합합니다. 모든 작업이 브라우저에서 실행되므로 업로드나 서버 측 처리가 필요하지 않습니다. 서명은 즉시 생성되며 원하는 형식으로 바로 다운로드할 수 있습니다.

계약서를 위한 깔끔한 투명 PNG, 인쇄용 확장 가능한 SVG, 또는 빠른 공유를 위한 JPG가 필요하든, 이 서명 생성기는 개인 및 업무용으로 빠르고 유연한 솔루션을 제공합니다.

2. 작동 방식

이 도구는 사용자가 자유롭게 선을 그릴 수 있는 인터랙티브 HTML5 캔버스를 사용합니다. 각 스트로크는 위치, 시간, 압력 데이터(가능한 경우)를 포함한 점들의 연속으로 캡처됩니다. 이러한 점들은 부드러운 곡선으로 처리되어 거칠거나 울퉁불퉁한 선이 아닌 자연스러운 손글씨를 구현합니다.

입력 매개변수

• 캔버스 영역: 서명을 생성하는 드로잉 공간입니다.
• 펜 색상: 16진수 형식(내부적으로 RGB로 변환)으로 사용자 정의 색상을 선택합니다.
• 배경 색상: RGBA 값을 사용하여 단색 또는 투명 배경을 선택합니다.
• 펜 두께: 최소 및 최대 선 두께를 조정하는 세 가지 선택 가능한 두께 수준입니다.
• 종횡비: 캔버스 크기를 제어하기 위해 16:9, 4:3, 3:4 또는 1:1 중에서 선택합니다.

스트로크 렌더링 로직

그리는 동안 시스템은 포인터 또는 터치 이벤트를 캡처하여 곡선 세그먼트로 변환합니다. 스트로크 속도를 계산하여 선 두께를 동적으로 조정함으로써 자연스러운 펜 효과를 생성합니다. 각 스트로크는 구조화된 데이터로 저장되어 실행 취소 및 배경 다시 그리기와 같은 기능을 사용할 때도 서명이 손실되지 않습니다.

검증 규칙

• 펜 두께 값이 1 미만일 경우 최소 지원 두께로 기본 설정됩니다.
• 색상 입력은 유효한 16진수 형식을 따라야 합니다.
• 왜곡을 방지하기 위해 그리기 시작 후 캔버스 크기 변경은 제한됩니다.
• 스트로크 데이터가 있을 경우 실행 취소는 가장 최근 스트로크만 제거합니다.

출력 형식

서명을 다음 형식으로 내보낼 수 있습니다:

• SVG – 확장 가능한 벡터 형식으로, 고해상도 인쇄에 적합합니다.
• PNG – 투명도를 지원합니다.
• JPG – 일반 용도의 압축 형식입니다.
• WEBP – 최신 최적화 이미지 형식입니다.

제한 사항

• 이 도구는 신원 확인이나 법적 효력을 제공하지 않습니다.
• 서명은 텍스트로 자동 생성되지 않으며 수동으로 그려야 합니다.
• 그린 후 크기 조정 시 캔버스를 지워야 할 수 있습니다.

3. 이 도구 사용 방법

1. 캔버스의 원하는 종횡비를 선택합니다.
2. 펜 두께 수준을 선택합니다.
3. 원하는 서명 색상을 설정합니다.
4. 필요한 경우 배경 색상을 선택합니다(또는 투명 유지).
5. 마우스 또는 터치스크린으로 서명을 그립니다.
6. 필요 시 실행 취소를 사용하여 마지막 스트로크를 제거합니다.
7. 지우기를 클릭하여 캔버스를 완전히 초기화합니다.
8. SVG, PNG, JPG 또는 WEBP 형식으로 서명을 다운로드합니다.

4. 실용적인 예시

예시 1: PDF 계약용 투명 PNG

입력:

• 종횡비: 4:3
• 펜 색상: 검정 (#000000)
• 배경: 투명
• 펜 두께: 중간

출력: download.png (투명 배경)

이 파일을 사용하여 PDF 계약서에 흰색 박스 없이 서명을 삽입할 수 있습니다.

예시 2: 인쇄용 고해상도 SVG

입력:

• 종횡비: 16:9
• 펜 색상: 파란색 (#1a73e8)
• 배경: 흰색
• 펜 두께: 굵게

출력: download.svg

SVG는 벡터 기반이므로 레터헤드나 인쇄물용으로 크기를 조정해도 선명함이 유지됩니다.

5. 개발자 사용 사례

- 문서 자동화 시스템

다운로드한 서명 이미지를 자동 문서 생성 워크플로(예: 계약서, 인보이스, 합의서)에 통합합니다.

- 클라이언트 측 서명 캡처

AJAX 업로드를 위해 내보낸 Base64 이미지 데이터를 사용합니다:

const dataUrl = signaturePad.toDataURL('image/png');
// dataUrl을 백엔드 API로 전송하여 저장

- 웹 애플리케이션에서 SVG 임베딩

SVG 출력은 벡터 기반이므로 HTML에 직접 임베딩할 수 있습니다:

<img src="signature.svg" alt="디지털 서명">

- 안전한 데이터 처리

서명 생성은 전적으로 브라우저에서 이루어지므로 명시적으로 구현하지 않는 한 서버 측 처리가 필요하지 않습니다. 이는 데이터 노출 위험을 줄입니다. 개발자는 잘못된 입력을 방지하기 위해 저장 전에 서버 측에서 Base64 문자열을 검증할 수 있습니다.

- PHP에서의 백그라운드 처리

$base64 = $_POST['signature'];
$image = str_replace('data:image/png;base64,', '', $base64);
$image = base64_decode($image);
file_put_contents('signature.png', $image);

6. 자주 묻는 질문

이 서명은 법적 효력이 있나요?

아니요. 이 도구는 손글씨 서명의 디지털 이미지를 생성합니다. 법적 효력은 관할 지역과 서명의 사용 방식에 따라 달라집니다.

투명 서명을 만들 수 있나요?

네. 투명 배경을 선택하고 PNG 또는 SVG로 다운로드하세요.

인쇄에 가장 적합한 형식은 무엇인가요?

SVG는 품질 손실 없이 확대 가능하므로 고해상도 인쇄에 권장됩니다.

펜 두께를 변경할 수 있나요?

네. 세 가지 사전 정의된 스트로크 두께 수준 중에서 선택할 수 있습니다.

이 도구는 내 서명을 저장하나요?

아니요. 서명은 사용자가 별도로 업로드하지 않는 한 브라우저에서 로컬로 생성됩니다.

서명의 일부를 실행 취소할 수 있나요?

네. 실행 취소 버튼은 가장 최근 스트로크를 제거합니다.