아래 글은 AI와 함께 제작했습니다.
들어가며
바이브 코딩은 코드를 직접 쓰지 않고, AI에게 말로 설명해서 프로그램을 만드는 방식입니다. "풍선 안 기체 입자가 움직이는 시뮬레이션을 만들어 줘"라고 쓰면 AI가 코드를 짜 줍니다. 선생님이 하실 일은 원하는 것을 구체적으로 말하고, 결과를 보고 고쳐 달라고 하는 것뿐입니다.
과학 선생님에게 특히 쓸모가 큽니다. 교과서 그림으로는 보여 주기 어려운 입자 운동, 천체의 움직임 등을 수업에 딱 맞게 직접 만들 수 있기 때문입니다. 기존 시뮬레이션 사이트에서 "내 수업에 맞는 것"을 찾아 헤매지 않아도 됩니다.
이 글은 무엇을 만들고 싶은지에 따라 세 단계로 나누어 설명합니다. 1단계만 알아도 당장 수업에 쓸 수 있고, 2·3단계는 필요해질 때 보시면 됩니다.
| 단계 | 이럴 때 필요합니다 | 새로 알아야 할 것 |
|---|---|---|
| 1. 만들기 | 교사 컴퓨터에서 학생들에게 보여 주기만 할 때 | 없음 (AI에게 요청하고 파일 다운로드) |
| 2. 배포 | 학생들이 휴대폰으로 접속하거나, 링크로 어디서나 열고 싶을 때 | GitHub 또는 웹사이트 무료 배포 사이트(예: Vercel) 가입 |
| 3. 서버·데이터베이스 | 학생 답을 모으거나, 학생마다 다른 자료를 나누어 줄 때 | 구글 스프레드시트 또는 서버 관리 사이트 연결 |
1단계: 보여 주기용 시뮬레이션은 요청만 하면 됩니다
수업 시간에 교사 컴퓨터로 띄워 학생들에게 보여 주는 시뮬레이션은 AI에게 요청하는 것만으로 충분합니다. 가입할 사이트도, 설치할 프로그램도 없습니다.
이런 것들을 만들 수 있습니다
- 풍선 안팎의 기체 입자 운동 (입자 수를 늘리면 풍선이 부풀어 오르는 모습)
- 위도에 따라 달라 보이는 달의 모양
만드는 순서
- Claude, ChatGPT, Gemini 같은 AI 채팅창을 엽니다.
- 원하는 시뮬레이션을 설명합니다. 이때 **"HTML 파일 하나로, 외부 라이브러리 없이 만들어 줘"**라고 꼭 덧붙이세요. 그래야 인터넷 연결 없이도 파일 하나로 실행됩니다.
- 결과를 AI 화면에서 바로 확인합니다(Claude의 아티팩트, ChatGPT·Gemini의 캔버스처럼 미리보기 화면이 뜹니다). 마음에 안 드는 부분은 "입자를 더 크게", "슬라이더 기본값을 0으로"처럼 말로 고쳐 달라고 합니다.
- 완성되면 파일을 다운로드합니다. 다운로드 버튼 없이 코드만 보인다면, 코드를 복사해 메모장에 붙여 넣고 파일 이름 끝을 .html로, 인코딩을 UTF-8로 골라 저장하세요(UTF-8이 아니면 한글이 깨질 수 있습니다). 파일 이름이
○○○.html인지 확인하세요. - 다운로드한 파일을 더블클릭하면 크롬이나 엣지 같은 인터넷 브라우저에서 열립니다. 수업 때는 이 화면을 TV나 프로젝터에 띄우면 됩니다.
좋은 요청을 쓰는 요령
한 번에 완벽한 결과를 기대하기보다, 뼈대를 먼저 받고 조금씩 고쳐 나가는 편이 빠릅니다. 처음 요청에는 아래 항목을 넣으면 결과가 훨씬 좋아집니다. 바로 실행하기 보다는 프롬프트를 먼저 만들어달라고 요구한 다음, AI가 만든 프롬프트를 기준으로 수정하는 것도 좋습니다.
- 대상: 몇 학년, 어떤 단원인지
- 보여 줄 현상: 무엇이 움직이고, 무엇이 변하는지
- 조절할 변인: 슬라이더나 버튼으로 바꿀 값과 그 기본값
- 표시할 값: 화면에 숫자로 보여 줄 측정값
- 화면 조건: 시작·정지·초기화 버튼, 가로·세로 화면 모두에서 잘 보이게 등
예를 들면 이렇게 쓸 수 있습니다.
중학교 2학년 '달의 위상' 수업용 시뮬레이션의 프롬프트를 먼저 만들어 줘. 달의 위상은 고정하고, 관측자의 위도만 바꿀 수 있게 해 줘. 위도 슬라이더(기본값 0도), 시작·정지·초기화 버튼을 넣고, 현재 위도와 달이 기울어진 각도를 화면에 실시간으로 보여 줘. 외부 라이브러리 없는 HTML 파일 하나로, 세로 화면에서도 잘 보이게 해 줘.
꼭 확인할 점
AI가 만든 시뮬레이션이 과학적으로 늘 정확하지는 않습니다. 입자 속력이 이유 없이 변하거나, 비율이 실제와 다르게 그려지기도 합니다. 수업에 쓰기 전에 이상한 부분은 "입자 속력은 변하지 않게 해 줘"처럼 구체적으로 고쳐 달라고 하세요.
2단계: 학생 휴대폰에서 열려면 '배포'가 필요합니다
배포는 내 컴퓨터에만 있는 파일을 인터넷에 올려서, 누구나 열 수 있는 주소(링크)를 받는 일입니다. 1단계에서 만든 파일은 선생님 컴퓨터에서만 열립니다. 학생들이 휴대폰으로 직접 조작하게 하거나, 교실·집 어디서든 링크 하나로 열고 싶다면 배포를 해야 합니다.
배포하고 나면 주소를 QR 코드로 바꿔 칠판이나 화면에 띄우세요. 학생들은 카메라로 찍기만 하면 바로 접속합니다. QR 코드 역시 AI에게 "이 주소로 QR 코드 만들어 줘"라고 하거나 무료 QR 생성 사이트를 쓰면 됩니다.
방법 1: GitHub Pages (가장 간단한 무료 방법)
GitHub는 원래 개발자들이 코드를 보관하는 사이트인데, 올린 HTML 파일을 웹사이트로 보여 주는 기능(Pages)이 무료로 들어 있습니다.
- github.com에 가입합니다.
- 새 저장소(Repository)를 만듭니다. 저장소는 파일을 담는 폴더라고 생각하시면 됩니다. 무료 계정에서는 공개(Public) 저장소여야 Pages를 쓸 수 있습니다.
- 만든 HTML 파일의 이름을
index.html로 바꿔 저장소 화면에 끌어다 놓고, 아래쪽 Commit changes 버튼을 눌러 올립니다. - 저장소의 Settings → Pages로 가서 Source는 'Deploy from a branch', Branch는
main과/ (root)를 고르고 Save를 누릅니다. - 몇 분 뒤 같은 화면 위쪽에
https://아이디.github.io/저장소이름/형태의 주소가 나타납니다.
시뮬레이션이 여러 개라면 한 저장소에 파일을 모두 올리고 주소 뒤에 파일 이름을 붙이면 됩니다(예: https://아이디.github.io/저장소이름/moon.html).
메뉴 위치가 헷갈리면 화면을 캡처해서 AI에게 "여기서 다음에 뭘 눌러야 해?"라고 물어보세요.
방법 2: 웹사이트 무료 배포 사이트(예: Vercel) (앱이 여러 개가 되면 편한 방법)
Vercel은 배포를 전문으로 하는 사이트입니다. GitHub 계정으로 가입해 저장소를 연결해 두면, 파일이 바뀔 때마다 자동으로 다시 배포해 줍니다. 주소는 이름.vercel.app 형태로 생기고, 개인·비상업 용도(Hobby 요금제)는 무료입니다.
진짜 편리해지는 것은 AI와 연결했을 때입니다. Claude Code 같은 AI 코딩 도구에 GitHub를 연결해 두면, "버튼 색을 바꾸고 올려 줘"라고만 해도 AI가 파일을 고쳐 GitHub에 올리고, Vercel이 이를 받아 자동으로 새 버전을 배포합니다. 선생님은 수정 요청만 하고, 파일을 올리고 내리는 일은 AI와 Vercel이 맡는 셈입니다.
| 비교 | GitHub Pages | Vercel |
|---|---|---|
| 가입 | GitHub 하나 | GitHub + Vercel |
| 잘 맞는 것 | HTML 파일 하나짜리 시뮬레이션 | 여러 화면이 있는 앱, 자주 고치는 앱 |
| 수정할 때 | 파일을 다시 올림 | 올리기만 하면 자동 재배포 |
| 비용 | 무료 | 비상업 용도 무료 |
주의할 점
배포한 주소는 주소만 알면 누구나 열 수 있습니다. 학생 이름, 사진, 성적 같은 개인정보는 절대 파일 안에 넣지 마세요.
3단계: 학생 데이터를 모으려면 서버와 데이터베이스가 필요합니다
학생들의 답을 모으거나 학생마다 다른 자료를 나누어 주려면, 데이터를 저장해 둘 곳이 따로 있어야 합니다. 2단계까지 만든 앱은 각자의 휴대폰 안에서만 돌아가서, 학생 A가 누른 버튼을 교사 화면이나 학생 B가 알 방법이 없습니다.
여기서 두 가지 말이 나옵니다.
- 데이터베이스: 학생들의 답, 점수, 모둠 정보 같은 데이터를 저장하는 곳입니다. 모두가 함께 쓰는 엑셀 파일이라고 생각하시면 됩니다.
- 서버: 학생 휴대폰과 데이터베이스 사이에서 데이터를 받아 저장하고, 필요한 사람에게 보내 주는 역할을 합니다.
직접 서버 컴퓨터를 마련할 필요는 없습니다. 이미 만들어진 서비스를 빌려 쓰면 됩니다.
방법 1: 구글 스프레드시트 (익숙한 도구로 시작하기)
구글 스프레드시트를 데이터베이스처럼 쓰는 방법입니다. 스프레드시트에 딸린 Apps Script 기능이 서버 역할을 합니다. AI에게 "학생이 제출한 답이 구글 스프레드시트에 한 줄씩 쌓이게 만들어 줘. Apps Script 코드와 설정 방법도 알려 줘"라고 요청하면, 붙여 넣을 코드와 설정 순서를 알려 줍니다.
설정의 핵심은 두 가지입니다. 스프레드시트 메뉴의 확장 프로그램 → Apps Script에 AI가 준 코드를 붙여 넣고, 배포 → 새 배포에서 유형을 '웹 앱', 액세스 권한을 '모든 사용자'로 정해 배포합니다. 이때 받은 웹 앱 주소를 AI에게 알려 주면 앱과 연결해 줍니다. 코드를 고친 뒤에는 새 버전으로 다시 배포해야 바뀐 내용이 반영됩니다.
학교에서 받은 구글 계정(교육용 Workspace)은 관리자 설정 때문에 '모든 사용자' 옵션이 막혀 있을 수 있습니다. 이 경우 학교 전산 담당자에게 문의하세요. 또 웹 앱 주소를 아는 사람은 누구나 데이터를 보낼 수 있으니, 주소는 수업 시간에만 공유하는 것이 좋습니다.
- 좋은 점: 모인 데이터를 선생님이 스프레드시트에서 바로 보고, 정렬하고, 채점에 쓸 수 있습니다.
- 어려운 점: 수십 명이 동시에 누르면 느려질 수 있고, 실시간으로 화면이 바뀌어야 하는 게임에는 맞지 않습니다.
- 잘 맞는 것: 설문, 형성 평가 답안 모으기, 실험 결과 입력 폼
방법 2: 서버 관리 사이트 (실시간 활동이 필요할 때)
Supabase, Firebase처럼 서버와 데이터베이스를 한꺼번에 빌려주는 사이트에 가입해서, 그 사이트를 AI와 연결해 쓰는 방법입니다. 가입 후 받은 연결 정보(주소와 키)를 AI에게 알려 주면, AI가 앱과 데이터베이스를 연결하는 코드를 짜 줍니다. 교실 한 반 규모라면 대부분 무료 요금제로 충분합니다.
- 좋은 점: 여러 학생이 동시에 참여해도 빠르고, 점수나 화면이 실시간으로 바뀝니다.
- 어려운 점: 처음 설정이 조금 낯설고, 무료 사용량 한도를 확인해야 합니다. 특히 Supabase 무료 프로젝트는 1주일 동안 아무도 쓰지 않으면 일시 정지되므로, 오랜만에 쓰는 날에는 수업 전에 관리 화면에서 다시 켜 두세요.
- 잘 맞는 것: 실시간 퀴즈, 모둠 대항 게임, 교사가 학생별로 다른 문제를 나누어 주는 활동
사례: QR 코드로 참여하는 모둠 게임
제가 만든 'QR 모둠활동: 블록 배틀'이 이 단계의 예입니다. 학생들이 화면의 QR 코드를 휴대폰으로 찍고 들어와 모둠별로 함께 활동하는 앱으로, Vercel로 배포했습니다.(qr-party-game.vercel.app)(수정중이라 작동이 안될 수도 있습니다.)
여러 학생의 휴대폰이 같은 게임 상황을 함께 보려면, 누가 어느 모둠에 들어왔고 무엇을 눌렀는지를 한곳에 모아 모두에게 다시 보내 주어야 합니다. 그래서 이런 앱에는 1·2단계에 더해 서버와 데이터베이스가 필요합니다.
주의할 점
- 개인정보: 학생 실명 대신 번호나 별명으로 참여하게 하세요. 학교의 개인정보 보호 지침도 미리 확인하세요.
- 키 관리: 서버 관리 사이트에서 받는 키는 두 종류입니다. 앱에 들어가는 공개용 키(Supabase의 anon·publishable 키)는 원래 누구나 볼 수 있으므로, 데이터를 지키는 것은 키가 아니라 보안 규칙(Supabase의 RLS, Firebase의 보안 규칙)입니다. 관리자용 비밀 키(service_role·secret 키)는 앱 코드나 GitHub에 절대 올리면 안 됩니다.
마치며
처음부터 3단계까지 갈 필요는 없습니다. 이번 주 수업에 쓸 시뮬레이션 하나를 1단계 방법으로 만들어 보는 것이 가장 좋은 시작입니다. 학생들이 직접 만져 보게 하고 싶어지면 2단계를, 학생들의 반응을 모으고 싶어지면 3단계를 찾아보시면 됩니다.
막히는 순간이 오면 그 화면이나 오류 메시지를 그대로 AI에게 보여 주고 "이게 무슨 뜻이고, 어떻게 해야 해?"라고 물어보세요.
선생님에게 필요한 것은 원하는 수업 장면을 구체적으로 설명하는 힘과 결과가 과학적으로 맞는지 판단하는 눈입니다.