바이브 코딩 이해교사 실습 연수

말로 만드는
나의 첫 수업 도구

교사를 위한 바이브 코딩 입문

말로 만드는
나의 첫 수업 도구

Canva로 게임을 만들고,
Gemini와 Apps Script로 기록을 남깁니다.

3차시 × 50분실습 중심교육 계정
“우리 반에 필요한 도구를 만들어 줘.”
● ● ●

지구를 지키는 선택

환경 보호 퀴즈 · 3문제

컵에 물을 받아 양치해요. ✓
오늘의 배움 한 줄
이해도   →   소감   →   저장
만들고
확인하기
바이브 코딩 이해학습 목표

오늘, 두 가지 도구를 완성합니다

01

반응하는 퀴즈 게임

답을 누르면 설명이 나오고
마지막에 점수를 확인합니다.

02

기록이 남는 소감 앱

응답을 보내면
Google Sheets에 저장됩니다.

03

혼자 다시 만드는 방법

요청 → 실행 → 확인 → 수정
이 과정을 반복합니다.

완료의 기준은 “화면이 나왔다”가 아니라 “직접 실행해 확인했다”입니다.
바이브 코딩 이해수업 안내

세 시간의 흐름을 한눈에

차시무엇을 하나요?내 손에 남는 것
1차시 · 50분바이브 코딩 이해 + Canva 첫 생성요청문과 게임 초안
2차시 · 50분교과 내용·화면·동작 수정확인까지 마친 퀴즈 게임
3차시 · 50분Gemini + Apps Script + Sheets응답 저장 앱
준비물: 노트북 · Chrome/Edge · Canva 교육 계정 · Gemini/Google 교육 계정
180분 운영 시: 실습 150분 + 휴식 20분 + 보충 10분
바이브 코딩 이해교사 실습 연수

바이브 코딩이라는 말은 어디서 왔을까요?

2025년 2월

Andrej Karpathy가
소개한 표현

자연어로 요청하고 결과를 실행해 보는
코딩 경험을 설명하며 사용했습니다.

이번 연수에서의 접근

말로 만들되,
사람이 확인합니다.

생성한 내용과 버튼의 동작을
확인하는 습관까지 함께 배웁니다.

바이브 코딩 이해교사 실습 연수

말로 요청하고, 실행하며 고칩니다

01

요청

대상과 기능을 설명합니다.

→
02

실행

화면과 버튼을 눌러 봅니다.

→
03

확인·수정

예상과 다른 점을 알려 줍니다.

AI에게 보낼 요청문
환경 보호 퀴즈 3개를 만들어 줘.
답을 누르면 정답과 설명이 나오게 해 줘.
새 기능을 추가한 뒤에는 기존 기능도 다시 확인합니다.
바이브 코딩 이해교사 실습 연수

AI와 사람의 역할을 나눠 봅시다

사람이 결정할 것AI에게 맡길 수 있는 초안 작업
수업 목표와 학년화면과 코드의 첫 초안
문제·정답·설명의 정확성문장과 화면의 여러 대안
완료 조건과 기능 우선순위오류 원인과 수정 방법 제안
배포 범위와 실제 사용 여부수정한 코드와 사용법 설명
AI가 “완료했습니다”라고 말해도 실제 동작 확인은 남아 있습니다.
바이브 코딩 이해교사 실습 연수

전문가 영상에서 질문 하나만 가져옵니다

▶

Software Is Changing
(Again)

Andrej Karpathy · Y Combinator

YouTube에서 보기 ↗

“말로 소프트웨어에
의도를 전달한다면?”

코드를 입력하는 방식과 비교해
사람에게 남는 역할을 생각해 봅니다.

영상 원문 · 영어 / 자막 활용
영상 원문 · 영어 / 자막 활용

선택 시청: 도입부 약 2분
심화 영상이므로 전체 재생은 수업 후 권장

바이브 코딩 이해교사 실습 연수

좋은 요청문에는 다섯 가지가 들어갑니다

1

대상

초등 4학년

2

목적

환경 보호 복습

3

기능

3문제·채점·재시작

4

화면

큰 글자·초록색

5

완료 조건

중복 채점 없음

AI에게 보낼 요청문
초등 4학년이 환경 보호를 복습할 퀴즈를 만들어 주세요.
3문제, 정답 설명, 최종 점수, 다시 시작 기능을 넣어 주세요.
큰 글자와 초록색을 사용하고 한 문제는 한 번만 채점해 주세요.
바이브 코딩 이해교사 실습 연수

“예쁘게”를 구체적인 요청으로 바꿉니다

막연한 요청실행·확인이 가능한 요청
예쁘게 만들어 줘.흰 바탕에 초록색 버튼을 쓰고 여백을 넓혀 줘.
아이들이 쓰기 쉽게.한 화면에 한 문제, 선택지마다 큰 버튼을 넣어 줘.
잘 작동하게 해 줘.답을 두 번 눌러도 점수가 한 번만 올라가게 해 줘.
오류를 고쳐 줘.다시 시작을 누르면 이전 점수가 남아 있어. 0점으로 바꿔 줘.
바이브 코딩 이해활동 · 3분

먼저, 나의 도구를 한 문장으로

누가

우리 반 __________ 학생이

무엇을 위해

__________을 연습할 수 있도록

어떤 도구

__________ 기능이 있는 도구를 만듭니다.

지금은 기능 3개 이내로 정합니다. 공통 실습 후 자신의 교과로 바꿉니다.
Canva 게임 만들기교사 실습 연수

첫 번째 실습
Canva로 만드는 퀴즈

MAKE 01 · 반응하는 화면

지구를 지키는
선택

질문 → 답 선택 → 설명 → 점수
짧은 게임 하나로 제작 과정을 배웁니다.

Canva Code3문제
실제 Canva Code 생성 게임 · 2026.09.10
실제 Canva Code 생성 게임 · 2026.09.10
Canva 게임 만들기교사 실습 연수

Canva 홈에서 ‘코드’를 엽니다

실제 Canva 교육 계정 홈 · 필요한 영역만 확대
실제 Canva 교육 계정 홈 · 필요한 영역만 확대
1

교육용 팀 확인

교육 계정으로 로그인합니다.

2

코드 선택

홈의 빠르게 만들기에서 “코드”를 찾습니다.

3

입력창 확인

Canva AI와 빈 캔버스가 열리면 준비 완료입니다.

Canva 게임 만들기교사 실습 연수

입력하는 곳과 결과를 보는 곳

실제 Canva 코드 편집기 · 왼쪽 요청 / 오른쪽 결과
실제 Canva 코드 편집기 · 왼쪽 요청 / 오른쪽 결과
①

왼쪽: 요청과 수정

무엇을 만들지 설명하고,
추가 요청을 이어 갑니다.

②

오른쪽: 만들어진 화면

생성이 끝나면 미리 보기에서
직접 눌러 봅니다.

계정·업데이트에 따라
메뉴 위치는 달라질 수 있습니다.
Canva 게임 만들기교사 실습 연수

첫 요청은 작고 분명하게

AI에게 보낼 요청문
초등학생을 위한 환경 보호 퀴즈 게임을 만들어 주세요.
제목: 지구를 지키는 선택
주제: 물 절약, 일회용품 줄이기, 전기 절약 · 객관식 3문제
한 문제씩 보여 주고, 답을 누르면 정답 여부와 짧은 설명을 표시해 주세요.
마지막에 3점 만점 점수와 다시 시작 버튼을 넣어 주세요.
한 문제는 한 번만 채점하고 다시 시작하면 점수를 0으로 초기화해 주세요.
초록색·흰색, 큰 글자·큰 버튼을 사용하고 개인정보 입력은 넣지 마세요.
요청문을 붙여 넣고 제출하기를 누릅니다. 생성이 끝날 때까지 기다립니다.
Canva 게임 만들기1차시 완료 확인

첫 결과를 실행하면 1차시 완료

실제 Canva 생성 결과 · 왼쪽 대화와 오른쪽 게임
실제 Canva 생성 결과 · 왼쪽 대화와 오른쪽 게임
  • ✓게임 제목이 보입니다.
  • ✓문제와 선택지가 나타납니다.
  • ✓미리 보기에서 답을 누를 수 있습니다.
지금은 첫 실행까지만.
2차시에서 내용과 동작을 고칩니다.
Canva 게임 만들기교사 실습 연수

2차시: 정답 설명까지 확인합니다

실제 게임에서 정답을 선택한 화면
실제 게임에서 정답을 선택한 화면
1

문항을 읽습니다.

문제·선택지·정답이 교과 내용에 맞는지 확인합니다.

2

답을 선택합니다.

정답과 오답의 반응을 각각 확인합니다.

3

설명을 확인합니다.

정답의 이유가 학생에게 이해되는지 살펴봅니다.

Canva 게임 만들기교사 실습 연수

우리 교과의 문제로 바꿔 봅니다

공통 주제바꿀 수 있는 예시
환경 보호과학 · 물의 상태 변화
환경 보호사회 · 지역의 공공기관
환경 보호국어 · 사실과 의견
환경 보호수학 · 곱셈과 나눗셈
AI에게 보낼 요청문
화면과 버튼 기능은 유지하고 문제만 [교과·주제]로 바꿔 주세요.
대상은 [학년]입니다. 정답과 설명을 함께 제시해 주세요.
Canva 게임 만들기교사 실습 연수

화면을 고칠 때는 기준을 줍니다

수정 전 · 설명용 예시

정답을 골라 주세요

작은 버튼
↓
수정 후 · 설명용 예시

정답을 골라 주세요

AI에게 보낼 요청문
교실 뒤에서도 읽기 쉽도록 질문과 선택지 글자를 크게 해 주세요.
선택지 버튼 사이의 간격을 넓혀 주세요.
배경은 흰색, 글자는 진한 색으로 바꿔 주세요.
문제와 정답, 점수 계산은 그대로 유지해 주세요.
Canva 게임 만들기교사 실습 연수

기능은 한 번에 하나씩 추가합니다

현재

3문제 퀴즈

먼저 기본 동작을 확인

→
추가

진행 표시

지금 몇 번째 문제인지

→
확인

다시 실행

채점과 재시작도 점검

AI에게 보낼 요청문
화면 위에 “문제 1 / 3”처럼 진행 상황을 표시해 주세요.
기존 문제와 채점 방식은 유지해 주세요.
한 요청에 여러 기능을 넣으면 어떤 변경이 문제를 만들었는지 찾기 어렵습니다.
Canva 게임 만들기교사 실습 연수

오류는 ‘기대’와 ‘실제’를 나란히

기대했던 동작실제로 본 동작AI에게 전달할 내용
다시 시작하면 0점이전 점수가 남음재시작 때 점수 초기화
한 문제는 한 번만 채점두 번 누르면 2점첫 선택 뒤 답변 잠금
마지막에 결과 화면빈 화면이 나타남마지막 문제 이후 이동 확인
AI에게 보낼 요청문
재현 순서: 세 문제를 푼 뒤 다시 시작을 눌렀습니다.
기대: 첫 문제, 0점으로 시작 / 실제: 이전 점수가 남습니다.
재시작 초기화 부분을 수정하고 확인 방법도 알려 주세요.
Canva 게임 만들기교사 실습 연수

수정 후에는 이 네 가지를 눌러 봅니다

01

정답과 오답

두 경우 모두 설명이
제대로 나타나는가?

02

반복 클릭

같은 답을 여러 번 눌러도
점수가 한 번만 오르는가?

03

끝과 처음

마지막 결과가 나오고
재시작하면 초기화되는가?

추가 확인: 브라우저 폭을 줄여도 글자와 버튼이 잘리지 않는가?
Canva 게임 만들기짝 활동 · 5분씩

짝의 게임을 처음 보는 학생처럼

제작자

설명을 듣기 전에
먼저 사용해 봅니다.

한 사람은 사용하고, 한 사람은 관찰합니다.

사용자
피드백 항목한 문장으로 기록
좋았던 점어떤 화면이나 설명이 이해하기 쉬웠나요?
막힌 점어느 버튼에서 무엇을 해야 할지 몰랐나요?
다음 수정가장 먼저 바꾸면 좋을 한 가지는 무엇인가요?
Canva 게임 만들기교사 실습 연수

게임은 링크로, 교안은 PDF로

화면 이미지에는
버튼 기능이 담기지 않습니다.

PDF에는 설명과 캡처를 넣고,
게임은 미리 보기나 웹 링크로 실행합니다.

  • ✓Canva 프로젝트 이름을 알아보기 쉽게 변경
  • ✓미리 보기에서 동작 확인
  • ✓공유할 때 대상과 권한 확인
▶

Canva Code 사용 시연

Natalia Kalinska · 2025
영어 · 이전 버전 화면 참고

참고 영상 열기 ↗
선택 시청 · 도입부 약 2분
선택 시청 · 도입부 약 2분
Canva 게임 만들기2차시 완료 확인

퀴즈 게임 완성 점검

다음 실습에서는 버튼을 누른 결과를 화면 밖, Google Sheets에 저장합니다.
Gemini + Apps Script교사 실습 연수

두 번째 실습
오늘의 배움 한 줄

MAKE 02 · 기록이 남는 앱

소감을 보내면
시트에 한 줄

Gemini는 제작을 돕고,
Apps Script는 저장을 처리합니다.

실습용 가상 응답입력 2개
제공 예제의 실제 브라우저 실행 화면
제공 예제의 실제 브라우저 실행 화면
Gemini + Apps Script교사 실습 연수

화면 · 처리 · 저장은 역할이 다릅니다

브라우저

입력 화면

이해도와 소감 입력

→
Apps Script

저장 처리

입력 검사 후 기록

→
Google Sheets

응답 보관

제출시각·이해도·소감

←   저장 성공 또는 실패를 화면에 알려 줍니다.
Gemini는 이 구조의 코드를 만드는 도우미입니다.
이 실습 앱은 실행 중 Gemini API를 호출하지 않습니다.
Gemini + Apps Script교사 실습 연수

저장할 항목부터 정합니다

시트 열저장하는 값예시
A · 제출시각서버가 기록한 날짜와 시간2026-09-10 14:30
B · 이해도세 선택지 중 하나조금 더 연습할래요
C · 한 줄 소감1~200자 텍스트버튼과 저장의 관계를 알았어요.
실습에서는 실명·이메일·학생 개인정보를 수집하지 않습니다.
실제 학생 응답 수집은 학교의 계정·개인정보 운영 기준을 확인한 뒤 진행합니다.
Gemini + Apps Script교사 실습 연수

시트에서 Apps Script를 엽니다

실제 Google Sheets · 확장 프로그램 메뉴
실제 Google Sheets · 확장 프로그램 메뉴
1

새 시트 만들기

이름: 바이브 코딩 연수_수업 소감

2

확장 프로그램 선택

상단 메뉴에서 Apps Script를 클릭합니다.

3

새 편집기 확인

Code.gs가 보이면 준비 완료입니다.

Gemini + Apps Script교사 실습 연수

파일은 두 개, 역할도 두 가지

실제 Apps Script 편집기 · 제공 코드 적용 화면
실제 Apps Script 편집기 · 제공 코드 적용 화면
Code.gs

서버에서 할 일

시트 연결 · 입력 검사 · 응답 저장

Index.html

화면에서 할 일

입력칸 · 버튼 · 완료 메시지

Gemini + Apps Script교사 실습 연수

Gemini에게 구조와 코드를 요청합니다

AI에게 보낼 요청문
Google Apps Script 웹앱으로 수업 소감 앱을 만들고 싶습니다.
Code.gs와 Index.html 두 파일로 구성해 주세요.
이해도 3단계와 200자 이내 소감을 입력받아 Google Sheets에 저장합니다.
setup으로 시트를 연결하고 google.script.run으로 저장을 요청해 주세요.
저장 중 버튼 잠금, 성공·실패 안내도 넣어 주세요.
외부 API와 학생 개인정보 수집은 필요 없습니다.

생성 후 확인할 것

  • ✓파일 두 개를 구분해 주었나요?
  • ✓시트 연결 방법이 있나요?
  • ✓저장 성공과 실패를 처리하나요?

수업에서는 배부된 기본 코드로 시작하고
Gemini에게 설명과 수정을 요청합니다.

Gemini + Apps Script교사 실습 연수

Gemini와 수정 범위를 좁혀 대화합니다

실제 Gemini 요청 입력 화면 · 개인정보 가림
실제 Gemini 요청 입력 화면 · 개인정보 가림
AI에게 보낼 요청문
아래 Index.html에서 제목과 안내 문구만 바꿔 주세요.
제목: 오늘의 배움 한 줄
안내: 오늘 새롭게 알게 된 점을 적어 주세요.
입력 항목, 함수 이름, 저장 로직은 유지해 주세요.
바꾼 부분을 짧게 설명해 주세요.
[배부된 Index.html 코드를 이어서 붙여 넣기]
Gemini + Apps Script교사 실습 연수

기본 코드를 파일에 넣습니다

1

Code.gs 교체

기본 myFunction 내용을 지우고 배부된 Code.gs 전체를 붙여 넣습니다.

2

HTML 파일 추가

파일 옆 + → HTML → 이름에 Index 입력 → 예제 전체 붙여 넣기

3

저장

Ctrl+S를 누르고 저장 완료를 확인합니다.

파일은 배부 폴더의 practice/Code.gs와 practice/Index.html입니다.
코드 블록의 ``` 표시는 복사하지 않습니다.
Gemini + Apps Script교사 실습 연수

setup을 한 번 실행해 시트를 연결합니다

편집기에서 실행할 함수
setup()

현재 시트의 ID를 저장하고
‘응답’ 탭과 제목 행을 만듭니다.

1

함수 선택

상단 함수 목록에서 setup을 선택합니다.

2

실행과 권한 확인

본인의 실습 프로젝트인지 확인한 뒤 요청 권한을 읽습니다.

3

시트 확인

응답 탭에 제출시각·이해도·한 줄 소감이 생기면 완료입니다.

학교 계정에서 승인이 차단되면 강사·관리자에게 확인합니다. 보안 설정을 임의로 해제하지 않습니다.
Gemini + Apps Script교사 실습 연수

배포는 ‘사용할 웹 주소’를 만드는 일

실제 새 배포 설정 · 계정 정보 가림
실제 새 배포 설정 · 계정 정보 가림
1

배포 → 새 배포

유형 선택의 톱니바퀴에서 웹 앱을 고릅니다.

2

실행 사용자: 나

앱이 제작자의 권한으로 시트에 기록합니다.

3

첫 실습 접근: 나만

본인이 먼저 확인합니다. 동료 사용은 조직 정책에 맞춰 범위를 정합니다.

Gemini + Apps Script교사 실습 연수

배포 주소에서 소감을 보내 봅니다

제공 예제 입력 화면 · Google 저장은 배포 후 가능
제공 예제 입력 화면 · Google 저장은 배포 후 가능
1

배포 완료 주소 열기

배포가 끝나면 웹앱 주소를 복사해 새 탭에서 엽니다.

2

가상 응답 입력

이해도 선택 + 한 줄 소감 입력

3

소감 보내기

저장 중 → 완료 메시지 순서로 나타나는지 봅니다.

Gemini + Apps Script교사 실습 연수

저장은 시트에서 확인해야 완료입니다

확인 위치정상적으로 보일 것
입력 화면저장 완료 메시지
Google Sheets의 응답 탭제출시각·이해도·소감 한 행
방금 입력한 내용시트의 값과 일치
한 번 누른 결과새 행이 한 번 추가
저장 결과 예시 · 가상 데이터
제출시각이해도한 줄 소감
2026-09-10 14:30잘 이해했어요내가 만든 화면이 시트와 연결됐어요.
Gemini + Apps Script교사 실습 연수

막혔을 때는 증상부터 찾습니다

증상먼저 확인할 것
Index 파일을 찾을 수 없음HTML 이름이 Index인지 확인
setup을 먼저 실행하라는 메시지함수 목록에서 setup 실행 후 다시 접속
저장 실패 또는 권한 오류연결한 시트·실행 기록·학교 계정 정책 확인
수정했는데 예전 화면이 보임배포 관리 → 수정 → 새 버전으로 업데이트
로컬 화면에서 저장되지 않음Apps Script 배포 주소에서 실행 중인지 확인
Gemini에 전달할 정보: 어느 단계 · 기대 결과 · 실제 오류 문구
오류 화면의 이름·이메일·문서 주소는 가립니다.
Gemini + Apps Script교사 실습 연수

마지막 5분, 내 수업에 맞게 바꿉니다

01

제목 바꾸기

오늘의 배움 한 줄
→ 독서 후 생각 한 줄

02

안내 바꾸기

오늘 새롭게 알게 된 점
→ 인상 깊은 장면

03

다시 확인하기

새 배포 버전 반영
→ 가상 응답 저장 확인

이번 시간에는 입력 항목과 저장 구조를 유지합니다.
새 항목 추가·통계·로그인은 다음 단계에서 연습합니다.
정리교사 실습 연수

오늘의 완성은 ‘다시 할 수 있다’입니다

마무리 질문

다음 주 수업에 쓸 도구를
한 문장으로 말해 볼까요?

정리교사 실습 연수

다시 볼 자료와 실습 파일

배부 자료: practice/ 실습 코드 · prompts.md 요청문 · 강사용_진행안.md
화면 확인·캡처: 2026.09.10 · 서비스 업데이트로 메뉴와 제공 기능은 달라질 수 있습니다.