최근에 Gemini CLI가 출시되었고, 일정 쿼터 내에서 무료로 사용할 수 있다고 해서 Gemini CLI도 테스트하고 바이브 코딩으로 게임을 완성할 수 있는지 테스트도 할 겸 플래피 버드 카피 게임을 만들어 보았습니다.
최종 결과물은 아래 화면과 같습니다. (아래 사진들은 클릭하면 크게 볼 수 있습니다)
아래 화면은 gemini 실행 후 구글 계정으로 로그인하고 인터넷 검색 기능을 가졌는지 확인하기 위해서 테스트한 화면입니다.
그리고 바로 게임 개발을 주문했습니다.
“사진을 올리면 얼굴을 잘라내서 새 몸에 머리는 그 얼굴 사진을 넣어서 플래피버드 게임을 만들어줘. 웹브라우저에서 동작해야 돼. 만든 프로그램은 현재 폴더 아래 game라는 폴더에 생성해줘.”
아래와 같은 파일과 폴더가 생성되었습니다. models 폴더에는 사진에서 얼굴 추출을 위한 모델(faceapi.nets.tinyFaceDetector)이 들어가 있습니다.
단순 html, css, javascript만으로 구성되어 있습니다.
위 파일들을 github에 올리고, vercel과 연결하여 배포하였습니다.
아래 링크로 접속하여 게임을 해 볼 수 있습니다.
개선/추가 예정 사항
- SHARE 버튼 클릭 시 자신의 점수 화면으로 공유 처리, 현재는 URL 링크만 처리
- READERBOARD 기능 구현: Supabase 사용, MCP 툴로 처리 예정
- 아이템 효과 추가
후기
- 페이지 로딩 시 자바스크립트 오류가 발생했는데 여러 번 수정 요청하였으니 AI가 해결을 못하여 소스 코드 열어서 직접 오류를 찾아서 수정을 지시했습니다. 함수 중 닫는 괄호(})를 빼 먹었더군요. 문법 오류라서 쉽게 찾을 줄 알았는데 해결을 못하더군요.
- gemini cli는 gemini-2.5-pro와 gemini-2.5-flash 모델이 사용되며, 2.5-pro는 웹 검색 시 사용되는 것 같으며, 웹 검색이 사용되는 요청 몇 번이면 쿼터 제한에 도달합니다. 이때는 웹 검색이 발생하지 않게 명령을 보내면 2.5-flash로 계속 사용 가능합니다.
- 전체 게임 개발 중 가장 시간이 많이 걸렸던 부분은 이미지를 픽셀 아트화하는 과정에서 구름을 만드는 것이었습니다. 처음에는 타원으로 만들어졌으나 픽셀 처리하는데 그냥 큰 사각형을 생성하고, 여러 번 수정 요청하였으니 제대로 처리하지 못하여 Chat GPT의 도움을 받았습니다.
- 게임 개발 마지막 단계에서 개새 이미지를 첨부하여 같은 형식으로 제작 요청하느라 캐릭터 이미지 수정 및 애니메이션 효과를 부여하는 부분에서는 cursor를 사용했습니다. 로컬 폴더에 이미지를 올리고 gemini cli에게 요청해도 해결할 수 있지 않았을까 생각되기도 합니다.
- 소스 수정 후 웹서버를 재시작하는 과정에서 프로세스 종료를 못하여 대신 처리해달라고 요청을 하는 경우가 종종 발생합니다. 프로세스 종료 명령을 알려주긴 하는데 귀찮긴 합니다.
아래에 바이브 코딩하면서 주문한 명령 프롬프트 전체를 파일로 첨부하였으니 참고 바랍니다.
