Three.js로 만든 브라우저 전용 'Desert Strike' 스타일 라인 배틀 게임. 다운로드나 GPU 필요 없음. 공유 링크로 1v1 가능
Made a browser-only Desert Strike-style lane battler in Three.js. No download, no GPU needed. 1v1 works over a shared link
핵심 요약
Three.js와 AI 도구를 활용해 브라우저에서 바로 즐길 수 있는 'Desert Strike' 스타일의 1v1 라인 배틀 게임을 개발함.
- 기술 스택 — Three.js, TypeScript, Vite를 사용해 브라우저 기반으로 구현함.
- 게임 메커니즘 — 유닛 간 상성이 통계에 따라 결정되는 1라인 tug-of-war 방식임.
- AI 활용 — ElevenLabs로 사운드를, meshy.ai로 3D 모델을 생성해 개발 효율을 높임.
- 멀티플레이어 — 호스트 권한 방식과 Cloudflare Worker를 활용해 설치 없이 링크로 접속함.
스타크래프트의 고전 커스텀 맵인 "Desert Strike" 독립형 버전을 만드는 걸 몇 년 동안이나 벼르고 있었어. 브루드워나 스타2 아케이드 좀 해봤으면 다들 알지? 유닛 컨트롤은 필요 없고, 생산 건물 지어놓으면 유닛이 알아서 튀어나와서 한 길로 쭉 밀고 나가는 거. 상대보다 테크 빨리 올리고 카운터 유닛 뽑는 게 핵심인 그 게임 말이야. 나 진짜 그 모드 좋아했거든. 근데 정작 내가 하고 싶은 깔끔한 독립형 버전은 아무도 안 만들더라고.
그래서 몇 주 전에 그냥... 시작해버렸어. 결국엔 바이브 코딩으로 끝까지 다 밀어붙였지.
내가 세운 목표는 이거였어. "보기 괜찮고, 재밌고, 브라우저에서 바로 돌아가는 게임을 만들 수 있을까?" 다운로드도 필요 없고, 런처도 없는 그런 거.
결론부터 말하자면: 어, 되네?
지금 상태:
- 1라인 줄다리기 게임이야. 생산 건물을 지으면 웨이브마다 유닛이 자동으로 생성되고, 그 유닛들이 공유된 라인을 따라 내려가서 싸워.
- 가위바위보 식의 뻔한 상성표 같은 건 없어. 상성은 자연스럽게 발생해. 모든 유닛은 방어 타입과 공격 타입이 있고, 그 스탯(방어 타입 × 공격 타입 × 고정 방어력 × 실드 × 스플래시 × 대공)에 따라 승패가 갈려. 그러니까 "어떤 유닛이 뭘 잡는지"는 내가 하드코딩한 게 아니라, 네가 직접 알아내야 하는 거야.
- 가드 타워 두 개를 뚫고 들어가서 적 넥서스를 부수면 이겨. 아무도 못 뚫으면 오버타임으로 넘어가고.
- 1 vs 컴퓨터(완전 로컬, 서버 없음) 그리고 친구랑 1 vs 1도 가능해. 공유 가능한 URL만 있으면 돼. 한 명이 호스트가 되고, 다른 한 명은 링크 클릭만 하면 끝. 계정 필요 없고, 설치도 필요 없어.
기술 스택: Three.js + TypeScript, Vite. 브라우저 전용이야. 시뮬레이션은 순수하고 결정론적인 코어(시드 기반 난수, 고정 타임스텝)로 돌아가고, 그 위에 렌더러/AI/네트워크를 얹었어. 덕분에 디버깅할 때 진짜 살았지. 똑같은 매치를 그대로 다시 돌려볼 수 있었거든.
사운드: 전부 ElevenLabs로 만들었어. 유닛별 공격 효과음(텍스트 투 사운드), 루프되는 배경음악이랑 승리/패배 징글(Music API), 그리고 인트로 내레이션(텍스트 투 스피치)까지. 심지어 위치 기반이라 옆에서 싸우면 카메라 위치에 따라 소리가 좌우로 움직이고 페이드 아웃도 돼. 텍스트 프롬프트만으로 게임 사운드를 통째로 뽑아낼 수 있다는 게 지금 생각해도 좀 미친 거 같아.
아트: 광고 아니고, 아무런 관계도 없는데 진짜 공유할 가치가 있어서 말하는 거야. 맵이랑 3D 유닛 전부 meshy.ai로 만들었어. 나 모델링 진짜 젬병이거든. 텍스트나 이미지를 바로 쓸 수 있는 glb 파일로 바꿔주는 기능 없었으면, 나 같은 1인 개발자는 회색 박스나 띄우는 게임밖에 못 만들었을 거야.
