Claude Code로 “치매 예방-인지 훈련 게임” 만들기: 아이디어부터 웹 배포까지 🎮
소개
Claude Code를 활용해 간단한 웹 게임을 만들어보았습니다.
이번에 만든 게임은 화면에 제시되는 사자성어 초성을 보고 정답을 맞히는 방식의 인지 훈련 게임입니다.
🔗 게임 바로가기
https://sajaseong-chosung-game.vercel.app/
게임을 만들게 된 계기는 단순했습니다.
“AI 코딩 도구를 활용하면 아이디어만 가지고도 실제로 플레이할 수 있는 게임을 만들 수 있을까?”
이번에는 Claude Code를 개발 파트너처럼 활용해 기획한 내용을 코드로 구현하고, 실제 사용자가 접속할 수 있는 웹 게임으로 완성해보기로 했습니다.
이번 프로젝트의 목표는 다음과 같았습니다.
사자성어를 게임 방식으로 학습할 수 있게 만들기
설명이 없어도 쉽게 플레이할 수 있는 화면 구성하기
정답 확인과 다음 문제 진행 과정을 자연스럽게 연결하기
PC와 모바일 브라우저에서 실행되는 웹 게임 만들기
완성된 결과물을 Vercel에 배포하기
진행 방법
1. 사자성어 초성 게임 아이디어 구상
처음부터 복잡한 게임을 만들기보다는, 규칙을 한 문장으로 설명할 수 있는 게임을 만들고 싶었습니다.
최종적으로 정한 핵심 규칙은 다음과 같습니다.
사자성어의 첫 글자만 초성으로 보여주고, 사용자가 알맞은 사자성어를 맞힌다.
예를 들어 정답이 고진감래라면 문제 화면에는 다음과 같은 초성이 제시되는 방식입니다.
ㄱㅈㄱㄹ
사용자는 초성을 보고 정답을 떠올립니다.
아이디어를 정한 뒤에는 바로 코드를 작성하지 않고, 먼저 게임의 필수 기능을 정리했습니다.
사자성어 초성 퀴즈 웹 게임을 만들고 싶어.
게임 방식은 다음과 같아.
- 사자성어의 네 글자를 초성으로 보여준다.
- 사용자는 정답을 입력하거나 선택한다.
- 정답 여부를 알려준다.
- 정답을 확인한 뒤 다음 문제로 이동한다.
- 누구나 설명 없이 쉽게 사용할 수 있어야 한다.
2. Claude Code에 프로젝트 생성 요청하기
기능을 정리한 뒤 Claude Code를 실행하고 웹 프로젝트 생성을 요청했습니다.
“사자성어 초성 퀴즈 게임을 웹으로 구현해줘.”
3. 초성퀴즈 완성- 인지게임 패키지 기힉
초성퀴즈가 완성되어 인지게임 패키지 기획했습니다.
인지게임은 영역별로 카테고리를 기획하였습니다.
기억력/집중력/언어능력/계한력/판단력/반응력 등
여섯 개 영역에 대한 각각 두세 가지 정도의 게임 종류 아이디어를 달라고 했습니다.
4. 영역별 게임 제작
각 영역에 있는 게임 하나씩 Claude Code에서 만들어 달라고 요청했습니다.
Claude Code가 게임을 하나씩 만들어서 순차적으로 Vercel에 업로딩해 주었습니다.
5. Vercel에 게임 배포하기
로컬에서만 실행되는 프로젝트는 다른 사람에게 쉽게 보여주기 어렵습니다.
그래서 완성한 게임을 Vercel에 배포했습니다.
배포 과정에서는 다음 내용을 확인했습니다.
프로젝트 빌드가 정상적으로 완료되는가
배포 환경에서 정적 파일을 불러오는가
새로고침 후에도 페이지가 정상적으로 열리는가
모바일에서 주소에 접속할 수 있는가
로컬과 배포 버전의 동작이 동일한가
배포 후에는 별도의 설치 없이 주소만 공유하면 누구나 게임을 실행할 수 있게 됐습니다.
다만, 모바일 연동용 앱 및 게임이 작동할 때, 크기가 다소 크거나 글자 줄바꿈이 어색하게 처리되는 등 디자인상 불편한 점들이 있습니다.
이 부분은 앞으로 추가로 수정할 계획입니다.
결과와 배운 점
1. 막연한 아이디어를 기능으로 나누는 과정이 중요했다
처음에는 “사자성어 초성 게임을 만들고 싶다”는 아이디어만 있었습니다.
Claude Code는 코드를 빠르게 만들어줬지만, 어떤 경험을 만들 것인지는 사람이 먼저 결정해야 했습니다.
2. Claude Code에는 한 번에 하나씩 요청하는 것이 효과적이었다
처음부터 게임 전체를 완성해달라고 요청할 수도 있지만, 기능을 작은 단위로 나누는 방식이 더 효과적이라고 생각해서 하나씩 만들었습니다.
3. 완성보다 먼저 배포해보는 것이 도움이 됐다
기능을 계속 추가하다 보면 배포 시점을 놓치기 쉽습니다.
이번에는 핵심 기능이 동작하는 시점에 먼저 Vercel로 배포했습니다.
배포된 결과물을 직접 휴대전화로 실행해보니 로컬 환경에서는 발견하지 못했던 화면 크기와 조작 문제를 확인할 수 있었습니다.
또한 실제 주소가 생기니 다른 사람에게 게임을 공유하고 피드백을 받기도 쉬워졌습니다.
4. 다음에 개선하고 싶은 기능
현재 버전을 기반으로 다음 기능을 추가해보고 싶습니다.
제한 시간 모드
최고 점수 계산 공식 재검토
연속 정답 점수
틀린 문제 다시 풀기
로그인 날자별 점수 추이 비교 그래프
글자 크기 조절
효과음과 간단한 애니메이션
이번 프로젝트를 통해 Claude Code는 아이디어를 빠르게 실제 결과물로 바꾸는 데 유용한 도구라는 점을 배웠습니다.
아이디어로만 가지고 있던 사자성어 초성 게임을 실제 웹 주소로 공유할 수 있게 됐다는 점에서 의미 있는 프로젝트였습니다. 🎮
