바이브코딩(제미나이)로 웹 게임 개발

처음으로 이용해보는 모든 것들

제미나이를 메인으로 이용하는 이유는 대학생 무료 플랜 때문이다.

MCP를 이용해보는것도 이번이 처음이다. 그래서 어떻게 연결하는지 이런것들을 아무것도 모른다.

어떤 웹 서비스를 만들어볼지도 정해놓은것이 없다.

이번 프로젝트의 목적은 아무것도 없이 시작해서

오로지 제미나이와 MCP들을 이용해 하나의 웹사이트를 만드는 것이다.

이번 프로젝트에서 중요하게 생각한건 2가지이다.

1. 하루에 1시간만 투자한다.
2. 내가 따로 코딩을 하지 않는다.

여행에서 사진을 찍고 나중에 그 사진을 돌아보면 그때 느꼈던 감정같은것이 기억이 나지 않을 때가 있다.

사진을 찍고 그 사진의 설명을 적을 수 있는 그런 앱을 만드는것도 좋을 것 같다.

 

일반 프로젝트의 목표는 웹 게임으로 정했다.

웹 게임의 이름은 “Twenty” 이다. 내가 이전에 만든 게임인데 그냥 이걸 웹으로 만들어볼 생각이다.

이제 제미나이에게 물어볼 차례이다.

일단 프롬프트부터 어떻게 넣어야 할지 물어봤다.

---

1. 게임 개요 (Game Overview)

• 게임 제목: (예: 픽셀 던전 어드벤처)
• 장르: (예: 퍼즐, 플랫포머, 슈팅, 리듬 게임 등)
• 핵심 루프: (예: 장애물을 피하며 코인을 모으고 목적지까지 도달한다)
• 참고 게임: (예: 테트리스, 구글 크롬 공룡 게임 등)

2. 기술 스택 (Tech Stack)

• 프레임워크/라이브러리: (예: Vanilla JS, React, Vue, Phaser.js, Three.js(3D))
• 스타일링: (예: CSS Grid/Flexbox, Tailwind CSS, Styled-components)
• 데이터 저장: (예: 로컬 스토리지, Firebase 연동 필요 여부)

3. 핵심 기능 및 조작 (Core Mechanics & Controls)

• 조작 방식: (예: 화살표 키, 스페이스바 점프, 마우스 클릭)
• 점수 시스템: (예: 시간에 따른 점수 증가, 아이템 획득 시 점수)
• 난이도 조절: (예: 시간이 지날수록 속도 증가)

4. 디자인 및 비주얼 (Design & Visuals)

• 그래픽 스타일: (예: 8비트 픽셀 아트, 미니멀한 도형, 네온 스타일)
• UI 구성: (예: 상단 점수판, 시작 버튼, 게임 오버 팝업)
• 색상 구성: (예: 다크 모드 배경에 형광색 포인트)

5. 개발 단계 (Development Phase) - 현재 원하는 단계는?

• MVP(최소 기능 제품): 핵심 로직만 작동하는 프로토타입
• 디자인 포함 버전: UI와 애니메이션이 적용된 상태
• 전체 사이트: 메인 화면, 랭킹 페이지, 설정 페이지 포함

---

위와 같이 양식을 줘서 아래와 같이 프롬프트를 집어넣었다.

 

1. 게임 개요 (Game Overview)

• 게임 제목: Twenty
• 장르: 퍼즐게임 ex) 1010, 2048
• 핵심 루프: 숫자를 넣어 20을 완성시킨다.
• 참고 게임: (예: 테트리스, 구글 크롬 공룡 게임 등)

2. 기술 스택 (Tech Stack)

• 프레임워크/라이브러리: 너 마음대로, 하지만 2d 게임이다.
• 스타일링: 그냥 보기 깔끔하게
• 데이터 저장: 아직 생각은 없다.

3. 핵심 기능 및 조작 (Core Mechanics & Controls)

• 조작 방식: 컴퓨터에서는 마우스, 모바일에서는 터치 앤 드래그
• 점수 시스템: 한줄에 숫자의 합이 20인 경우 점수를 얻는다.
• 난이도 조절: 딱히 없다.

게임은 4x4의 사각형 판에서 시작한다. 화면의 중앙에 게임 판이 있고, 하단에는 지금 사용할수있는 숫자들이 있다. 플레이어는 숫자를 드래그에서 게임 판 위에 놓는다. 만약 게임 판의 가로, 세로, 대각선 부분에 숫자의 합이 20인 부분이 있다면 숫자는 사라지고 점수는 올라간다. 마방진 4x4버전이라 생각하면 된다.

모든 칸이 가득 차면 게임 오버된다.

4. 디자인 및 비주얼 (Design & Visuals)

• 그래픽 스타일: 미니멀한 느낌으로 깔끔하게
• UI 구성: 가운데 게임 화면, 상단 점수판, 하단에 이용할수있는 숫자들
• 색상 구성: 하얀 배경

5. 개발 단계 (Development Phase) - 현재 원하는 단계는?

• MVP(최소 기능 제품): 핵심 로직만 작동하는 프로토타입

결과물이 다음과 같이 나왔다. 솔직히 화가날정도로 잘만들어줬다. 그럼 작동은 잘될까?

숫자는 잘 넣어진다.

찍히지는 않지만 점수도 잘오른다.

심지어 게임오버 화면도 잘나온다.

내가 이걸 만들려고 했으면 일주일은 걸렸을 것이다. 어이가 없을 정도로 잘나왔다.

 

이제 한번 업그레이드를 시켜볼 생각이다.

 

 

솔직히 주사위 형태로 만들면 지금 이게 숫자 몇인지 헷갈릴수있어서 위험할것같다는건 알지만,

그냥 해보고 싶었다.

그랬더니 이런걸 만들어줬다. 너무나도 아름답다.

근데 솔직히 보기가 힘들다. 그래서 숫자 방식이랑 주사위 방식을 선택할수있게 해달라했다.

 

 

이렇게 나왔다.

근데 뭔가 애매한 느낌이어서 인트로 화면에서 선택할수있게 해달라 했다.

 

 

와씨 개쩐다

 

솔직히 지금 모든 코드가 index.html안에 있어서 나누고 싶은 충동이 크게 들지만

이것도 제미나이의 은총이니 그냥 받아들이기로 했다.

근데 이제 버그를 발견했다. 모든 칸이 채워지지 않은 상태에서 3개만 채워져도 점수가 올랐다.

 

 

내 이럴줄 알았지. 아무것도 없는 칸을 0으로 관리하고있었다. 이젠 잘 작동된다.

 

이제 1시간이 지나서

다음에는 외부에서도 접근할수있는 웹사이트로 만들고, 광고를 넣고 이런식으로 진행해볼 생각이다.