검색결과 리스트
서명에 해당되는 글 3건
- 2024.08.27 [구글 스프레드 시트] 서명받기
- 2014.10.15 개인정보 보호와 서명에 대한 단상
- 2014.01.27 서명이란?
글
[구글 스프레드 시트] 서명받기
appsscript활용
4 대상자 검색,수정,추가하기1 동영상 대상자 검색,수정,추가하기2 동영상 대상자 검색,수정,추가하기3 동영상 대상자 검색,수정,추가하기4 동영상 대상자 검색,수정,추가하기5 동영상 대상자 검
swsp.or.kr
여기에 가보면 구글 스프레드 시트 의 앱 스크립트를 활용한 다양한 사례들을 보여주고 있다.
그 중 주목한 것 하나가 바로 "서명받기"
후원신청서나 프로그램 참가 신청을 받을 때에도 유용할 거 같아서 좀더 자세히 살펴보았다.
소스는 다 오픈되어 있어 하나하나 뜯어보면서 나에게 필요한 방식으로 수정해보았다.
여기에 입력하면,
https://docs.google.com/spreadsheets/d/13EJTaSd31_r8A8I4v6WzGqr1BJfqsmVmu4Xv55IpZpw/edit?gid=0#gid=0
여기에 이름과, 서명이미지, 그리고 해당 이미지의 url을 저장해 보여준다.
그런데 이 걸 내가 사용하기 위해서는 몇가지 수정해야할 것이이 있다.
서명이 저장되는 ① 구글 스프레드 시트의 고유 ID를 알아야하고, ② 서명 이미지가 저장될 폴더의 고유 ID를 알아야 한다.
마지막으로 ③ 저장될 시트의 이름도 일치시켜야 한다.
그래서 내가 편하려고 소스를 좀 수정해보았다.
1. Code.gs
|
function doGet() {
return HtmlService.createTemplateFromFile("index").evaluate();
}
function receiveSiganture(encodedImage,signame){
// 폴더, 스프레드시트 ID 및 시트명을 직접 입력해주세요.
const folderId = "23GF3aHMo0MDOxjCQLss12Ir-WjQmQT_T7B9";
const spreadsheetId = "2Ak0WTqcdsc25RcaQZ86dRNMbddcOn88_eIdo";
const sheetName = "시트1";
var fileTime = new Date();
var s1 = signame.sigName;
const data = encodedImage.split(",")[1];
const dataDecoded = Utilities.base64Decode(data);
const signatureAsPictureBlob = Utilities.newBlob(dataDecoded).setName(s1+fileTime+"somefile.png");
// 서명이 저장될 폴더
var signurl = DriveApp.getFolderById(folderId).createFile(signatureAsPictureBlob).getId();
var signfile2 = "https://drive.google.com/drive/folders/" + folderId + "/uc?export=view&id=" + signurl;
// 입력된 서명 정보가 저장될 스프레드 시트
var sa = SpreadsheetApp.openById(spreadsheetId);
var sheet1 = sa.getSheetByName(sheetName);
var rowData = [[fileTime, s1, signfile, signfile2]];
var lastRow = sheet1.getLastRow();
sheet1.getRange(lastRow+1, 1, 1, 4).setValues(rowData);
getTexttS();
}
function getTexttS(form){
var text = "서명이 입력되었습니다.";
return text;
}
|
이제 위 음영처리한 ID와 이름만 정확히 확인해서 입력하면, 다른 소스는 수정할 필요가 없다.
2. index.html
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>서명받기</title>
</head>
<body>
<form id="signatureForm">
<div id="app" class="container">
<h2>성함을 입력하시고 아래 패드에 서명해 주세요.</h2><br><br>
성명: <input type="text" name="mname" id="mname"><br><br>
<div class="">
<canvas id="sig" style="background-color: #e0e0e0; border: 1px solid black; width: 500px height: 300px;">
</canvas>
</div>
<div>
<button type="button" id="clearSig">Clear</button>
<button type="button" id="send">Send</button>
</div>
</div>
<input type="hidden" id="mtext" name="mtext">
</form>
<!-- 서명패드 스크립트: 오픈소스이며, 무료입니다. 아래는 원본 링크 -->
<script src="https://cdn.jsdelivr.net/npm/signature_pad@5.0.3/dist/signature_pad.umd.min.js"></script>
<script>
var signaturePad
function setupSignatureBox(){
var canvas = document.getElementById("sig");
signaturePad = new SignaturePad(canvas);
}
function clearSignature(){
signaturePad.clear();
}
function sendToDrive(){
if(mname.value.length == 0){
alert("성명을 입력하세요");
mname.focus();
} else {
var imageData = signaturePad.toDataURL();
var signame = {sigName: document.getElementsByName('mname')[0].value};
google.script.run.receiveSiganture(imageData, signame);
google.script.run.withSuccessHandler(getText).getTexttS(document.forms[0]);
setTimeout('note()', 2000);
clearSignature()
// console.log(imageData);
}
}
function note(){
var alt = document.getElementById('mtext').value;
alert(alt);
document.getElementById("signatureForm").reset();
}
function getText(text){
var txtTextt = document.getElementById('mtext');
txtTextt.value = text;
}
document.getElementById("clearSig").addEventListener("click",clearSignature);
document.getElementById("send").addEventListener("click",sendToDrive);
document.addEventListener("DOMContentLoaded",setupSignatureBox);
</script>
</body>
</html>
|
원본에서는 1개의 css 파일과 2개의 js 파일을 참조토록 하고 있었다.
하지만 굳이 디자인이 복잡할 필요가 있는게 아니라서 과감히 삭제했다.
그리고 꼭 필요한 서명용 js 파일을 확인하고, 원본 사이트에 들어가 가장 최신의 스크립트로 교체하였다.
github에서 배포되고 있으며, 확인결과 상업적 사용까지 무료인 것을 확인하였다.
https://github.com/szimek/signature_pad
GitHub - szimek/signature_pad: HTML5 canvas based smooth signature drawing
HTML5 canvas based smooth signature drawing. Contribute to szimek/signature_pad development by creating an account on GitHub.
github.com
그리고 이를 웹에서 링크로 사용할 수 있도록 제공하는 url은 위와 같다.
사실 gemini에게 물어보면 굳이 링크에 있는 스크립트를 사용하지 않아도 이미지를 그릴 수 있는 소스를 만들어준다.
1. Code.gs
|
// 그리기 기능
function doGet() {
var html = HtmlService.createHtmlOutputFromFile('index');
return html;
}
// 지우개 기능 (선의 색을 흰색으로 설정)
function erase() {
ctx.strokeStyle = 'white';
// 드로잉 로직과 동일하게 사용
}
|
2. index.html
|
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
성명: <input type="text" name="ur_name" id="ur_name"><br><br>
<input type="hidden" id="n_text" name="n_text">
<canvas id="myCanvas" style="background-color: #e0e0e0; border: 1px solid black; width: 500px height: 300px;"></canvas>
<button id="saveButton">저장</button>
<button id="clearButton">지우기</button>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}
function draw(e) {
if (!isDrawing) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
}
function stopDrawing() {
isDrawing = false;
}
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
// 터치 이벤트 추가 (모바일 지원)
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('touchend', stopDrawing);
// 지우기 버튼 클릭 이벤트 처리
const clearButton = document.getElementById('clearButton');
clearButton.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
</script>
</body>
</html>
|
처음의 드로잉처럼 자연스럽진 않지만, 그래도 웬만큼 흉내는 된다.
이걸 다시 세세한 부분을 손봐야하는데, 귀찮아서... ㅡ.ㅡ
'[정보] IT정보&활용' 카테고리의 다른 글
| PDF 파일 합치기(수정) (1) | 2024.11.01 |
|---|---|
| [구글 Apps Script] PDF로 출력하기 (0) | 2024.10.23 |
| 컴퓨터 예약 종료 배치파일(.bat) 만들기 (0) | 2024.06.21 |
| yt-dlp를 쉽게... 배치파일(bat) 만들기 (0) | 2024.05.29 |
| 한글, ( )안의 글자만 모양 바꾸기 (0) | 2023.03.30 |
설정
트랙백
댓글
글
개인정보 보호와 서명에 대한 단상
[미디어다음 : 한국일보] 받아쓰기 하듯 수십 번 금융 서명, 이래도 되나
http://media.daum.net/economic/finance/newsview?newsid=20141008045105870
보험이나 카드 등을 가입할 때면, 자주 듣게 되는 말 중의 하나가 "밑줄 그은 데마다 서명해 주시면 됩니다."가 아닐까?
사실상 책 한권에 달하는 보험약관을 일일이 읽어보거나, 깨알같이 적혀 있는 개인정보 이용 동의서를 확인하고 서명하는 것은 현실적으로 무리가 있다.
하지만 문제는 그에 따르는 책임은 고스란히 이용자가 지게 된다.
각종 금융상품 가입시 소비자 보호를 명목으로 행하는 정보고지의무가 오히려 소비자를 보호하지 못하는 역화가가 나타나고 있는 것이다.
[한국일보] '받아쓰기 서명' 50번 한 보험상품… "내용은 나중에 보세요"
http://www.hankookilbo.com/v/8fa4a82541fa4cb59c82ff255c7a026a
기자는 직접 보험을 가입해보면서 종신보험의 경우 50회, 펀드 30회, 신용카드 18회에 달하는 서명, 자필작성, 동의 형태의 서명을 했다고 한다.
68장에 걸친 서류를 2시간 30분 동안 확인하면서 어떤 절차에 무슨 서명을 했는지는 거의 기억나지 않았다고 한다.
내가 직접 가입해본 보험 또한 별반 다르지 않았다.
설명을 건너 뛰고 서명하였기에, 시간이 그리 많이 걸리지 않았던 것만 차이점일 뿐 서명하는 횟수는 비슷했던 것 같다.
[한국일보] 금융사고만 터지면… 당국·업계 "서명부터 늘리고 보자"
http://www.hankookilbo.com/v/6bf63ecac0d6401f8d94b2def53f928d
이러한 실태는 2009년 2월 시행된 자본시장통합법을 통해 업종간 겸업을 허용하는 대신 금융사가 상품설명에 소홀할 경우 배상책임을 지도록 하자, 금융사들이 앞다투어 확인서명란을 늘리기 시작했던데 원인이있다.
그리고 2011년 개인정보보호법의 시행, 올해 초 카드 3사의 정보유출사태가 한몫을 더했다.
1995. 07. 신용정보이용 보호법(공통)
2009. 02. 자본시장통합법 시행(공통)
2009. 11. 우리투스타펀드 소송(펀드)
2011. 09. 개인정보보호법 시행(공통)
2012. 12. 카드가입절차 강화(카드)
2013. 02. 소득세법 시행령 개정(보험)
2013. 09. 특정금전신탁 업무처리 모범규준(펀드)
2014. 03. 3·10 개인정보 유츨 재발방지 종합대책 시행(카드)
2014. 07. 한·미 정기금융정보 교환을 위한 조세협약 이행규정(보험)
[원본] http://image.hankookilbo.com/i.aspx?Guid=626b507f5fd54543a3d3c01eaa8956e5&Month=20141007&size=640
때문에 7월부터 서명 간소화 대책을 마련 중이라하지만 눈에 보이는 성과는 없는 현실이다.
결국 개인정보를 어떻게 잘 보호할 것인가에 대한 자구책을 마련해야할 것을, 어떻게 법망을 피해 면피할 것인가에만 머리를 쓰고 있다는 말로 결론지을 수 있을 것이다.
최근 카카오톡, 밴드 등에서 이루어졌다는 감청 영장(통신제한조치)에 의한 개인 사생활에 대한 모니터링을 비롯해, 소비자를 보호하겠다는 제대로 된 기업 마인드가 아쉽기만한 현실이다.
대전제는 소비자가 쉽고 편해야한다는 사실이다.
그리고 그를 위해 다음 몇가지를 제안해 본다.
① 필수사항과 선택사항의 구분
- 법에서 마련된 근거를 갖는 경우는 반드시, 필수항목에 대한 내용을 관련 법규에서 다룰 것
예) 여신전문금융업법에 따른 신용카드
- 기업편의에 의한 구분이 아니라 꼭 필요한 사항인지 여부에 대해 제3자 혹은 이용자에 의한 심의 절차 마련
② 가입에 필요한 확인 절차를 일괄로 진행하지 말고, 필요한 서비스를 이용코자 할 경우에 한해 단계적으로 요청하고 동의토록 전환
③ 개인정보의 사용은 원천적으로 해당사업에 한해 제한
④ 그 어떤 경우에도 유출에 따른 책임은 해당기업이 질 것
⑤ 개인정보가 유출된 이용자에 대해 직접적 피해여부와 상관없이 보상/배상할 것을 명시
'[정보] 잡동사니들' 카테고리의 다른 글
| [한글 맞춤법] "데"와 "대"의 용법 차이 (0) | 2015.07.20 |
|---|---|
| 폰트 파일에 대한 저작권 바로 알기 (0) | 2015.07.20 |
| 갑바의 표준어 (2) | 2014.10.01 |
| 인터넷 우표를 아시나요? (0) | 2014.02.18 |
| 신종 금융사기 파밍(Pharming)을 조심하세요 (0) | 2013.03.25 |
설정
트랙백
댓글
글
서명이란?
우리는 참 많은 경우에 서명을 하고 있다. 하지만 정작 서명을 어떻게 하는지에 대해서는 잘 알지 못하고 있는 듯하다.
자신의 손으로 쓴 그 어떤 것을 서명이라고 하는데, 이는 틀린 것이다.
이에 대한 법적인 규정은 「본인서명사실 확인 등에 관한 법률」제2조제1호를 통해 확인할 수 있다.
1. “서명”이란 본인 고유의 필체로 자신의 성명을 제3자가 알아볼 수 있도록 기재하는 것을 말한다.
한편 동법 시행령 제2조에 따르면,
서명을 하거나 각종 신청을 하는 경우에 적는 '성명은 가족관계등록부 또는 주민등록표에 기재되어 있는 성명과 같아야 한다'고 명시하고 있다.
제2조 (서명 및 신청 시의 성명)
「본인서명사실 확인 등에 관한 법률」(이하 "법"이라 한다)과 이 영에 따라 서명을 하거나 각종 신청을 하는 경우에 적는 성명은 「가족관계의 등록 등에 관한 법률」에 따른 가족관계등록부(이하 "가족관계등록부"라 한다) 또는 「주민등록법」에 따른 주민등록표(이하 "주민등록표"라 한다)에 기재되어 있는 성명과 같아야 한다. 다만, 다음 각 호의 어느 하나에 해당하는 사람은 해당 공적(公的) 장부 등에 기재되어 있는 성명과 같아야 한다. - 하략 -
그럼 우리가 흔히 하고 있는 싸인은 도대체 무엇일까?
다음 어학사전(http://dic.daum.net)에 따르면,
○ signature : your name written in your own handwriting
위와 같이 구분하고 있는바, 일반적으로 우리가 많이 하고 있는 싸인은 autograph이며, 서명은 그것이 아닌 signature를 해야한다는 말이다.
만일 당신이 사회복지프로그램으로 특강을 개설한 후, 강사의 강사료 영수증을 징구할 경우 도장 날인을 받을 수 없다면, 반드시 서명(signature)을 받아야 한다.
프린팅 된 이름(기명) 옆에 autograph를 남기는 것은 효력이 없다.
통상적으로 기명 날인과 서명은 동일한 효력을 가지며, 서명 날인은 보다 강한 효력을 갖는다고 볼 수 있다.
우리가 징구해야하는 것은 기명날인 또는 서명임을 기억하면 될 것이다.
다만, 우리나라의 경우 이름이 통상 세글자밖에 되지 않기 때문에, 위변조의 우려가 크다. 따라서 서명에 싸인을 같이 받아둔다면 더 좋을 것 같다고는 생각된다.(물론 이것은 의무는 아니다.)
그냥 영수증에 강사의 이름을 남기지 말고, 직접 쓰게 하자~
그러면 이런 문제에서 조금 자유로울 수 있지 않을까?
더불어 이는 기안 결재시에도 적용된다.
'[정보] 복지 이야기 > [法] 복지관련 법령' 카테고리의 다른 글
| 휴게시간의 특례 인정 사업 (0) | 2014.04.11 |
|---|---|
| 사회복지시설에서의 주민등록번호 수집 근거 정리 (0) | 2014.02.05 |
| 사회복지시설 소식지의 정기간행물 등록 (0) | 2013.12.20 |
| 지출 증빙으로 신용카드 매출전표를 분실하였다면? (3) | 2013.12.10 |
| 청소년지도사 1급 자격취득을 위한 요건 정리 (0) | 2013.11.07 |
RECENT COMMENT