처음으로 만들어 본 게임은 러시안 룰렛입니다.
처음에는 뇌과학 기반의 게임을 기획하고 싶었지만, 개발 툴과 환경 자체가 너무 생소해 우선은 간단한 구조의 게임부터 도전해보기로 했습니다.
(이번에 바이브 코딩을 처음하게 되서 진짜 바닥에서 많이 굴렀어요 ㅜㅜ!! ㅋㅋ)
러시안 룰렛은 단순한 구조 안에서 다양한 연출과 규칙 추가로 확장 가능성이 높고, 무엇보다 친구들과 가볍게 즐기기 좋다고 생각했어요.
거기에 "진실 혹은 총알?" 같은 심리 게임 요소를 섞어, 단순하지만 직관적으로 몰입할 수 있도록 구성했습니다.
진행 방법
사용 툴: Cursor (코딩용 에디터), GPT-4, Node.js, GitHub, Midjourney
언어 및 라이브러리: React + TypeScript + TailwindCSS
사용한 프롬프트
“러시안 룰렛 게임을 만들고 싶어. 픽셀 스타일로, 두 명이 돌아가며 총을 쏘는 방식이고, 버튼을 누르면 총알이 랜덤으로 발사되는 구조야. 시작 버튼, 총 이미지, 게임 결과 표시 UI까지 포함해서 코드 짜줘.”초반 환경구축에 사용한 명령어
# Cursor 설치 후, 깃 연동이 안 될 때 추가로 설치한 것들
git --version
node -v
npm install처음 러버블에서 만들어준 게임 이미지
처음 러버블에서 만들어준 게임 이미지는 기대했던 ‘러시안 룰렛’ 분위기와는 조금 달랐습니다.
UI 디자인에서 총 실린더에 탄창이 전부 보이는 등 디테일이 부족해, 이후 Cursor에서 직접 UI를 수정하게 되었습니다.
러버블에서의 제작 과정 자체는 어렵지 않았지만, Cursor와 GitHub 연결 과정에서 큰 어려움을 겪었습니다.
Windows 환경이라 그런지 Git과 Node.js를 별도로 설치해야 했고, 설치가 제대로 되었는지 확인하는 데만 약 1~2시간이 걸렸습니다.
처음에는 깃허브에서 프로젝트 폴더를 직접 다운받아 작업하기도 했지만, 실시간 반영이 되지 않아 결국 환경 설정 문제임을 파악했습니다.
(해결에 도움을 받은 링크는 글 마지막에 첨부해두었습니다.)
이후 GPT와 함께 논의하며 러시안 룰렛 분위기에 어울리는 이미지를 10개 넘게 제작했습니다.
이때 Cursor에서는 이미지 덮어쓰기를 위해 이름을 반드시 다르게 지정해야 한다는 것도 새롭게 배웠습니다.
같은 이름으로 이미지를 업로드하면 로컬에 적용되지 않아 시간이 꽤 소요됐습니다.
작업을 하다 보니 Cursor에서 알 수 없는 오류가 발생해 개발이 중단된 적도 있었습니다.
처음에는 Cursor에 직접 오류 메시지를 물어봤지만 해결되지 않아, GPT에게 오류 정보를 전달해 해결 방안을 찾고 다시 Cursor에 명령하는 과정을 반복했습니다.
결국 문제 해결까지 1시간 반 이상이 걸렸고, 기존 페이지를 새로 생성하는 방식으로 겨우 진행할 수 있었습니다.
이 문제 때문에 Cursor 무료 사용 기한이 촉박해졌고, 마감 시점에는 Auto 모드로 전환해 마무리 작업을 이어갔습니다.
게임 구조도 많이 발전했습니다.
메인 화면에서는 게임의 플레이 방식을 간단히 소개하고,
회전하는 로딩 화면도 직접 구현했습니다.
PC에서 1인 플레이를 진행할 경우, 양쪽에 채팅 박스가 나오는데 왼쪽에는 ‘진실 혹은 거짓’ 형식의 게임 힌트 메시지가 출력됩니다.
일부는 틀린 정보지만, 사용자는 이를 바탕으로 추리하여 정답을 찾아갈 수 있도록 설계했습니다.
게임 로그를 통해 CPU의 선택 과정도 확인할 수 있도록 구성했습니다.
초반에는 ‘그만두기’ 버튼이 없어 메인 화면으로 돌아가기 어려웠지만,
해당 UI도 수정하여 반영했습니다.
또한, 모바일에서도 원활하게 게임을 즐길 수 있도록 반응형 디자인을 구현했습니다.
현재는 1인 플레이까지는 완성된 상태이고, 앞으로는 한 웹페이지에서 2인이 함께 플레이할 수 있도록 기능을 확장하고 있는 중입니다.
구현한 주요 기능
버튼 클릭 시 총알 발사 여부를 랜덤으로 결정하는 로직
게임 UI의 픽셀 스타일 커스터마이징
GPT로 생성한 이미지 및 아이콘 삽입
1인 플레이 → 2인 플레이로 기능 확장 (진행 중)
디자인 작업 (Midjourney 활용)
도박 느낌을 줄이기 위해 게임적인 연출과 픽셀 감성 강조
게임이 끝나면 화면이 어두워지는 연출 추가
캐릭터 및 총기 아이콘은 GPT 기반 이미지 생성 툴 사용
✅ 결과와 배운 점
배운 점
Cursor 사용 시 Git과 Node.js 설치가 필수
러버블이나 GPT로 생성된 UI는 기대보다 심플하므로 직접 커스터마이징이 중요
이미지는 같은 이름으로 두 번 올릴 수 없음 → 이름 바꾸는 습관 필요
GPT 프롬프트는 짧고 명확하게 작성하지 않으면 크레딧이 빠르게 소진됨
시행착오
Git 연동 오류 → 한참 헤매다가 Git과 Node.js를 따로 설치해야 한다는 걸 알게 됨
해당 사이트에서 확인 후 설치 가능
https://git-scm.com/downloads/win
https://nodejs.org/ko/download이미지를 업로드한 뒤 이름을 안 바꿔서 덮어쓰기 문제 발생
지나치게 디테일한 프롬프트 요청 → 하루 만에 GPT 크레딧 소진...
앞으로의 계획
2인 플레이 완전 구현 (현재는 UI만 완성, 로직 정리 중)
진실 혹은 대답을 기반으로 한 "심리 게임 모드" 추가
화면을 나눠 플레이어별 UI 구분 (힌트 안 보이게 하기 등)
향후 다른 미니게임으로 확장할 수 있는 프레임워크 구축