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

2차시 / 전체 6차시

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

내가 정한 규칙으로 만드는 내 게임

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

오늘의 흐름 · 45분

00~05분지난 시간 되짚기
05~12분게임 규격과 아이디어
12~36분내 게임 만들기
36~45분올리고 서로 해 보기

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

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

지난 시간 되짚기

  • 말로 설명하면 AI가 코드를 써 준다
  • 내 계정과 내 저장소가 생겼다
  • 올리면 내 주소로 누구나 열 수 있다

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

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

오늘 만들 것

내가 정한 게임

주제는 자유입니다. 대신 지켜야 할 규격이 있습니다.

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

게임 규격 — 이것만 지키면 됩니다

  • 한 판은 3분 안에 끝난다
  • 결과는 숫자 하나(점수)로 나온다
  • 점수는 높을수록 잘한 것이다
  • 혼자 하고, 마우스나 터치만 쓴다
  • 파일 하나로 완결된다

3차시에 기록을 남기고 6차시에 전시관에 올릴 때, 이 규격 덕분에 모두가 같은 기능을 붙일 수 있습니다.

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

규격이 뜻하는 것

내가 만드는 게임 🐹 🃏 ⚡ 무엇이든 좋다 두더지든 퀴즈든 반응속도든 끝나면 나오는 것 점수 숫자 하나 높을수록 잘한 것 gameOver(점수) 이 한 줄만 지키면, 3차시 저장과 6차시 랭킹이 그대로 붙는다
게임 내용은 자유입니다. 끝날 때 숫자 하나가 나오기만 하면 됩니다.
2게임 로직 설계하고 구현하기

왜 3분일까

크게 시작하면 캐릭터 5종 · 스테이지 10개 · 멀티플레이 첫 화면 만들다가 2차시 끝 6차시까지 완성 못 함 작게 시작하면 30초 · 규칙 하나 · 점수 하나 2차시에 돌아가는 게임 완성 남는 시간에 재미를 더함 작게 만들어 끝내는 것이 훨씬 어렵고 값지다
규모 제한은 규칙이 아니라 좋은 게임의 조건으로 생각하세요.
2게임 로직 설계하고 구현하기

아이디어가 없다면

⚡
반응속도신호가 바뀌면 누르기
🐹
두더지 잡기튀어나오는 것만 빠르게
🃏
짝 맞추기같은 그림 찾기
🔢
숫자 맞히기위아래 힌트로 찾기

워크벤치에 12가지가 더 있습니다. 골라도 되고 바꿔도 됩니다.

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

시연

게임 설명 부분만 내 것으로 바꾸고, 규격 부분은 그대로 둡니다.

gemini.google.com — 캔버스
2게임 로직 설계하고 구현하기

이제 직접

24분, 내 게임 만들기

먼저 돌아가게 만들고, 그다음에 재미를 더하세요.
캔버스에서 바로 해 보면서 고치면 됩니다.

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

막혔을 때 쓰는 말

  • "버튼을 눌러도 아무 일도 안 일어나. 왜 그런지 찾아서 고쳐 줘."
  • "화면이 하얗게만 나와. 고쳐 줘."
  • "연속으로 성공하면 점수가 더 오르게 해 줘."
  • "시간이 지날수록 조금씩 빨라지게 해 줘."

캔버스에서는 고칠 부분만 말하면 됩니다. 전체 코드를 다시 달라고 하지 않아도 됩니다.

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

오늘 끝나기 전에

  • 코드를 받아 game.html로 이름을 바꾼다
  • 내 저장소에 업로드하고 Commit한다
  • 내 주소 / game.html로 열어 본다
  • 옆자리 친구에게 주소를 알려 주고 한 판 하게 한다

친구가 내 주소에서 게임을 하는 순간이 오늘의 목표입니다.

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

다음 시간

점수가 사라지는 문제

오늘 올린 게임을 다시 열어 보세요. 점수가 남아 있을까요?

1 / 13 🏠 홈 🛠️ 워크벤치 1차시3차시4차시5차시6차시