초등학생 아들의 아이디어를 게임으로!
AI로 2시간 만에 미니게임 만들기 경험담
많은 분들이 ‘개발 지식 없이 게임을 만드는 건 불가능하다’고 생각하시죠. 저 역시 그랬습니다. 하지만 최근, AI를 활용하여 단 2시간 만에 간단한 미니 게임을 만들면서 생각이 완전히 바뀌었습니다. 마치 비개발자 조쉬님이 바이브코딩으로 SaaS 서비스를 만들었던 경험처럼, 저 또한 AI 덕분에 상상만 했던 게임 개발의 문턱을 넘어설 수 있었습니다.
초등학생 아들의 게임 기획 노트를 펼치다 - 아이디어 구체화 with AI
이야기는 초등학생 아들의 공책에서 시작되었습니다. 젤라임이라는 주인공이 UFO를 타고 우주를 모험하는, 귀여운 그림으로 가득 찬 게임 아이디어 노트였죠. 어릴 적부터 게임 개발자를 꿈꿨던 저는 아들과 함께 게임을 만들어보기로 결심했습니다. 아들은 기획자, 저는 개발자, 아내는 그래픽 디자이너 역할을 맡기로 했죠.
초등학생 아들의 게임 아이디어
이 추상적인 아이디어를 현실로 가져오기 위해 가장 먼저 AI의 도움을 받았습니다. 아들의 노트에 담긴 스토리를 AI에게 설명하고 ("젤라임이라는 젤리 캐릭터가 UFO를 타고 우주에서 입 큰 몬스터를 피해 점프하는 게임 아이디어가 있는데, 이걸 모바일 게임 홈 화면 디자인으로 만들어줄 수 있을까?" 와 같이 구체적인 프롬프트로 요청했죠), AI가 제안하는 여러 시안들을 보며 발전시켜 나갔습니다.
ai가 마법같이 디자인해준 모바일 게임 ui
처음에는 깔끔한 그래픽 스타일의 디자인을 받았지만, 저는 게임 플레이에 바로 적용할 수 있는 픽셀 아트 느낌을 원했어요. "이 디자인을 픽셀 아트로 바꿔주고, 주인공 젤라임 캐릭터를 표현해줘" 라고 다시 요청하니, AI는 마치 마법처럼 귀여운 픽셀 캐릭터 스프라이트를 뚝딱 만들어주었습니다. 배경과 몬스터 캐릭터 디자인도 같은 방식으로 AI와 소통하며 완성했습니다.
픽셀 아트로 변신한 ufo 젤리 캐릭터
픽셀 아트로 변신한 캐릭터와 걸맞는 배경화면과 입을 크게 벌린 몬스터도 만들어달라고 부탁했습니다. 아주 귀엽고 마음에 드는 배경화면과 캐릭터, 몬스터가 완성되었습니다.
ChatGPT가 만들어준 배경화면
친절한 AI 게임 개발 선생님, ChatGPT - 개발 방법을 배우고 코딩하기
이제 젤라임 캐릭터를 움직이게 만들어야 했습니다. 하지만 저는 게임 개발 방법을 전혀 몰랐죠. 그래서 ChatGPT에게 저의 상황을 설명하고 기초부터 차근차근 가르쳐달라고 부탁했습니다.
"저는 웹 브라우저에서 돌아가는 아주 간단한 2D 점프 게임을 만들고 싶습니다. HTML, CSS, JavaScript를 사용하려고 하는데, 어디서부터 시작해야 할까요?" 라고 질문하며 AI 선생님과의 학습이 시작되었습니다.
친절한 개발 과외선생님 ChatGPT
폴더구조와 코드
ChatGPT는 가장 먼저 프로젝트를 위한 기본적인 폴더 구조부터 알려주었습니다. game_folder를 만들고 그 안에 index.html 파일을 만들라고 가이드해주었죠.
다음으로는 index.html 파일에 들어갈 기본적인 HTML 코드를 알려주었습니다. 게임 화면이 될 <canvas> 태그를 포함한 기본적인 웹 페이지 구조를 복사+붙여넣기만 하면 되도록 제공해주었죠.
저는 AI가 알려준 코드를 Visual Studio Code(VSCode)에 붙여넣고, 동작하지 않는 부분이 있으면 "여기서 이런 오류가 나는데 어떻게 해결해야 할까?" 하고 다시 AI에게 물어보며 문제를 해결해 나갔습니다. 마치 숙련된 개발자가 옆에서 페어 코딩을 해주는 느낌이었죠. 중간중간 어려운 용어가 나오면 "이게 무슨 뜻이야?" 하고 물어보며 개념도 함께 익혔습니다.
Github에 올리고 Vercel로 배포하기 - 세상에 나만의 게임을 공개하다
개발 과정에서 만든 코드를 효율적으로 관리하고, 나아가 다른 사람들과 공유하거나 웹사이트 형태로 공개하는 방법도 AI에게 배웠습니다.
"제가 만든 게임 코드를 인터넷에 올리고 다른 사람들도 볼 수 있게 하려면 어떻게 해야 하나요?" 하고 물었더니, ChatGPT는 Github라는 코드 저장소를 사용하는 방법을 알려주었습니다. Git 초기화(git init), 변경 내용 추가(git add .), 변경 내용 확정(git commit), 원격 저장소 연결(git remote add origin [제 Github 저장소 주소]), 코드 업로드(git push)와 같은 기본적인 Git 명령어들을 알려주고 따라 하도록 도왔습니다.
코드가 Github에 안전하게 저장된 후에는 이 게임을 웹사이트처럼 실행할 수 있도록 Vercel이라는 배포 서비스를 사용했습니다. Vercel은 Github와 연동하여 코드가 업데이트될 때마다 자동으로 웹사이트를 새로 만들어주는 편리한 서비스였습니다. AI는 “Github에 올린 웹 프로젝트를 Vercel로 배포하는 방법을 알려줘”라는 요청에 따라 Vercel 웹사이트에서 제 Github 계정을 연결하고 해당 게임 저장소를 선택하는 단계들을 안내해주었습니다. 몇 번의 클릭만으로 https://ufo-game-orcin.vercel.app/ 와 같이 세상에 공개되는 저만의 게임 링크를 얻을 수 있었습니다.
완성된 미니게임 모습
2시간 만에 완성된 나만의 미니 게임! - 기능 구현의 성취감
그렇게 AI 선생님의 도움을 받아 단 2시간 만에 간단한 미니 게임의 핵심 기능을 완성할 수 있었습니다! 비록 처음에는 픽셀 조각이 깡총거리는 것처럼 보였지만, 점프 기능이 실제로 작동하고, 장애물이 나타나고, 피할 때마다 점수(거리)가 올라가는 것을 눈으로 확인했을 때의 성취감은 정말 대단했습니다. "내가 게임을 만들었다니!?" 라는 신기한 마음과 함께 'AI와 함께라면 무엇이든 만들 수 있겠다'는 자신감이 생겼죠. 앞으로 AI와 함께 아들의 디자인을 게임에 적용하고, 더 많은 종류의 미니 게임을 만들어볼 생각입니다.
물론 아직 멋지게 만들어진 픽셀아트 캐릭터를 게임에 적용해야 하는 단계가 남아 있고, 게임의 재미를 업그레이드 하기 위한 작업들이 남아있지만, 게임 기능 구현을 AI의 도움을 받아서 혼자서 완성했다는 성취감이 들었습니다.
혼자가 아닌 함께, AI 게임 공방 - 당신의 꿈을 응원하며
저는 이 놀라운 경험을 더 많은 사람들과 나누고 싶었습니다. 개발 지식이 전혀 없던 저도 AI와 함께라면 이렇게 빠르게 무언가를 만들어낼 수 있다는 것을 보여주고 싶었죠. 그래서 텀블벅에서 “AI와 함께 미니게임을 만들어보장”이라는 온라인 워크숍 프로젝트를 시작했습니다. 이 프로젝트는 단순한 강의를 넘어, 후원자분들이 저와 함께 AI를 활용해 직접 자신만의 미니 게임을 만들고, 그 과정을 공유하며 다 함께 결과물(미니게임과 제작 노하우를 담은 전자책)을 만들어가는 신개념 협업 프로젝트입니다.
Claude로 제작한 ai 미니게임 워크숍 랜딩페이지
AI 와 함께라면, 누구나 게임을 만들 수 있습니다.
어릴 적 게임 개발자를 꿈꿨던 분들, 자녀와 함께 게임을 제작하는 특별한 경험을 하고 싶은 분들, 혹은 AI를 활용해 나만의 무언가를 만들어보고 싶은 분들 모두 환영합니다. 이 프로젝트를 통해 여러분도 자신만의 상상력을 코드로 만들고, 세상에 단 하나뿐인 미니 게임을 완성해보세요!
자세한 프로젝트 소개와 참여 방법은 아래 텀블벅 링크에서 확인해주세요!
