바이브코딩으로 만드는 나만의 게임과 학습 도구

6차시 / 전체 6차시

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

주소가 생기면 친구가 내 게임을 한다

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

오늘의 흐름 · 45분

00~08분최종 업로드와 점검
08~18분전시관에 등록
18~38분친구 게임 해 보기
38~45분마무리

시간은 안내일 뿐입니다. 막히는 사람이 많으면 실습 시간을 늘립니다.

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

마지막 시간

전시관을 엽니다

내 게임을 올리고, 친구 게임을 해 보고, 점수를 남깁니다.

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

오늘 순서

1
최종 업로드게임 파일을 마지막으로 올리기
2
주소 확인내 주소에서 열리는지 눌러 보기
3
전시관 등록별명 저장 → 내 게임 주소 올리기
4
서로 하기친구 게임 해 보고 점수 올리기
6웹 서비스 배포하고 공유하기

올리기 전 점검

  • 파일 이름은 영문으로 — 예: game.html
  • 이름·연락처·학교 이름이 들어 있지 않은지 확인
  • 내 컴퓨터에서 한 번 열어서 잘 돌아가는지 확인
  • 올린 뒤 내 주소를 눌러 실제로 열리는지 확인
6웹 서비스 배포하고 공유하기

주소 읽는 법

https://minsu.github.io/my-web/game.html 내 계정 깃허브 아이디 내 저장소 저장소 이름 내 작품 올린 파일 이름 주소는 세 부분으로 되어 있다
수업이 끝난 뒤에도 이 주소로 친구들 작품을 다시 열어 볼 수 있습니다.
6웹 서비스 배포하고 공유하기

전시관

우리 반 전시관 30초 두더지 폭탄을 피해서 잡으세요 해 보기 색깔 구별 다른 색 한 칸 찾기 해 보기 여덟 번의 질문 숫자를 맞혀 보세요 해 보기 🏆 두더지 잡기 랭킹 1 초록두더지 420 2 파랑연필 385 실명 말고 별명
작품 카드를 누르면 친구 게임이 열립니다. 아래는 게임별 랭킹입니다.
6웹 서비스 배포하고 공유하기

전시관에서 할 일

  • 별명 저장 — 실명 대신 별명을 씁니다
  • 게임 이름, 한 줄 설명, 내 게임 주소를 등록합니다
  • 친구 게임을 눌러서 해 봅니다
  • 최고 기록이 나오면 점수를 등록합니다

전시관은 선생님이 만든 곳입니다. 여기서는 구글 로그인만 하면 됩니다.

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

인터넷에 올린다는 것

  • 주소를 아는 사람은 누구나 볼 수 있습니다
  • 깃허브에 올린 파일은 코드까지 누구나 볼 수 있습니다
  • 한 번 올린 것은 완전히 지우기 어렵습니다
  • 그래서 실명·사진·연락처는 넣지 않습니다
  • 친구가 올린 것도 함부로 퍼뜨리지 않습니다
6웹 서비스 배포하고 공유하기

남은 시간

서로의 게임 해 보기

오늘의 보상은 여기에 있습니다.

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

혼자 이어가려면

  • 내 저장소는 수업이 끝나도 그대로 남습니다
  • 만들던 게임에 기능을 하나씩 더해 보세요
  • 집에서 쓸 도구를 하나 더 만들어 올려 보세요
  • 막히면 AI에게 물어보세요 — 이제 묻는 법을 압니다
6웹 서비스 배포하고 공유하기

여섯 번 동안

내 주소가 생겼습니다

계정 하나, 저장소 하나, 데이터베이스 하나.
그리고 그 안에 내가 만든 것들.
코드를 한 줄도 쓰지 않고.

1 / 12 🏠 홈 🛠️ 워크벤치 1차시2차시3차시4차시5차시