전자서명 투명 PNG 만들기, 캔버스에 그려 바로 저장
마우스나 손가락으로 그린 서명 선을 PNG로 저장하면, 손대지 않은 부분은 완전히 투명하게 남아 어떤 문서 위에 올려도 흰 사각형 없이 서명만 얹힙니다. 이건 우연이 아니라 캔버스가 픽셀마다 투명도(알파 채널) 값을 따로 기록하고, PNG 파일 형식이 그 값을 그대로 저장하기 때문입니다. 이 원리와, 계약서에 쓸 때 이미지 서명과 공인전자서명이 기술적으로 어떻게 다른지 정리했습니다.
요약 ① 캔버스에 그린 선만 색이 채워지고 나머지 픽셀은 알파값 0(완전 투명)으로 남습니다. ② PNG는 이 투명도 정보를 그대로 저장하지만 JPG는 알파 채널이 없어 저장하면 흰 배경이 생깁니다. ③ 이미지 서명과 공인전자서명(인증서 기반)은 위변조를 확인하는 방식이 기술적으로 다릅니다.
문제
온라인 계약서나 신청서 PDF에 서명란만 비어 있는 경우가 많습니다. 프린트해서 손으로 쓰고 다시 스캔하기는 번거롭고, 스캔한 서명 이미지를 그대로 잘라 붙이면 서명 주변에 흰 사각형이 남아 문서 위에 어색하게 겹쳐 보입니다.
포토샵 같은 편집 프로그램에서 배경을 지우는 방법도 있지만, 서명 하나 넣자고 매번 스캔→배경 제거→PNG 저장을 반복하기엔 절차가 깁니다.
해결
직접 원리를 따라가 보면 왜 이런 문제가 생기는지 알 수 있습니다. 브라우저의 캔버스(canvas)는 그림을 그릴 때 색상뿐 아니라 픽셀마다 투명도 값(알파 채널, 0~255)도 함께 기록합니다. 아무것도 그리지 않은 캔버스는 모든 픽셀의 알파값이 0, 즉 완전히 투명한 상태로 시작합니다.
선을 그으면 그 선이 지나간 픽셀만 알파값이 채워지고, 나머지는 그대로 투명하게 남습니다. 이 상태를 PNG로 저장하면 파일에 픽셀별 알파값이 그대로 담기기 때문에, 어떤 배경 위에 올려도 그린 부분만 보이고 나머지는 비쳐 보입니다.
같은 그림을 JPG로 저장하면 결과가 달라집니다. JPG 포맷은 알파 채널을 지원하지 않아서, 투명해야 할 자리가 흰색 같은 단색으로 강제로 채워집니다. 그래서 서명 이미지는 반드시 PNG로 저장해야 합니다.
종이에 이미 쓴 서명을 디지털화하려면 스캔하거나 사진을 찍은 뒤, 포토샵이나 GIMP 같은 편집 프로그램의 배경 제거 기능으로 흰 배경만 골라 지우고 PNG로 내보내면 비슷한 결과를 만들 수 있습니다. 다만 배경색이 균일하지 않거나 그림자가 있으면 경계가 지저분하게 남기 쉽습니다.
캔버스에 처음부터 투명 배경으로 그리면 이 배경 제거 단계 자체가 필요 없습니다. 저희 도구로 확인해보겠습니다.
마우스나 터치로 서명을 그리고 투명 배경 PNG로 바로 다운로드하세요.
자주 막히는 지점
| 증상 | 원인 | 해결 |
|---|---|---|
| PNG를 열면 흰 배경으로 보여요 | 이미지 뷰어가 투명 영역을 흰색으로 표시함 | 워드·한글 같은 문서 프로그램에 직접 삽입해서 확인 |
| 다운로드 버튼이 눌러지지 않아요 | 캔버스에 아직 아무것도 그리지 않은 상태 | 선을 하나라도 그은 뒤 버튼이 활성화됨 |
| 저장한 파일에 배경이 하얗게 나와요 | PNG가 아니라 JPG로 다시 저장·변환함 | JPG는 알파 채널이 없으므로 PNG 파일 그대로 사용 |
| 문서에 넣었더니 서명이 찌그러져요 | 원본 비율(가로 640 : 세로 240)과 다르게 크기 조절함 | 문서 프로그램의 가로세로 비율 고정 옵션으로 조절 |
| 다시 그리고 싶은데 일부만 지워지지 않아요 | 지우기 버튼은 캔버스 전체를 한 번에 초기화함 | 부분 수정이 아니라 전체를 지우고 다시 그리기 |
정리
캔버스는 픽셀마다 색상과 투명도를 함께 기록하고, PNG는 그 값을 그대로 저장합니다. 그래서 흰 배경을 따로 지우는 과정 없이도 서명 선만 남은 투명 PNG를 바로 만들 수 있습니다. 문서에 넣을 때는 원본 비율을 유지하고, 저장 형식은 항상 PNG인지 확인하는 것이 핵심입니다.
마우스나 터치로 서명을 그리고 투명 배경 PNG로 바로 다운로드하세요.
자주 묻는 질문
서명 색과 굵기를 바꿔서 다시 그려도 되나요?
가능합니다. 선 색상과 선 굵기(1~12px)는 그릴 때마다 바꿀 수 있어서, 한 캔버스 안에 여러 색과 굵기를 섞어 그릴 수 있습니다. 처음부터 다시 그리고 싶다면 지우기 버튼으로 캔버스 전체를 비운 뒤 새로 그리면 됩니다.
사진으로 찍은 서명을 업로드해서 PNG로 만들 수 있나요?
이 도구는 마우스나 터치로 캔버스에 직접 그리는 방식만 지원하며, 이미지 파일을 업로드하는 기능은 없습니다. 종이에 쓴 서명을 그대로 디지털화하고 싶다면, 앞서 설명한 스캔 후 배경 제거 방법을 따로 거쳐야 합니다.
이 이미지 서명을 계약서에 쓰면 법적으로 유효한가요?
우리나라 전자서명법은 전자서명에 법적 효력이 있음을 인정하고 있습니다. 다만 이 도구로 만든 이미지 서명과, 인증기관이 발급한 인증서를 사용하는 공인전자서명은 기술적으로 동작 방식이 다릅니다. 이미지 서명은 그림 파일 자체이므로 서명 이후 문서 내용이 바뀌어도 이미지만 봐서는 알 수 없지만, 인증서 기반 서명은 서명 시점의 문서와 암호학적으로 묶여 있어 이후 변경을 검증 절차에서 감지할 수 있습니다. 어떤 방식이 필요한지는 계약 상대방이나 기관의 요구에 따라 다르므로, 중요한 문서라면 미리 확인하는 것이 안전합니다.