lost-and-found-app

Gemini & Apps Script로
10분 만에 학교 분실물 찾기
웹앱 배포하기

Gemini GEMS(PRD 생성기)와 Google Apps Script(GAS)를 활용한 초고속 에듀테크 웹 서비스 구축

01

학습 목차

1단계: 기획 및 코드 생성 - PRD 생성 도우미 및 코드 생성 도우미 GEMS를 활용한 설계 및 소스 코드 도출
2단계: 개발 환경 구축 - 구글 드라이브 폴더 생성 및 스프레드시트 데이터베이스 준비
3단계: Apps Script 탑재 - 생성된 백엔드(Code.gs) 및 프론트엔드(index.html) 코드 복사 및 붙여넣기
4단계: 웹앱 배포 및 승인 - '모든 사용자' 대상 웹앱 배포 설정 및 계정 보안 권한 허용
5단계: 실전 시연 및 검증 - 모바일 뷰 분실/습득물 등록, 교사 관리자 완료 처리, 검색 기능 검증

02

Introduction

왜 GAS 기반 학교 분실물 웹앱인가?

학교 현장에서는 분실물과 습득물이 매일 대량으로 쏟아지지만, 학생들에게 실시간으로 공지하고 주인을 찾아주는 과정이 번거롭고 유실되기 쉽습니다.

전문적인 서버 호스팅이나 복잡한 어플리케이션 설치 과정 없이, 구글 계정만으로 10분 만에 웹앱을 무료 배포하여 학교 구성원 누구나 쉽고 직관적으로 분실물을 등록 및 검색할 수 있는 시스템을 구축합니다.

03

웹앱 구축 전체 아키텍처

Gemini GEMS
설계 & 코드 생성

→

Google Drive & Sheets
데이터 저장소 생성

→

Apps Script Editor
백엔드 & 프론트엔드 코드 탑재

→

Web App Deployment
웹 앱 배포 & URL 획득

GAS용 PRD 생성 도우미 GEMS와 GAS 코드 생성 도우미 GEMS를 활용하여 백엔드(Apps Script)와 프론트엔드(HTML/CSS/JS) 풀스택 코드를 완벽히 생성합니다.

04

Phase 1

1단계: GEMS를 활용한 기획(PRD) 및 코드 생성

먼저 GAS용 PRD 생성 도우미 GEMS에 접속해 학교 요구사항(사용인원 300명, 로그인 없는 접속, 교사 비밀번호 관리자 모드 등)을 기입하여 상세 기획서(PRD)를 도출합니다.
도출된 기획서를 복사한 뒤, GAS 코드 생성 도우미 GEMS에 주입하여 실제 동작하는 Code.gs(백엔드) 및 index.html(프론트엔드) 소스 코드를 생성합니다.
GEMS와의 대화를 통해 복잡한 구글 API 명세나 에러 핸들링을 직접 작성할 필요 없이, 검증된 최적의 앱 설계 코드를 확보할 수 있습니다.

05

Phase 2

2단계: 구글 드라이브 및 스프레드시트 구축

구글 드라이브에 접속하여 전용 폴더(예: 분실물찾기웹)를 새로 생성합니다.
생성한 폴더 안에 새 스프레드시트를 생성하고 이름을 분실물찾기_테스트로 지정합니다.
구글 스프레드시트는 웹 앱에 등록되는 분실물의 정보(카테고리, 장소, 사진 링크, 완료 상태 등)가 저장되는 영구 데이터베이스(DB) 역할을 담당하게 됩니다.

06

Phase 3

3단계: Apps Script 에디터에 코드 탑재

생성한 구글 스프레드시트의 상단 메뉴에서 확장 프로그램 > Apps Script를 클릭해 코딩 창을 엽니다.
기본 생성된 Code.gs 파일 내부의 기본 함수를 모두 지우고, Gemini가 생성해 준 백엔드 자바스크립트 코드를 그대로 붙여넣습니다.
파일 목록 상단의 + 버튼을 누르고 'HTML'을 선택하여 파일명을 index로 생성한 후, Gemini가 만든 index.html 코드를 덮어씁니다.

07

Apps Script 백엔드 핵심 코드 예시

function doGet() {
  return HtmlService.createTemplateFromFile('index')
      .evaluate()
      .setTitle('우리 학교 분실물 찾기')
      .addMetaTag('viewport', 'width=device-width, initial-scale=1')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function uploadFileToDrive(base64Data, filename) {
  var folder = DriveApp.getFolderById(FOLDER_ID);
  var contentType = base64Data.substring(5, base64Data.indexOf(';'));
  var bytes = Utilities.base64Decode(base64Data.split(',')[1]);
  var blob = Utilities.newBlob(bytes, contentType, filename);
  var file = folder.createFile(blob);
  file.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
  return file.getUrl();
}

08

Phase 4

4단계: 웹 앱 새 배포 및 구글 보안 권한 승인

Apps Script 편집기 우측 상단의 배포 > 새 배포를 클릭합니다.
기어 아이콘을 눌러 유형을 '웹 앱(Web App)'으로 설정합니다.
설정 항목 중 '웹 앱을 실행할 사용자'는 '나(Me)'로, '액세스 권한이 있는 사용자'는 로그인 없이 접속 가능하도록 '모든 사용자(Anyone)'로 설정해 배포합니다.
배포 과정 중 권한 검토(Review Permissions) 팝업이 뜨면 자신의 구글 계정을 선택하고 허용(Allow) 절차를 완료하여 복사할 웹 앱 주소(URL)를 획득합니다.

09

Phase 5

5단계: 모바일 웹앱 실전 테스트 및 검증

발급된 웹앱 주소에 접속하여 모바일 최적화 화면이 정상 렌더링되는지 확인합니다.
글쓰기 기능: '찾아요(분실)' / '주웠어요(습득)' 선택 후 모바일 카메라로 사진을 촬영 및 첨부하고 위치/상세 정보를 기입해 정상 등록합니다.
관리자 완료 처리: 교사 모드 인증(비밀번호 입력)에 접속하여 완료 항목을 즉각 보관 처리하거나 초기화합니다.
검색 기능: 검색 바를 통해 '포스트잇' 등 특정 단어 입력 시 즉각적인 정답 필터링 여부를 검증합니다.

10

Video Tutorial

학교 분실물 웹앱 제작 전체 시연 영상

실습 및 배포 과정의 원활한 이해를 돕기 위한 튜토리얼 녹화 영상입니다.

11

강의 요약 (Lecture Summary)

우리는 복잡한 개발 인프라나 과금 요구사항 없이 구글 스프레드시트와 Apps Script라는 강력한 조합으로 실용적인 에듀테크 시스템을 구현했습니다.

Gemini GEMS와 대화하면서 교실/학교 내에 필요한 기능을 직관적으로 정의하고 소스코드를 도출하는 방식은, 미래 교사들을 위한 매우 핵심적이고도 유용한 AI 활용 시나리오입니다.

12

Q&A 및 실습 안내

워크스페이스 내의 템플릿 파일과 복사한 코드를 바탕으로 직접 나만의 '학교 담벼락' 웹앱을 배포하여 운영해 보시기 바랍니다.

13

Gemini & Apps Script로10분 만에 학교 분실물 찾기웹앱 배포하기