소개
최근 바이브코딩으로 무한의 계단과 비슷한 간단한 웹 게임을 만들어봤습니다.
사용한 도구는 세 가지입니다.
ChatGPT 유료 버전: 프롬프트 작성
Google Flow: 게임 참고 이미지 생성
Codex: 실제 게임 제작
처음에는 아래처럼 아주 짧게 요청했습니다.
무한의 계단처럼 캐릭터가 계속 위로 올라가는
간단한 웹 게임을 만들어줘.
이 정도 설명만으로도 실제로 플레이할 수 있는 게임이 만들어졌습니다.
진행 방법
1. ChatGPT로 프롬프트 만들기
먼저 ChatGPT 유료 버전에 만들고 싶은 게임을 설명했습니다.
ChatGPT를 활용해 다음 두 가지 프롬프트를 만들었습니다.
Google Flow에 넣을 이미지 생성 프롬프트
Codex에 넣을 게임 제작 프롬프트
Google Flow용 프롬프트에는 화면 분위기와 캐릭터 모습을 자세히 넣었습니다.
귀여운 캐릭터가 좌우로 이어진 계단을 올라가는
캐주얼 모바일 게임 화면을 만들어줘.
밝고 단순한 색상을 사용하고,
상단에는 점수가 보이게 해줘.
2. Google Flow로 참고 이미지 만들기
ChatGPT가 작성해준 프롬프트를 Google Flow에 입력해 참고 이미지를 만들었습니다.
원숭이 점프 - 스 크린샷
이 이미지를 이용하니 제가 원하는 게임 화면과 분위기를 Codex에 더 쉽게 전달할 수 있었습니다.
3. Codex로 게임 만들기
Google Flow에서 만든 이미지를 첨부하고, ChatGPT가 작성해준 프롬프트를 Codex에 입력했습니다.
첨부한 이미지 를 참고해서
캐릭터가 계단을 계속 올라가는 웹 게임을 만들어줘.
왼쪽과 오른쪽 방향키로 이동할 수 있게 하고,
계단을 오를 때마다 점수가 올라가게 해줘.
발을 잘못 디디면 게임 오버가 되고,
다시 시작할 수 있게 해줘.
Codex는 게임 화면과 조작 기능을 만들어줬습니다.
좌우 이동
점수 표시
게임 오버
다시 시작
계단이 계속 이어지는 기능
완성된 결과를 실행한 뒤에는 짧은 문장으로 수정 요청을 했습니다.
캐릭터 이동 속도를 조금 빠르게 해줘.
점수가 높아질수록 게임이 어려워지게 해줘.
참고 이미지처럼 화면을 더 밝고 귀엽게 바꿔줘.
결과와 배운 점
가장 신기했던 점은 긴 기획서나 복잡한 코드 없이도 게임이 만들어졌다는 것입니다.
전체 과정은 다음과 같았습니다.
아이디어 정리
→ ChatGPT로 프롬프트 작성
→ Google Flow로 참고 이미지 생성
→ 이미지와 프롬프트를 Codex에 입력
→ 게임 실행 및 수정
컴퓨터 화면에 표시된 한국어 앱 스크린샷
이번 경험을 통해 세 가지를 배웠습니다.
1. 한두 문장으로도 시작할 수 있다
처음부터 완벽하게 설명할 필요는 없었습니다.
간단하게 요청한 뒤, 결과를 보면서 조금씩 수정하는 방식이 더 쉬웠습 니다.
2. 참고 이미지가 큰 도움이 된다
말로만 설명하는 것보다 이미지를 함께 넣으니 원하는 색상, 배치, 분위기를 더 잘 전달할 수 있었습니다.
3. AI 도구를 연결하면 더 편하다
ChatGPT는 프롬프트를 만들고, Google Flow는 이미지를 만들고, Codex는 실제 게임을 만들었습니다.
각 도구가 잘하는 일을 연결하니 아이디어를 결과물로 만드는 과정이 훨씬 빨라졌습니다.
바이브코딩은 코드를 몰라도 아이디어를 직접 움직이는 결과물로 만들어볼 수 있게 해주는 방법이었습니다.
다음에는 캐릭터, 아이템, 난이도 같은 요소를 추가해 저만의 계단 게임으로 발전시켜보고 싶습니다. 🚀
도움 받은 글
ChatGPT
Google Flow
OpenAI Codex
