반응하는 퀴즈 게임
답을 누르면 설명이 나오고
마지막에 점수를 확인합니다.
Canva로 게임을 만들고,
Gemini와 Apps Script로 기록을 남깁니다.
환경 보호 퀴즈 · 3문제
답을 누르면 설명이 나오고
마지막에 점수를 확인합니다.
응답을 보내면
Google Sheets에 저장됩니다.
요청 → 실행 → 확인 → 수정
이 과정을 반복합니다.
| 차시 | 무엇을 하나요? | 내 손에 남는 것 |
|---|---|---|
| 1차시 · 50분 | 바이브 코딩 이해 + Canva 첫 생성 | 요청문과 게임 초안 |
| 2차시 · 50분 | 교과 내용·화면·동작 수정 | 확인까지 마친 퀴즈 게임 |
| 3차시 · 50분 | Gemini + Apps Script + Sheets | 응답 저장 앱 |
자연어로 요청하고 결과를 실행해 보는
코딩 경험을 설명하며 사용했습니다.
생성한 내용과 버튼의 동작을
확인하는 습관까지 함께 배웁니다.
대상과 기능을 설명합니다.
화면과 버튼을 눌러 봅니다.
예상과 다른 점을 알려 줍니다.
환경 보호 퀴즈 3개를 만들어 줘. 답을 누르면 정답과 설명이 나오게 해 줘.
| 사람이 결정할 것 | AI에게 맡길 수 있는 초안 작업 |
|---|---|
| 수업 목표와 학년 | 화면과 코드의 첫 초안 |
| 문제·정답·설명의 정확성 | 문장과 화면의 여러 대안 |
| 완료 조건과 기능 우선순위 | 오류 원인과 수정 방법 제안 |
| 배포 범위와 실제 사용 여부 | 수정한 코드와 사용법 설명 |
코드를 입력하는 방식과 비교해
사람에게 남는 역할을 생각해 봅니다.
선택 시청: 도입부 약 2분
심화 영상이므로 전체 재생은 수업 후 권장
초등 4학년
환경 보호 복습
3문제·채점·재시작
큰 글자·초록색
중복 채점 없음
초등 4학년이 환경 보호를 복습할 퀴즈를 만들어 주세요. 3문제, 정답 설명, 최종 점수, 다시 시작 기능을 넣어 주세요. 큰 글자와 초록색을 사용하고 한 문제는 한 번만 채점해 주세요.
| 막연한 요청 | 실행·확인이 가능한 요청 |
|---|---|
| 예쁘게 만들어 줘. | 흰 바탕에 초록색 버튼을 쓰고 여백을 넓혀 줘. |
| 아이들이 쓰기 쉽게. | 한 화면에 한 문제, 선택지마다 큰 버튼을 넣어 줘. |
| 잘 작동하게 해 줘. | 답을 두 번 눌러도 점수가 한 번만 올라가게 해 줘. |
| 오류를 고쳐 줘. | 다시 시작을 누르면 이전 점수가 남아 있어. 0점으로 바꿔 줘. |
우리 반 __________ 학생이
__________을 연습할 수 있도록
__________ 기능이 있는 도구를 만듭니다.
질문 → 답 선택 → 설명 → 점수
짧은 게임 하나로 제작 과정을 배웁니다.
교육 계정으로 로그인합니다.
홈의 빠르게 만들기에서 “코드”를 찾습니다.
Canva AI와 빈 캔버스가 열리면 준비 완료입니다.
무엇을 만들지 설명하고,
추가 요청을 이어 갑니다.
생성이 끝나면 미리 보기에서
직접 눌러 봅니다.
초등학생을 위한 환경 보호 퀴즈 게임을 만들어 주세요. 제목: 지구를 지키는 선택 주제: 물 절약, 일회용품 줄이기, 전기 절약 · 객관식 3문제 한 문제씩 보여 주고, 답을 누르면 정답 여부와 짧은 설명을 표시해 주세요. 마지막에 3점 만점 점수와 다시 시작 버튼을 넣어 주세요. 한 문제는 한 번만 채점하고 다시 시작하면 점수를 0으로 초기화해 주세요. 초록색·흰색, 큰 글자·큰 버튼을 사용하고 개인정보 입력은 넣지 마세요.
문제·선택지·정답이 교과 내용에 맞는지 확인합니다.
정답과 오답의 반응을 각각 확인합니다.
정답의 이유가 학생에게 이해되는지 살펴봅니다.
| 공통 주제 | 바꿀 수 있는 예시 |
|---|---|
| 환경 보호 | 과학 · 물의 상태 변화 |
| 환경 보호 | 사회 · 지역의 공공기관 |
| 환경 보호 | 국어 · 사실과 의견 |
| 환경 보호 | 수학 · 곱셈과 나눗셈 |
화면과 버튼 기능은 유지하고 문제만 [교과·주제]로 바꿔 주세요. 대상은 [학년]입니다. 정답과 설명을 함께 제시해 주세요.
정답을 골라 주세요
작은 버튼교실 뒤에서도 읽기 쉽도록 질문과 선택지 글자를 크게 해 주세요. 선택지 버튼 사이의 간격을 넓혀 주세요. 배경은 흰색, 글자는 진한 색으로 바꿔 주세요. 문제와 정답, 점수 계산은 그대로 유지해 주세요.
먼저 기본 동작을 확인
지금 몇 번째 문제인지
채점과 재시작도 점검
화면 위에 “문제 1 / 3”처럼 진행 상황을 표시해 주세요. 기존 문제와 채점 방식은 유지해 주세요.
| 기대했던 동작 | 실제로 본 동작 | AI에게 전달할 내용 |
|---|---|---|
| 다시 시작하면 0점 | 이전 점수가 남음 | 재시작 때 점수 초기화 |
| 한 문제는 한 번만 채점 | 두 번 누르면 2점 | 첫 선택 뒤 답변 잠금 |
| 마지막에 결과 화면 | 빈 화면이 나타남 | 마지막 문제 이후 이동 확인 |
재현 순서: 세 문제를 푼 뒤 다시 시작을 눌렀습니다. 기대: 첫 문제, 0점으로 시작 / 실제: 이전 점수가 남습니다. 재시작 초기화 부분을 수정하고 확인 방법도 알려 주세요.
두 경우 모두 설명이
제대로 나타나는가?
같은 답을 여러 번 눌러도
점수가 한 번만 오르는가?
마지막 결과가 나오고
재시작하면 초기화되는가?
한 사람은 사용하고, 한 사람은 관찰합니다.
| 피드백 항목 | 한 문장으로 기록 |
|---|---|
| 좋았던 점 | 어떤 화면이나 설명이 이해하기 쉬웠나요? |
| 막힌 점 | 어느 버튼에서 무엇을 해야 할지 몰랐나요? |
| 다음 수정 | 가장 먼저 바꾸면 좋을 한 가지는 무엇인가요? |
PDF에는 설명과 캡처를 넣고,
게임은 미리 보기나 웹 링크로 실행합니다.
Gemini는 제작을 돕고,
Apps Script는 저장을 처리합니다.
이해도와 소감 입력
입력 검사 후 기록
제출시각·이해도·소감
| 시트 열 | 저장하는 값 | 예시 |
|---|---|---|
| A · 제출시각 | 서버가 기록한 날짜와 시간 | 2026-09-10 14:30 |
| B · 이해도 | 세 선택지 중 하나 | 조금 더 연습할래요 |
| C · 한 줄 소감 | 1~200자 텍스트 | 버튼과 저장의 관계를 알았어요. |
이름: 바이브 코딩 연수_수업 소감
상단 메뉴에서 Apps Script를 클릭합니다.
Code.gs가 보이면 준비 완료입니다.
Code.gs시트 연결 · 입력 검사 · 응답 저장
Index.html입력칸 · 버튼 · 완료 메시지
Google Apps Script 웹앱으로 수업 소감 앱을 만들고 싶습니다. Code.gs와 Index.html 두 파일로 구성해 주세요. 이해도 3단계와 200자 이내 소감을 입력받아 Google Sheets에 저장합니다. setup으로 시트를 연결하고 google.script.run으로 저장을 요청해 주세요. 저장 중 버튼 잠금, 성공·실패 안내도 넣어 주세요. 외부 API와 학생 개인정보 수집은 필요 없습니다.
수업에서는 배부된 기본 코드로 시작하고
Gemini에게 설명과 수정을 요청합니다.
아래 Index.html에서 제목과 안내 문구만 바꿔 주세요. 제목: 오늘의 배움 한 줄 안내: 오늘 새롭게 알게 된 점을 적어 주세요. 입력 항목, 함수 이름, 저장 로직은 유지해 주세요. 바꾼 부분을 짧게 설명해 주세요. [배부된 Index.html 코드를 이어서 붙여 넣기]
기본 myFunction 내용을 지우고 배부된 Code.gs 전체를 붙여 넣습니다.
파일 옆 + → HTML → 이름에 Index 입력 → 예제 전체 붙여 넣기
Ctrl+S를 누르고 저장 완료를 확인합니다.
setup()
현재 시트의 ID를 저장하고
‘응답’ 탭과 제목 행을 만듭니다.
상단 함수 목록에서 setup을 선택합니다.
본인의 실습 프로젝트인지 확인한 뒤 요청 권한을 읽습니다.
응답 탭에 제출시각·이해도·한 줄 소감이 생기면 완료입니다.
유형 선택의 톱니바퀴에서 웹 앱을 고릅니다.
앱이 제작자의 권한으로 시트에 기록합니다.
본인이 먼저 확인합니다. 동료 사용은 조직 정책에 맞춰 범위를 정합니다.
배포가 끝나면 웹앱 주소를 복사해 새 탭에서 엽니다.
이해도 선택 + 한 줄 소감 입력
저장 중 → 완료 메시지 순서로 나타나는지 봅니다.
| 확인 위치 | 정상적으로 보일 것 |
|---|---|
| 입력 화면 | 저장 완료 메시지 |
| Google Sheets의 응답 탭 | 제출시각·이해도·소감 한 행 |
| 방금 입력한 내용 | 시트의 값과 일치 |
| 한 번 누른 결과 | 새 행이 한 번 추가 |
| 증상 | 먼저 확인할 것 |
|---|---|
| Index 파일을 찾을 수 없음 | HTML 이름이 Index인지 확인 |
| setup을 먼저 실행하라는 메시지 | 함수 목록에서 setup 실행 후 다시 접속 |
| 저장 실패 또는 권한 오류 | 연결한 시트·실행 기록·학교 계정 정책 확인 |
| 수정했는데 예전 화면이 보임 | 배포 관리 → 수정 → 새 버전으로 업데이트 |
| 로컬 화면에서 저장되지 않음 | Apps Script 배포 주소에서 실행 중인지 확인 |
오늘의 배움 한 줄
→ 독서 후 생각 한 줄
오늘 새롭게 알게 된 점
→ 인상 깊은 장면
새 배포 버전 반영
→ 가상 응답 저장 확인