Codex로 미니게임 웹사이트 만들기WM미니게임 제작기

브라우저에서 바로 가볍게 즐길 수 있는 웹 기반 미니게임 사이트를 직접 만들었습니다. 프로젝트 이름은 WM미니게임이며, 설치 없이 접속만으로 바로 플레이할 수 있도록 구성한 것이 핵심입니다.
이번 작업에서 가장 크게 활용한 도구는 Codex였습니다. 아이디어를 정리하고, 규칙을 코드로 바꾸고, 게임 화면을 다듬고, 반복 수정 요청을 빠르게 반영하는 과정까지 Codex와 함께 진행했습니다.
이 글에서는 WM미니게임이 어떤 프로젝트인지, Codex를 어떻게 활용했는지, 그리고 현재 들어가 있는 각 게임을 실제 화면과 함께 소개해보겠습니다.

WM미니게임 홈 화면
 

프로젝트 소개

WM미니게임은 한 화면 안에 여러 장르의 캐주얼 게임을 담은 웹 프로젝트입니다. 로또 번호 추천부터 추첨, 카드 뽑기, 운세 확인, 알까기, 슈팅, 장애물 피하기 레이스까지 한 번에 즐길 수 있도록 설계했습니다.
UI는 밝고 가벼운 분위기를 유지하면서도, 각 게임 페이지에서는 바로 플레이 감각이 느껴지도록 캔버스 기반 화면과 상태 패널을 함께 배치했습니다.
특히 최근에는 단순한 목록형 사이트가 아니라, 실제로 계속 손보며 성장하는 미니게임 플랫폼처럼 보이도록 구조와 디자인을 꾸준히 개선하고 있습니다.

Codex를 어떻게 활용했나

이번 프로젝트에서 Codex는 단순 코드 보조를 넘어서, 기획을 빠르게 구현 가능한 형태로 압축해주는 역할을 했습니다. 예를 들어 문장형 요구사항을 실제 동작하는 게임 규칙으로 바꾸는 데 큰 도움이 됐습니다.
또한 화면을 더 게임답게 보이게 하는 연출, 조작 안내 위치 수정, 가상 플레이어 추가, 난이도 조정, 피격 판정 보정처럼 반복적으로 바뀌는 요구사항도 Codex로 빠르게 반영할 수 있었습니다.
즉, Codex를 활용하면 아이디어를 오래 붙잡고 설명만 하는 대신, 바로 화면으로 확인하고 수정하는 작업 속도를 크게 높일 수 있다는 점을 이번 프로젝트에서 체감했습니다.

현재 구현된 게임 소개

1. 로또 번호 게임

1부터 45까지의 숫자 중 6개를 자동으로 추천해주는 게임입니다. 여러 줄의 추천 번호를 한 번에 보여주기 때문에 가볍게 번호를 뽑아보고 싶은 사용자에게 잘 맞습니다.

1. 로또 번호 게임 화면

2. 공 떨어뜨리기 추첨게임

참가자 이름이 적힌 공이 장애물 사이를 통과하며 내려가고, 도착 순서대로 결과가 정리되는 추첨형 게임입니다. 단순 랜덤 결과보다 보는 재미가 있어 이벤트용으로도 활용하기 좋습니다.

2. 공 떨어뜨리기 추첨게임 화면

3. 카드뽑기게임

카드 뒷면을 클릭해 숫자를 공개하는 방식의 뽑기 게임입니다. 공개된 순서가 기록으로 남아, 간단하지만 손맛 있는 랜덤 콘텐츠로 활용할 수 있습니다.

3. 카드뽑기게임 화면

4. 운세 확인

5개의 박스 중 하나를 고르면 오늘의 운세 메시지가 열리는 초간단 콘텐츠입니다. 짧은 체류 시간에도 바로 반응이 와서 캐주얼 페이지에 잘 어울립니다.

4. 운세 확인 화면

5. 알까기레이스

발사 게이지를 보고 원하는 타이밍에 GO를 눌러 목표 지점에 최대한 가깝게 붙이는 게임입니다. 단순 조작이지만 의외로 거리 감각과 타이밍이 중요해 승부 요소가 살아 있습니다.

5. 알까기레이스 화면

6. 알까기

흑돌과 백돌이 10개씩 배치된 상태에서 상대 돌을 모두 밀어내는 대전형 미니게임입니다. CPU 상대, 돌 배정 랜덤, 보드 하단 발사 게이지 등 실제 플레이 흐름을 살리도록 구성했습니다.

6. 알까기 화면

7. Air Strike

비행기를 움직이며 장애물을 피하고 생존 시간을 버티는 액션 슈팅 게임입니다. 브라우저에서 바로 실행되지만, HUD와 레벨 구조를 넣어 아케이드 감각을 강조했습니다.

7. Air Strike 화면

8. 장애물 피하기 레이스

현재 레이싱 파트는 단일 차량 생존형 모드로 바뀌어, 3분 동안 다가오는 장애물을 피하며 버티는 게임으로 발전했습니다. 시작 전 조작 안내, 난이도 상승, 충돌 카운트까지 즉시 확인할 수 있어 프로젝트의 대표 게임 중 하나로 밀고 있습니다.

8. 장애물 피하기 레이스 화면

이 프로젝트를 홍보하고 싶은 이유

WM미니게임은 단순히 게임 몇 개 넣은 페이지가 아니라, 실제로 피드백을 받아 계속 다듬고 있는 살아 있는 작업물이라는 점에서 의미가 있습니다.
특히 Codex를 활용하면 아이디어를 구현물로 옮기는 속도가 빨라집니다. 혼자서도 빠르게 프로토타입을 만들고, 수정 지시를 여러 번 반영하면서 게임 완성도를 끌어올릴 수 있다는 점을 보여주고 싶었습니다.
미니게임 사이트를 직접 만들어보고 싶은 분, 사이드 프로젝트를 빠르게 구체화하고 싶은 분, 또는 AI와 함께 웹 콘텐츠를 제작해보고 싶은 분들에게 좋은 사례가 될 수 있다고 생각합니다.

마무리

이번 WM미니게임 프로젝트는 Codex를 활용해 아이디어 정리, 화면 개선, 게임 로직 구현, 디버깅, 문서화까지 이어간 작업입니다. 실제로 해보니 AI를 잘 쓰는 핵심은 한 번에 완벽한 답을 기대하는 것보다 짧게 만들고 바로 수정하는 반복에 있었습니다.
앞으로는 게임 수를 더 늘리고, 난이도 곡선과 시각 연출을 더 다듬어 하나의 작은 웹 게임 아카이브처럼 키워갈 계획입니다.
브라우저에서 바로 즐길 수 있는 미니게임 프로젝트를 만들고 싶다면, Codex와 함께 시작해보는 방법을 추천드립니다.
 
게임을 플레이하고 싶으시다면 https://jjgamewebmob.pages.dev/