💡 소개
토요일 AI오프라인 모임에서 15기 에듀테크 윤스케어 스터디장님의 알찬 앱스 스크립트 활용 방법을 듣고 활용해 보았습니다.
방과후 수업에서 반복적으로 이루어지는 출석체크와 학생들에게 전달해야 하는 수업자료 링크 및 숙지해야할 학습 목표를 학생들이 간편하게 클릭해서 처리할 수 있도록 웹 페이지로 만들어 보았습니다.
💡 사용도구
Monica(Claude 3.7 Sonnet), ChatGPT : 코드작성, 사용 앱의 연동방법, 웹 페이지 게시 방법
구글 스프레드 시트 : 학생명단, 교육자료, 학습목표 3개의 데이터 시트 구성
앱스 스크립트 : 구글 스프레드 시트에서 가져온 데이터로 웹 앱 만들기
구글 사이트 도구 : 앱스 스크립트에서 만들어진 웹 앱을 연동해서 웹 페이지 게시
💡 방과후 운영 시스템 워크 플로우
1. 스프레드시트 설정
학생명단 시트 생성
A열: 학생 ID
B열: 학생 이름
C열 이후: 날짜별 출석 기록 (YYYY-MM-DD 형식의 날짜가 헤더)
교육자료 시트 생성
A열: 자료 ID
B열: 자료 유형 (퀴즈, 동영상, 패들렛, 설문)
C열: 자료 제목
D열: 자료 링크
학습목표 시트 생성
A열: 목표 ID
B열: 날짜 (YYYY-MM-DD 형식)
C열: 학습목표 내용
2. 앱 배포 과정
Google Apps Script 프로젝트 생성
Google Drive에서 새 스프레드시트 생성
확장 프로그램 > Apps Script 선택
코드 파일 생성
Code.gs: 서버 측 코드 추가Index.html: 메인 HTML 구조 추가CSS.html: CSS 스타일 추가JavaScript.html: 클라이언트 측 코드 추가
앱 배포
배포 > 새 배포 선택
배포 유형: 웹 앱
실행: 자신의 계정으로
액세스 권한: 필요에 따라 설정 (조직 내 또는 모든 사용자)
배포 버튼 클릭
3. 일일 사용 흐름
교사 준비 작업
학습목표 시트에 오늘의 학습 목표 입력
필요한 교육자료 시트에 자료 추가
학생 출석 체크
학생이 웹 앱 접속
자신의 이름 카드 클릭
시스템이 자동으로 현재 시간을 기록
출석 완료 시 카드 색상 변경 및 출석 시간 표시
출석 데이터 관리
시스템이 자동으로 오늘 날짜 열을 찾거나 생성
학생별 출석 시간이 해당 날짜 열에 기록됨
교사는 스프레드시트에서 실시간으로 출석 현황 확인 가능
학습 자료 및 목표 확인
학생들은 웹 앱에서 오늘의 학습 목표 확인
교육 자료 목록을 유형별로 확인하고 접근 가능
4. 시스템 기능 요약
출석 관리
날짜별 자동 열 생성
학생별 출석 시간 기록
시각적 출석 상태 표시
학습 자원 관리
오늘의 학습 목표 표시
교육 자료 유형별 분류 및 링크 제공
오류 처리
오류 발생 시 사용자에게 알림
오류 로그 자동 기록 (오류로그 시트 생성)
5. 데이터 흐름
데이터 입력
교사: 스프레드시트에 학생 정보, 학습 목표, 교육 자료 입력
학생: 웹 앱에서 출석 버튼 클릭
데이터 처리
서버 측 코드가 출석 정보 처리
날짜별 열 자동 생성 및 관리
출석 시간 기록
데이터 출력
웹 앱: 학생 출석 상태, 학습 목표, 교육 자료 표시
스프레드시트: 모든 데이터 저장 및 관리
💡 실행 영상
💡 게시 사이트
https://sites.google.com/view/fridayafterschool/%ED%99%88
💡 작성 프롬프트
원하는 사이트를 만들려고 엄청 많은 수정 프롬프트를 넣어서 모든 프롬프트는 공유드리지 못할 것 같고 중요한 부분만 공유 드리도록 하겠습니다.
역할 부여 프롬프트: "당신은 구글앱에 능통하고 apps script 전문가입니다."( 그리고 Monica 채팅창에서 개발자를 선택했습니다.)
출석체크 위한 프롬프트 : "구글 사이트 도구를 이용해서 구글시트의 데이터를 가져와서 간단한 방과후 운영에 필요한 사이트를 구성하려고 해. 1. 구글 사이트 도구에 출석체크 버튼을 만들고 싶어. 구글 시트 학생명단과 연동하여 이름을 버튼 형식으로 만들어 이름을 누르면 학생명단 시트에 출석날짜가 이름 옆에 추가되도록 만들고 싶어. 같은 날짜에는 한번만 누를 수 있도록 한번 누르면 비활성화해줘. UI를 귀엽고 깔끔하게 만들어줘."(이후에 학생이름 버튼을 누를 때마다 날짜열이 만들어져 시간이 체크하는 문제가 발생해서 수정 프롬프트를 넣었습니다. 이 부분은 생략하도록 하겠습니다.)
교육자료 게시를 위한 프롬프트1 : "이번에는 교육자료 시트에 있는 퀴즈, 동영상, 패들렛, 설문을 버튼으로 만들어 누르면 연결된 링크가 열릴 수 있도록 코드를 작성해줘."(이때 앱스 스크립트의 특징을 잘 몰라서 1개의 스프레드 시트에 3개의 시트를 구성했는데 앱스 스크립트에 코드를 넣으려고 하니 출석체크를 위한 코드가 작성되어 있어 이부분을 어떻게 수정해야 할 지 몰라서 다시 요청했습니다.)
교육자료 게시를 위한 프롬프트2 : "그런데 문제가 발생했어. 내가 금요일 방과후라는 제목으로 구글 스프레드 시트를 열고 학생명단, 교육자료, 학습목표 3개의 시트를 만들어 버렸어." (수정된 코드를 알려준 대로 입력했더니 앱스 스크립트로 만든 앱을 구글 사이트 도구에 잘 임베드해서 게시할 수 있었습니다. 하지만 이때 욕심을 부려서 각 시트를 탭으로 구분한 것을 한 페이지에 넣고 싶어서 요청했다가 엄청 고생을 하고 결국에는 이 버전으로 게시를 완료했습니다. 이 과정에서 Monic에서 Claude를 사용했을때 단점을 알게 되었습니다.)
💡 결과와 배운 점
구글 스프레드 시트, 앱스 스크립트, 구글 사이트 도구를 연동하는 방법에 대해서 알게 되었습니다.
원하는 웹 페이지 UI를 만들기 위해서는 디테일한 프롬프트 작업과 시행착오가 필요하다는 것을 알게 되었습니다. (사용한 툴들에 대한 이해가 부족해서 엄청난 시행착오를 겪었습니다.)
Monica AI에서 Claude를 사용해서 코드를 작성했을 때 앞에서 했던 대화의 내용을 기억하는데 한계가 있는 것 같습니다. 반복되는 수정에 전에 요구했던 내용과 다른 코드를 작성해 주어서 계속적 수정과 오류가 발생해 결국에 포기하고 부분 수정을 유료 결제해서 쓰고 있는 ChatGPT 에게 요청해서 수정했습니다.
월요일에 15기 에듀테크 스터디에서 앱스 스크립트 특강을 열심히 듣고 잘 이해해서 활용해 볼 수 있도록 하겠습니다.
도움 받은 글 (옵션)
글쓴이 : 윤스케어
제목 : [강의 업무 자동화: 구글 앱스 스크립트와 앱시트로 해결하기]