AI 리터러시 퀴즈 게임 만들기 — 수업용 웹게임 (바이브코딩 #5)

안녕하세요. 인공지능으로 인생 점프하고 싶은 AI점퍼입니다.

저는 청소년 교육자료도 만들고 있습니다. 이번에는 중학생을 대상으로 AI를 다루는 수업에 쓸 자료를 준비했습니다. 개인정보를 넣어도 되는지, AI가 준 답을 어떻게 확인할지처럼 실제 사용과 연결되는 내용을 담고 싶었습니다.

설명 자료와 함께 쓸 수 있도록, 캐릭터를 움직이며 문제를 푸는 게임을 AI와 만들어봤습니다. 이름은 ‘AI 연구소 탐험대’입니다. 연구소 안의 다섯 개 방을 돌아다니며 문제를 풀고, 틀린 답은 해설을 읽은 뒤 다시 고를 수 있게 했습니다.

이 글에서는 게임을 어떻게 구성했고, 수업에서 어떤 순서로 써볼 수 있는지 보여드리겠습니다. 아직 학생들과 수업에 사용하지는 않았고, 아래는 브라우저에서 직접 실행한 화면입니다.

게임 열기에서 직접 볼 수 있습니다.

수업 내용을 다섯 개 방으로 나누기

만들기 전에 대상과 조작 방식부터 정했습니다. 중학생이 읽을 한국어로 쓰고, PC에서는 방향키와 Enter로 움직이게 했습니다. 태블릿용 방향 버튼도 넣었습니다. 실제 태블릿에서의 조작은 아직 확인하지 않았습니다.

수업 주제는 개인정보 보호, 프롬프트 작성, 데이터 편향, AI 결과 검증, AI 윤리입니다. 주제마다 방을 하나씩 두고, 로비에서 원하는 방으로 들어가도록 구성했습니다. 프롬프트는 AI에게 원하는 일을 부탁하는 문장입니다.

이 조건을 적어 AI에게 구현을 요청했습니다. 나온 게임을 실행해보고, 움직임이나 화면이 이상한 부분을 다시 고쳤습니다.

현재 게임에는 방마다 네 문제씩, 모두 스무 문제가 들어 있습니다. 미리 정한 문제와 보기, 해설을 브라우저에서 보여줍니다. 문제를 풀 때 실제 AI에게 질문을 보내지는 않습니다. 게임을 열기 위해 별도의 AI API 키를 입력할 필요는 없습니다.

정답보다 다시 고르는 과정 넣기

프롬프트 방에서는 ‘화성에 대해 조사할 때 어떤 부탁이 더 구체적인가’를 묻습니다. ‘화성’ 한 단어만 보내는 보기와, 중학생을 대상으로 탐사 역사를 다섯 줄로 요약해 달라는 보기를 함께 넣었습니다.

주제·대상·형식을 적는 방법을 비교하는 문제입니다. 부탁을 구체적으로 써도 답이 틀릴 수 있으니, 사실 확인은 다른 미션에서 따로 다룹니다.

틀리면 바로 끝내지 않고 설명을 읽은 뒤 다시 고르게 했습니다. 첫 시도에 맞히면 20점, 한 번 틀린 뒤 맞히면 10점, 그다음부터는 5점을 주는 방식입니다. 배지는 재도전 여부와 관계없이 미션을 끝내면 받습니다.

이번에는 일부러 첫 문제를 틀리고 다시 풀었습니다. 나머지 세 문제를 첫 시도에 맞혔더니 70점으로 표시됐습니다. 새로고침한 다음 ‘이어하기’를 눌렀을 때도 완료한 미션과 점수가 남아 있었습니다. 이 저장은 같은 브라우저에 남는 기록이라, 다른 기기에서 이어지는 계정 저장은 아닙니다.

게임 시작부터 문제 풀이·재도전·이어하기까지 실제 조작 녹화 보기

수업에서 활용하기

게임을 열어 원하는 미션을 고르고, 문제를 푼 뒤 보기와 해설을 함께 이야기하는 수업을 준비했습니다. 게임 안에서 입력한 질문을 실제 AI에게 보내는 기능은 없으므로, 직접 AI를 사용하는 실습과는 나눠 진행해야 합니다.

수업안은 45분 한 차시 안에서 게임과 토론을 묶는 구성으로 준비했습니다. 실제로 몇 분 걸리는지, 문제가 학생들에게 쉬운지 어려운지, 설명이 도움이 되는지는 학생들과 사용해봐야 알 수 있습니다. 점수로 학습 효과를 확인한 것은 아닙니다.

문항과 대사는 게임 동작 코드에서 따로 나눠뒀습니다. 내용을 바꾸려면 소스 파일을 수정하고 다시 빌드해야 합니다. 웹에서 선생님이 바로 문제를 편집하는 관리 화면은 아직 없습니다.

그래픽에는 Kenney Tiny Town과 Tiny Dungeon의 CC0 에셋을, 글꼴에는 Galmuri를 사용했습니다. 그림까지 모두 AI로 만든 게임은 아닙니다.

수업에 쓰기 전에는 문항과 해설을 다시 읽고, 사용할 기기에서 조작을 확인하려고 합니다. 점프!