그록3 바이브 코딩과 Phaser를 이용한 웹 게임 'Cheese' 개발 기록
올해 초 안드레이 카파시(Andrej Karpathy)가 처음 개념을 제안한 이후 여러 ai 커뮤니티에서 바이브 코딩이 주목을 받고 있다. 얼마 전에는 인디해커인 피터 레벨스(Peter Levels)가 커서 ai로 바이브 코딩해 3d게임을 만들어서 바이브 코딩이라는 개념이 더 가능성을 보게 된 것 같다.
몇 년 전 취미 삼아 웹 게임 개발을 공부했다가 잠깐 접어뒀었는데, 최근의 ai 업계 업데이트들을 계기로 바이브 코딩에 도전해보았다. 사흘 정도 걸려서 간단한 2D 웹 게임을 만드는데 성공해서 게임을 소개하고 어떤 요소들에 주의해 작업했는지 기록해두겠다.
위 링크를 통해 실행해 볼 수 있고, 간단히 적들을 피해 노란 원을 모아 오면 되는 게임이다. 스프라이트 이미지는 없고, 그냥 점수 아이템이 노란색이라 치즈라고 이름 붙였다.
게임 규칙
 | |
|
게임에 처음 접속하면 이름을 입력하는 화면을 보여준다. 이름을 아무거나 입력하고 Start 버튼을 누르면 게임을 시작한다.
 |
| 치즈 게임 플레이 화면 |
플레이어는 검정색 원으로 표시된 캐릭터로, 플레이어의 본진인 회색 원 위에 시작한다. 키보드 방향키로 조작하거나 모바일에서는 터치한 기점을 기준으로 조이스틱처럼 조작하면 된다.
 | |
|
 | |
|
플레이어가 노란색 원인 치즈를 먹으면 플레이어 위에 표시된 점수가 올라간다. 본진인 회색 원으로 돌아오면 플레이어 캐릭터에 있던 점수가 본진에 표시된 점수로 치환된다. 본진에 있는 점수가 진짜 점수이다. 플레이어는 맵에 돌아다니는 적 유닛을 피해 무사히 치즈를 운반해와야 한다.
 | |
|
적은 일정 반경 안에 플레이어 캐릭터가 들어오면 추격해오기 시작한다. 플레이어가 적에게 충돌하면 게임이 종료되고 리더보드와 재시작 버튼이 나타난다.
개발 기록
개발 도구
개발은 자바스크립트를 이용한 게임 엔진 중 하나인 Phaser를 이용했다. Pygame이나 고도 엔진 같은 다른 게임 엔진을 고민하다가 html에 가장 친화적인 자바스크립트를 기반 언어로 결정했다.
node.js 설치부터 웹 호스팅을 통해 배포하기까지 모두 그록3와 챗지피티의 도움을 받았다. 게임 개발 방향은 계속 내가 컨트롤 했지만 배포하기까지 내가 직접 작성한 코드는 한 줄도 없을 뿐만 아니라 그록3가 제시한 방향을 상당 부분 따랐기 때문에 바이브 코딩이라고 부를 만한 작업인 것 같다.
데이터 베이스
리더보드를 구현하고 싶어서 데이터 베이스가 필요했다. 사용자 친화적이고 기능도 가벼운 Supabase 서비스를 이용했다. 처음에 파이어 베이스로 호스팅하고 파이어 스토어 데이터베이스를 이용해 리더보드를 구현하려고 했는데, 절차도 복잡하고 UI도 나와 맞지 않아서 포기했다.
호스팅
배포는 Vercel 서비스를 이용했다. GitHub랑 연동되어서 배포가 아주 쉬웠다. 처음에는 파이어베이스 호스팅 서비스를 이용했는데, 큰 이유는 없고 예전에 취미 삼아 이것저것 만들어 볼 때 써봐서 익숙해서 사용했다. 파이어 베이스에 배포하면 항상 새로운 파일로 업데이트되지 않는 문제가 생겼는데, 이번에도 자꾸 같은 문제에 부딪히니 스트레스 받아서 옮기기로 결정했다.
작업 기간
작업은 사흘 걸렸다. 게임 규칙이 매우 단순해서 첫 날에 플레이를 구현했지만, 리더보드 구현이 내 수준에서 어렵기도 하고 버그가 많이 생겨서 고치는데에 시간을 많이 할애했다.
바이브 코딩 팁
그록3의 도움을 받으며 게임을 배포하기까지 많은 시행착오가 있었기에 바이브 코딩을 하며 얻은 작은 팁을 몇 가지 남긴다.
단순한 게임 규칙
게임을 기획할 때 게임의 규칙은 최대한 간단하게 하는 편이 좋다. 직접 해보니 바이브 코딩은 아직 완전한 단계가 아니다. 해가 갈 수록 AI의 성능이 기하급수적으로 높아지고 있기 때문에 당장 내년만 되더라도 어떻게 될지는 모르겠지만, 현재 이 게임의 개발 시점에서 복잡한 게임 규칙을 구현하기에는 한계가 많았다. 물론 유료 버전인 슈퍼 그록이나 다른 ai챗봇의 최고 성능을 활용한다면 가능성이 있을지도 모르겠다. 현시점 그록3는 치즈게임을 완성한 것만 해도 놀라운 성과라고 생각한다.
실제로 치즈 게임을 처음 기획할 때에는 플레이어 시야 제한 등 다양한 기능을 추가하고 싶었다. 그러나 막상 해보니 지속적인 시도에도 불구하고 실패로 돌아갔다. 프롬프트를 다루는 실력이 미숙해서 일수도 있으나, 이 정도면 일반인이 바이브 코딩을 할 때 더 복잡한 기능을 구현하기를 기대하기는 힘들 것이라고 생각한다.
단일 요청
그록3든 다른 챗봇이든 한 번에 최소한의 요청만 하는 편이 좋다. 한 번에 여러 기능에 대한 추가나 수정을 요청하면 대부분 코드가 작동하지 않는 경험을 했다. 예를 들어, '먼저 흰색의 원으로 된 맵을 만들고 그 위에 검정색 원으로 된 플레이어 캐릭터를 만들어줘.'라고 하기보다 '흰색의 원으로 된 맵을 만들어줘.'라는 명령을 통해 코드가 정상 작동하는 모습을 확인하고, 다음 명령으로 플레이어 캐릭터를 만들어달라고 요청하는 편이 경험 상 훨씬 오류가 적었다.
단순히 변수 값을 여러가지 변경하는 경우처럼 간단한 작업이 아니라면 점진적으로 요청을 거듭하며 완성도를 높여나가야 최대한 오류 없이 원하는 방향으로 작업을 이끌기 좋은 것 같다.
피드백 최소화
한 번 요청한 코드에서 문제가 발생한 뒤, 수정 요청을 했는데 또 문제가 발생하면 새로운 요청을 하지 않고 처음 했던 요청을 수정하는 게 나은 것 같다. 대화가 지나치게 길어지지 않도록 하며, 요청 내용을 점검해 조금 더 정확한 내용을 전달하도록 하는 방법이다.
만약 ai가 여러가지 해결책을 제시하고 순차적으로 사용해보겠다고 하면 예외일 수 있으나, 그렇지 않은 경우 내가 요청한 내용이 ai가 이해하기 힘든 부분이 있었는지 다시 점검해 보면 좋을 것 같다. 또한 ai가 답변을 생성했는데 오류가 있을 때, 같은 요청 그대로 다시 시도하면 다른 해답을 내놓는 경우도 있다.
Deeper Search, Think 활용
그록3를 사용할 때 Deeper Search나 Think 기능을 적극적으로 활용하면 좋을 것 같다. 계속 버그를 만들던 답변도 해당 기능을 활용하니 정상 작동하는 답변을 만들어낸 경우가 많았다.
댓글
댓글 쓰기