90% AI 생성 코드, 100% AI 에셋, Three.js 경험 제로. Vibe Jam 2026을 위한 3D 브라우저 해전 게임을 만들었습니다.

Levelsio의 Cursor Vibe Jam을 위해 멀티플레이어 3D 항해 게임을 만드는 4일간의 스프린트를 방금 마쳤습니다. 단순히 결과물만 보여주는 게 아니라 실제 파이프라인을 공유하고 싶었습니다. 이 게임은 "Three.js를 한 번도 다뤄본 적 없음"에서 "공유된 바다에서 십여 명의 플레이어가 서로 측면 포격을 주고받는 상태"까지 발전했으며, 그 과정에서 여러분의 시행착오를 줄여줄 수 있는 많은 교훈을 얻었습니다.

이 게임은 브라우저 기반의 범선 시대 해전 게임입니다. 프리깃함을 지휘하여 좌우 현측 포격을 가하고, AI 해적이나 실제 인간을 추격할 수 있습니다. 전체 게임(그냥 데모일지도 모르죠. 어쨌든.)은 4일 만에 90% 이상의 AI 생성 코드(DeepSeek + Gemini)와 100% AI 생성 에셋(Nano Banana → Hunyuan 3D → 저폴리곤 .glb)으로 제작되었습니다.

이를 가능하게 한 스택은 다음과 같습니다:

엔진: Three.js (처음 써봄, 살려주세요)

네트워킹: 간단한 Node 릴레이 서버를 사용한 WebSockets

물리: Cannon.js (제 자신을 괴롭히는 걸 좋아해서)

절차적 월드: 결정론적 섬 생성을 위한 Simplex-noise + alea PRNG

에셋: 메시용 Hunyuan 3D Studio, 2D 컨셉용 Nano Banana, HUD용 SVG

UI: Vue + raw SVG

AI 생성 에셋

Nano Banana에서 2D 프리깃함 컨셉을 가져와 Hunyuan의 이미지-to-3D 파이프라인에 넣었고, 40MB짜리 괴물을 얻었습니다. 그 후 Hunyuan Studio의 저폴리곤 리메싱과 Blender를 사용하여 800KB로 줄였습니다. 이는 면 수를 85%, 텍스처 크기를 98% 줄인 것입니다. 모델은 PS2 에셋처럼 보이지만, 게임 잼용으로는 최고입니다.

HUD의 경우, DeepSeek가 원시 SVG로 닻(HP 바)과 대포 아이콘을 그렸고, clipPath를 사용하여 양피지에서 잉크가 사라지는 것처럼 체력과 쿨타임을 "소모"하도록 했습니다. 속도계는 구멍을 통과하는 매듭진 밧줄 모양입니다.

현재는 순수 데스크톱 브라우저용입니다. 터치 컨트롤, 뷰포트 스케일링, 모바일 적응은 엄청난 작업량이라 시간이 날 때 할 예정입니다. 아마도요.

다음번에 더 일찍 할 일

첫날부터 권한 있는 서버 로직을 설정하세요. 나중에 싱글 플레이어 코드를 클라이언트/서버로 분리하는 것은 고통스러웠습니다.

브라우저 두 개를 항상 띄워놓고 테스트하세요. 멀티플레이어 동기화 문제는 두 화면을 나란히 보기 전까지는 숨어 있습니다.

AI의 스케일을 믿지 마세요. 제 배는 길이가 1단위입니다. AI는 연기가 0.3단위 너비여야 한다고 생각했죠. 그건 버섯구름입니다.

게임에 대한 기술적인 세부 사항은 무엇이든 기꺼이 논의할 수 있습니다. 질문이나 제안을 마음껏 던져주세요. 직접 해보고 싶으시다면 Vibe Jam 사이트에서 Cannon Rush를 검색하거나 제 개인 사이트로 바로 접속하세요.