안녕하세요. 1인 바이브코딩 개발자 초데브입니다!
지난 포스팅에서 예고했던 UI/UX 개선 편이에요! 혼자 AI한테 지시해가며 게임을 만들어가는 중인데, 원래 제 직업이 프론트엔드 개발자인지라... 처음 만들어준 디자인을 지켜보고 있기가 너무 힘들었어요. 하지만 과연 바이브코딩으로 얼마나 할 수 있을지를 평가해보고 싶은 마음이 컸어요. 그래서
"프론트엔드 개발자로서 내가 알고있는 직무에 대한 지식을 최대한 제외하고 바이브코딩으로만 만들어보자!"
라는 마인드로 UI/UX 개선 대수술을 시작했습니다!
지금 바로 접속해서 플레이해보세요! 닉네임만 입력하면 바로 필드 위에 설 수 있습니다.
👉 게임 하러 가기: https://football-game.link
미니축구 온라인 | 친구와 2인 대전 무료 게임
친구와 함께 즐기는 미니 축구게임! 설치 없이 브라우저에서 바로 대전. AI 전술로 실감나는 온라인 축구.
football-game.link
🤔 왜 UI/UX를 손봐야 했나?
"요즘 시대에 PC로 미니 게임을 즐길 사람이 얼마나 있을까?"
맞습니다. PC로만 동작하도록 개발이 되어있다보니 처음 목표했던 학교 컴퓨터실, 회사 쉬는시간에만 즐길 수 있는 게임밖에 안되겠다 라는 생각이 들었습니다. 그래서 "이 게임을 반응형 웹으로 만들면 더 다양한 사람들이 참여할 수 있지 않을까?" 라는 생각과 함께 전체적인 UI/UX개선을 진행하게 되었습니다. 아래는 처음 개발 된 화면의 모바일버전이에요... 게임 시작 버튼도 없고, 캐릭터 선택 버튼도 없고..
게임화면은 아예 볼 수 조차 없었어요!
UI/UX 개선 전의 화면은 아래 글에서 자세히 확인 가능합니다!
https://ohcho-dev.tistory.com/3
📱 1단계: 먼저 로비와 방 대기실을 반응형 웹으로 만들어보자.
게임을 시작하기 전 화면인 로비와 방 대기실 조차 모바일에서 사용할 수 없는 상태였기에 그 부분들부터 먼저 개발을 해야겠다고 생각했어요. 그리고 최초에 만들어준 디자인이 너무 투박한 모양이라 그것도 바꿔달라고 요청했어요.
"모바일에서도 게임을 즐길 수 있도록 로비와 방 대기실 UI를 개선해줘.
게임화면은 나중에 작업할거야."
개인적으로 비개발자로서 AI를 활용해서 개발하는 요소들 중에 이 작업이 가장 답답했어요! 위처럼 지시를 했을때 혼자 html/css를 분석하더니 열심히 반응형 코드를 작성해주더라구요. "알아서 media query를 사용해서 만들어주네? 대박이다!" 라고 생각하며 게임을 실행해본 순간 실망감만 가득했습니다. 아무래도 제 원래 직업이 프론트엔드 개발자라서 더 그렇게 느낀것 같기도 하네요. 마치 개발 교육 학원에서 html/css를 이제 막 배워가고 있는 신입 개발자가 만든 결과물같은 느낌이였어요. 디바이스 별 적용할 width 크기도 이상한 값으로 대충 잡아주고, 디바이스의 화면 크기(vh, dvh, svh 등)에 맞춰 개발해야 하는 것을 잘 못하는 느낌이였어요. 그래서 이 부분은 어쩔 수 없이 아는 지식으로 세세한 가이드를 주면서 개발 할 수 밖에 없었습니다. 제가 직접 코드에 개입했어야 하는 부분이 너무나도 아쉬웠습니다.
✨ 2단계: 로비랑 대기실을 조금만 더 보기좋은 UI로 바꿔볼까?
처음 게임을 만들고 gemini 나노바나나를 사용해서 만들었던 og-image가 기억이 났어요. 네온 색을 포인트로 만들어줬었거든요.
**og-image(오픈 그래프 이미지)는 카카오톡, 페이스북, 인스타그램 등 소셜 미디어나 메신저에 웹 페이지 링크를 공유할 때 미리보기로 표시되는 대표 썸네일 이미지입니다!**
"og-image를 참고해서 로비와 대기실의 UI를 디자인해보자. 로비에는 생성된 방의 리스트가 추가됐으면 좋겠어. 그리고 방 대기실에는 각 팀의 색상이 명확하게 구분되어야 해. 앞서 개발한 반응형 코드는 망치면 안돼!"
그리하여 위처럼 지시를 하게 됐어요. 그랬더니, antigravity gemini 3 pro 모델이 '마치 사이버 펑크의 느낌이군요!' 라고 인식을 하며 로비와 방 대기실 디자인에 대해서 색상, 버튼, 각종 애니메이션 효과 등을 세세하게 개선해주더라구요. 그리고 요구했던 방 리스트 기능과 추가 요소들도 잘 반영해주었어요. 이때는 제가 직접 개입해서 추가적으로 코드 수정 요청하는 요소들이 많지 않았어요!
필요에 맞는 정확한 레이아웃을 개발하는 능력은 부족한 친구였지만, 단순한 요청에 이정도의 퀄리티로 만들어주는 것을 보면 각각의 요소들을 꾸미는 능력은 빠르고 좋다는 생각이 들었어요.
물론! 디자인이 유치하고 ai로 만든게 티난다고 생각하시는 분들도 있을거에요! 하지만, 저는 처음 만들어보는 게임 개발이며, 미니 게임으로 제작하는게 목표였기에 이정도면 만족하고 넘어가자! 라고 생각했습니다.
팁! '앞서 개발한 반응형 코드는 망치면 안돼!'와 같은 지시를 함께 해야 수정한 부분들을 조심하며 추가 개발을 해주더라구요!
AI Player를 생성하는 방식, 팀 이동 방식 등 몇가지 요소들이 많이 아쉬웠지만, 우선 넘어가고 싶었어요! 전체적인 사용성 개선은 제가 시간내서 제손으로 하는게 빠르겠다고 생각했거든요. 그래서 나중에 제가 해야 할 과제로 남겨두었습니다.
다만, 화면의 배경이 단순히 검정색이고(배경을 깔아주지 않고) 캐릭터에 대해서 아직도 글자로만 표기하고 있는것이 너무 아쉬워 몇가지만 더 요청했어요.
"로비와 방 대기실 뒤에 사이버펑크 느낌의 배경을 추가하고 싶어. 배경은 축구 경기장의 모습이면 좋겠어.
그리고 방 대기실에서 캐릭터들이 어떻게 생겼을지 알면 좋을 것 같아."
그리하여 하기 이미지들과 같은 결과를 만들어내게 되었습니다. 어때요? 이정도면 그래도 게임 화면이구나! 하고 눈에 들어오겠죠??
🎮 3단계: 게임 화면도 모바일로 즐길 수 있도록 만들어줘.
드디어 게임화면으로 넘어왔어요. 하루만에 하기는 어렵더라구요. UI/UX 개선 이틀차였습니다. Antigravity의 새로운 대화를 만들어서 앞에 개발을 함께 했던 대화를 읽도록 먼저 시켰어요. 어떤 개발을 해왔는지 아는 상태로 개발하기를 기대했습니다.
"모바일에서 게임을 진행할 수 있도록 전체적으로 코드를 개선해줘."
해야할 것들이 많아보였는지 반응형과 관련된 계획을 세우고, 추가해야할 UI 요소 기획을 먼저 진행하더라구요.
그다음, Three.js로 구현 된 경기장, 캐릭터(선수)가 반응형에 맞춰서 개발되어있지 않아서 이부분을 먼저 개발해주었습니다.
화면 크기가 바뀌면 카메라 비율이 조정되고, 렌더러 크기 조정이 되도록 몇가지 개발이 되었어요.
// 핵심 코드
onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
}
// 이벤트 리스너 등록 (170줄)
// 브라우저 창 크기가 바뀔 때마다 onWindowResize() 함수가 호출됩니다.
window.addEventListener('resize', () => this.onWindowResize());
// 카메라 종횡비 업데이트
// 화면 비율(가로/세로)에 맞게 카메라의 aspect 값을 재설정합니다.
this.camera.aspect = window.innerWidth / window.innerHeight;
// 프로젝션 매트릭스 업데이트
// 변경된 종횡비를 반영하기 위해 카메라의 투영 행렬을 다시 계산합니다.
this.camera.updateProjectionMatrix();
// 렌더러 크기 조정
this.renderer.setSize(window.innerWidth, window.innerHeight);
그리고 모바일에서 터치를 통해 게임을 즐길 수 있도록 화면 내 조이스틱과 각각의 액션 버튼들을 추가해주었어요. 이때, 역시나 레이아웃을 구성하는데 어려움이 있었어요. 아무래도 바이브코딩 모델로 사용한 Antigravity Gemini 3 pro가 게임용 반응형 레이아웃과 관련되서 개발을 능숙하게 해내지 못하는 것 같아요. 제가 직접 개입하여 조이스틱의 위치 수정과 버튼 크기, 텍스트 크기, 컬러 등을 조정할 수 밖에 없었습니다. 또한, 디자인이 반영되지 않아 투박한 모습의 부분들이 남아있었고, 누락된 기능들도 있어서 추가 요청을 했습니다.
- 점수판 디자인을 수정할거야. 팀의 점수를 알아볼 수 있도록 수정해줘.
- 카메라버튼과 조작안내 버튼이 누락됐어. 화면 우측 상단에 추가해줘.
특히, 모바일 웹 특성 상 주소표시줄이 있기에 이부분을 고려해서 UI를 짜주지 못하는 느낌이였습니다. 그래서 전체화면으로 게임을 진행할 수 있도록 추가 요청을 진행했습니다. 그리하여 아래와 같은 게임 모바일 게임 화면이 완성됐어요!
💬 결과와 느낀점
어때요? 이제 좀 즐길 만 한 게임처럼 보이나요? 시간을 내서 짬짬히 바이브 코딩으로 웹 미니 축구 온라인 게임을 개발한 지 2주일정도 진행 한 모습이에요. 엄청 고급진 느낌의 게임은 아니지만, 이제 나름 즐겨볼만한 상용화 가능한 게임이라 생각이 됐다고 상용화를 해보자고 마음먹고 웹 미니 축구 온라인 게임을 릴리즈(배포)하여 홍보해보자고 마음먹었어요. AI를 활용해 이것저것 만들고 있는 오픈카톡방 채널들을 통해 홍보한 결과 '와 대박!', '얼마나 걸렸어요?', '뭐로 만든거에요?', '게임 엔진은 어떤걸 쓰신거에요?', '캐릭터만 조금 더 고도화 되면 훨씬 재밌을 것 같아요!', '조금더 재미요소가 있으면 좋겠어요!' 와 같은 피드백을 얻을 수 있었습니다. 또, 직접 제 게임을 홍보해주겠다는 사람들도 존재했고, 본인들이 운영중인 웹사이트에 직접 게시하여 홍보해주신 분들도 계셨어요! 다들 너무 좋은 반응으로 게임을 즐겨주셔서 피드백해주신 내용들을 기반으로 추가 개발을 해봐야겠다 생각이 들었었습니다! 응원해주신 분들 너무 감사드립니다.
저 혼자서 멀티플레이로 2인 이상 함께 즐길 수 있는 3D 축구 게임을 개발했다는게 믿겨지지 않습니다. 확실한 바이브코딩의 장점은 "내가 뭘 원하는지 말로만 잘 표현하면 된다!" 라는 것이었습니다. 여러분도 만들고 싶은게 있으시다면 꼭! 도전해보세요!
아! 추가로 바이브코딩만으로 웹 반응형 레이아웃을 만들어가는 것이 쉽지 않다는 것을 느끼고 레이아웃을 잘 짤 수 있도록 Antigravity skills를 만들어봐야겠다는 새로운 목표가 생겼어요! 추후에 만들어서 꼭 공유하도록 하겠습니다!
🔜 다음 예고
다음엔 아마도... UI/UX 개선 글에 이어서
- 아무 지식 없이 바이브 코딩으로 Three.js를 활용한 캐릭터 디자인 및 움직임 개선해보기
- 무료 3D 모델링 서비스(생성형AI)를 활용해서 3D 모델링 캐릭터 만들어 게임에 적용해보기
- 게임 내 재미 요소 추가
오늘도 읽어주셔서 감사합니다. 🙏
바이브코딩 너무 재미있어요! 여러분도 평소 만들고싶었던게 있다던가 불편한 것을 개선하고 싶다고 생각해본 적이 있다면 꼭 해보세요~!
'취미 > 바이브코딩' 카테고리의 다른 글
| 📝 UI/UX 개선 2탄: 3D 모델링 캐릭터를 공짜로 만들기?! (feat. 바이브코딩) (3) | 2026.01.26 |
|---|---|
| 혼자 맨땅에 헤딩으로 만든 웹 3D 미니 축구 온라인 게임 (feat. 바이브코딩) (5) | 2026.01.21 |
