진행 대본

강사 전용 · 6차시 × 45분 · 차시를 골라 보세요. 인쇄하면 여섯 차시가 모두 나옵니다.

학생은 이 페이지를 볼 일이 없습니다. 수업 중 띄워 두는 것은 슬라이드이고, 이 대본은 교탁에 두거나 인쇄해서 씁니다. 대사는 그대로 읽으라는 뜻이 아니라, 이 내용이 빠지면 다음 차시가 막힌다는 표시입니다.

한눈에 보기

차시	핵심	끝났을 때	교사가 반드시
1차시	계정·저장소를 만들고 첫 페이지를 올린다	전원이 자기 주소를 갖는다	단계마다 전원 확인
2차시	내가 정한 게임을 규격에 맞게	내 주소에서 내 게임이 돌아간다	게임 규격 5줄 판서
3차시	코드를 받아 기록이 남게	새로고침해도 최고 점수가 남는다	코드 받기 메뉴 사전 확인
4차시	내가 진짜 쓸 도구를 만든다	내 도구가 내 주소에 올라간다	파일 이름 통일
5차시	내 데이터베이스를 만들어 연결한다	내 주소에서 로그인이 된다	승인 도메인·보안 규칙 눈으로 확인
6차시	전시관을 열고 서로의 작품을 경험한다	전시관에 작품이 다 올라간다	전시관 사전 테스트

고비는 두 번입니다 — 1차시와 5차시. 1차시에 계정·저장소·Pages가 되어야 이후 매 차시의 올리기가 성립하고, 5차시에 프로젝트·승인 도메인·보안 규칙이 되어야 6차시 전시관이 열립니다. 이 두 차시만 교사가 앞에서 끌고 가고, 나머지는 순회하며 보면 됩니다.

매 차시 공통

🔁 운영 루틴

시작 전 칠판에 워크벤치 주소를 적어 둡니다. 매 차시 학생이 가장 먼저 여는 곳입니다.
학생은 탭 세 개를 띄워 두고 오갑니다 — 제미나이 · 워크벤치 · 내 저장소. 1차시에 이 습관을 잡아 두면 이후가 편합니다.
실습 블록에서는 교사가 자리에 앉아 있지 않습니다. 계속 돌면서 화면을 봅니다. 손을 드는 학생보다 가만히 멈춰 있는 학생이 더 막혀 있습니다.
매 차시 끝 7~9분은 올리는 시간입니다. 실습을 거기까지 끌고 가면 안 됩니다.
차시 끝 2분은 다음 시간 예고에 씁니다. 다음 차시의 동기가 여기서 만들어집니다.

🧭 교사의 자세

AI가 틀린 답을 줄 때 교사가 고쳐 주지 않습니다. "뭐라고 말해 보면 될까?"로 돌려줍니다. 이 수업이 가르치는 것은 코드가 아니라 요청하는 법입니다.
계정·설정 단계만은 다릅니다. 여기서는 교사가 앞에서 한 단계씩 끌고 가야 합니다. 스스로 하게 두면 절반이 길을 잃습니다.
"선생님도 모르겠네, 같이 물어볼까?"라고 말해도 됩니다. 이 수업에서는 그것이 약점이 아니라 시범입니다.
학생마다 결과물이 다르고 완성도도 다릅니다. 같아야 한다고 생각하는 순간 수업이 어그러집니다.

이럴 땐 이렇게

영재원 계정으로 깃허브 가입이 막혔다: 수업 전에 반드시 확인하세요. 당일에 발견하면 1차시를 진행할 수 없습니다. 막혀 있으면 개인 계정 사용 가능 여부를 기관 방침에 따라 확인해야 합니다.
메일 인증 코드가 안 온다: 스팸함을 먼저 보게 합니다. 그래도 없으면 재발송. 메일함 접근 자체가 안 되는 학생은 교사 옆에서 따로 처리하고, 나머지는 다음 단계로 진행시킵니다.
깃허브 페이지 주소가 404다: ① 올린 직후면 1~2분 기다립니다. ② Settings → Pages에서 Branch가 main으로 저장됐는지 봅니다. ③ 저장소가 Public인지 봅니다. 이 셋 중 하나입니다.
파이어베이스 프로젝트가 안 만들어진다: 조직 계정 정책일 수 있습니다. 그 학생은 짝과 함께 한 프로젝트를 쓰게 하고, 설정값을 공유해 진행시킵니다. 학습 목표에는 지장이 없습니다.
인터넷이 끊겼다: 워크벤치의 완성 코드 복사로 받은 코드는 인터넷 없이도 열립니다. 만든 걸 열어 보고 고치는 활동으로 전환하고, 올리기는 다음 차시로 넘깁니다.
제미나이가 응답하지 않는다: 대화를 새로 시작하게 합니다. 그래도 안 되면 워크벤치 완성 코드를 받아 올리는 연습으로 전환합니다.
진도가 10분 밀렸다: 실습 시간을 줄이지 말고 정리·공유 블록을 줄입니다. 단 올리기 블록과 5차시 보안 규칙은 줄이지 않습니다. 올리지 못하면 다음 차시가 막힙니다.

차시별 대본

1차시

개발 환경 구축하고 첫 페이지 배포하기

전원이 자기 깃허브 계정과 저장소를 만들고, 첫 페이지를 올려 자기 주소를 갖게 한다. 이 수업에서 가장 빡빡한 차시다.

00:00시작을 누르면 지금 진행할 블록이 표시됩니다.

✅ 오늘 끝났을 때

전원이 깃허브 계정과 Public 저장소를 만들었다
Settings → Pages가 main으로 저장되어 있다
전원이 자기 주소에서 자기 페이지를 열어 봤다
아이디와 주소를 유인물에 적어 두었다

📦 수업 전 준비

학생 계정 하나를 빌려 깃허브 가입을 끝까지 해 볼 것 — 메일 인증까지
실습실에서 github.com과 gemini.google.com이 열리는지 확인
칠판에 워크벤치 주소, 그리고 my-web이라는 저장소 이름 예시
학생 아이디·주소를 적을 명단 준비 — 5·6차시에 씁니다
교사 화면으로 가입부터 주소 확인까지 한 번 리허설

진행

00~07분바이브코딩과 오늘의 목표슬라이드 1~4

할 일

질문으로 시작
오늘 끝나면 주소가 생긴다는 것을 먼저 선언

이렇게 말합니다

"코딩 배워 본 사람 손 들어 볼까요?" (손을 센다)

"오늘 여러분은 코드를 한 줄도 쓰지 않습니다. 대신 말을 합니다."

"그리고 오늘 끝나면 인터넷에 여러분 주소가 생깁니다. 친구한테 보낼 수 있는 주소요."

"앞의 15분은 좀 지루합니다. 계정 만들고 설정하는 시간이거든요. 그거 끝나면 재미있어집니다."

살펴볼 것 — 7분을 넘기지 마세요. 오늘은 할 일이 많습니다. 지루할 거라고 미리 말해 두면 학생이 버팁니다.

07~22분계정과 저장소 만들기 ⚠슬라이드 5~10

할 일

교사가 앞에서 한 단계씩. 단계마다 손을 들게 해 전원 확인하고 넘어간다
① 가입 ② 메일 인증 ③ 저장소 생성 ④ Pages 켜기
막힌 학생은 짝이 돕게 하고 교사는 계속 진행

이렇게 말합니다

"지금부터 네 단계인데, 한 단계씩 같이 합니다. 먼저 가지 마세요."

"① github.com → Sign up. 아이디는 영문 소문자로 짧게. 이 아이디가 그대로 여러분 주소가 됩니다. 실명 쓰지 마세요. 다 된 사람 손."

"② 메일로 숫자가 갑니다. 안 오면 스팸함 보세요. 다 된 사람 손."

"③ 오른쪽 위 + → New repository. 이름은 my-web. Public 꼭 확인하고 Create. 다 된 사람 손."

"④ Settings → 왼쪽 Pages → Branch를 main으로 바꾸고 Save. 이게 오늘 제일 많이 빠뜨리는 단계입니다."

"유인물에 아이디랑 주소 적어 두세요. 6차시까지 씁니다."

살펴볼 것 — 오늘의 승부처입니다. 한꺼번에 설명하고 알아서 하라고 하면 절반이 길을 잃습니다. '다 된 사람 손'을 네 번 하세요. 15분이 빠듯하면 Pages 켜기까지만 하고 주소 확인은 뒤 블록으로 미룹니다.

22~36분캔버스로 첫 페이지 (14분)슬라이드 11

할 일

워크벤치 1차시 프롬프트를 그대로 붙여넣게 한다
뜨면 내 이야기로 바꾸게 한다
교사는 순회하며 앞 블록에서 막힌 학생을 따로 처리

이렇게 말합니다

"이제 재미있는 부분입니다. 워크벤치 글을 그대로 복사해서 붙여넣으세요."

(응답을 기다리는 동안) "지금 AI가 코드를 쓰고 있어요."

"화면이 뜬 사람은 내 이야기로 바꿔 보세요. 이름 대신 별명, 소개도 내 걸로."

(핵심 장면) "색이 마음에 안 들면 그냥 말하세요. — 배경을 더 어두운 색으로 바꿔 줘"

살펴볼 것 — 이 블록은 계정 작업에서 막힌 학생을 따라잡게 하는 시간이기도 합니다. 페이지를 못 만든 학생이 있어도 다음 블록으로 넘어가세요. 올리는 경험이 오늘의 목표입니다.

36~45분올리고 내 주소 확인 ⚠슬라이드 12~14

할 일

① 코드 받기 ② index.html로 이름 바꾸기 ③ Upload files ④ Commit
1~2분 기다렸다가 각자 주소 열기
AI 윤리 네 가지
다음 시간 예고

이렇게 말합니다

"① 캔버스 오른쪽 위에서 코드 받기. ② 파일 이름을 index.html로 바꿉니다. 이 이름이어야 주소를 눌렀을 때 바로 열립니다."

"③ 내 저장소로 가서 Add file → Upload files → 파일 끌어다 놓기. ④ 아래 Commit changes."

"1~2분 걸립니다. 지금 404가 떠도 고장 아니에요. 기다렸다 새로고침하세요."

(열리면) "이게 여러분 주소입니다. 집에서도 열립니다. 부모님께 보내 보세요."

"약속 네 가지만 하고 끝낼게요." (슬라이드를 한 줄씩 읽게 한다)

"다음 시간엔 게임을 만듭니다. 어떤 게임 만들지 하나만 생각해 오세요."

살펴볼 것 — 자기 주소가 열리는 순간이 이 수업 전체에서 반응이 가장 좋은 장면입니다. 시간이 없어도 이것만은 하세요.

수업이 끝난 뒤 — 교사가 할 일

명단에서 아이디·주소를 확인하고, 주소가 안 열리는 학생을 따로 적어 둡니다.
안 열리는 원인은 거의 Pages 미설정이거나 Private 저장소입니다. 다음 차시 시작 전에 해결해 두세요.

자주 막히는 지점

가입 메일이 안 온다: 스팸함 확인 → 재발송. 메일함 접근이 안 되면 교사가 옆에서 따로 처리하고 나머지는 진행시킵니다.
아이디가 이미 쓰이고 있다: 뒤에 숫자를 붙이게 합니다. 길어지면 주소도 길어지니 짧게.
저장소를 Private으로 만들었다: Settings → 맨 아래 Danger Zone → Change visibility → Public.
Pages 메뉴에 Branch 선택이 없다: 저장소에 파일이 하나도 없으면 안 보일 수 있습니다. index.html을 먼저 올리고 다시 들어가세요.
주소가 404다: 1~2분 기다렸는지 → Pages가 main으로 저장됐는지 → Public인지. 순서대로 확인.
파일을 올렸는데 주소에 안 보인다: 이름이 index.html이 아닙니다. 주소 뒤에 파일 이름을 붙이거나 이름을 바꿔 다시 올리게 하세요.

🚀 빨리 끝난 학생에게

카드를 더 추가해 달라고 하기
어두운 모드로 바꿔 달라고 하기
막힌 친구 도와주기 — 가장 유용합니다

🤝 따라오기 힘든 학생에게

워크벤치 프롬프트를 그대로 붙여넣어 올린 것까지가 오늘의 목표입니다. 내 이야기로 바꾸는 것은 선택입니다.

2차시

게임 로직 설계하고 구현하기

자기가 정한 게임을 규격에 맞게 완성해 내 주소에 올린다. 친구가 내 주소에서 내 게임을 하는 경험까지 간다.

00:00시작을 누르면 지금 진행할 블록이 표시됩니다.

✅ 오늘 끝났을 때

각자 게임이 처음부터 끝까지 한 판 돌아간다
game.html이 내 저장소에 올라가 주소로 열린다
옆자리 친구가 내 주소에서 한 판 했다

📦 수업 전 준비

칠판에 게임 규격 5줄 (수업 내내 지워지지 않게)
1차시에 주소가 안 열린 학생 명단 — 시작 전에 해결
완성 게임 3개 미리보기를 열어 둘 준비

진행

00~05분지난 시간 되짚기슬라이드 1

할 일

세 줄로 짧게
주소가 안 열렸던 학생 확인

이렇게 말합니다

"지난 시간에 뭘 만들었죠?" (학생이 말하게 한다)

"주소 안 열리는 사람?" (손 든 학생은 짝과 함께 Pages 설정 확인)

"오늘은 같은 방법으로 게임을 만들어서 그 주소에 올립니다."

살펴볼 것 — 주소 문제를 여기서 털고 가세요. 끌고 가면 5차시에 그 학생만 아무것도 못 합니다.

05~12분게임 규격과 아이디어슬라이드 2~6

할 일

규격 5줄
왜 규격이 필요한지 먼저 말한다
아이디어 예시
3분 안에 정하게 한다

이렇게 말합니다

"주제는 자유인데 규격이 있습니다. 왜 그럴까요?"

"3차시에 기록을 남기고 6차시에 전시관에 올릴 겁니다. 그러려면 모두의 게임이 같은 모양으로 끝나야 해요."

(규격을 한 줄씩 읽는다) "3분 안에 끝난다 / 숫자 하나가 나온다 / 높을수록 잘한 것이다 / 혼자 한다 / 파일 하나다"

"생각해 온 게 없으면 여기서 하나 고르세요. 고민은 3분까지."

살펴볼 것 — 규격의 이유를 여기서 말해 두면 3차시와 6차시가 저절로 풀립니다.

12~36분내 게임 만들기 (24분)슬라이드 7~8

할 일

게임 설명 부분만 바꾸게 하고 규격 부분은 건드리지 않게
12분쯤(=24분 시점) 중간 점검
교사는 계속 순회

이렇게 말합니다

"프롬프트에서 게임 설명 부분만 내 걸로 바꾸세요. 아래 규격은 그대로 두고요."

"먼저 돌아가게 만들고, 그다음에 재미있게 만드세요." (실습 내내 반복)

(중간 점검) "지금 한 판 끝까지 돌아가는 사람 손?" — 손 안 든 학생부터 돌기

(32분 시점) "4분 뒤에 올립니다. 지금 되는 데까지만 정리하세요."

살펴볼 것 — 실습을 36분에 끊어야 올리는 9분을 지킬 수 있습니다.

36~45분올리고 서로 해 보기슬라이드 9~10

할 일

코드 받기 → game.html → 업로드 → Commit
옆자리와 주소를 교환해 한 판씩
다음 시간 떡밥

이렇게 말합니다

"이름은 game.html로 통일합니다. 6차시까지 같은 이름을 씁니다."

"올라갔으면 옆 사람한테 주소를 불러 주세요. 서로 한 판씩."

(돌아온 뒤) "자기 게임 새로고침 한번 해 보세요. 아까 낸 점수가 남아 있나요?"

"사라졌죠. 다음 시간에 이걸 해결합니다."

살펴볼 것 — 마지막 질문이 3차시 도입과 그대로 이어집니다. 시간이 없어도 이 한 마디는 하세요.

자주 막히는 지점

게임 주제를 못 정하고 10분째 고민한다: 고르게 하지 말고 지정해 주세요. 주제는 평가 대상이 아닙니다.
규격을 어긴 게임을 만들었다: "3분 안에 끝나나요? 숫자가 나오나요?" 두 가지만 확인합니다.
너무 큰 걸 만들려 한다: "오늘은 작게 완성하고, 집에서 키우세요."
올렸는데 주소에 반영이 안 된다: 1~2분 기다렸는지 확인. 그리고 같은 이름으로 덮어썼는지 — 다른 이름으로 올리면 주소도 달라집니다.
고칠 때마다 이전 기능이 사라진다: "나머지는 그대로 두고 ○○만 고쳐 줘"라고 범위를 지정하게 합니다.

🚀 빨리 끝난 학생에게

점수 연출 추가
난이도가 점점 올라가게
시작 화면 붙이기
친구 게임 해 보고 피드백 주기

🤝 따라오기 힘든 학생에게

워크벤치의 완성 게임 3개 중 하나를 그대로 받아 색과 글자만 바꿔 올리게 합니다. 규격은 이미 지켜져 있습니다.

3차시

데이터 저장하여 기록 관리하기

캔버스 밖으로 코드를 꺼내 내 파일로 만들고, localStorage로 기록을 남긴다. 기술적으로 가장 빡빡한 차시다.

00:00시작을 누르면 지금 진행할 블록이 표시됩니다.

✅ 오늘 끝났을 때

각자 바탕화면 폴더에 자기 .html 파일이 있다
새로고침해도 최고 점수가 남는다
옆자리에서는 내 점수가 안 보인다는 것을 확인했다

📦 수업 전 준비

제미나이 캔버스의 '코드 받기' 메뉴 위치와 이름을 사전 확인
교사 컴퓨터에서 코드 받기 → 이름 바꾸기 → 더블클릭 리허설
파일 확장자 보기 설정 확인(탐색기 → 보기 → 파일 확장명)

진행

00~05분점수가 사라지는 문제슬라이드 1~2

할 일

말로 설명하지 말고 직접 해 보게 한다

이렇게 말합니다

"내 주소 열고 게임 한 판 하세요. 점수 나왔죠?"

"이제 새로고침(F5) 누르세요."

(반응을 기다린다) "어떻게 됐어요?"

"컴퓨터는 꺼진 순간 잊어버립니다. 기억하게 하려면 어딘가에 적어 두라고 말해 줘야 해요."

살펴볼 것 — "어?" 하는 순간이 오늘 수업의 출발점입니다. 교사가 먼저 말해 버리면 사라집니다.

05~12분저장할 곳은 세 군데슬라이드 3~4

할 일

저장의 3단계 그림
오늘은 2단계만

이렇게 말합니다

"저장할 곳이 세 군데 있어요. 아무 데도 안 적기 / 이 브라우저 수첩에 적기 / 인터넷 창고에 적기."

"오늘은 2단계까지. 3단계는 5차시에 여러분이 직접 만든 데이터베이스로 갑니다."

살펴볼 것 — 3단계 그림은 이 수업 전체의 뼈대입니다. 5차시에 다시 꺼내 쓸 거라고 예고해 두세요.

12~20분코드 받아 내 파일로 ⚠슬라이드 5~6

할 일

교사가 앞에서 한 단계씩, 따라온 걸 확인하고 다음으로
① 코드 받기 ② 이름을 game.html ③ 바탕화면 내 폴더 ④ 더블클릭

이렇게 말합니다

"네 단계인데 한 단계씩 같이 합니다."

"① 캔버스 오른쪽 위 코드 받기. 다 된 사람 손."

"② 이름을 game.html로. 2차시에 올린 것과 같은 이름입니다."

"③ 바탕화면에 내 폴더를 하나 만들고 거기 넣으세요. 오늘부터 여기가 작업실입니다."

"④ 더블클릭. 브라우저가 열리면 성공."

"올리기 전에 내 컴퓨터에서 먼저 확인하는 습관을 들이세요. 올린 뒤 고치는 것보다 빠릅니다."

살펴볼 것 — 오늘의 위험 구간입니다. 단계마다 손을 들게 해 전원을 확인하고 넘어가세요.

20~36분저장 붙이기 (16분)슬라이드 7~8

할 일

워크벤치 3차시 프롬프트를 게임 만들던 대화에 이어서 넣게 한다
붙인 뒤 코드를 다시 받아 파일을 덮어쓰게 한다
내 컴퓨터에서 새로고침 확인

이렇게 말합니다

"게임을 만들던 그 대화에 이어서 넣으세요. 새 대화 말고요."

"붙였으면 코드를 다시 받아서 아까 그 파일에 덮어쓰세요."

"그리고 새로고침. 최고 점수가 남아 있으면 성공입니다."

살펴볼 것 — 덮어쓰기를 빠뜨리면 파일은 옛날 것 그대로입니다. 가장 흔한 실수입니다.

36~45분올리고 옆자리에서 열기슬라이드 9~11

할 일

내 저장소에 덮어쓰기 업로드
옆자리 컴퓨터에서 내 주소 열어 보기
5차시 예고

이렇게 말합니다

"같은 이름 game.html로 다시 올리세요. 덮어쓰기가 됩니다."

"이제 옆자리 컴퓨터에서 내 주소를 열어 보세요. 내 최고 점수가 보이나요?"

"안 보이죠. 주소는 같은데 수첩이 컴퓨터마다 따로라서 그렇습니다."

"다음 시간엔 게임 말고 내가 실제로 쓸 도구를 만듭니다."

살펴볼 것 — 이 실험이 5차시의 동기입니다. 주소는 같은데 내용이 다르다는 게 핵심입니다.

자주 막히는 지점

코드 받기 메뉴를 못 찾는다: 캔버스 오른쪽 위입니다. 끝내 없으면 코드 탭 → 전체 복사 → 메모장 → 다른 이름으로 저장으로 우회합니다.
파일이 다운로드 폴더에 들어갔다: 정상입니다. 잘라내 바탕화면 내 폴더로 옮기게 하세요.
더블클릭했더니 메모장이 열린다: 이름이 game.html.txt입니다. 확장자 보기를 켜고 .txt를 지웁니다.
한글이 □□□로 깨진다: 메모장 저장 시 인코딩을 UTF-8로.
저장 기능을 붙였는데 점수가 안 남는다: 새 대화에 붙인 경우가 많습니다. 게임을 만들던 대화에 이어서 넣어야 합니다.
올렸는데 주소에서 옛날 버전이 나온다: 브라우저 캐시입니다. Ctrl+F5로 강력 새로고침하게 하세요.

🚀 빨리 끝난 학생에게

최근 5판 기록도 남기기
기록 초기화 버튼
최고 점수를 깼을 때 축하 연출

🤝 따라오기 힘든 학생에게

파일을 받아 더블클릭으로 여는 것까지만 해도 오늘은 성공입니다. 저장 기능은 완성 코드를 그대로 받아 쓰게 합니다.

4차시

사용자 중심 학습 도구 개발하기

게임에서 실용 도구로 넘어간다. 내 도구를 만들어 내 주소에 올려 둔다 — 5차시에 여기에 로그인을 붙인다.

00:00시작을 누르면 지금 진행할 블록이 표시됩니다.

✅ 오늘 끝났을 때

각자 자기가 쓸 도구를 하나 만들었다
todo.html이 내 주소에서 열린다
내일부터 실제로 쓸 마음이 든다

📦 수업 전 준비

칠판에 파일 이름: todo.html
워크벤치 완성 도구 미리보기를 띄울 준비
주소가 안 열리는 학생이 남아 있지 않은지 확인 — 5차시 전 마지막 기회

진행

00~05분게임에서 도구로슬라이드 1

할 일

오늘의 성격 전환을 분명히 한다

이렇게 말합니다

"오늘은 게임이 아니라 내가 쓸 것을 만듭니다."

"만들고 끝나는 게 아니라 오늘부터 진짜로 쓰는 거예요. 멋진 것보다 내가 쓸 만한 것으로 정하세요."

05~12분무엇을 만들까슬라이드 2~4

할 일

예시 4개
3분 안에 정하게 한다
미리보기로 완성형을 보여 준다

이렇게 말합니다

"할 일 목록 / 시간표 / 공부 타이머 / 디데이. 고르거나 직접 정하세요."

"고민은 3분까지. 만들면서 바꿔도 됩니다."

(미리보기를 띄우고) "이게 완성된 모습이에요. 눌러 보세요."

살펴볼 것 — 주제 고민이 길어지면 올리는 시간을 못 지킵니다. 3분 지나면 지정해 주세요.

12~36분내 도구 만들기 (24분)슬라이드 5

할 일

워크벤치 4차시 프롬프트
localStorage 저장도 함께
32분쯤 "4분 뒤에 올립니다" 예고

이렇게 말합니다

"3차시에 배운 저장도 같이 넣습니다. 프롬프트에 이미 들어 있어요."

"화면이 예쁜 것보다 내가 쓸 만한가가 중요합니다."

(32분) "4분 뒤에 올립니다. 지금 되는 데까지만 정리하세요."

살펴볼 것 — 오늘 올려 두어야 5차시에 로그인을 붙여 확인할 수 있습니다.

36~45분올리고 주소 확인슬라이드 6~7

할 일

① 코드 받기 ② todo.html ③ 업로드 ④ Commit
각자 내주소/todo.html 열어 보기
다음 시간 예고

이렇게 말합니다

"이름은 todo.html로 통일합니다."

"올리기 전에 파일 안에 이름·연락처·학교 이름 없는지 한 번 더 보세요. 저장소가 공개라서 코드까지 누구나 볼 수 있습니다."

"올렸으면 내주소/todo.html로 들어가 보세요. 열리면 오늘 끝입니다."

"다음 시간엔 여러분이 직접 데이터베이스를 만듭니다. 집에서도 내 할 일이 보이게요."

살펴볼 것 — 여기서 안 올린 학생은 5차시에 붙일 대상이 없습니다. 눈으로 확인하세요.

자주 막히는 지점

무엇을 만들지 못 정한다: "할 일 목록"으로 지정해 주세요. 가장 단순하고 5차시와도 가장 잘 맞습니다.
너무 복잡한 도구를 만들려 한다: "적고, 체크하고, 지우기" 세 가지면 충분합니다.
저장이 안 된다: 3차시와 같은 문제입니다. 저장 부분을 다시 요청하게 합니다.
끝까지 못 만들었다: 만들다 만 것이라도 올리게 하세요. 올려 둔 파일이 5차시의 작업 대상입니다.
주소에서 404가 난다: 파일 이름 철자와 대소문자를 확인하세요. Todo.html과 todo.html은 다릅니다.

🚀 빨리 끝난 학생에게

도구를 하나 더 만들기
정렬·검색 기능 추가
색 테마 바꾸기 기능

🤝 따라오기 힘든 학생에게

완성 도구 코드를 그대로 받아 제목과 색만 바꿔 올리게 합니다. 5차시에 할 일은 동일합니다.

5차시

계정 인증과 클라우드 데이터베이스 구축하기

학생이 자기 파이어베이스 프로젝트를 만들어 로그인과 클라우드 저장을 붙인다. 그리고 보안 규칙을 직접 게시한다. 1차시와 함께 두 번째 고비다.

00:00시작을 누르면 지금 진행할 블록이 표시됩니다.

✅ 오늘 끝났을 때

각자 자기 프로젝트에서 구글 로그인이 된다
학교에서 적은 내용이 다른 기기에서도 보인다
전원이 보안 규칙을 게시했다

📦 수업 전 준비

학생 계정으로 파이어베이스 프로젝트 생성이 되는지 사전 확인
교사 화면으로 프로젝트 생성 → 설정값 복사 → 도메인 등록까지 리허설
위치는 asia-northeast3로 통일한다고 미리 정해 두기
학생 아이디 명단 — 승인 도메인 확인에 씁니다

진행

00~06분왜 로그인이 필요한가슬라이드 1~3

할 일

지난 시간 도구를 다른 기기에서 열어 보게 한다
오늘은 내 데이터베이스를 만든다는 것을 선언

이렇게 말합니다

"지난 시간에 올린 도구, 휴대폰으로 열어 보세요. 주소는 열리죠?"

"그런데 학교에서 적은 할 일이 보이나요? 안 보이죠."

"어디서나 같은 내용을 보려면 두 가지가 필요합니다. 로그인이 '나'를 확인하고, 클라우드가 내 자리에 적어 둡니다."

"오늘은 그 클라우드를 여러분이 직접 만듭니다. 남의 걸 빌려 쓰는 게 아니라 내 데이터베이스예요."

살펴볼 것 — 휴대폰으로 열어 보게 하면 문제가 손에 잡힙니다. 와이파이가 안 되면 교사 휴대폰으로 시연만 해도 됩니다.

06~18분내 파이어베이스 프로젝트 ⚠슬라이드 4~6

할 일

교사가 앞에서 한 단계씩. 단계마다 전원 확인
① 프로젝트 만들기 ② Authentication 구글 켜기 ③ Firestore 테스트 모드로 만들기

이렇게 말합니다

"console.firebase.google.com 들어가서 영재원 계정으로 로그인. 프로젝트 추가."

"이름은 영문으로. 애널리틱스는 꺼도 됩니다. 만드는 데 1~2분 걸려요."

(기다리는 동안) "프로젝트 안에는 두 가지가 들어갑니다. 로그인 담당과 데이터베이스 담당."

"② Authentication → 시작하기 → Google → 사용 설정 → 저장. 다 된 사람 손."

"③ Firestore Database → 만들기 → 위치는 asia-northeast3 → 테스트 모드로 시작. 다 된 사람 손."

"테스트 모드는 '아직 아무나 들어올 수 있는 상태'예요. 수업 끝에 꼭 잠글 겁니다."

살펴볼 것 — 프로젝트 생성에 1~2분 걸립니다. 그 침묵을 설명으로 채우세요. 테스트 모드를 고르게 하는 게 중요합니다 — 프로덕션 모드로 만들면 규칙 넣기 전까지 아무것도 안 됩니다.

18~24분설정값과 도메인 등록 ⚠슬라이드 7

할 일

④ 설정값 복사 ⑤ 승인된 도메인에 내 주소 등록
도메인 등록은 한 명씩 눈으로 확인

이렇게 말합니다

"④ 왼쪽 위 톱니(⚙️) → 프로젝트 설정 → 내려서 내 앱 → 웹 앱 추가(</>) → 나오는 firebaseConfig 전체를 복사하세요."

"⑤ 다시 Authentication → Settings → 승인된 도메인 → 도메인 추가 → 내아이디.github.io. https:// 빼고, 저장소 이름도 빼고 도메인만."

"이걸 빠뜨리면 로그인 창이 아예 안 열립니다. 오늘 제일 많이 놓치는 단계예요."

(순회하며) "도메인 등록한 화면 좀 보여 주세요."

살펴볼 것 — 여기서 절반이 빠뜨립니다. '했어요'라는 대답 말고 화면을 보세요. 6분이 짧으면 다음 블록 앞 3분을 당겨 쓰세요.

24~36분로그인 붙이고 올리기 (12분)슬라이드 8~9

할 일

워크벤치 5차시 프롬프트 + 내 설정값
코드 받아 todo.html로 덮어쓰기 업로드
내 주소에서 로그인 확인

이렇게 말합니다

"프롬프트에 내 설정값을 붙여넣으세요. 친구 것 말고 내 것."

"캔버스 미리보기에서는 로그인 창이 안 뜰 수 있습니다. 고장 아니에요. 올린 뒤 내 주소에서 확인합니다."

"붙였으면 코드 받아서 todo.html로 덮어쓰기 업로드."

"오류 글자가 뜨면 그대로 불러 주세요. 슬라이드에 뜻이 적혀 있습니다."

살펴볼 것 — 미리보기에서 로그인이 안 된다는 걸 먼저 말하지 않으면 절반이 고장 났다고 손을 듭니다.

36~45분보안 규칙 — 오늘의 핵심 ⚠슬라이드 10~13

할 일

지금 상태가 위험하다는 것을 먼저 보여 준다
워크벤치에서 규칙 복사 → Firestore 규칙 탭 → 붙여넣기 → 게시
게시 화면을 한 명씩 눈으로 확인

이렇게 말합니다

"지금 여러분 데이터베이스는 누구나 읽고 쓸 수 있는 상태입니다. 테스트 모드로 만들었으니까요."

"주소를 아는 사람은 내 할 일을 지울 수도 있어요. 그걸 막는 게 규칙 몇 줄입니다. 암호가 아니라요."

"워크벤치에서 규칙을 복사해서 Firestore → 규칙 탭에 통째로 붙여넣고 게시를 누르세요."

(규칙을 한 줄씩 읽는다) "내 자료는 나만 읽고 쓴다 / 로그인 안 한 사람은 아무것도 못 한다 / 그 외는 전부 막는다"

"이 줄이 없으면 어떻게 될지 짝과 이야기해 보세요."

(순회) "규칙 게시한 화면 보여 주세요."

"다음 시간엔 전시관을 엽니다. 친구들이 내 게임을 합니다."

살펴볼 것 — 이 9분을 줄이지 마세요. 규칙을 안 게시하면 30일간 열린 데이터베이스로 남습니다. 말로 확인하지 말고 화면을 보세요. 빠뜨린 학생은 다음 차시 시작에 처리합니다.

수업이 끝난 뒤 — 교사가 할 일

규칙을 게시하지 않은 학생을 명단에 적어 두고 6차시 시작에 처리합니다.
로그인이 안 된 학생의 오류 코드를 받아 두면 원인 파악이 빠릅니다.

자주 막히는 지점

auth/unauthorized-domain: 승인된 도메인에 내아이디.github.io가 없습니다. 형식도 확인 — https://와 경로를 빼야 합니다.
auth/popup-blocked: 주소창 오른쪽 아이콘에서 팝업 허용.
permission-denied: 저장 위치가 규칙과 다릅니다. 프롬프트의 저장 경로를 워크벤치 원문 그대로 다시 넣게 하세요. 또는 규칙을 게시하지 않았습니다.
api-key-not-valid: 설정값을 잘못 붙여넣었습니다. 콘솔에서 다시 복사하게 하세요.
프로젝트가 안 만들어진다: 조직 계정 정책일 수 있습니다. 짝과 한 프로젝트를 공유해 진행시키세요. 학습 목표에는 지장 없습니다.
캔버스 미리보기에서 로그인 창이 안 뜬다: 정상입니다. 올린 뒤 내 주소에서 확인합니다. 미리 공지하세요.
4차시에 올리지 않은 학생이 있다: 오늘 만든 것을 먼저 올리게 하고 같은 흐름으로 따라오게 합니다.

🚀 빨리 끝난 학생에게

로그아웃 버튼 추가
저장 중 표시 붙이기
게임에도 로그인 붙여 보기(워크벤치 6차시 프롬프트)

🤝 따라오기 힘든 학생에게

로그인까지만 되면 오늘은 성공입니다. 클라우드 저장이 안 되면 완성 코드를 받아 설정값만 바꿔 넣게 합니다.

6차시

웹 서비스 배포하고 공유하기

전시관을 열고 서로의 작품을 경험한다. 오늘의 보상은 친구 게임을 해 보는 20분에 있다.

00:00시작을 누르면 지금 진행할 블록이 표시됩니다.

✅ 오늘 끝났을 때

전시관에 작품이 올라가 있다
친구 게임을 여러 개 해 보고 점수를 남겼다
인터넷에 공개한다는 것의 의미를 안다

📦 수업 전 준비

전시관을 교사 계정으로 미리 테스트 — 로그인, 별명 저장, 작품 등록, 점수 등록
전시관 주소를 칠판에
5차시에 규칙을 게시하지 않은 학생 명단
전시관 승인 도메인에 전시관 주소가 들어 있는지 확인

진행

00~08분최종 업로드와 점검슬라이드 1~3

할 일

게임 파일 최종 업로드
올리기 전 점검 네 가지
내 주소를 직접 눌러 열리는지 확인시키기
5차시 규칙 미게시 학생 처리

이렇게 말합니다

"오늘 마지막으로 게임을 올립니다. 올리기 전에 네 가지만 확인하세요."

"① 이름은 game.html ② 파일 안에 실명·연락처 없는지 ③ 내 컴퓨터에서 돌아가는지 ④ 올린 뒤 내 주소를 눌러서 실제로 열리는지"

"④번 꼭 하세요. 안 열리는 주소를 전시관에 올리면 친구가 못 합니다."

(명단 확인) "지난 시간 규칙 게시 안 한 사람, 지금 하세요."

살펴볼 것 — ④번을 건너뛰면 전시관에 죽은 주소가 올라갑니다. 등록 전에 반드시 확인시키세요.

08~18분전시관에 등록슬라이드 4~6

할 일

전시관 열기 → 구글 로그인 → 별명 저장 → 작품 등록
작품 카드가 늘어나는 화면을 앞에 띄워 둔다

이렇게 말합니다

"전시관 주소 여세요. 구글 로그인하고 별명부터 저장하세요. 실명 말고 별명입니다."

"그다음 게임 이름, 한 줄 설명, 내 게임 주소를 넣습니다."

"주소는 내아이디.github.io/my-web/game.html 모양이에요."

(앞 화면을 가리키며) "하나씩 올라오는 거 보이죠."

살펴볼 것 — 작품 카드가 늘어나는 걸 다 같이 보는 순간이 좋습니다. 교사 화면을 앞에 띄워 두세요.

18~38분친구 게임 해 보기 (20분)슬라이드 7

할 일

자유롭게 플레이
점수를 전시관에 등록
교사는 돌면서 분위기만 관리

이렇게 말합니다

"이제 20분 동안 친구들 게임을 해 보세요. 재미있으면 점수를 등록하고요."

"한 사람 것만 하지 말고 최소 다섯 개는 해 보세요."

(중간에) "지금 1등 누구예요?" — 랭킹 화면을 앞에 띄운다

살펴볼 것 — 이 20분이 여섯 차시의 보상입니다. 줄이지 마세요. 교사는 설명하지 말고 분위기만 관리합니다.

38~45분마무리슬라이드 8~10

할 일

인터넷 공개의 의미
혼자 이어가는 법
마무리 멘트

이렇게 말합니다

"올린 것은 주소를 아는 사람은 누구나 볼 수 있습니다. 깃허브에 올린 건 코드까지 보이고요."

"한 번 올린 건 완전히 지우기 어렵습니다. 그래서 실명·사진·연락처를 안 넣은 거예요."

"내 저장소와 내 데이터베이스는 수업이 끝나도 내 것입니다. 집에서 더 만들어 올려 보세요."

"막히면 AI에게 물어보면 돼요. 이제 묻는 법을 아니까요."

"여섯 번 동안 계정 하나, 저장소 하나, 데이터베이스 하나를 만들었습니다. 코드를 한 줄도 쓰지 않고요."

살펴볼 것 — 마지막 한 마디는 천천히 하세요. 학생이 자기가 무엇을 했는지 정리하는 시간입니다.

수업이 끝난 뒤 — 교사가 할 일

학기가 끝나면 전시관 컬렉션을 삭제합니다. 학생 프로젝트는 학생 본인 것이라 손대지 않습니다.
작품을 남겨 둘지 학생에게 물어보고 결정합니다.
주소 목록을 정리해 두면 다음 기수에 예시로 쓸 수 있습니다(학생 동의 후).

자주 막히는 지점

전시관 등록 버튼이 안 눌린다: 로그인이 안 된 상태입니다. 먼저 구글 로그인을 하게 하세요.
등록한 주소를 눌렀는데 404다: 학생 저장소에 파일이 없거나 이름이 다릅니다. 전시관에서 주소를 고쳐 다시 등록하게 하세요.
전시관 로그인이 안 된다: 전시관 프로젝트의 승인된 도메인에 전시관 주소가 들어 있는지 확인하세요. 교사 쪽 문제입니다.
친구 게임이 열리지 않는다: 주소를 잘못 옮겨 적은 경우가 대부분입니다. 전시관 카드를 눌러서 들어가게 하세요.
별명에 실명을 넣었다: 그 자리에서 고치게 합니다. 이미 등록됐으면 다시 올려 덮어쓰게 하세요.
점수가 랭킹에 안 올라간다: 별명을 저장하지 않았거나 점수 칸이 비어 있습니다. 점수는 숫자만 넣게 하세요.

🚀 빨리 끝난 학생에게

친구 게임의 좋은 점을 내 것에 넣어 보기
게임에도 로그인 붙이기
집에서 만들 다음 작품 기획

🤝 따라오기 힘든 학생에게

게임이 완성되지 않았으면 4차시에 만든 도구 주소를 전시관에 올리게 합니다. 올려 보는 경험이 오늘의 목표입니다.