이번에 실사용 가능한 전자서명(e-Signature) 기능을 직접 개발했다.

단순히 선만 긋는 데모 수준이 아니라, 실제 본인 확인·서명 제출에 바로 사용할 수 있는 수준으로 구성했다.

아래는 이번 기능이 지원하는 주요 포인트들이다.

화면에서 바로 서명 가능

마우스, 터치펜, 손가락 등 어떤 입력 장치든 브라우저 안에서 즉시 서명이 가능하다.

반응 지연 없이 부드럽게 그려지고, 압력 기반 기기에서도 안정적으로 동작한다.

1단계 되돌리기(Undo)

실제 종이에 서명할 때 실수하면 지우개를 쓰듯, 전자서명에서도 한 단계씩 되돌리기 기능을 넣었다.

- 서명곡선 하나씩 되돌리기

- 필요하면 여러 번 연속 Undo

이 기능 덕분에 “맨 처음부터 다시 작성”이라는 스트레스를 크게 줄였다.

전체 지우기 (Clear All)

완전히 새로 쓰고 싶을 때는

한 번 클릭으로 전체 초기화도 가능하다.

사용 예:

- 서명이 마음에 안 들 때

- 필기 흔적이 많이 남았을 때

PNG 변환 및 저장 지원

작성된 서명은 PNG 이미지로 추출 가능하다.

지원되는 방식:

- 브라우저에서 파일로 바로 다운로드

- DB에 Base64로 저장

- 서버에 업로드하여 파일로 보관

- 저장 전 미리보기(Preview) 가능

즉, 전자계약서·신청서·결제 서류 등에 그대로 활용할 수 있다.

사인 미리보기 기능

서명을 제출하기 전에 미리보기 이미지를 띄워 내가 쓴 서명이 맞는지 바로 확인할 수 있다.

UI는 심플하게 구성해서 모바일에서도 잘 보이고, PC 환경에서도 자연스럽게 작업 흐름이 이어진다.

실사용 가능한 이유

이 기능은 단순 장난감 수준이 아니라 실제 서비스에 투입 가능한 구조다.

- 본인 인증 후 서명 제출 흐름에 바로 연결 가능

- 전자계약·동의서·예약서명 모듈로 활용 가능

- PNG 저장 + 업로드까지 완비

- Undo/Clear 등 실제 사용자 경험 반영

디자인도 간결하고, 조작법도 직관적이라 누구나 바로 서명할 수 있다.

마무리

이번 전자서명 기능은 “정말 서비스에서 쓸 수 있는 수준”을 목표로 만들었다.

브라우저 안에서 바로 서명하고, 필요한 포맷으로 저장하고, 서버까지 전달할 수 있으니 활용 범위는 무궁무진하다.

다음에는 드래그 이동, 색상 선택, 선 굵기 변경 같은 옵션도 넣어서 더 완성도 있는 e-Sign 모듈로 발전시킬 계획이다.

구 버전에는 반응형 디자인에 대응하지 못해서 새로 제작한 소스이다.