📝 한줄 요약
바이브코딩도 게임 제작도 처음인 비개발자가 Codex와 대화하며, 1분 안에 탈출할 수 있는 간단한 방탈출 게임을 만들었습니다. (사례글 작성은 /write-post와 함께했습니다 ㅎㅎ)
• 사용한 도구와 목표: Codex로 게임을 구현하고 Midjourney로 그래픽을 만들어, 설치 없이 플레이할 수 있는 웹 방탈출 게임을 완성했습니다.
• 과정 중 깨달은 점: 처음부터 완벽한 요청을 만들기보다 결과물을 직접 보며 수정 사항을 구체적으로 말하는 편이 효과적이었습니다.
• 핵심 해결 방법: 코딩은 Codex, 이미지 제작은 Midjourney처럼 도구별로 잘하는 일을 나눴습니다.
• 인상적이었던 순간: “문구를 옮겨줘”, “이미지를 바꿔줘” 같은 피드백이 실제 게임에 바로 반영됐습니다.
• 결과: 모바일·태블릿·PC에서 접속할 수 있는 게임을 완성하고 공개 링크로 배포했습니다.
• 다음 목표: 시점 전환과 공간 이동, 더 많은 퍼즐이 있는 방탈출 게임으로 발전시키고 싶습니다.
📝목표와 배경
저는 바이브코딩이 처음이었고, 평소 게임을 많이 해본 편도 아니었습니다. 그래서 처음부터 복잡한 서비스를 만들기보다 제가 구조를 이해하고 있는 작은 콘텐츠로 기능을 하나씩 경험해보고자 했습니다.
다행히 방탈출과 추리게임은 좋아했습니다. 바닥에서 단서를 발견하고, 방 안의 물건을 조사하고, 숫자를 조합해 문을 여는 기본 구조는 익숙했습니다. 이 흐름이라면 게임 제작 경험이 없어도 원하는 결과를 비교적 구체적으로 설명할 수 있을 것 같았습니다.
목표는 거창한 게임이 아니라 한 방 안에서 아주 간단한 문제를 풀고 1분 안에 탈출할 수 있는 연습용 게임 하나를 완성하는 것이었습니다.
🛠️ 사용한 도구
• Codex: 게임 기획 정리, 화면 구현, 수정, 테스트, 반응형 개선, 배포
• Midjourney: 픽셀 아트 방 배경과 연필로 그린 종이 단서 제작
• Vercel: 완성된 게임을 누구나 접속할 수 있는 공개 링크로 배포
• 모델: Codex의 GPT-5 기반 모델
• 작업 방식: 코드를 직접 작성하기보다 원하는 동작과 화면을 자연어로 설명하며 작업했습니다.
🔧 작업 과정
[1. 익숙한 장르에서 가장 작은 게임 정하기]
처음에는 바이브코딩 연습용 게임을 만들고 싶다는 생각만 있었습니다. 픽셀 그래픽의 단일 방탈출 게임이라는 방향을 Codex에 설명하고 전체 제작 순서를 물었습니다.
바이브코딩 연습용으로 간단한 방탈출 게임을 하려고 해. 아주 간단한 추리와 문제풀이만 있으면 탈출할 수 있는 단일룸으로 구성하고 싶어. 그래픽은 픽셀 형식으로 만들고 싶은데, 미드저니를 이용할까 싶어. 어떤 단계로 제작을 진행할지 전체 프로세스 먼저 정리해줄래?처음 제안받은 구성은 연습용으로도 조금 복잡하게 느껴졌습니다. 콘셉트보다는 바이브코딩 경험 그자체에 목적을 두고 시작했기 때문에, “평범한 콘셉트로 가고 싶다”고 범위를 다시 줄였습니다. 그 뒤 제가 잘 알고 있는 방탈출의 기본 구조를 그대로 설명했습니다.
플레이어가 바닥에서 버려진 종이를 먼저 클릭하면, 시계, 달력, 책 그림이 그려진 종이를 확인 할 수 있어. 그리고 방에서 3군데를 클릭하는거야 ( 시계, 달력, 책장) 시계는 7시, 달력은 4일에 동그라미, 책장은 클릭하면 책이 5권 있어. 모든 단서를 얻은 후에는 문을 클릭해. 비밀번호를 입력하게 되어있고 비번은 745가 되는거야. 문을 열고 탈출하면 클리어야.
이 요청을 바탕으로 게임의 흐름이 정리됐습니다.
① 바닥의 종이를 클릭합니다.
② 종이에 그려진 시계, 달력, 책의 순서를 확인합니다.
③ 방 안에서 세 물건을 조사해 숫자를 얻습니다.
④ 문에 비밀번호를 입력하고 탈출합니다.
처음부터 기능을 많이 넣지 않고, 시작과 끝이 분명한 구조로 단순하게 만들고자 했습니다.
[2. 배경 이미지 한 장에서 실제 게임으로]
메인 배경을 위한 Midjourney 프롬프트를 달라고 요청해서 픽셀 아트 방 배경을 만들었습니다. 이미지 속에는 침대, 시계, 달력, 책장과 잠긴 문이 들어 있었습니다.
한 방의 다른 방을 보여주는 일련의 사진
생성된 배경을 보니 처음 기획과 숫자가 달랐습니다. 시계는 5시를 가리키고 있었고 책은 8권이었습니다. 이미지를 다시 만들기보다 보이는 그림을 게임 규칙에 반영하기로 했습니다. 그래서 최종 비밀번호는 548이 됐습니다.
아이템 별로도 그래픽을 각각 생성해야 하나 했는데, 필요없고 바로 프로토타입으로 만들 수 있다고 하길래 이 1장만으로 그대로 진행했습니다.
프로토타입으로 만들어줘. 지금 배경이미지에 시계가 5시를 가리키고, 책이 8권 있는데 이걸 그냥 그대로 최종 비밀번호에 반영할게. 달력은 배경이미지에서는 동그라미가 없는데, 클릭해서 확대되었을때 숫자 4에 동그라미가 있게 해줘.[실제 요청 끝]
Codex는 배경 위에 클릭할 수 있는 영역을 배치하고, 종이와 세 가지 단서, 문 키패드가 순서대로 작동하도록 만들었습니다. 침대를 누르면 “평범한 침대이다”라는 문장이 나타나고, 세 단서를 모두 확인한 뒤 548을 입력하면 탈출에 성공했습니다.
말로 설명한 규칙이 실제로 클릭할 수 있는 화면으로 바뀌는 과정도 신기했지만, 더 인상적이었던 것은 그다음이었습니다. 직접 플레이하면서 불편한 점을 발견할 때마다 말로 피드백하면 게임이 계속 달라졌습니다.
[3. 수정에 수정]
초기 버전에서는 오프닝 문구가 한 줄씩 따로 나왔습니다. 방 안의 메시지 창은 바닥의 종이를 가렸고, 단서 설명은 팝업과 하단 문구에 중복으로 표시됐습니다.
개발 용어를 몰라도 문제 자체는 설명할 수 있었습니다.
처음게임에 접속했을 때, 눈을떴다 다음 여기가 어디지? 라는 문구가 생성되는데, 두 문구가 한번에 보이게 해줘. 방 안으로 들어갔을때, 하단 문구창때문에 맨 처음 눌러야 하는 종이가 가려지게 돼. 문구 박스를 방 밖의 하단에 넣어줘.
Codex는 두 오프닝 문장을 한 화면에 표시하고, 메시지 창을 방 이미지 바깥으로 옮겼습니다. 단서 설명도 팝업 안에서만 보이도록 정리했습니다.
침대와 침대 옆 탁자가 있는 방의 스크린샷
이때 “정확한 해결 방법을 알아야 요청할 수 있는 것은 아니다”라는 점을 체감했습니다. 제가 할 일은 무엇이 불편한지, 어떤 모습이 더 자연스러운지를 설명하는 것이었습니다. 구체적인 수정 방법은 Codex가 찾았습니다.
[4. 디자인 요소 교체]
다른 단서는 Codex가 생성한 것 만으로도 그럭저럭 괜찮았지만, 맨처음 클릭하게 되는 종이 단서가 조금 아쉬웠습니다. 처음에는 웹 화면 요소로 손그림 느낌을 만들었지만 원하는 감성이 나오지 않았습니다. 그래서 별도로Midjourney에서 낡고 구겨진 종이와 연필 스케치를 다시 만들고, 그 결과물을 게임에 교체했습니다.
그림이 그려진 종이 사진
[5. 지연과 플레이 환경 수정]
종이 단서 이미지를 교체한 뒤에는 클릭하고 팝업이 뜰 때 약 1초의 지연이 느껴졌습니다.
버려진 종이를 클릭했을때 1초정도 로딩되는 시간이 걸리는거 같은데, 이거 못없애?Codex는 큰 원본 이미지를 화면용으로 가볍게 만들고, 게임이 시작될 때 미리 불러오도록 수정했습니다. 사용자는 같은 이미지를 보지만 클릭 후 기다리는 시간은 줄었습니다.
PC에서 잘 보인다고 끝난 것도 아니었습니다. 창을 줄이거나 모바일에서 열면 팝업 전체가 한눈에 보이지 않아 스크롤해야 했습니다.
이 게임을 모바일, 탭, Pc에서 모두 동일하게 플레이할 수 있도록 해줘. pc에서도 창 크기에 따라 팝업창이 한눈에 보이지 않고 스크롤해야하는 문제가 있는데, 어떤 환경에서든 동일하게 보였으면 해방의 비율은 유지하되 팝업과 키패드는 기기의 화면 크기에 맞게 함께 줄어들도록 개선했습니다. 덕분에 모바일, 태블릿, PC에서 같은 흐름으로 플레이할 수 있게 됐습니다.
[6. 다른 사람에게 보낼 수 있는 링크 만들기]
마지막으로 Git과 Vercel을 이용해 게임을 공개해달라고 요청했습니다. 월요일 설치세션에서 필요한 프로그램은 다 설치해뒀던 뒤라 바로 입력했습니다
이제 배포해줘. git 이랑 vercel깔려있어첫 배포에서는 기존 제작 환경과 Vercel의 방식이 달라 검사가 실패했습니다. Codex는 게임과 관계없는 환경용 파일을 분리하고 다시 검사한 뒤 배포를 완료했습니다.
✅ 결과
완성된 게임은 아래 주소에서 설치나 로그인 없이 플레이할 수 있습니다.
게임 플레이:
https://locked-room-548.vercel.app
🚀 앞으로의 계획
이번 게임은 한 화면 안에서 단서 세 개를 찾으면 끝나는 연습작입니다. 다음에는 더 어렵고 많은 과정을 거쳐야 탈출할 수 있는 방탈출 게임을 만들어보고 싶습니다.
현재 버전에는 시점 전환이나 공간 이동이 없습니다. 다음 프로젝트에서는 방의 앞, 뒤, 옆을 살펴보거나 다른 공간으로 이동하고, 한 단서가 다음 퍼즐로 이어지는 구조를 추가해보고 싶습니다!
