Battle Drones: 바이브 코딩으로 만든 RTS 게임, 소리로 멀티플레이를 구현하다

• Battle Drones
• 제작 과정
• v1: 첫 프로토타입
• v2: 전체 스프라이트
• v3: 다양한 지형
• v4: 재미 업데이트
• v5: Battle Drones, 3D로 진화하다
• v8: Archipelago
• v10: Goliath와 에이전트 대결
• 에이전트 대결
• v11: 랜덤 맵
• v12: 소리로 하는 멀티플레이
• 몇 가지 생각

Battle Drones

처음 목표는 Command & Conquer 스타일로, 휴대폰에서 즐길 수 있는 RTS 게임을 만드는 것이었습니다. 1995년에 나온 원작에 대한 추억이 깊고(Red Alert도 좋아했습니다), 그 마법 같은 재미를 조금이나마 되살리고 싶었습니다.

주로 Claude Code를 비롯한 코딩 에이전트가 321번 커밋하며 12번의 큰 반복을 거친 끝에, 모바일과 데스크톱에서 모두 동작하는 브라우저 기반 게임이 완성되었습니다. 여러 플레이 모드와 맵(랜덤 맵 생성기 포함)을 갖췄고, 마이크가 닿는 거리에 있는 두 기기끼리 멀티플레이도 지원합니다.

데스크톱 브라우저에서 Battle Drones를 실행한 데모 영상입니다.

현재까지 구현된 기능은 다음과 같습니다.

• 건물 9종, 지상 차량 7종, 공중 차량 6종, 보병 3종 - 모두 3D 모델이며 여기에서 둘러볼 수 있습니다
• 전장의 안개
• 공중 차량과 지상 차량을 공격하려면 각각 다른 무기가 필요합니다
• 맵 6종, 온대·사막·극지·화산·열대의 5개 바이옴에 걸쳐 있습니다
• 랜덤 맵 생성기
• 스커미시 모드 - 회전 대칭 맵에서 레드 대 블루로 대결합니다
• 라스트 스탠드 모드 - 한 명의 플레이어가 최대한 많은 적 웨이브를 버텨냅니다
• 범위 공격 무기: Barrage, EMP, Drop Pod, Sky Hammer
• 보너스 자원이 든 보급 상자 투하
• 상황에 반응하는 게임 내 음악 - 전투가 벌어지면 점점 격렬해집니다
• 게임 내 AI 성향 다양화(Balanced, Rush, Air Swarm, Boom, Skyforce, Ironclad)
• AI 대 AI 모드 - 각 성향의 AI끼리 맞붙는 모습을 관전할 수 있습니다
• Goliath - 눈에서 레이저를 쏘고 팔에 대포를 단 채 쿵쾅쿵쾅 걸어 다니는 거대 메카로, 새 기지를 세울 수도 있습니다
• 뮤테이터 - 추가 규칙이나 변수를 더해 줍니다
• "Daily Op" 챌린지
• 계급과 업적(메달)
• 에이전트 대 에이전트 모드 - LLM 두 개가 Battle Drones로 서로 맞붙습니다
• 가까이 있는 휴대폰 두 대가 오디오 메시지로 통신하는 멀티플레이 모드 - 이전 실험작인 Chirp Pong을 확장한 기능입니다

제작 과정

Battle Drones는 철저하게 바이브 코딩으로 만들었습니다. 코드는 거의 검토하지 않았고, 사용한 언어(TypeScript)도 제게는 거의 낯섭니다. 다만 플레이 테스트는 꽤 많이 했고, 프로젝트를 시작한 뒤로 수많은 반복을 거쳤습니다.

핵심 프롬프트와 대화 기록 링크를 곁들여, 지금까지의 진행 과정을 간단히 정리했습니다.

v1: 첫 프로토타입

7월에 Claude Fable 5로 시작했습니다.

We are going to build a mobile friendly RTS game - command and conquer style - called Battle Drones, in which two armies of drones (both flying and ground-based) battle for territory and resources

Let's start with a MVP design, ask me some questions

공유된 대화 기록입니다. Claude Code for Web에 OpenAI API 키를 환경 변수로 넘기고, 에셋은 OpenAI Image Generation API로 만들라고 지시했더니 기본적인 스프라이트가 나왔습니다.

v1은 여기서 해볼 수 있으며, 화면은 이렇게 생겼습니다.

RTS라는 것은 알아볼 수 있습니다. 건설 기능이 있고, 유닛을 선택해 명령을 내릴 수 있으며, 상대할 기본 AI도 있습니다.

이 첫 버전은 겨우 개념 증명 수준이었고, 플레이해도 재미가 없었습니다.

초기 버전에서 Claude는 2D 게임 프레임워크인 Phaser를 썼습니다. 저는 몇 번 반복한 뒤에야 이 사실을 알았습니다!

v2: 전체 스프라이트

두 번째 버전(v2 해보기)에서는 모든 차량의 스프라이트와 "AI 대 AI" 모드가 추가되었습니다. 직접 조작하지 않고도 게임이 돌아가는 모습을 지켜볼 수 있게 된 것입니다.

Claude는 OpenAI 이미지 모델에 프롬프트를 넣어 스프라이트를 생성하는 일을 꽤 능숙하게 해냈습니다. v2 스프라이트는 public/assets/sprites 폴더에서 볼 수 있습니다.

v3: 다양한 지형

여전히 재미가 없었고 그래픽도 밋밋했습니다. 어느새 10월이 되어 Claude Opus 5.5로 업그레이드한 상태였고, 이렇게 요청했습니다.

Massively improve this game. Make the graphics and gameplay better (keep it mobile friendly). Render new graphics using the latest OpenAI GPT image API (lookup details) with the API key in the environment variable. Add new unit types and balance the gameplay better. Also add new buildings and better, more varied terrain.

그 결과 다양한 스타일의 배경 타일이 생성된 새 맵 5개가 만들어졌습니다. 여기서 확인할 수 있습니다. Opus는 스프라이트도 다시 생성해 훨씬 보기 좋아졌습니다. v3는 여기서 해볼 수 있으며, 화면은 이렇습니다.

이제 제법 진짜 게임 같은 느낌이 나기 시작했습니다! 그래도 재미는 여전히 부족해서, 금방 지루해졌습니다.

v4: 재미 업데이트

여기까지 Battle Drones 실험은 제가 전부터 갖고 있던 생각을 확인해 주는 셈이었습니다. 코딩 에이전트는 겉보기에 게임 같은 결과물은 만들어도, 정말로 빠져들 만큼 재미있는 게임은 만들지 못한다는 생각이죠.

저녁 식사 자리에서 이 가설을 다른 사람에게 이야기하다가, 모델에게도 제 생각이 틀렸다는 것을 증명할 기회를 제대로 줘야겠다는 생각이 들었습니다. 그래서 휴대폰으로 Opus 5.5에게 이렇게 요청했습니다.

This game isn't fun enough yet. Make it a LOT more fun.

이번에는 Ultracode 모드로 실행했습니다. 이 모드에서 Claude Code(여기서는 Claude Code for Web)는 "동적 워크플로"를 실행하는데, 공식 문서는 이를 다음과 같이 설명합니다.

동적 워크플로는 여러 서브에이전트를 동시에 조율하는 JavaScript 스크립트입니다.

이 요청으로 몇 시간에 걸친 작업이 시작되었습니다. 저녁에 시작했는데 플레이 가능한 결과물을 받은 것은 다음 날 오전 늦은 시간이었습니다. 하지만 결과는 놀라웠습니다.

v4는 여기서 해볼 수 있으며, 화면은 이렇습니다.

Claude에게 릴리스 노트를 직접 쓰게 했습니다. 주요 내용은 다음과 같습니다.

이제 모든 스커미시와 Daily Op가 시작할 때 선택지를 제시하고, 밀리는 쪽에 역전의 기회를 주며, 양쪽 군대를 맵 중앙으로 끌어모읍니다. 새로운 플레이 방식도 두 가지 추가되었습니다.

• 오프너: 시작 전에 Blitz, Industry, Air Wing 중 하나를 고릅니다.
• 콜다운 파워: Barrage, EMP, Drop Pod, 궤도 타격 Sky Hammer.
• 목표물과 잔해 수거: Uplink 중계기, 보급 투하, 고철이 되는 잔해.
• 타격감: 전투 연출, 적응형 음악, 유닛 음성, 아나운서.
• 지휘: 전투 경보, 게임 속도, 부대 저장, 터치 배치.
• 새 모드: Last Stand 생존 웨이브와 8개 미션으로 구성된 Ops 캠페인.
• 성장 요소: 영웅, 보상이 포함된 전투 결과 보고서, 커리어, 뮤테이터 7종, Daily Op.

전투는 더 길어지고 판세도 더 크게 요동칩니다. Normal 난이도에서 AI 대 AI 테스트를 1,200판 돌려 보니, 25분이 지나도 승부가 나지 않는 경기가 14%에서 0.9%로 줄었습니다. 고철이 800 이상 뒤처졌던 쪽이 승리한 비율은 24%에서 46%로 올랐습니다.

Claude가 오래 걸린 이유 중 하나는 시뮬레이션 플레이 테스트를 천 번 넘게 돌리고, 그 결과를 토대로 기존 유닛의 밸런스를 조정하고 새 유닛과 기능을 추가했기 때문입니다.

v5: Battle Drones, 3D로 진화하다

"훨씬 더 재미있게 만들어줘"가 Ultracode에서 통한 것을 보고, 더 야심 찬 요청을 해 보기로 했습니다.

Port this game to three.js with 3D models for all of the buildings and vehicles and landscapes

이번에도 밤새 돌렸고, 아침에 일어나니 v5 버전이 완성되어 있었습니다.

새 3D 모델은 전부 Claude가 TypeScript 코드로 직접 만들었습니다.

v6(v6 플레이)에서는 시각적 완성도를 조금 더 높였습니다. v7(v7 플레이)에서는 로봇 보병(트루퍼, 로켓 분대, 저격수)과 병력 수송기 "Condor"가 추가되었습니다.

v8: Archipelago

게임 설계에 제가 실제로 기여한 부분이 너무 적다는 생각에 슬슬 죄책감이 들기 시작했습니다. 지난 몇 번의 릴리스 동안 제가 한 일이라곤 "더 재미있게 만들어줘", "시각적 완성도를 높여줘"라고 말한 것뿐이었으니까요.

또 AI가 v7에서 추가된 보병과 병력 수송기를 잘 쓰지 않는다는 점도 눈에 띄었습니다. 이들을 쓸 만한 전략적 이유가 딱히 없었던 것입니다.

새로운 게임 메커니즘을 갖춘 새 맵이 있어서, 플레이어가 Condor에 보병 로봇을 태워 맵 곳곳으로 보내도록 적극적으로 유도한다면 좋겠다는 생각이 들었습니다.

그렇게 해서 지금까지 중 가장 긴 프롬프트가 나왔습니다.

Design a new map. Goal is to make different strategic incentives that encourage use of Infantry and Condors and aerial vehicles.

To do this the map will have limited harvester resources but several more uplinks - but uplinks will be on islands that are inaccessible by land vehicles or infantry. These uplinks can also not be claimed using air vehicles. The ONLY way to get them is to fly infantry there in a Condor.

Armies always start with a Condor and a single squad. If an army has no Condor a new one will be provided for free, flying in from the edge closest to their HQ and landing there. That free condor will come with a single free squad on board.

The two HQs should be entirely separated by water, but still accessible by vehicles thanks to two bridges across the map in different places

I want to encourage a battle over uplinks.

The map should be the times the size of other maps - still square

First research and then critique this design. Only build after we have agreed on any modifications

You get to design a new biome for this

그 결과 열대 맵 Archipelago가 탄생했습니다. 섬마다 Uplink가 7개 있고, Condor로 보병을 실어 날라야만 점령할 수 있습니다. 단순한 맵에서 기본 메커니즘을 익히고 나면, 가장 재미있게 즐길 수 있는 맵이라고 자신 있게 말할 수 있습니다. v9에서는 이 맵을 조금 더 흥미롭게 다듬었고, 지금은 이런 모습입니다.

v10: Goliath와 에이전트 대결

거대 로봇 메카를 게임에 추가하기로 했습니다. 퍼시픽 림의 예거나 워해머 40,000의 타이탄을 떠올리시면 됩니다.

Claude와 아이디어를 구상할 때 사용한 프롬프트 중 일부입니다.

Help me brainstorm ideas for adding giant robots to this game - think dreadnoughts or titans from W20K - how could we do this in a way that enhanced gameplay, kept things balanced, added unique twist? Don't overthink this yet

Let's keep brainstorming. I like the idea that it's a mobile base - that can accept harvested scrap and can have buildings built near it (even if it later moves on) and can produce infantry units too. An interaction with condor would be neat but I don't know what that could be.

Idea: as it gets damage it loses the ability to fire some weapons - by default it has eye laser (like lancers) and arm canons (like titan) and two shoulder mounted mortars, plus machine guns similar to a squad of troops

Damage knocks out mortars and then laser - it always has guns. You can't build next to a building that was only put there because of the mech, you need the mech there for off-base building and only within three squares of it

[...] Lets do two condors can carry the mech

최종 결과물은 정말 멋집니다.

브라우저가 HTML 비디오를 지원하지 않습니다.

Goliath는 Gantry에서 만들 수 있습니다. Gantry는 Fab, Bay, Airpad, Tech Lab을 먼저 지어야 건설할 수 있는 건물입니다. Goliath가 만들어지는 과정을 볼 수 있고, 완성되면 Gantry에서 걸어 나와 맵 곳곳을 누빌 수 있습니다.

Goliath는 "앵커"를 내려 땅에 고정할 수 있습니다. 고정된 상태에서는 새로운 HQ가 되어, 그 지역에서 보병 유닛과 추가 건물을 만들 수 있습니다.

Condor 두 대가 Goliath에 갈고리를 걸면 Goliath를 공중으로 실어 나를 수도 있습니다!

이제 게임은 적의 HQ 건물과 적이 만든 Goliath를 모두 파괴해야 끝납니다.

Goliath와 관련된 뮤테이터도 몇 가지 있습니다.

• Goliath Armada: 양 진영이 각각 공중 수송 중인 Goliath 4기(각각 Condor 한 쌍과 함께)만 가지고 시작하며, 다른 유닛은 없습니다.
• Robot Love: 전장에서 적 Goliath끼리 가까워지면 사랑에 빠져 게임이 무승부로 끝나는 특수 규칙을 더합니다. (이 아이디어는 Natalie 덕분입니다.)

에이전트 대결

v10의 또 다른 기능은 에이전트 대결입니다. 멀티플레이를 어떻게 구현할지 고민하다가, 서로 다른 LLM끼리 게임에서 싸우게 하면 어떨까 하는 생각이 떠올랐습니다.

Fun extra challenge: think about how we might make multiplayer available to coding agents. It would be neat if we could set up a battle between eg GPT-6 Sol and Claude Opus 5.5 where each model has access to a tool which gives them information about the game (presumably non-visual, but only the information they could see through fog of war etc) and lets them control their units etc [...]

Consult ~/dev/llm/docs and include notes in that file about how LLM could be used here via a new tools plugin

Opus 5.5가 작업에 착수해 AGENT-BATTLES.md 제안서를 작성한 뒤 구현과 테스트까지 마쳤습니다. 대결을 녹화하고 다시 재생하는 기능도 있습니다. Claude Haiku 5.5와 GPT-6 Luna의 대결 리플레이가 그 예이고, 같은 대결을 프롬프트 응답까지 보여 주는 별도 디버그 도구로 본 화면도 있습니다.

에이전트 대결을 구동하는 프롬프트는 여기서 볼 수 있습니다.

이런 리플레이는 README에 링크되어 있는 것만 몇 개 더 있습니다. 언젠가는 이를 정식 리그 순위표로 발전시키고 싶습니다.

v11: 랜덤 맵

이 버전은 순전히 어느 날 Claude 사용량 페이지를 들여다봤다가 주간 사용 한도의 75%밖에 쓰지 않았는데 45분 뒤면 초기화된다는 것을 알게 된 덕분에 만들어졌습니다. 남은 토큰으로 Battle Drones 기능을 하나 더 얻을 수 있을지 시험해 보기로 했고, 목표로 "랜덤 맵"을 골랐습니다.

Design and implement a mechanism for generating a random map using any of the available biomes - it should be the size of the largest map and rivers and bridges and rocks and forest and scrap and crystals are all in play. Make them rotationally symmetric and use a seed to allow them to be selected or reused later. You have 45 minutes to build this! Be creative.

대화 기록과, Claude가 작업 내용을 보여 주려고 생성한 이미지입니다.

v12: 소리로 하는 멀티플레이

이 기능은 방금 겨우 동작하게 되어서 아직 충분히 테스트해 보지 못했습니다. 최신 Battle Drones는 마이크가 닿는 거리에 놓인 두 기기끼리 멀티플레이를 지원합니다!

이 기능은 지난주에 만든 Chirp Pong 실험에서 출발했습니다. 동작하는 개념 증명 코드를 Claude Code에 가리켜 주고 이렇게 요청했습니다.

Clone Simonw/tools from GitHub and look at recent branches for the example pong game that uses web microphone to implement multiplayer between two phones via audio signals

Build a version of that for battledrones

Opus는 두 기기 사이에서 대역폭을 얼마나 확보할 수 있는지 측정하려고 Radio Probe 도구를 만들었고, 긍정적인 결과가 나오자 본격적인 오디오 모뎀 시스템을 구현했습니다. 지금까지 노트북, iPhone, iPad 사이에서 시험해 봤는데 아주 잘 동작하는 것 같습니다!

왜 소리를 쓰느냐고요? 저는 정적 HTML을 좋아하기 때문입니다. 운영 비용이 들지 않고, 서버를 어딘가에 띄워 놓고 사람들이 게임을 하고 싶어 하는 동안 계속 책임지고 운영하고 싶지도 않습니다.

몇 가지 생각

저는 게임 개발에 대해 거의 아무것도 모릅니다. 그래서 오히려 제 소프트웨어 엔지니어링 경험이 결과에 미치는 영향이 적은 분야에서 코딩 에이전트를 시험해 볼 좋은 기회였습니다.

게임은 위험 부담이 아주 낮다는 점도 좋습니다. 최악의 경우라 해도 제 엉뚱한 게임 실험작에 버그가 생기는 정도니까요.

오늘 아침 Hacker News에서 Steam Fans Are Begging for a No-AI Filter as Steam Next Fest Is Filled With Slop라는 기사를 봤습니다. 저라면 Battle Drones를 이런 행사에 출품할 엄두는 내지 못합니다. 정식 인디 게임 프로젝트로 고려받기에는 아직 들인 노력이 턱없이 부족하니까요.

...하지만 이제는 이런 바이브 코딩 게임이 진지하게 받아들여질 수 있는 길이 보입니다. Battle Drones는 재미있고, 보기에도 좋고, 혁신적인 기능도 있습니다(오디오 기반 멀티플레이는 제가 아는 한 RTS 최초입니다).

저보다 안목이 뛰어나고, 정말 탁월한 무언가를 만들겠다는 열정을 가진 사람이 만든다면 어떤 결과물이 나올지 꼭 보고 싶습니다!

이 프로젝트에서 얻은 다른 관찰 몇 가지입니다.

• 정적 HTML과 JavaScript는 게임 개발에 훌륭한 매체입니다. WebGL이 아주 잘 동작하고, Three.js(그 이전에는 Phaser)는 현재 모델들이 속속들이 아는 훌륭한 기반입니다.
• 덕분에 프로그레시브 웹 앱으로도 실행할 수 있습니다. 제가 요청하지 않았는데도 Battle Drones는 오프라인에서 동작합니다. 직접 설치한 적이 없는데도 휴대폰에 캐시되어 있어서 비행기 안에서 플레이할 수 있었습니다.
• Claude에게 OpenAI API 키를 주고 OpenAI 모델로 이미지를 생성하라고 하면 아주 잘 동작합니다. 생성한 이미지를 직접 보고 프롬프트를 고쳐 나갈 수 있기 때문입니다.
• Opus 5.5는 Three.js(그리고 Blender, 아마 다른 3D 애플리케이션도)로 하는 3D 모델링 실력이 놀랍습니다. GPT-6 Astra도 마찬가지입니다. 3D 게임 프로젝트에 쓸 모델을 만드는 일을 충분히 해낼 수 있습니다.
• 리플레이나 멀티플레이 같은 기능에는 결정론적 시뮬레이션 엔진이 유용합니다. 한번은 Claude가 Math.sin()와 Math.cos() 등의 호출을 직접 만든 버전으로 교체해야 했습니다. 브라우저마다(예: Chrome과 Safari) 반환하는 값이 미세하게 달라서 리플레이의 동기화가 어긋났기 때문입니다.
• Opus 5.5는 음악도 작곡합니다! 이 프로젝트에는 오디오 파일이 하나도 없습니다. 배경 음악은 전부 코드로 생성되고, 맵마다 달라지며, 전투가 달아오를수록 더 격렬해지기까지 합니다. Claude로 음악 작곡을 해 본 이전 실험은 Scrimshaw Jukebox를 참고하세요.
• "훨씬 더 재미있게 만들어줘"라는 프롬프트가 그렇게 잘 통했다는 사실이 아직도 믿기지 않습니다.
• 도구는 사실상 공짜입니다. Radio Probe, 모델 브라우저, 에이전트 대 에이전트 디버그 도구는 제가 프롬프트로 만들었고, Claude Code는 자기가 쓸 도구를 잔뜩 만들었는데 저는 아직 살펴보지도 못했습니다.
• 정적 HTML 게임끼리 오디오 기반 멀티플레이를 하는 방식이 실제로 됩니다! 이 패턴을 쓰는 게임이 더 많아지기를 바랍니다. 오늘 이것저것 찾아봤지만 선행 사례는 Alon Horesh의 Siner와 Georgi Gerganov(llama.cpp로도 유명한 개발자)의 ggwave 정도밖에 찾지 못했습니다.
• Claude Code의 "Ultracode"는 토큰을 아낌없이 쓰지만, 오디오 기반 멀티플레이 추가처럼 복잡한 문제도 프롬프트 하나로 해결할 수 있습니다.
• 이런 식으로 소프트웨어를 만드는 데 대한 죄책감은 아직 완전히 가시지 않았습니다. 경험이 거의 없는 분야에서 이 정도 결과물을 만들어 낼 자격이 있나 싶습니다! 다만 이미 여러 사람에게 비공개로 보여 줄 만큼 보여 준 터라, 다른 분들도 보고 배울 수 있게 공개하지 않는 것이 오히려 이상하게 느껴졌습니다.

지금 보시는 것은 제 블로그의 장문 글뿐입니다. 모든 글을 받아 보려면 /atom/everything/을 구독하시거나 다른 구독 방법을 확인해 보세요.