일요일 하루 만에 Music Game을 만든 방법 (차, Chaos와 AI로 구동 🤣🎧🔥)

Source: Dev.to

모든 것은 일요일 오전 7시 30분에 시작되었습니다. 아침 식사로 프라이드‑에그 버터와 Cardemon Ahmed 차 한 잔을 마시고 인터넷을 스크롤하던 중 머리 속에서 “뭔가를 만들어라”는 목소리가 들렸습니다. 나는 내 미발표 트랙 컬렉션, Expo, React Native를 활용하고 모바일과 웹 모두에서 기울임 제어를 사용할 수 있는 음악 기반 게임을 만들기로 결심했습니다.

🔊 Audio Analysis: Scan First, Upload Later

계획은 간단했습니다:

• 각 트랙을 로컬에서 분석
• 주파수 밴드, 엔벨로프, 비트, BPM 추출
• 분석 결과를 데이터베이스에 저장해 게임이 오디오를 다시 분석할 필요 없게 함
• 런타임에 지오메트리를 즉시 로드

Bolt.new 덕분에 Supabase 설정을 손쉽게 할 수 있었습니다. 프로젝트를 내 Supabase 인스턴스로 지정하면 마이그레이션이 자동으로 이루어졌습니다.

AI의 도움을 받아 만든 작은 스크립트가 파이프라인을 수행했습니다:

1. 각 트랙을 분석하고 지오메트리 데이터를 생성.
2. 지오메트리를 Supabase에 업로드.
3. 분석이 끝난 뒤 원본 오디오 파일을 Supabase Storage에 업로드.

전체 과정은 약 두 시간 정도 걸렸고, 바로 사용할 수 있는 레벨 라이브러리가 완성되었습니다.

🌀 Drawing the Level: Frequency Torture Testing

분석 데이터를 활용해 터널을 설계했습니다:

• 베이스 → 큰 움직임
• 킥 → 터널 압축
• 트레블 → 작은 휙휙 움직임
• 조용한 구간 → 넓은 개방 공간

Bolt.new의 빠른 “push‑code‑rebuild‑test” 사이클(Expo QR 또는 웹 프리뷰 이용) 덕분에 시각적 요소가 재미있게 느껴질 때까지 빠르게 반복할 수 있었습니다.

🎮 Game Logic, Pages, UI, The Gameplay Skeleton

터널이 멋지게 완성되자 핵심 게임플레이 요소를 추가했습니다:

• 메인 메뉴
• 게임 화면
• 점수 시스템
• 플레이어 이동 및 충돌 업데이트
• 재시작 로직
• 로딩 화면
• 작은 UI 수정

후에 VS Code로 전환해 레이아웃을 미세 조정하고 프리로더를 구현했습니다.

🧠 Using Multi‑Agents in VS Code for the First Time

VS Code 안에서 멀티‑에이전트 워크플로를 처음 사용해 보았습니다. 서로 다른 작업에 에이전트를 할당했습니다:

• Agent 1 – 게임플레이 로직
• Agent 2 – 발사체 속도 및 물리
• Agent 3 – UI 간격 수정
• Agent 4 – 헬퍼 컴포넌트 생성
• Agent 5 – 적 패턴 디자인

그 결과는 마치 내 에디터 안에 커피 브레이크도 없는 작은 혼돈 개발팀이 존재하는 듯했어요.

🎨 Getting Graphics: Enter Gemini Nanobanana 🍌✨

나는 디자이너가 아니기 때문에 Gemini Nanobanana을 활용했습니다:

1. 색상 팔레트 생성.
2. 해당 팔레트를 기반으로 에셋 제작.
3. 모든 파일을 내보내기.
4. 포토샵에서 에셋 정리(자르기, 크기 조정, 배경 제거).
5. VS Code 에이전트가 플레이스홀더 SVG를 새 PNG로 교체하도록 함.

그 결과 게임은 즉시 더 화려해졌지만, 약간 네온 느낌이 강해졌습니다—내가 딱 좋아하는 스타일이죠.

⚡ Adding Enemies, Power‑ups, Shields, and Other Fun Stuff

그래픽이 준비되자 추가적인 게임플레이 요소를 겹쳐 넣었습니다:

• 적들
• 파워‑업
• 방패
• 시각 효과
• 히트 반응
• 수많은 작은 디테일

각 추가는 “한 가지만 더”라는 느낌이었지만, 전체적으로 경험을 크게 풍부하게 만들었습니다.

🏆 Leaderboard Time

레벨이 무한히 루프되기 때문에 하이 스코어와 사용자 프로필을 구현했습니다:

1. Bolt.new을 사용해 Supabase Auth 설정.
2. 사용자가 자동으로 생성되고 표시 이름을 업데이트할 수 있도록 정책 조정.
3. Supabase에서 읽어오는 리더보드 구현.

AI가 도와준 설정 덕분에 빠르게 마무리할 수 있었습니다.

🚀 Final Build, Deploy, and Bedtime

모든 것이 정상 작동했을 때:

1. 앱 빌드.
2. 코드를 GitHub에 푸시.
3. 웹 버전을 GitHub Pages에 배포.
4. 휴대폰에서 테스트하고 사소한 버그 수정.

22시가 되자 나는 지쳤지만 흥분되었습니다. 침대에서 몇 라운드를 플레이하고, 내 기묘한 작품에 미소를 지으며 잠이 들었습니다.

Final Thoughts

더 다듬는 데 시간을 더 투자했을까요? 물론 가능합니다.
하지만 일요일 하루만 코딩해서 만든 결과는 정말 미쳤다고 할 정도로 만족스럽습니다—좋은 의미에서요. AI가 나를 대체한 것이 아니라, 워크플로를 증폭시켜 지루한 작업을 없애고 “플로우 모드”에 머물게 해줬습니다. 이번 일요일은 오랫동안 경험하지 못한 가장 즐거운 코딩 날 중 하나가 되었습니다.

Life = good ❤️🎧🚀