Inspiration
What it does
How we built it
Challenges we ran into
Accomplishments that we're proud of
What we learned
What's next for 민즈 AI 공부게임 — 모험하며 배우는 수학·국어 RPG
Inspiration
아이들이 공부를 시작하기도 전에 “어렵다”, “재미없다”고 느끼는 문제에서 출발했습니다.
문제집처럼 정답만 요구하는 화면이 아니라, 아이가 캐릭터를 직접 움직이고 세계를 탐험하면서 자연스럽게 수학과 국어 문제를 만나도록 만들고 싶었습니다. 문제를 푸는 행동은 시험이 아니라 몬스터의 공격을 피하고, 길을 열고, 보물을 발견하는 모험의 일부가 됩니다.
민즈 AI 공부게임은 구독이나 유료 아이템 없이 누구나 즐길 수 있는 무료 학습 RPG를 목표로 합니다.
What it does
민즈 AI 공부게임은 유아와 초등학생을 위한 웹 기반 학습 RPG입니다.
- 캐릭터를 직접 움직이며 숫자 숲, 단어섬, 이야기 성을 탐험합니다.
- 수학·국어 문제를 풀어 보스의 공격을 피하고 반격합니다.
- 학년과 학기, 주차별 학습 목표를 선택할 수 있습니다.
- 이미 아는 내용은 건너뛰고 필요한 스테이지부터 시작할 수 있습니다.
- 부족한 개념은 훈련장에서 다시 연습할 수 있습니다.
- 코인, 보물, 장비와 인벤토리 보상으로 성장을 느낄 수 있습니다.
- 보호자는 Google 계정으로 로그인하고 여러 자녀의 진행 기록을 분리하여 관리합니다.
- 자녀별 스테이지 진행도, 학습 결과와 인벤토리는 Firebase에 안전하게 동기화됩니다.
- 친구와 6자리 참가 코드로 만나는 2인 협동 로비 기반도 제공합니다.
처음 방문한 아이에게는 짧은 게임 인트로가 세계관, 플레이 방법과 최종 목표를 설명합니다.
How we built it
애플리케이션은 Next.js 16, React 19와 TypeScript로 개발했습니다.
Phaser 3가 캐릭터 이동, 충돌, 맵 탐험, 몬스터와 전투 효과를 담당하고 React가 문제, 게임 상태와 접근성 UI를 관리합니다. 두 영역은 이벤트 브리지를 통해 연결하여 게임 화면 안에서 이동과 학습이 자연스럽게 이어지도록 구성했습니다.
탐험 맵은 Tiled 레이어 구조를 사용하며, CC0 오픈소스 게임 에셋을 32px 정수 배율로 통일하여 모바일에서도 선명하게 표시합니다.
보호자 인증과 자녀별 데이터 동기화에는 Firebase Authentication, Cloud Firestore와 Firebase Admin SDK를 사용했습니다. 아이에게 개인 Google 계정을 요구하지 않고 보호자 계정 아래에서 자녀 프로필을 분리합니다.
서비스는 Vercel에 배포했으며 Vitest, React Testing Library, Playwright와 Firebase Emulator를 사용해 게임 로직, 반응형 화면, 데이터 동기화와 보안 규칙을 검증했습니다.
Challenges we faced
가장 큰 과제는 게임과 공부가 서로 분리되어 보이지 않게 만드는 것이었습니다.
초기 버전에서는 전투 화면과 문제가 위아래로 나뉘어 아이가 스크롤하면 전투를 볼 수 없었습니다. 이를 해결하기 위해 문제와 선택지를 게임 HUD 안에 배치하고, 정답이 회피·방어·공격으로 즉시 이어지게 만들었습니다.
또 다른 과제는 휴대폰 세로·가로, 태블릿과 PC에서 동일한 경험을 제공하는 것이었습니다. 화면 비율과 안전 영역을 감지하여 캐릭터, 보스, HUD와 이동 버튼의 위치가 자동으로 조정되도록 개선했습니다.
Phaser 장면이 종료된 후 이벤트가 남아 Canvas 오류를 발생시키는 문제도 있었습니다. 장면 생명주기와 이벤트 구독을 정리하고 회귀 테스트를 추가하여 안정화했습니다.
마지막으로 여러 자녀의 진행 기록이 섞이지 않도록 인증, 저장 경로, 서버 검증과 Firestore 보안 규칙을 자녀 프로필 단위로 분리했습니다.
Accomplishments that we're proud of
- 문제 풀이와 전투를 하나의 게임 화면으로 통합했습니다.
- 유아와 초등학생에게 맞는 학습 단계와 주차별 목표를 구성했습니다.
- 숫자 숲, 단어섬, 이야기 성으로 이어지는 RPG 세계를 구현했습니다.
- 보스 공격 예고, 문제 기반 회피, 반격과 보상 흐름을 연결했습니다.
- 휴대폰·태블릿·PC에서 동작하는 반응형 게임 화면을 만들었습니다.
- Google 보호자 로그인과 자녀별 안전한 기록 동기화를 구현했습니다.
- 무료로 이용할 수 있으며 광고, 결제와 공개 채팅을 넣지 않았습니다.
What we learned
아이들을 위한 학습 게임에서는 기능의 수보다 즉각적인 이해와 반응이 중요하다는 것을 배웠습니다.
긴 설명보다 짧은 대사, 방향 표시, 캐릭터 행동과 보상 연출이 학습 목표를 더 쉽게 전달했습니다. 또한 오답을 실패로 끝내지 않고 힌트와 재도전으로 연결해야 아이가 계속 모험할 수 있다는 점을 제품 전반에 반영했습니다.
기술적으로는 React UI와 Phaser 게임 루프를 명확하게 분리하면서도 하나의 경험처럼 연결하는 방법, 모바일 브라우저의 화면 비율과 성능 차이, Firebase에서 보호자와 자녀 데이터를 안전하게 분리하는 방법을 배웠습니다.
What's next
다음 단계에서는 단어섬과 이야기 성의 NPC, 퍼즐과 보스를 확장하고 학습 결과를 바탕으로 필요한 연습을 더 친절하게 추천할 계획입니다.
실제 아이폰과 갤럭시에서 장시간 플레이 테스트를 진행하고 로딩 속도, 발열, 메모리와 터치 조작을 계속 개선할 예정입니다.
친구와 함께 탐험하고 문제를 해결하는 협동 기능도 확장하되, 점수 경쟁이나 공개 채팅 없이 서로 돕는 안전한 방식으로 발전시키겠습니다.
Log in or sign up for Devpost to join the conversation.