기획
아이디어를 모으고 기획서(게임 설계도)를 써요. 장르, 목표, 인물, 스토리, 규칙을 정해요.
기획자 · 게임 디자이너학습지에 쓴 게임 기획을 블록으로 끼워 맞춰, 생성형 AI에게 보낼 “게임 만들어 줘” 프롬프트를 완성해요.
이름을 붙여 저장해 두면 창을 닫아도 다시 불러올 수 있어요. 태블릿을 여럿이 같이 쓰면 번호와 이름을 꼭 붙여요.
다른 기기에서 이어 하거나, 브라우저 기록이 지워질 때를 대비해 파일로 저장해요. 파일은 태블릿의 다운로드 폴더에 들어가요.
게임 회사에서는 여러 사람이 역할을 나눠 아래 순서로 게임을 만들어요.
아이디어를 모으고 기획서(게임 설계도)를 써요. 장르, 목표, 인물, 스토리, 규칙을 정해요.
기획자 · 게임 디자이너네모, 동그라미만으로 간단한 시험판을 먼저 만들어 정말 재미있는지 확인해요.
프로그래머그림, 소리, 단계(레벨)를 채워 넣어 게임을 완성해 가요.
아티스트 · 사운드 디자이너 · 레벨 디자이너여러 사람이 직접 해 보며 버그(고장 난 곳)와 너무 어렵거나 쉬운 곳을 찾아요.
QA 테스터 · 플레이 테스터세상에 내놓고, 사람들 의견을 들으며 계속 고쳐서 새 버전을 내요.
모두 함께테스트 → 고치기 → 다시 테스트는 한 번에 끝나지 않고 여러 번 돌아요. 유명한 게임도 수백 번 고쳐서 나와요.
우리는 역할을 이렇게 나눠요. 코드는 AI가 짜지만, 어떤 게임을 만들지는 내가 정해요.
기획서를 쓰고, 프롬프트를 조립해 AI에게 일을 시키고, 결과를 보고 고칠 점을 정해요.
내 프롬프트를 읽고 HTML 코드를 짜요. 내가 자세히 말할수록 내 생각에 가까운 게임이 나와요.
내 게임을 직접 해 보고 안 되는 곳, 더 재미있어질 방법을 알려 줘요.
진짜 게임 제작 과정과 우리 활동을 짝지어 보았어요.
| 제작 단계 | 우리가 하는 일 | 어디서? |
|---|---|---|
| 기획 | 좋아하는 게임을 떠올리고, 장르·목표·인물·배경·스토리·규칙을 정해 기획서를 써요. | 학습지 1~5쪽 |
| 프롬프트 조립 | 기획서 내용을 색깔 블록으로 조립판에 끼워 AI에게 보낼 프롬프트를 만들어요. | 2 프롬프트 조립 |
| 프로토타입 | 프롬프트를 태블릿의 생성형 AI에 넣어 게임 코드를 받고, Acode에서 index.html로 저장해 ▶ 실행해요. 이때는 도형과 이모지로 된 시험판이에요. | 3 AI로 만들기 |
| 테스트 | 친구와 바꿔서 해 보고 체크리스트로 점검해요. | 4 테스트·고치기 학습지 6쪽 · 별지 A |
| 업데이트 | 고칠 점을 블록으로 모아 “고쳐 줘” 프롬프트를 보내고 버전을 올려요. | 4 테스트·고치기 |
| 제작 (그림) | 게임이 잘 돌아가면 직접 그리거나 나노바나나로 만든 그림을 넣어 꾸며요. | 5 그림 넣기 별지 B |
왼쪽 블록을 오른쪽 조립판으로 끌어다 놓거나, 한 번 톡 누르면 알맞은 칸에 쏙 들어가요. 흰 빈칸에는 내 기획을 써요.
완성된 프롬프트를 복사해 태블릿의 생성형 AI에 보내고, 받은 코드를 Acode에서 실행해요.
왼쪽 노란 버튼을 눌러요.
태블릿의 생성형 AI 앱 채팅창을 길게 눌러 붙여 넣고 보내요. AI가 코드를 다 쓰면 코드 칸의 복사 버튼을 눌러요.
태블릿에서 Acode 앱을 열어요.
Acode에서 새 파일을 만들어요.
이름 칸에 index.html을 써요. 끝의 .html이 꼭 있어야 게임으로 열려요.
화면을 길게 눌러 붙여 넣고 저장해요. 맨 위가 <!DOCTYPE html>, 맨 아래가 </html>인지 확인해요.
Acode의 세모(▶) 버튼을 누르면 게임이 열려요.
index.html
AI가 고친 코드를 주면 index.html의 내용을 모두 지우고 새 코드로 바꿔 붙여 넣은 뒤 다시 ▶을 눌러요.
AI가 “코드를 만들었어요”라고 설명만 하고 코드를 안 보여 줄 때가 있어요. 같은 대화창에 아래 말을 복사해서 보내요.
</html>로 끝나지 않거나, ▶을 누르면 하얀 화면만 나올 때
미리 막기: Gemini 입력창 근처의 도구 메뉴에서 Canvas가 켜져 있으면 끄고 보내요. 프롬프트에도 “Canvas를 쓰지 말고 채팅에 바로 써 줘”가 들어 있어요.
친구에게 내 게임을 맡겨 보고, 고칠 점을 블록으로 모아 “고쳐 줘” 프롬프트를 만들어요.
게임 회사도 고칠 때마다 버전 번호를 올려요. 고치기 프롬프트를 보낼 때마다 한 칸씩 올려요.
한 번에 너무 많이 고쳐 달라고 하면 AI가 헷갈려요. 한 번에 2~3개씩 고쳐요.
같은 AI 대화창에 이어서 보내야 AI가 어떤 게임인지 기억해요. 새 코드를 받으면 Acode의 index.html 내용을 모두 지우고 새 코드로 바꿔 붙여 넣은 뒤 ▶을 눌러요. 그림을 넣은 뒤라면 5단계 4번에서 다시 합쳐서 붙여 넣어요.
게임 속 그림의 주인은 나예요. 종이에 그린 그림을 사진으로 찍거나 태블릿에 바로 그린 다음, 작업실에서 직접 다듬어 게임 그림으로 만들어요.
AI는 사진 속 그림을 직접 고쳐 주지 못해요. 그래서 “고쳐 줘”가 아니라 “내 그림을 참고해서 새 이미지를 생성해 줘”라고 부탁해요. 내 그림과 닮게 그리도록 특징은 내가 자세히 적어요. 학교 계정에서 그림 만들기가 막혀 있으면 건너뛰어요. 위의 두 방법만으로도 게임에 그림이 들어가요.
기계가 대신 그려 주지 않아요. 내 그림을 그대로 두고, 바탕을 지우고, 테두리와 느낌을 내가 골라요.
「내 그림 시험 게임」을 누르면 AI 없이도 선반의 그림이 게임 속에서 바로 움직여요. 그림 크기와 바탕이 괜찮은지 먼저 확인해요.
선반에서 「게임에 쓰기」를 켠 그림만 들어가요. 게임을 만든 같은 AI 대화창에 보내요.
AI가 준 코드에 선반의 그림을 넣어 하나로 합쳐 줘요. 그림 파일을 따로 옮길 필요가 없어요.
그림을 넣은 뒤에 AI에게 또 고쳐 달라고 해서 새 코드를 받으면, Acode에 바로 붙이지 말고 꼭 여기서 다시 합쳐요. 그냥 붙이면 그림이 빠지고 도형으로 보여요.