AI와 함께하는 코딩

브라우저에서 바로 할 수 있는 게임 모음이에요. 마음에 드는 게임을 해 보고, </> 코드가 있는 게임은 학교 코딩 AI에게 도움을 받아 고쳐서 나만의 게임으로 만들어 봐요.

브라우저에서 바로 돌아가는 오픈소스 HTML 게임 모음이에요. 초등 4~6학년 바이브코딩 수업에서 시연할 수 있게 골랐어요. 따라 만들기 코드가 붙은 게임은 미션을 보며 고쳐서 바로 실행할 수 있어요.

    누르면 복사

        5분 시연 순서

        놀라움 → 자신감 → 코드 순서로 보여 주면 게임 만들기 차시로 자연스럽게 넘어가요.

          게임에 쓸 수 있는 공공 API

          키 없이 브라우저에서 바로 불러올 수 있는 데이터예요. 예시 주소를 복사해 AI에게 「이 주소로 게임을 만들어 줘」라고 부탁해 봐요.

          따라 만들기

          미션

            그림 쓰기

            1. ⬇ 수업키트 받기 (이 게임 들어 있음) 압축을 풀면 club-kit 폴더 안에 이 게임 mygame.html(지금 고친 코드 그대로), assets 폴더(그림·소리), AGENTS.md(AI가 지킬 규칙)가 들어 있어요. mygame.html을 더블클릭하면 바로 실행되고, VS Code로 club-kit 폴더를 열면 AI와 이어서 고쳐요. 내 club-kit 폴더가 이미 있으면 누르지 말고 이 게임의 「AI에게 부탁 복사」를 써요(다시 받으면 새 폴더가 생겨요).
            2. 수업키트 없이 내가 만든 폴더를 쓸 때만 눌러요. 그 폴더 안에 assets 폴더가 생겨요. 다운로드·바탕화면·문서 폴더 자체는 크롬이 막으니 그 안의 내 폴더를 골라요.
            그림 이름 보기 (누르면 이름이 복사돼요)
            게임 화면을 한 번 클릭한 뒤 키보드를 써요
            「바로 실행」을 누르면 여기에 게임이 떠요. 코드는 「</> 코드」를 눌러 봐요. 내 게임으로 만들려면 위의 「AI에게 부탁 복사」를 눌러 AI 채팅창에 붙여 넣어요.

            다음 반 준비: 모두 리셋

            이 컴퓨터에 저장된 고친 코드를 모든 게임에서 지우고 처음 코드로 되돌려요. 반이 바뀔 때 선생님이 눌러 주세요.

            🏆 내 미션

            코드 창의 미션대로 빨간 숫자를 바꾸고 「바로 실행」을 눌러요. 게임이 잘 돌아가면 그 미션에 ✅가 생겨요. 다 하면 우리 반·번호를 고르고 확인 코드를 선생님께 보여 줘요.

            확인 코드 ----

              🔒 감독관 기록판

              학생마다 미션을 몇 개 해결했는지 기록해요. 기록은 이 기기(선생님 컴퓨터)에만 저장돼요.