👋 들어가며: 왜 하필 "웹" 축구 게임인가?
안녕하세요, 1인 바이브코딩 개발자 초데브입니다.
요즘 세상에 할 게임은 넘쳐납니다. 스팀에는 고퀄리티 게임이 가득하고, 모바일 앱스토어에도 매일 수백 개의 게임이 쏟아지죠. 그런데 문득 그런 생각이 들었습니다.
"학교 컴퓨터실이나 회사에서 몰래, 설치 없이 친구랑 한 판 할 수 있는 게임은 없을까?"
다운로드도 필요 없고, 로그인도 귀찮고, 그냥 URL 링크 하나만 던져주면 바로 접속해서 친구랑 내기를 할 수 있는 그런 게임.
다들 기억하실지 모르겠지만 '세포키우기(agar.kr)' 같은 게임이 엄청 흥행했었죠.
옛날 플래시 게임 감성이지만, 퀄리티는 2026년에 맞는 3D 라이브 멀티플레이 게임을 만들고 싶었습니다.
그렇게 [미니 축구 온라인 게임] 프로젝트가 시작되었습니다.
지금 바로 접속해서 플레이해보세요!. 닉네임만 입력하면 바로 필드 위에 설 수 있습니다.
👉 게임 하러 가기: https://football-game.link
미니축구 온라인 | 친구와 2인 대전 무료 게임
친구와 함께 즐기는 미니 축구게임! 설치 없이 브라우저에서 바로 대전. AI 전술로 실감나는 온라인 축구.
football-game.link
🛠️ 기술 선택을 내가 정해서 진행해볼까?
처음엔 당연히 게임 엔진(Unity, Unreal 등)을 고민했습니다. 하지만 바이브코딩으로 개발을 하기엔 게임 엔진 지식이 없는 저에게 너무 어려운 길이 될 것이라 판단하였습니다. 그래서 '웹'으로 개발을 하고자 마음을 먹었고, '상세한 기술스택도 정해야 하나?'라는 고민을 하고 있었습니다. 그러다 또다시 든 생각이 있었는데요. 아마 많은 분들이 생각중인 고민이었을 것 같아요.
"개발자의 개입 없이 바이브코딩만으로 어느정도까지 만들어낼 수 있을까?"
저는 그래서 아무 조건도 두지 않고 비개발자의 언어로 지시를 내려가며 게임 개발을 시작했습니다. 물론, 저는 프론트엔드 개발자이기 때문에 완전 비개발자보다는 알고 있는 지식이 있는 편인 것 같아요! 활용한 툴은 Antigravity였으며, gemini 3 pro 모델만 활용했어요.
💡 내가 AI에게 요구한 첫 요청사항은?
"2000년대 스타일의 축구 게임을 만들고싶어. 단순하고 캐주얼한 느낌의 미니게임이었으면 좋겠어.
접속하면 게임로비가 있고 로비에서는 방을 만들거나 참여할 수 있어야 해. 방에 들어가면 ai 선수를 생성하고 게임을 시작할 수 있어야 해. 물론 다른 사람이 접속할 수 있어야할거야.
캐릭터는 카카오 프렌즈의 jayg, tube, neo를 선택할 수 있으면 좋겠어.
전체적인 디자인은 너가 알아서 느낌을 살려줘."
저는 많은 요구사항을 말하지 않았어요. 단순히 머릿속에 떠오르는 게임의 흐름만 설명했죠. 그런데 나온 결과는 꽤나 상당한 결과였습니다.
로비, 방 대기실, Three.js 로 구현된 경기장의 모습, 경기장에 서있는 도형으로 만들어진 똑같이 생긴 선수들, 경기장 가운데 공, 양쪽 사이드에 있는 골대.
물론 잘 동작하지는 않았어요. 처음에는 로비와 방대기실만 확인 할 수 있는 정도였습니다. 방 생성도 안되고, 방 참여도 안되고...
특히 방 대기실에 존재하는 많은 기능들은 버그 투성이였죠. 그래서 계속 브라우저에서 직접 테스트하며 ai에게 에러와 버그를 수정하도록 시켰고, 발생할 수 있는 다양한 버그들을 잡기내기 위해 '000한 경우가 발생할 수 있으니 고려해서 상세하게 개발해. 너가 버그가 발생할 수 있는 더 다양한 상황을 생각해봐.' 라는 명령을 많이 하게 됐어요. 이때부터 gemini 모델이 계획(plan)을 짜면서 개발하기 시작하더라구요.
그렇게 50번 정도의 수정요청 핑퐁을 거쳐서 그제서야 게임화면을 확인할 수 있었습니다.
🕹️ 에러 투성이의 게임 진행 화면 어떻게 수정하지?
게임 화면 개발 과정은 그야말로 '에러와의 전쟁'이었습니다.
1. 내 선수가 움직이질 않는다
첫 게임 화면을 보고 기분이 좋았어요. "단순한 명령으로 게임화면을 이정도까지 구현해냈구나!" 라는 생각이 들었습니다. 하지만, 상대편 ai player는 움직이는데 제 선수가 움직이지 않더라구요... 게임 조작법도 모르는 상태였죠. 그래서 이때부터 게임 조작법을 정의하고 만들어가기 시작했어요. s는 패스, d는 슛, c는 카메라 전환, 방향키로 이동, shift는 달리기. 이때부터 내 생각대로 하나씩 만들어가는 재미가 쏠쏠하더라구요!
2. 골대에 골이 들어가도 점수 판정이 되지 않는다
내 캐릭터, 상대 캐릭터(ai) 모두 골대에 공을 넣어도 골 처리가 안되더라구요. 구현이 안되어있는 상태였어요. 그래도 이정도 구현해준 것에 감사하며, 골을 넣으면 중앙원에서 게임을 다시 시작하도록 ai에게 새로운 지시를 내렸어요. 그리고 확인해보니 점수판도 없더라구요... 점수판도 만들고 게임 시작할때와 골을 넣을 때 카운트다운이 필요하겠다고 생각이 들어 만들게 됐어요.
3. 선택한 캐릭터가 게임화면에 반영되지도 않고, 캐릭터 모양도 이상하다
로비에서 방을 생성하고 방 대기실에 진입해 선택했던 캐릭터(제이지, 튜브, 네오 중 택 1)가 게임 화면에 반영되지 않았어요. 알고보니 첫번째 케릭터인 제이지만 만들어주었더라구요. 그래서 복잡한 3D를 만들어보려 노력해봤지만, 아직 직접 모델링을 할 수는 없다고 ai가 완강히 거부했어요. 외부 모델을 만들어오라고 하더라구요... 그래서 "언젠가는 외부 3D모델을 꼭 만들어야겠다" 마음먹고, Three.js 기반의 도형으로 만들어 볼 수 있는 상태까지 캐릭터를 조금씩 수정해가며 3가지 캐릭터를 만들었습니다.
2. 경기장 밖으로 공이 날아간다. 경기장 테두리 부분에 선수가 접근하지 못한다.
조작키를 다 만들고 슛을 하는데 공이 경기장 밖으로 날아가서 사라졌어요. 그리고 공이 경기장 가장자리 부분에 위치하게 되면 그 공을 가지러 갈 방법이 없었어요. 선수가 경기장 가장 테두리 부분에 접근이 안되더라구요. 이런 에러를 고쳐가면서 3D 게임을 만들 때 어떤 점을 고려해야 하는지를 느끼고, 게임을 했던 경험을 살려 ai에게 수정요청을 지시해 나갔습니다.
🚀 결과: 3일 만에 만들어진 3D 멀티플레이 축구게임의 기본 골격
그렇게 3일간 밤낮으로 AI와 씨름해가며 기본적인 게임 골격을 완성했습니다. 물론 릴리즈(배포)도 안했고 제 PC와
동일 네트워크(로컬) 환경에서만 즐겨볼 수 있었어요! 그래도 3일만에 친구와 즐겨볼 수 있는, 아니면 수업시간에 몰래 할 수 있는 정도의 게임을 만들었다는 것에 기분이 좋았습니다. 로그인 기능도 없고 설치하는 것도 아니고 모바일 지원이 되는 것도 아니였지만, 작심 3일만에 이정도의 결과가 나왔다는 것을 보며 게임 개발에 있어 앞으로 3개월의 계획을 짜게 되었습니다.
아! 첫 바이브코딩 시작 날짜는 2025년 11월 18일 이였어요. 드디어 1차적으로 개발을 완성했다는 기분에 블로그를 시작했습니다.
글을 작성하고 있는 오늘은 바이브코딩 시작한 지 2달 된 시기이네요. 저의 순수한 바이브코딩 기록 즐겁게 봐주세요!
🔜 다음 예고
3일만에 기본 기능을 완성했지만, 친구에게 보여주고 돌아온 대답은 충격적이였습니다.
"야, 근데 캐릭터가 그냥 동그라미네? 몰입이 안 돼... 못생겼어..."
그래서! 다음 개발일지에서는 프론트엔드 경력자의 마음을 내려놓고,
"미니축구게임의 UI/UX를 바이브코딩으로도 개선할 수 있을까?"에 대해 이야기해볼까 합니다. 기대해주세요!
- 미니축구게임 내 전반적인 UI/UX 개선 가능할까?
- 방 대기실 UI 인터랙션은 어떻게 하지..?
- 3D모델링 없이 Three.js로 캐릭터와 애니메이션을 어디까지 커스텀 할 수 있지?
'취미 > 바이브코딩' 카테고리의 다른 글
| 📝 UI/UX 개선 2탄: 3D 모델링 캐릭터를 공짜로 만들기?! (feat. 바이브코딩) (3) | 2026.01.26 |
|---|---|
| 바이브코딩으로 만든 웹 미니 축구 온라인 게임, 이번엔 UI/UX 대수술! (feat. 모바일도 된다고?) (0) | 2026.01.23 |
