4일 만에 AI로 만든 멀티플레이어 3D 항해 게임 개발기

실용적 조언

Hunyuan 3D로 생성한 고용량 모델은 반드시 Blender나 전용 스튜디오 도구로 리메싱하여 용량을 줄여야 웹에서 원활히 작동한다.
멀티플레이어 게임 테스트 시 항상 두 개 이상의 브라우저를 띄워 실시간 동기화 오류를 체크해야 한다.
AI에게 물리 객체 생성을 맡길 때는 기준 단위(Unit)를 명확히 정의해주어야 스케일 오류를 방지할 수 있다.

섹션별 상세

AI 도구를 활용한 3D 에셋 제작 파이프라인을 구축했다. Nano Banana로 2D 컨셉을 생성한 뒤 Hunyuan 3D의 image-to-3d 기능을 통해 3D 메쉬를 추출하고, Hunyuan Studio와 Blender를 거쳐 로우 폴리 리메싱을 수행했다. 이 과정을 통해 40MB의 고용량 모델을 800KB로 압축하여 텍스처 크기를 98% 줄이는 최적화 성과를 거두었다.

게임 로직과 UI 구현에 LLM을 적극적으로 활용했다. DeepSeek와 Gemini를 사용하여 전체 코드의 90% 이상을 생성했으며, 특히 DeepSeek는 SVG 코드를 직접 작성하여 체력 바와 쿨다운 아이콘 같은 HUD 요소를 구현했다. SVG의 clipPath 속성을 활용해 잉크가 번지는 듯한 시각 효과를 코드로 자동화했다.

멀티플레이어 환경 구축을 위해 WebSockets와 Node.js 릴레이 서버를 사용했다. Three.js와 Cannon.js를 결합하여 물리 연산을 처리하고, Simplex-noise와 alea PRNG를 이용해 결정론적인(deterministic) 섬 지형을 절차적으로 생성했다. 이를 통해 모든 플레이어가 동일한 월드 구성을 공유할 수 있도록 설계했다.

개발 과정에서 겪은 기술적 시행착오와 교훈을 정리했다. 싱글 플레이어 코드를 사후에 서버-클라이언트로 분리하는 과정에서 큰 어려움을 겪었으므로, 처음부터 권한 서버(Authoritative Server) 로직을 설정할 것을 권장했다. 또한 AI가 생성한 객체의 스케일 단위가 실제 물리 엔진과 맞지 않아 발생하는 오차를 수동으로 조정해야 하는 한계도 확인됐다.

용어 해설

쓰리 제이에스(Three.js): — 웹 브라우저에서 3D 그래픽을 렌더링하기 위한 자바스크립트 라이브러리이다. WebGL을 기반으로 하며, 복잡한 저수준 그래픽 API를 추상화하여 개발자가 브라우저 내에서 3D 객체, 조명, 카메라 등을 쉽게 다룰 수 있게 한다.
이미지 기반 3D 생성(Image-to-3D): — 2D 이미지를 입력받아 3D 메쉬(Mesh)와 텍스처를 생성하는 AI 기술이다. 본 게시물에서는 Hunyuan 3D를 사용하여 2D 컨셉 아트를 게임용 3D 모델로 변환하는 워크플로우를 보여준다.
로우 폴리 리메싱(Low-poly Remeshing): — 고해상도 3D 모델의 폴리곤 수를 줄여 데이터 크기를 최적화하는 기법이다. 웹 게임처럼 리소스 제약이 큰 환경에서 렌더링 성능을 확보하기 위해 필수적이며, 본문에서는 40MB 모델을 800KB로 압축하는 데 사용됐다.
권한 서버(Authoritative Server): — 멀티플레이어 게임에서 모든 게임 상태의 최종 결정권을 가진 서버 구조이다. 클라이언트 간의 동기화 오류와 변조를 방지하기 위해 서버가 물리 연산과 상태 변화를 주도하며, 개발 초기 단계부터 고려해야 하는 핵심 아키텍처이다.

언급된 도구

Three.js추천

3D 게임 엔진 및 렌더링

Hunyuan 3D Studio추천

이미지 기반 3D 모델 생성 및 최적화

DeepSeek추천

코드 생성 및 SVG UI 디자인

Cannon.js중립

3D 물리 연산 엔진

언급된 리소스

GitHubHunyuan 3D Studio