소개 🙌
지피터스 20기 구글 트레이너 미니특강을 준비하면서, “비개발자도 40분 안에 웹앱형 강의안을 만들 수 있을까?”를 목표로 잡았습니다.
교육현장에서 가르치는 사람(교사/교수/강사)은 늘 학습자에 맞춘 상상력과 창의력이 필요하잖아요. 그래서 저는 바이브코딩(Vibe coding) 방식으로,
구글 도구(Forms/Sheets/Apps Script 등)로 간단한 신청·설문·출결·퀴즈 웹앱을 만들고
Gemini의 Canvas를 중심으로 강의안(슬라이드/대본/실습 안내)을 빠르게 구성해
“누구나 편집해서 재사용 가능한” 형태로 전달하는 것
을 핵심 가치로 삼았습니다. 😊
교사 교수 강사를 대상으로 바이브코딩을 활용한 다양한 강의 자료 사례를 공유 했어요.
사례가 또 다른 사례의 열매를 남기기에 저의 사례 공유를 통해 교수자의 아이디어가 뿜뿜 하길 기대 했답니다.
진행 방법 🛠️
1) 40분 미니특강 운영 흐름 ⏱️
도입(5분): 오늘 만들 결과물 미리보기(완성 데모 영상/링크)
데모(5분): “신청/출결/퀴즈 중 하나”를 실제로 클릭해보며 흐름 이해
따라하기(20분):
(A) Google Forms → (B) Google Sheets 연결 → (C) Apps Script로 간단 자동화/웹앱 배포
피드백(10분): 참가자 주제에 맞게 문구·항목·강사명 바꾸기 + 확장 아이디어 공유
팁: 실습 시간(20분)은 “기능 완성”보다 “흐름을 경험”하게 만드는 게 핵심이더라고요!
👇 아래는 노트북 LM으로 구성한 슬라이드 자료예요. 이 자료와 반응형 웹앱을 비교해서 보면 더 쉽게 이해 가능하답니다.
노트북 LM도 칭찬해요!! 하지만 보다 임펙트 있는 강의내용 전달을 위해서 강사의 상상력과 창의력은 움직이는게 필요하죠!!
👇 제미나이 캔바스로 구성한 반응형 웹앱!! 위 자료와 비교 될 수 있지요.
https://gemini.google.com/share/5832ddd8054c
퀴즈로 도입하고 교육 주제에 대한 요점을 정리해서 알려주고
O. X 퀴즈를 통해 복습하고
프롬프트 복붙용까지 구성하는 것을 함께 진행해 보았답니다.
2) 이번 특강의 핵심 도구 🧰
Gemini Canvas: 강의안 초안(목차/슬라이드 문구/실습 안내/대본) 생성 및 반복 편집
문서/코드/슬라이드/앱 아이디어를 한 공간에서 다듬을 수 있어 준비 시간이 확 줄었습니다. (gemini.google)
Google Forms + Sheets: 신청/출결/퀴즈 입력-수집의 기본 뼈대
응답을 시트에 연결해 데이터가 자동으로 쌓이게 만들었습니다. (support.google.com)
Google Apps Script(Web App): “웹앱처럼 보이는 결과물”을 만드는 마무리 단계
Deploy(배포)로 URL을 만들고 공유하는 흐름을 사용했습니다. (developers.google.com)
3) (수확!) 참가자가 ‘각자 주제’로 쉽게 바꾸게 만드는 프롬프트 ✨
특강을 준비하면서 가장 고민한 건 “모두가 쉽게 따라오게 하는 방법”이었어요. 그래서 각자의 강의 주제 + 강사 이름만 바꾸면 강의안이 자동으로 맞춰지도 록, 재사용 프롬프트를 구성했습니다.
아래는 제가 실제로 쓴(그리고 공유하기 좋게 다듬은) 템플릿 프롬프트예요.
[역할]
너는 교육 현장에서 미니특강을 설계하는 교수설계자이자, 구글 도구로 웹앱형 실습을 만드는 코치야.
[입력값]
- 강의 주제: {예: 구글 도구로 만드는 출결 웹앱}
- 강사 이름: {예: 홍길동}
- 대상: {예: 교사/교수/강사}
- 총 시간: 40분
- 목표 결과물: {예: 출결 폼 + 응답 시트 + Apps Script 웹앱 URL}
[요청]
1) 40분 구성안(도입/데모/따라하기/피드백) 타임테이블을 만들어줘.
2) 슬라이드 6~8장 분량으로: 각 슬라이드 제목 + 핵심 문장 3개 + 발표자 멘트를 써줘.
3) 실습 안내서를 단계별 체크리스트로 만들어줘.
4) (선택) Apps Script 웹앱 배포 시 흔한 권한/공유 이슈 3개와 해결 팁을 써줘.
[톤]
처음 해보는 비개발자도 이해할 수 있게 쉽게, 친절하게, 예시는 교육 현장 중심으로.
저는 이 프롬프트를 Canvas에서 돌려서 강의안 초안 → 말투/길이 조정 → 실습 체크리스트 보강까지 한 번에 정리했습니다. (gemini.google)
4) 실습(따라하기) 구성 예시 ✅
참가자가 “웹앱” 느낌을 바로 받게 하려면, 단계는 단순할수록 좋았습니다.
Step A. Google Forms 만들기
신청/출결/퀴즈 중 하나 선택
문항 3~5개만 먼저 만들기
Step B. 응답을 Google Sheets로 연결
응답 탭에서 시트로 연결(데이터가 쌓이는지 확인) (support.google.com)
Step C. Apps Script로 자동화/웹앱 배포 맛보기
(예) 제출 시 자동 메일, 간단한 HTML 화면, 결과 요약 페이지 등
웹앱 배포: Deploy → New deployment → Web app → URL 공유 (developers.google.com)
결과와 배운 점 🌱
✅ 1) “비개발자도 가능”은 ‘구조’가 만든다
단순히 “AI가 도와줘요!”만으로는 따라오기가 어렵더라고요. 오히려 구조(흐름)와 편집 포인트(바꿔야 할 것)가 명확하면 비개발자도 충분히 완주했습니다.
흐름: 입력(Forms) → 저장(Sheets) → 자동화/화면(Apps Script)
편집 포인트: 강의 주제 / 강사 이름 / 문항
✅ 2) 강의 준비의 핵심은 ‘재사용 프롬프트’였다
특강을 준비하면서 얻은 가장 큰 수확은,
“각자의 강의 주제와 강사의 이름을 쉽게 편집해서 쓸 수 있는 프롬프트” 를 만든 것이었어요.
이 덕분에 참가자 입장에서도
내 과목/내 수업/내 워크숍으로 즉시 커스터마이징 가능
결과물이 “내 것”이 되면서 몰입도가 올라감
이라는 효과가 있었습니다. 😊
✅ 3) (다음엔) 권한/계정 이슈 대비 플랜을 더 명확히
Apps Script 웹앱 배포는 빠르게 성취감을 주지만,
실행 권한(누가 실행하는지)
접근 권한(누가 볼 수 있는지)
조직 계정 정책(학교/기관 계정 제한)
같은 변수가 있어요. 다음에는 “권한 체크 슬라이드 1장”을 고정으로 넣을 계획입니다. (developers.google.com)
도움 받은 글 (옵션) 🔗
Gemini Canvas 소개/사용 방법: (gemini.google)
Apps Script 웹앱 배포 가이드: (developers.google.com)
Google Forms 응답을 Sheets로 연결: (support.google.com)
(참고) Workspace에서 Gemini 활용 맥락: (workspaceupdates.googleblog.com)
💬 독자에게 남기는 한마디
웹앱은 거창한 개발이 아니라, 교육 현장의 상상력을 작은 자동화로 바꾸는 시작이에요. “나도 만들 수 있다”는 감각을 40분 안에 꼭 경험해보세요! 🚀
