이건 내가 2주 동안 Claude Code, ThreeJS, Suno, ElevenLabs, GPT Images-2, Tripo3d만 써서 만든 웹 게임 프로젝트야. 코드, 텍스처, 음악, 효과음 전부 다 AI로 뽑았음. 이번 VibeJam에 출품했는데, 상금 싹 다 쓸어왔다!
게임 전체를 바이브 코딩으로 밀어붙였어. 사실 코드 짜는 시간보다 /plan으로 기획하고, 아이디어 짜고, 직접 플레이해보는 시간이 훨씬 길었음. Claude Code 세션을 2~3개씩 동시에 돌리면서, 코드 꼬이지 않게 파트별로 나눠서 작업했어. 새로운 기능 만들 땐 무조건 컨텍스트 없는 새 세션을 썼고, 이미 만들어진 거 수정할 때만 컨텍스트가 쌓인 긴 세션을 하나 유지했지.
기본부터 시작했어. 드리프트 기능이 있는 탈것 조작, 충돌 처리, 바이크를 따라가는 카메라가 필요했지. 샌드박스 맵 하나 만들어서 이리저리 몰아보고, 충돌 테스트하고, 디버그 패널로 조작감을 튜닝했어. 드리프트할 때 뒤에 생기는 라인 색깔이 바뀌면서 떼면 부스트가 나가게 만들었고, "고속" 효과랑 카메라 흔들림도 좀 넣었음.
아이템 물리
핵심 미션은 음식을 안 떨어뜨리고 A에서 B까지 시간 맞춰 배달하는 거야. 처음엔 바구니에 담긴 아이템들이 좌우로 미끄러지게 만들었는데 영 별로더라고. 그래서 아이템을 위로 쌓아 올리는 방식을 써봤어. 좌우로 움직이면 아치형으로 휘어지다가, 임계치를 넘으면 아이템이 떨어지게끔. 이걸 너무 현실적인 물리 엔진으로 구현하기보다는, 임계치 넘으면 일정 확률로 떨어지게끔 튜닝했더니 훨씬 독특하고 재밌더라.
폰 시뮬레이터: 1부
여기서 음식을 수거하라는 미션을 받게 돼.
Claude한테 iOS 느낌 나는 애니메이션이랑 비주얼 들어간 폰 시뮬레이터 하나 짜달라고 했더니, CSS로 한 방에 뽑아주더라. 첫 버전부터 애니메이션이 꽤 볼만했음. 나중에 폰 UI 좀 더 다듬어서 현실감이랑 재미를 좀 더 줬는데, 예를 들면 카피바라가 거울 셀카 찍는 사진을 잠금 화면으로 해놓고 밀어서 잠금 해제하게 만들거나, iOS 스타일 알림 배지, 작동하는 볼륨 버튼 같은 거 넣었지. 실제 앱들도 '카피바라 버전'으로 바꿨는데, CapyMaps는 지도처럼 작동하고 Capify는 게임 안에서 실제로 음악 재생되는 뮤직 앱임.
편의점
편의점은 물건 구하는 과정에 챌린지 요소를 좀 넣었음. 그냥 자전거 뒤에 과일이 툭 튀어나오는 게 아니라, 직접 편의점 들어가서 주문받은 과일들을 찾아다니게 만들었는데, 여기에 좀 매운맛을 더했지:
랜덤으로 나타나는 쇼핑 카트 찾기
주문 목록에 있는 과일들 하나씩 찾기
바닥은 미끄럽고 벽에 부딪히면 튕겨 나감
바나나 껍질 (게임에서 삭제됨)
과일 많이 모을수록 보너스는 커지는데, 그만큼 떨어뜨리기 쉬워서 점수 깎임
이 모든 걸 60초 안에 (나중엔 45초로 줄임)
편의점 발전 과정이 제일 마음에 듦. 카메라 시점 다시 잡고, 조명이랑 애니메이션 추가하고, 기본 선반이랑 아이템들 다 실제 3D 소품으로 바꿨거든. 적절한 효과음까지 섞으니까 결과물이 진짜 대박이었음.
맵 (1차 시도)
처음엔 LLM으로 맵을 통째로 만들어보려고 했음. 일러스트는 Grok으로 뽑고, Tripo3d로 3D 변환하는 식으로. 근데 도시 디테일을 세세하게 조절하기가 너무 힘들고, 확대하면 퀄리티 다 깨지고, 맵 전체가 하나의 덩어리로 나와서 게임 최적화도 안 되고 문제만 생기더라고.
그럼 완전히 커스텀 된 수제 맵은 어떻게 만드냐고?
에디터 툴
직접 맵을 만들려면 에디터가 필요했음. 원하는 곳에 아이템 배치하고, 브러시로 지형이나 산을 '그려내고', 절차적으로 도로를 생성하는 그런 거. 이 게임만의 독특함은 상당 부분 이 맵에서 나옴.
에디터 열려고 ?editor 엔드포인트를 추가했음. 나중에는 에디터를 메인 코드에서 분리해서, Claude가 게임 업데이트할 때 에디터가 새로고침되면서 내가 작업한 거 다 날아가는 불상사를 막았지 (이거 때문에 몇 번 고생함).
수작업으로 맵 만들기
AI한테 원하는 대로 맵 뽑아달라고 하는 게 너무 힘들어서, 그냥 에디터로 직접 만들었음. 이게 내가 한 유일한 '빡센' 수작업임. 원래는 '유럽풍' 도시를 생각했는데, 결과물 보면 알겠지만 정반대로 흘러갔음. 내 아이디어는 맵의 메인 산 꼭대기에 편의점을 박아두고, 어디서든 그게 보이게 하고, 하늘에서 마법 같은 빛이 내려오게 한 다음 그 주변으로 도시를 짓는 거였음. 몇 시간 동안 수십 번 수정하고 나서야 진짜 플레이 가능한 도시가 완성되더라.
이건 덤으로 넣은 거임. 나중에 해도 됐는데, Claude랑 작업하다가 좀 한가해지길래 그냥 구현해달라고 했음.
멀티플레이어
멀티플레이어는 게임 잼 치고는 생각보다 간단했음. Cloudflare에서 라이브 WebSocket을 통해 하나의 글로벌 도시/로비가 방 역할을 하는 방식임. 플레이어들이 들어오면 각자의 위치랑 아이템 스택 정보가 다른 사람들한테 실시간으로 전달되는 구조지.
대역폭은 플레이어 수의 제곱에 비례해서 늘어남. 라이더 한 명당 초당 10번 정도 데이터를 쏘는데, 서버가 이걸 다른 모든 플레이어한테 다시 뿌려줘야 하거든. 5명일 땐 괜찮은데, 50명이 되면 초당 10번씩 50개의 메시지를 50명의 클라이언트한테 일일이 뿌려야 하는 꼴이지.
메시지 보내기나 경적 울리기는 물론이고, 근처 플레이어가 듣고 있는 음악까지 들을 수 있게 해놨음.
첫 주 개발 결과
첫 주가 끝날 때쯤엔 대충 이 정도를 끝냈음:
주인공 캐릭터, 쌓이는 아이템 물리 엔진, 충돌 판정
편의점 90% 완성
간단한 앱이 깔린 휴대폰
유선 미션 루프 (주문 접수 + 미니게임 + 배달)
날씨 및 낮/밤 주기
맵 개발 시작
지형 제작용 에디터 툴
멀티플레이어 로직
간단한 효과음 + 최종 음악 일부
개발 2주 차
머티리얼 다듬기
핵심 메커니즘이 잡혔으니 이제 게임에 걸맞은 비주얼을 입힐 차례였음. PS1 스타일로 가기로 결정했는데, 저해상도 이미지에 색상 제한, 해상도까지 낮추는 방식이지. PS1이 워낙 사양이 딸리던 콘솔이라, 텍스처랑 색 심도, 매핑, 필터링만 잘 조절하면 딱 그 느낌이 나거든.
마침 ChatGPT Images-2가 막 나왔을 때라, 이걸로 실사 텍스처를 뽑아서 무료 사이트에서 리사이징한 뒤 게임에 적용했음.
같은 방식으로 대충 만들어놨던 나무들도 2D 텍스처가 입혀진 나무들로 싹 바꿨음.
PS1 스타일 나무를 만들려고 Claude한테 평면 나뭇잎 PNG를 X자 모양(평면 2개를 겹친 형태)으로 배치해달라고 시켰음.
모든 머티리얼(아스팔트, 잔디, 흙, 나무, 모래, 물, 농지) 텍스처도 다 새로 뽑았고, Claude가 내가 예전에 대충 칠해놨던 "초록색" 브러시를 실제 텍스처로 싹 바꿔줬음. 오른쪽 사진 보면 텍스처랑 맵 보정이 합쳐져서 최종적으로 어떻게 나왔는지 보일 거임.
도로 제작 툴
도로 제작 툴을 쓰면 지형에 점을 찍는 것만으로도 부드러운 곡선이 그려짐. 아스팔트나 흙길이 깔리고, 도로가 평평하게 앉도록 지형이 깎이면서 가장자리는 자연스럽게 지형이랑 섞이게 만들었음. 이 도로는 휴대폰의 CapyMaps 앱에도 그대로 떠서 목적지까지 최단 경로를 보여줌. 절차적으로 생성되는 인도, 가로등, 차선, 가드레일, 울타리, 배너 같은 것들도 다 추가했음.
맵 작업
제일 재밌으면서도 시간 제일 많이 잡아먹는 작업이었음. 구세주 그리스도상, 금문교, 할리우드 사인 같은 것들을 참고해서 넣었지. 그냥 내가 보기에 멋있겠다 싶은 건 다 섞어놓은 도시임.
맵은 아래 사진처럼 발전했음: 안개 효과를 개선해서 스케일감이 확 살았고, 하늘에는 노이즈 텍스처를 입혀서 구름 느낌을 냈음. 금융 지구랑 주거 지구도 전보다 훨씬 깔끔해졌고. 내가 제일 좋아하는 부분은 "시골"인데, 도시랑은 완전히 다른 풍경이지. 흙길에 농장도 있고, 고속도로 옆에 소박한 집들도 있고. 다른 각도에서 보면 구세주 그리스도상이 풍경 속에 어떻게 자리 잡았는지 보일 거임. 처음엔 호수를 만들까 했는데, 그냥 도시 옆에 해변을 끼는 쪽으로 바꿨음.
컷신 에디터
게임 시작할 때 컷신이 먼저 나오고 플레이로 넘어가게 만들었음. 그래야 플레이어가 상황 파악도 되고 진짜 게임 같은 느낌이 나거든.
시네마틱 에디터 UI 전체 모습부터 보여주고, 세부적인 디테일들을 설명해 줄게. 이 에디터는 실제 영상 편집기처럼 타임라인에서 컷신 진행 상황을 볼 수 있게 만들었음. 클립 넣고 빼기도 쉽고, 드래그 앤 드롭으로 위치 옮기고, 시간 건너뛰기나 음악, 전환 효과, 오버레이 넣기도 편하게 짰지. 겉보기엔 좀 지저분해도, 일단 게임을 완성하는 게 더 중요했으니까.
모든 장면은 게임 내에서 녹화되고 실시간으로 재생되니까, 다른 플레이어들이 접속해 있으면 인트로에도 그대로 다 나옴.
녹화
일단 도시 곳곳을 돌아다니는 카피바라를 녹화했음. "Record" 툴을 쓰면 맵 어디에든 바이크를 배치할 수 있고, 주행 경로를 그대로 캡처할 수 있거든.
카메라 배치
경로를 다 잡았으면, 이제 예쁜 샷이 나오게 도시 곳곳에 카메라를 배치했음. 이렇게 하면 각 구역의 디테일도 화면에 더 잘 담기거든.
카메라마다 애니메이션, FOV(시야각), 전환 효과 같은 속성을 따로 설정할 수 있고, 심지어 카메라마다 시간대도 바꿀 수 있음. 그다음엔 타임라인의 특정 블록에 연결만 해주면 끝임.
메뉴
시네마틱 카메라는 "Use in menu" 체크박스만 누르면 게임 메뉴에서도 그대로 재사용 가능함.
현지화
현재 게임은 영어, 브라질 포르투갈어, 스페인어, 한국어, 중국어(만다린), 독일어, 힌디어를 지원함. 내가 아는 언어들은 Claude가 꽤 잘 뽑아줬고, 약간 수정만 좀 봤음. 나머지 언어들은 나중에 다른 에이전트 써서 검수할 생각임.
게임 출시
마지막 단계는 Vibejam 웹사이트에 올릴 썸네일 만들기였음. 몇 가지 레퍼런스를 참고해서 ChatGPT한테 시켰는데, 로우 폴리 스타일은 잘 살렸지만 배경 조명이나 샛길, 뒤에 있는 구세주 그리스도상 같은 건 좀 엉망으로 만들더라.
뭘 배웠나?
작년이랑 비교해보면 AI 코딩이 확실히 한 단계 넘어선 게 느껴짐. 몇 가지 느낀 점:
도파민 충전은 빠르고 MVP 비용은 저렴함: 오후 반나절이면 플레이 가능한 메커니즘 하나 뚝딱 만듦.
코딩보다는 '결정'의 영역으로 넘어감: 코딩하는 시간은 줄고, 대신 타이핑하고, 계획 짜고, 테스트하고, 감각을 다듬는 데 시간을 더 쓰게 됨. 이제 이게 진짜 병목 구간임. 다들 좋은 프롬프트를 짜는 걸 어려워하는데, 결국 자기 생각을 얼마나 명확하게 텍스트로 옮기느냐가 관건임.
툴이 툴을 낳음: 가장 큰 사기템은 게임 코드 자체가 아니라, 게임을 더 빨리 만들 수 있게 해주는 에디터를 Claude한테 짜달라고 한 거였음. 디테일 하나하나가 다 필요할 때마다 즉석에서 만들어진 셈이지.
스팀에 출시할 거냐고?
아니. 이건 잼(jam)용으로 딱 좋은 게임이고, 여기서 끝내는 게 맞음. 스팀에 내려면 몇 시간은 즐길 수 있는 플레이 타임이랑 성취감 같은 게 더 필요하거든. 지금은 딱 5~10분 즐기기 좋은 수준임.
다음은?
이번 프로젝트 진짜 재밌게 했음. AI 덕분에 MVP 만들고 아이디어 테스트하는 속도가 거의 초능력 수준이 된 기분임. 제대로만 쓰면 진짜 미친 툴임. 이제 게임 개발 개념을 더 깊게 파보면서, LLM을 활용해 아이디어를 그 어느 때보다 빠르게 현실로 만들어볼 생각임. 언젠가 내 게임이 스팀에 올라오는 날이 올지도 모르지.
