초상권 동의서 제출 자동화 앱 만들기

학교에서 동의서를 받아야 하는데, 너무나 많은 동의서 작성을 요하는 것 같아서 자동화 하면 어떨까 고민해본적이 있었는데, 생각보다 쉽게 해결이 되네요. 

 

구글 재미나이 프로 3.0 으로 작성해봤어요. 

이렇게만 써주고, 초상권 양식을 PDF로 올려줬더니 바로 작성해주네요. 

 

사용자님, 구글 설문(Google Forms)은 기본적으로 '서명(그림 그리기)' 기능을 제공하지 않으며, 제출된 내용을 즉시 PDF로 변환하여 저장하는 기능도 커스텀이 필요합니다.

따라서 **Google Apps Script(GAS)**를 활용하여 직접 웹 페이지(Web App)를 만드는 방식이 가장 적합합니다. 이 방식은 비용이 들지 않고, 구글 계정만 있으면 완벽한 전자결재 시스템을 구현할 수 있습니다.

요청하신 대로 전체 과정을 10단계 로드맵으로 정리해 드리고, 오늘은 그중 **[1단계: 전체 설계 및 도구 준비]**와 **[2단계: 백엔드 기초 설정]**에 해당하는 내용을 먼저 작성해 드리겠습니다. 코드는 한 번에 드리면 복잡하므로, 오늘은 기본 서버(Google Apps Script) 설정 코드부터 시작하겠습니다.

다음은 전체 프로젝트를 위한 상세 가이드입니다.

초상권_동의서_시스템_로드맵.md

11월 25일 오전 6:39

열기

Code.gs

11월 25일 오전 7:21

열기

1단계 작업 가이드 (시작하기)

오늘은 시스템의 뼈대만 잡았습니다. 아래 순서대로 먼저 준비해주세요.

1. 구글 드라이브에 [초상권 동의서 저장용] 폴더를 하나 만듭니다.
2. 구글 스프레드시트를 하나 만들고, 첫 번째 행(헤더)에 시간, 이름, 소속, PDF 링크라고 적어둡니다.
3. 스프레드시트 메뉴에서 확장 프로그램 > Apps Script를 클릭합니다.
4. 열린 에디터의 Code.gs 파일 내용을 지우고, 위에서 제공한 Code.gs 내용을 복사해서 붙여넣습니다.
5. 코드 상단에 있는 '여기에_Spreadsheet_ID를_입력하세요' 부분 등을 실제 ID로 교체하고 Ctrl+S를 눌러 저장합니다.
6. (중요) Apps Script 에디터 왼쪽 파일 목록의 + 버튼을 눌러 HTML을 선택하고 파일명을 index로 만듭니다. (내용은 비워두셔도 됩니다).

 

 

여기서 중요한 것은 바로 Spreadsheet ID 와  Folder ID 입니다. 이것만 잘 주면 자동으로 파일 목록함께 폴더에 잘 정리해주네요. 

나중에 폴더를 변경하거나 목록 파일을 변경하려면, 이 값만 변경하여 다시 배포하면 됩니다. 

구글 스트립트 수정방법은 
다른 분들의 튜토리얼을 참조해야 해요. 이건 좀 복잡해서....

 

 

사용자님, 제공해주신 Spreadsheet ID와 Folder ID, 그리고 PDF 상세 내용을 바탕으로 시스템을 완성해 드리겠습니다.

이번 단계에서는 **[Phase 2: 프론트엔드/서명 기능]**과 **[Phase 3: PDF 생성/저장]**을 통합하여, 한 번에 작동 가능한 코드를 제공해 드립니다.

🛠️ 작업 요약

1. Code.gs 업데이트: 제공해주신 ID를 적용하고, 데이터를 받아 PDF를 만들고 구글 드라이브와 시트에 저장하는 완성된 백엔드 로직을 작성합니다.
2. index.html 생성: 사용자가 입력할 웹 페이지입니다. 이름, 소속 등은 한 번만 입력하면 되고, 서명은 각 항목별로 직접 할 수 있도록 서명 패드(Signature Pad) 5개(학생용 3개, 보호자용 2개)를 구현했습니다.

---

1. Code.gs (백엔드 코드)

기존 Code.gs 내용을 모두 지우고 아래 코드로 전체 교체해 주세요.

2. index.html (프론트엔드 코드)

새로 생성한 index.html 파일에 아래 내용을 붙여넣으세요. 이 코드는 자동 완성 로직(이름 입력 시 아래쪽 이름란 자동 채움)과 5개의 서명 패드를 모두 포함합니다.

index.html

11월 25일 오전 7:21

🚀 다음 진행 단계 (배포하기)

이제 코드는 모두 준비되었습니다. 마지막 **[Phase 3의 9, 10단계]**인 배포만 남았습니다.

1. 파일 저장: 위 코드를 각각 Code.gs와 index.html에 붙여넣고 저장(Ctrl+S)합니다.
2. 배포:
   • Apps Script 화면 우측 상단의 [배포] 버튼 > **[새 배포]**를 클릭합니다.
   • 왼쪽 톱니바퀴 아이콘 옆에서 **[웹 앱]**을 선택합니다.
   • 설명: 버전 1 등 자유롭게 입력.
   • 다음 사용자 권한으로 실행: 나(자신의 이메일) (중요: 그래야 내 드라이브에 저장됩니다).
   • 액세스 권한: 모든 사용자 (구글 로그인 없이도 학부모/학생이 접속 가능하게 하려면 필수).
   • [배포] 클릭 후 나오는 URL을 복사합니다.

이 URL을 통해 PC나 스마트폰에서 접속하여 테스트해보시면 됩니다. 입력한 내용이 PDF로 잘 생성되어 드라이브 폴더에 들어가는지 확인해 보세요.

 

 

이렇게 완성된 포멧은 다음과 같습니다 .

 

캬.... 이런것을 바로 만들어 주다니. 

나중에 저 틀만 바꿔서 사용할 수 있게 만들면 천하무적!

 

다음 목표는 저기 저 틀을 자동으로 생성해주는 스트립트를 짜봐야겠네요. 

 

목록은 다음처럼 생성되구요. 

 

파일은 구글의 지정된 폴더에 이렇게 자동으로 모여요. 

 

와우.. 멋지다. 

 

아 이거 수정하는 방법도 알려줘야지요. 

 

그림과 같이 제가 만든 파일 초상권동의서시트로 들어가서 .

확장프로그램>Apps Script 눌러주세요.

 

그러면 Code.gs 가 있고, 

index.html 이 있는데, 

이 두개의 파일을 수정해주면 됩니다. 

 

쉽게 설명하면 Code.gs 이것은 뒤에서 작동하는 코드, 즉 일종의 두뇌 역할이구요. 

index.html 이것은 겉으로 보이는 생김새, 즉 얼굴이라고 보시면 됩니다. 

얼굴에 보이는 것들이 동의하는 내용이나, 이름, 서명 같은 것을 받는 곳이 되구요. 

그것을 받아서 데이터에서는 어떻게 처리할 것이냐를 두뇌가 처리해줍니다. 

 

아무튼, 요 두가지를 적절하게 수정하면 되는데, 

그것도 어떻게 하는거냐고 재미나이에게 물어보면, 

친절하게 알려줘요. 

 

결국 내가 찾아서 바꿔야 할 부분은 바로

폴더 ID 랑 시트 ID 

요 2가지라는 것만 기억하면 됩니다. 

 

아래 Code.gs 에서 9번행과 10번행이 바로 그거예요.