Sign In

Codex로 '붕어빵 먹는 고양이 게임' 만들기

프롬프트는 그대로, 답변은 요약으로. 아래 기록은 Codex와 함께 웹게임 '붕어빵 먹는 고양이'를 기획하고 제작한 과정을 담은 프롬프트 원문입니다. 게임 아이디어를 정하고, 이미지젠으로 비주얼을 다듬고, GitHub와 Vercel 배포까지 진행한 흐름을 시간순으로 남겼습니다.
오타와 말투는 가능한 원문 그대로 두었고, 가장 아래에는 작업 결과 요약을 붙였습니다.
붕어빵 먹는 고양이 · Codex · 게임 바이브코딩 · 프롬프트 원문
01:38 · 0803_bbang
다시 시작하자. 붕어빵을 컨셉으로 만들 수 있는 가장 쉬운 게임을 추천해줘.
01:41 · 0803_bbang
이게 사람들한테 재미도 있을까?
01:43 · 0803_bbang
재미도 있고 아주 간단한 게임이면 좋겠어. 중독성도 있고. 버튼 하나만 누르면 되는 게임으로
01:46 · 0803_bbang
그럼 붕어빵을 계속 굽는거야? 그다음이 없는것 같은데
01:49 · 0803_bbang
고양이가 걸어가면서 붕어빵을 먹는건 어때? 팥붕이 있고 슈붕은 콤보고
01:53 · 0803_bbang
좋아. 이걸로 해보자. 게임 제목은 '붕어빵 먹는 고양이'야. 이걸 새로운 프로젝트로 폴더를 만들어서 할 수 있어?
01:57 · 0803_bbang
붕어빵과 고양이가 진짜 그림처럼 예쁘면 좋겠어. 그림 그리는데 시간이 오래 걸린다면 픽셀 아트처럼 그려도 좋아.
01:58 · 0803_bbang
잠깐 파일 하나짜리 게임이 아니어도 돼.
02:00 · 0803_bbang
아니 진짜 일러스트 그림으로 붕어빵과 고양이를 그려줘. 맵도 더 예쁘게 하고
02:08 · 0803_bbang
왜 chatgpt에서 열기를 하면 안되는거지?
02:11 · 0803_bbang
맵이 너무 짧아. 맵을 화려하게 하기보다, 사용자가 지속해서 오래 게임을 해도 유지될 수 있는 전략으로 맵을 구성해봐. 그리고 시작할때 '아뜨뜨' 화면이 계속 떠있어서 게임 화면이 흐리게 나와. 확인해봐
02:16 · 0803_bbang
여전히 '아뜨뜨' 합업이 화면에 남아있어.
02:18 · 0803_bbang
'시작' 팝업이 계속 떠있고, 게임이 진행되면서 맵이 안나와. 맵은 아주 심플한 그림으로 반복해도 문제 없는 그림으로 해줘. 예를 들면 슈퍼마리오 같은 맵을 참고해봐.
02:22 · 0803_bbang
하얀 팝업이 여전히 있잖아. 그리고 배경이 게임 컨셉하고 너무 안맞아. 30년차 게임 개발자라면 다르게 했을거야.
02:25 · 0803_bbang
모바일 게임 화면으로 구성해줘. 모바일 가로 버전으로
02:29 · 0803_bbang
imagen 을 사용해서 맵과 버튼을 싹다 다시 그려줘
02:36 · 0803_bbang
고양이를 스프라이트로 점프하는 이미지를 구성해줘. 그리고 배경은 첨부 이미지 2개를 참고해. 가로등이 있으면 좋겠고, 달은 초승달로 해줘. 고양이와 붕어빵 이미지도 첨부 이미지 스타일로 다시 그려줘
02:47 · 0803_bbang
고양이 목숨을 3개로 해주고 랭킴에 사용자 이름을 남길 수 있게 해줘.
02:55 · 0803_bbang
배경 맵이 바뀌면 좋겠어. 아까 처음 기획할 때 물 웅덩이가 나오면 피한다고 했잖아. 고양이가 앞으로 움직일 수 있고, 앞으로 가면서 맵이 바뀌도록 해줘. 반복해서 사용할 수 있게 심플한 맵이어야겠네. 지금 컨셉을 유지하되, 물웅덩이가 나오면 피해야 하고, 붕어빵 봉지를 먹으면 더블콤보가 되고.. 이런 식으로 구성해봐
2026년 8월 10일 프롬프트 로그
Recovery note: the local hook stopped appending after 2026-08-09 03:33.
The exact submit time for the entries below was not captured by the hook, so these are reconstructed in conversation order and recorded at 2026-08-10 01:44 +09:00.
01:44 · 0803_bbang
1.
게임 play pause stop 이 있어야겠어.
2.
그리고 지금 플레이 도중에 고양이가 사라졌어. 왜 그런지 확인해봐
3.
고양이 이미지를 스프라이트로 걸어갈때와 점프할때를 구성해줘.
01:44 · 0803_bbang
1.
play, pause , stop 버튼이 고양이 다리를 가려서 답답해. 이걸 수정해줘.
2.
고양이 스프라이트를 다리와 꼬리, 머리도 움직이면서 자연스럽게 해줘.
01:44 · 0803_bbang
1.
오른쪽 붕어빵 시작 버튼을 붕어빵 버튼 말고 play, pause, stop 으로 토글되게 하면 좋겠어. 이 3개가 어떻게 토글되는게 좋을지는 니가 설계해봐. 상단의 버튼은 그럼 지워도 될거 같아.
2.
고양이가 목숨이 깎일때만 깜빡여야겠어. 붕어빵 먹을때도 깜빡이니까 계속 깜빡거리기만해.
3.
'최고'를 누르면 랭킹이 보이게 해줘.
01:44 · 0803_bbang
1.
play pause stop 버튼이 너무커
2.
고양이가 계속 깜빡거려. 그리고 달릴때 스프라이트로 움직여야 하는데 움직이지 않아.
3.
배경의 눈 입자가 눈이 내리는 효과로 해줘.
01:44 · 0803_bbang
1.
고양이 스프라이트가 이상한데? 첨부 그림을 확인해
2.
붕어빵이 계속 같은 위치에 나타나지 않고 다양한 위치에 나타나면 좋겠어.
3.
목숨의 하트를 고양이로 바꿔줘.
01:44 · 0803_bbang
고양이 스프라이트가 여전히 이상해.
01:44 · 0803_bbang
고양이 스프라이트는 여전히 아까랑 똑같아. 이거 수정하기가 어려운거야? 다시 확인해봐
01:44 · 0803_bbang
첨부처럼 화면이 겹쳐.
01:44 · 0803_bbang
이거 깃헙에 올려줘
01:44 · 0803_bbang
prompt-logs/ 도 올려줘
01:44 · 0803_bbang
대화 로그는 계속 기록되고 있는거야? hook 작업을 했잖아. 상태를 알려줘
01:44 · 0803_bbang
대화를 기록해줘. 그리고 대화가 자동 기록되지 않은건 기록하라고 명령해야 기록하는건지 확인해봐
01:57 · 0803_bbang
맵의 아래쪽에 희미하게 세로줄이 여러개가 있어. 그건 왜 그런거야?
01:57 · 0803_bbang
없애줘.
01:58 · 0803_bbang
여기까지 깃헙에 올려줘. 로그도 남기고, 로그도 올려줘
19:40 · 0803_bbang - 전체 프롬프트 기록
자 붕어빵 게임을 다시 빌드해볼까?
vercel 에 배포해줘
1.
콤보, 목숨 팝업(?)이 너무 크고 안 예뻐. 크기를 줄이고 예쁘게 바꿔줘.
2.
연속해서 누르면 점프가 더 높이 되도록 수정해줘.
3.
pc 에서 큰 화면으로 실행하니 점프가 너무 낮아. 왜 그런지 알려주고 수정해줘.
큰 pc 화면과 스마트폰 화면의 점프 높이와 이동 속도가 너무 차이나. 이걸 맞출 수 있니?
배경음악과 효과음을 추가해줘. 고양이와 붕어빵 컨셉에 맞는 음악이면 좋겠어
좋아. 이제 게임 타이틀을 만들자. 게임을 열면 제일 먼저 보이는게 게임 타이틀이지. 어떻게 만들지 먼저 기획부터 해봐. 그림의 분위기, 이미지, 타이틀 제목 폰트와 느낌 등을 말해봐. 그림은 아직 그리지 말고
좋아. 타이틀을 그려봐
그림 분위기가 너무 다른데? 지금 게임의 배경 그림을 반영해서 다시 그려봐
배경보다 고양이와 붕어빵이 더 강조되면 좋겠어. 배경 위에 커다랗게 고양이의 개구진 표정과 붕어빵 그림이 고퀄로 나오면 좋겠어. 그리고 '붕어빵 먹는 고양이' 타이틀을 별도의 이미지로 그려줘. 게임 시작 전에 배경에 타이틀 제목이 겹쳐서 제목이 살짝 간판 흔들리듯 흔들리게 해줘.
게임 제목이 너무 작아. 그리고 제목이 깔끔하지 않고 겹쳐서 보여. 더 예쁜 폰트로 고쳐서 다시 그려봐. 그리고 고양이 머리위에 있는 것보다 고양이 왼쪽에 있는게 더 좋겠어. 30년차 게임 디자이너로 다시 기획해봐. 타이틀은 게임의 첫인상으로 중요해.
타이틀 제작에 코드보다 이미지젠을 쓰는게 어때? 제목이 너무 구린데.. sound 버튼은 없어도 되겠어. 고양이와 붕어빵도 3D로 좀더 입체감 있게 하고, 타이틀과 겹치지 찮아야겠어.
그렇지!! 훨씬 좋아. 그런데 play 버튼이 겹쳐. play 버튼도 이미지젠을 사용해서 더 예쁘게 만들어봐. 그리고 타이틀부터 bgm 이 나와야해.
그리고 게임의 전체 이미지도 이 타이틀처럼 다시 그려서 수정할 수 있어? 수정이 잘 안되면 백업할 수 있게 백업 폴더를 만들어두고 시작해.
깃헙과 버셀 배포는 시간이 걸리니까 로컬에서 확인하고 할께.
아직 배경하고 고양이, 붕어빵 이미지가 적용되지 않았어. 붕어빵 봉지는 적용돼서 잘 나와. 그리고 play 버튼이 타이틀과 겹쳐. play 버튼에 고양이와 붕어빵 그림은 투머치야. 이건 빼고 깔끔한 버튼으로 다시 그려줘.
고양이 스프라이트가 겹쳐서 보여. 이전과 같은 현상인거 같아
그래도 겹치는데? 다시 확인해봐.
그리고 화면 상단의 '붕어빵 먹는 고양이'도 타이틀 느낌으로 다시 구성해줘. 그리고 목숨의 고양이 이미지가 블록을 벗어났어.
고양이 꼬리가 여전히 잘려. 그리고 상단 제목은 타이틀 그대로 넣을 수 있어? 그리고 타이틀부터 배경음악이 나오게 수정해줘.
아직 꼬리가 잘려있어. 타이틀은 너무 잘 맞아
아직도 꼬리가 잘려 있는데. 이게 고치기 그렇게 어렵나? 다시 해봐.
그리고 물웅덩이도 같은 스타일의 3d 느낌으로 다시 그려줘.
콤보가 있으면 이걸 쓸 수 있으면 좋겠어. 지금은 콤보로 점수만 쌓이고 다른 강점이 없어. 콤보를 플레이어가 먹고 싶게 해야 해. 어떻게 하면 좋을까? 아이디어를 제안해줘.
좋아. 한번 해봐.
그렇게 하니까 게임이 너무 쉬워졌어. 다른 방법은 없을까?
사실 제일 먼저 나도 슈붕과 봉지를 먹었을때 콤보가 어떻게 증가하는지 모르겠어. 개발한 나도 모르는데 사용자가 알까? 아주 직관적으로 가는게 더 중요한거 같아.
콤보랑 점수랑 어떻게 달라?
그럼 슈붕이나 봉지를 먹으면 콤보가 계속 올라가고, 그상태에서 팥붕을 먹으면 x 40 배가 될 수도 있는거야?
지금은 콤보가 100 넘게도 가는데? 게임의 규칙을 직관적이고 단순하게 해서 다시 정리해봐
팥붕은 콤보가 없고, 슈붕은 콤보가 +1 이야. 그리고 콤보가 10이 되면 황금 붕어빵이 하나가 나오고 황금 붕어빵을 먹으면 점수가 100점 올라가고 속도가 조금 빨라져. . 팥붕, 슈붕 모두 점수는 10점씩 추가되고, 어때? 30년 게임 기획자로서 피드백을 줘.
좋아. 이렇게 해줘
황금붕을 먹으면 점수만 올라가니까 재미가 없네. 다른 방법이 없을까?
좋아. 이렇게 해보자
탄붕이나 물웅덩이를 피한것 같은데 계속 죽어. 사용자가 느끼기에 안닿았는데 죽는다고 느낄거 같은데. 어떻게 생각해?
콤보를 사용하기가 너무 어려운데, 봉지를 먹으면 콤보가 2개 추가되게 해줘.
이미지를 누르면 게임을 플레이할 수 있습니다.
게임 등록을 위해 간단히 게임 설명을 적어줘.
🤖
붕어빵 먹는 고양이
겨울밤 붕어빵 가게 앞을 달리는 고양이가 팥붕과 슈붕을 먹으며 점수를 모으는 캐주얼 러너 게임입니다. 슈붕과 봉지로 콤보를 채우면 황금 붕어빵이 등장하고, 황금 붕어빵을 먹으면 골드 러시가 시작됩니다. 탄 붕어빵과 물웅덩이를 피하며 최고 점수에 도전해보세요.
19:40 · 0803_bbang - 요약
타이틀 화면과 인게임 비주얼을 이미지젠 중심으로 재작업했다.
•
타이틀 키아트를 새로 생성해 적용했다. 왼쪽에는 입체감 있는 붕어빵 먹는 고양이 타이틀, 오른쪽에는 3D 느낌의 고양이와 붕어빵이 나오도록 구성했다.
•
SOUND 버튼은 제거하고 PLAY 버튼만 남겼다.
•
PLAY 버튼도 이미지젠으로 다시 만들었고, 고양이/붕어빵 장식 없는 깔끔한 버튼으로 교체했다.
•
타이틀 화면에서 BGM이 가능한 빨리 시작되도록 로드 후 자동 시도 및 첫 입력 시 재생을 추가했다. 브라우저 자동재생 정책상 입력 전 완전 자동 재생은 보장되지 않는다고 정리했다.
•
인게임 배경, 고양이 달리기/점프 스프라이트, 팥붕/슈붕/탄붕/봉지/물웅덩이 이미지를 타이틀과 맞는 3D 스타일로 교체했다.
•
고양이 스프라이트가 겹쳐 보이거나 꼬리가 잘리는 문제를 여러 차례 수정했다. 최종적으로 점프 프레임은 cat-jump-flat-v40.png, 달리기 프레임은 cat-run-frame-*-v40.png를 사용한다.
•
상단 제목은 텍스트가 아니라 타이틀 느낌의 이미지 로고 hud-title-logo-v37.png로 교체했다.
•
목숨 고양이 이모지가 박스를 벗어나지 않도록 span 기반으로 렌더링하고 크기를 조정했다.
•
고양이 시각 박스와 충돌 판정을 분리했다. 꼬리까지 보이게 시각 박스를 넓히되, 충돌은 몸통 중심부만 판정하도록 getCatHitRect, getItemHitRect를 추가했다.
콤보 규칙을 단순하게 다시 설계했다.
•
팥붕: +10점, 콤보 변화 없음.
•
슈붕: +10점, 콤보 +1.
•
봉지: +30점, 콤보 +2.
•
콤보는 0/10으로 표시하고 최대 10/10.
•
콤보가 10/10이 되면 다음 스폰에 황금 붕어빵 1개가 나온다.
•
황금 붕어빵을 먹으면 +150점, 콤보 리셋, 속도 소폭 증가, 5초간 골드 러시가 시작된다.
•
골드 러시 중에는 작은 황금붕 goldbit이 등장하며 먹으면 +20점.
•
기존 피버, 실드, 무적, 점수 배율 시스템은 제거했다.
배포 기록:
•
GitHub main에 커밋 3259dcb Refresh game art and simplify combo rewards를 푸시했다.
•
Vercel 운영 URL https://0803-bbang.vercel.app/?deploy=3259dcb에서 styles.css?v=46, game.js?v=46 반영을 확인했다.
•
핵심 에셋 hud-title-logo-v37.png, cat-jump-flat-v40.png, puddle-v40.png, play-button-v35.png, night-stall-bg-v34.png가 운영에서 200 image/png로 서빙되는 것을 확인했다.
•
백업 폴더 backup-title-refresh-20260810-171302/와 이미지젠 중간 source 파일들은 GitHub에 올리지 않고 로컬에만 남겼다.
Made with Slashpage