stylus_note 서명 생성기 (그리고 다운로드) star

부드러운 잉크 효과는 어떻게 작동하는가

마우스나 손가락을 터치패드나 터치스크린 위로 움직이면, 브라우저는 그 경로를 따라 일련의 원시 좌표점만 보고합니다 — 그리고 일반적인 그리기 속도에서는 이 점들 사이 간격이 충분히 벌어져 있어서, 직선으로 이어 붙이면 특히 서명 끝부분처럼 빠르게 움직이는 획에서 눈에 띄게 각지고 삐뚤빼뚤한 결과가 나옵니다. 실제 잉크는 그런 식으로 움직이지 않습니다 — 펜은 연속적인 곡선으로 미끄러지듯 움직입니다. 이 차이를 메우기 위해 이 도구는 원시 점들 사이를 직선으로 전혀 잇지 않습니다 — 대신 연속된 점들을 제어점으로 취급해, 한 점에서 다음 점으로 뚝 끊기듯 넘어가는 대신 그 사이를 부드럽게 휘어지게 만드는 이차 베지어 곡선 보간을 각 구간에 적용합니다.

이는 벡터 일러스트레이션 소프트웨어의 곡선 도구가 사용하는 것과 같은 수학적 원리입니다: 제어점은 선이 반드시 그 점을 지나가지 않아도 그쪽으로 경로를 끌어당겨, 모서리 대신 부드러운 호를 만들어냅니다. 이를 그리는 동안 실시간으로 자유 곡선 획에 적용하면, 각지고 거친 마우스 궤적이 점 잇기 스케치가 아니라 자연스러운 손글씨처럼 보이는 것으로 바뀝니다 — 입력이 빠르고 불규칙할수록 이 부드럽게 만드는 효과가 더욱 중요해집니다.

다운로드하기 전에 알아두어야 할 것

모든 과정은 브라우저 안의 HTML 캔버스에서 이루어집니다 — 아무것도 업로드되지 않으며, 페이지를 떠나는 순간 아무것도 남지 않으므로 다른 곳으로 이동하기 전에 PNG를 다운로드하세요. 검정색이나 파란색 잉크와 획 굵기를 선택하고, 선이 잘못되면 한 획씩 되돌릴 수 있으며, 어떤 문서에도 깔끔하게 얹히는 투명 배경 PNG나 투명도를 거부하는 양식을 위한 흰색 배경 버전으로 내보낼 수 있습니다. 법적으로 짚어둘 만한 사항이 하나 있습니다: 손으로 쓴 서명 이미지는 일상적인 승인이나 내부 서류 작업에서는 일반적으로 받아들여지지만, 법적 의미의 공인 전자서명과는 다릅니다 — 공인 전자서명을 특별히 요구하는 계약에는 이미지 파일이 아니라 인증서 기반 제공업체가 필요합니다.

이 부드럽게 만드는 처리는 하드웨어의 한계도 보완합니다: 터치스크린과 트랙패드는 일반적으로 초당 60~120회 정도의 고정된 빈도로 위치를 샘플링하므로, 완벽하게 안정된 손으로 그려도 디지털로 캡처되는 순간 연속 곡선이 아니라 각진 폴리라인이 만들어집니다. 베지어 보간은 이렇게 샘플링된 폴리라인을 다시 연속적인 잉크처럼 보이도록 되돌리는 역할을 하며, 그래서 같은 기법이 서명 패드뿐 아니라 벡터 펜 도구, 디지털 드로잉 태블릿, 스타일러스 기반 필기 앱 전반에서 폭넓게 사용됩니다.