Google Apps Script로
연수 등록 시스템 만들기

구글 폼으로 신청을 받으면 접수는 되지만, 출석 확인과 확인증 발급은 결국 손으로 하게 됩니다. 이 실습은 그 뒷단을 스프레드시트 안에서 끝냅니다. 시트가 데이터베이스, Apps Script가 서버, 웹앱이 참가자 화면입니다. 참가자는 성명과 연락처만 기억하면 되고, 행사장에서는 화면에 직접 서명을 남깁니다.

1. 진행자가 안내한 완성본 스프레드시트 링크를 열고 파일 → 사본 만들기를 누릅니다. 내 드라이브에 복사본이 생깁니다.
2. 복사본에서 확장 프로그램 → Apps Script를 열어 코드가 함께 복사됐는지 확인합니다.
3. 스프레드시트로 돌아와 새로고침하면 상단에 연수 등록 시스템 메뉴가 생깁니다.
4. 연수 등록 시스템 → ① 시트 만들기를 실행합니다. 권한 승인 창이 뜨면 고급 → 안전하지 않은 페이지로 이동을 눌러 본인 계정으로 승인합니다.

참가자가 쓸 화면을 인터넷에 올리는 단계입니다. 여기서 설정 하나를 놓치면 남들이 못 들어옵니다.

1. Apps Script 편집기 오른쪽 위 배포 → 새 배포를 누릅니다.
2. 톱니바퀴 유형 선택 → 웹 앱을 고릅니다.
3. 다음 사용자로 실행: 나
4. 액세스 권한이 있는 사용자: 모든 사용자 ← 이 항목이 핵심입니다.
5. 배포를 누르고 나온 웹앱 URL을 복사합니다.

관리자 코드 넣기 — 배포 직후 바로

관리자 화면에는 참가자 연락처가 그대로 보입니다. 웹앱 주소는 QR로 모두에게 공개되고 뒤에 ?mode=admin만 붙이면 되므로, 코드를 넣기 전까지 관리자 기능은 잠겨 있습니다.

1. Apps Script 편집기 왼쪽 프로젝트 설정(톱니바퀴)으로 이동합니다.
2. 아래쪽 스크립트 속성에서 속성 ADMIN_CODE, 값에 원하는 암호를 넣고 저장합니다.
3. 웹앱 관리자 탭을 열면 이제 코드를 물어봅니다.

주소는 ?mode= 뒤에 붙이는 값으로 화면이 갈립니다. 접수대 안내판에는 등록 주소를 QR로 띄워두면 됩니다(관리자 화면에 QR이 있습니다).

※ 과거에 나눠 준 ?mode=checkin 주소도 등록 화면으로 연결됩니다.

고치기 전에 완성품이 어떻게 도는지 먼저 봅니다. 본인 이름으로 직접 한 바퀴 돌려보세요. 기억할 것은 성명과 연락처뿐입니다.

1. 사전 신청 — 웹앱 주소 뒤에 ?mode=apply를 붙여 열고 본인 정보로 신청합니다. 이메일은 필수입니다. 제출하면 "완료되었습니다" 팝업이 뜨고, 잠시 뒤 신청 내역과 행사 안내 메일이 도착합니다.
2. 스프레드시트 신청자 시트를 보면 방금 신청한 행이 실시간으로 쌓여 있습니다.
3. 등록 — 등록 탭(또는 ?mode=register)에서 성명과 연락처를 넣고 사전 신청 조회를 누릅니다. 기록이 있으면 소속·직위 칸이 사라지고 서명 칸만 열립니다. 서명한 뒤 "서명하고 등록 완료"를 누르면 끝입니다.
4. 처음 온 사람으로도 해 보세요 — 아무 이름과 번호로 조회하면 "기록이 없습니다"가 뜨면서 소속·직위·이메일 칸이 펼쳐집니다. 채워 넣고 서명하면 그 자리에서 새 참가자로 등록됩니다.
5. 확인증 — 확인증 탭에서 성명과 연락처를 넣으면 확인증이 화면에 그려집니다. PNG로 내려받거나 PDF로 드라이브에 저장할 수 있습니다.
6. 진위 확인 — 확인증 우측 하단 QR을 휴대폰 카메라로 찍으면 검증 화면이 열립니다. 이름은 박○종처럼 가려서 보여줍니다.

수업안과 산출물 링크 걸어두기

자료 시트에 링크를 적으면 자료 탭에 카드로 뜹니다. 위쪽은 운영진이 올리는 자료, 아래쪽은 참가자가 올린 산출물입니다.

운영진 자료 — 시트에 적기

자료 시트에 한 줄씩 추가합니다. 코드는 건드리지 않습니다.

참가자 산출물 — 웹앱에서 올리기

• 자료 탭 아래 내 산출물 올리기에서 성명과 연락처를 넣고 링크를 제출합니다.
• 한 사람당 한 건입니다. 다시 올리면 기존 링크가 바뀝니다.
• 부적절한 링크는 관리자 탭 자료와 산출물 표에서 숨기기를 누르면 자료 화면에서 사라집니다.

전체를 비공개로 운영하려면 설정 시트의 산출물제출을 false로 두면 제출 칸이 사라지고, 개별 자료는 공개 열을 숨김으로 바꾸면 됩니다.

전부 이해할 필요는 없습니다. 아래 세 곳만 만져보면 "데이터 → 규칙 → 결과물"이라는 구조가 손에 잡힙니다. 고칠 위치는 코드에 ✏️ 실습 주석으로 표시해 두었습니다.

1. ✏️ ① 코드를 건드리지 않는 수정 — 설정 시트에서 연수명 · 발급기관 등 값을 바꿉니다.
2. ✏️ ② 규칙 바꾸기 — Code.gs의 submitApplication 함수 안 한 줄 (정원이 찼을 때).
3. ✏️ ③ 결과물 바꾸기 — Index.html의 drawCertificate 함수 (확인증 디자인).

① 설정 시트 — 코드 없이 바꾸는 것들

설정 시트로 가서 값 열만 고치고 웹앱을 새로고침하면 바로 반영됩니다.

② 정원이 찼을 때의 규칙 — Code.gs

편집기에서 Ctrl+F로 ✏️ 실습 ②를 찾으면 이 줄이 나옵니다.

// ✏️ 실습 ②: 정원이 찼을 때의 처리 — '대기'로 받을지, 아예 막을지 이 줄에서 정합니다.
status = (capacity > 0 && approved >= capacity) ? APP.STATUS.WAITING : APP.STATUS.APPROVED;

대기자를 아예 받지 않고 정원이 찼으면 바로 거절하려면, 위 줄을 지우고 아래를 붙여넣습니다.

if (capacity > 0 && approved >= capacity) {
  throw new Error('정원이 모두 찼습니다. 다음 기수를 이용해 주세요.');
}
status = APP.STATUS.APPROVED;

저장(💾) 후 웹앱을 새로고침하고, 정원을 현재 승인 인원과 같게 낮춘 뒤 신청해 보면 바뀐 동작이 보입니다. 이렇게 고치면 대기자가 생기지 않으므로 5단계의 자동 승격도 일어나지 않습니다. 대기 명단을 관리할 연수라면 원래 코드를 그대로 두세요.

③ 확인증 디자인 — Index.html

✏️ 실습 ③ 아래 drawCertificate 함수가 확인증을 캔버스에 그립니다. 좌표는 가로 1754 × 세로 1240 기준입니다.

g.strokeStyle = '#1e3a7b'; g.lineWidth = 8;  g.strokeRect(46, 46, W - 92, H - 92);

g.textAlign = 'center'; g.fillStyle = '#16233a';
g.font = '700 96px ' + serif;
g.fillText(cert.제목, W / 2, 268);

색을 학교 상징색으로 바꾸고 제목을 키워 보세요. 아래를 참고해 숫자와 색 코드를 바꿔도 됩니다.

// 테두리 색을 학교 상징색으로 ( lineWidth = 굵기 )
g.strokeStyle = '#8a2b2b'; g.lineWidth = 10; g.strokeRect(46, 46, W - 92, H - 92);

// 제목 크기와 위치 ( W/2 = 가운데 , 268 = 위에서부터의 높이 )
g.font = '700 110px ' + serif;
g.fillText(cert.제목, W / 2, 288);

1. 웹앱 주소 뒤에 ?mode=admin을 붙이거나 상단 관리자 탭을 누르고, 2단계에서 넣은 관리자 코드를 입력합니다.
2. 신청 · 승인 · 대기 · 등록 · 확인증 발급 수가 한눈에 보입니다. 표에서 상태를 바꾸면 시트에 바로 반영됩니다.
3. 현장 안내용 QR이 화면에 떠 있습니다. 접수대 모니터에 띄워 두면 참가자가 폰으로 찍어 바로 등록 화면으로 들어옵니다.
4. 등록부(서명 포함) Docs · PDF를 누르면 A4 세로 5열(순번/소속/직위/성명/서명)의 공식 문서가 드라이브에 만들어집니다. 결재 · 공문 첨부에 그대로 씁니다.

실습용 시트를 그대로 실전에 쓰려면 아래를 먼저 확인하세요. 개인정보를 다루는 시스템입니다.

1. ② 예시 신청자 다시 만들기로 만든 더미 데이터를 지우고 시작합니다.
2. ADMIN_CODE를 실제 암호로 바꿉니다. 실습 때 쓴 임시 값이 그대로 남아 있지 않은지 확인하세요.
3. 스프레드시트 공유 범위를 확인합니다. 링크가 있는 모든 사용자로 열려 있으면 웹앱을 잠가도 명단이 통째로 노출됩니다.
4. 신청 화면의 동의 문구를 기관 방침에 맞게 고치고, 연수 종료 후 수집한 정보를 실제로 파기합니다.
5. 확인증 발급기관명이 본인이 발급 권한을 가진 기관인지 확인합니다.
6. 서명 원본은 드라이브의 "연수 서명 보관함" 폴더에 쌓입니다. 이 폴더의 공유 범위도 함께 확인하세요.
7. 자료 화면은 링크를 아는 누구나 볼 수 있습니다. 참가자 산출물에 학생 개인정보가 담긴 링크가 올라오지 않도록 미리 안내하세요.

웹앱은 보안 정책상 카메라를 열 수 없어, 접수대에서 스캐너로 참가자 개인 QR을 읽는 방식은 동작하지 않습니다. 그래서 참가자가 자기 휴대폰으로 접수대 QR(또는 관리자 화면 QR)을 찍고, 성명과 연락처로 직접 등록하며 서명하는 방향으로 설계했습니다. 스캐너가 꼭 필요하면 크롬북 · 태블릿에 별도 스캐너 앱을 두고 접수를 대리 입력하는 방식으로 운영하세요.

완성본 웹앱 열어 보기 →