모바일 웹 대전 게임, 조작감과 성능을 함께 잡는 설계: ‘Mace Duel Mobile’

핵심은 ‘서버가 판정하고, 모바일은 즉시 반응하게’

Mace Duel Mobile은 휴대전화와 PC 브라우저에서 즐기는 2인 온라인 대전 게임을 목표로 한 TypeScript 프로젝트다. 클라이언트는 Vite와 Three.js로 3D 화면 및 입력을 처리하고, 서버는 Node.js와 ws 기반 WebSocket으로 방과 게임 시뮬레이션을 운영하는 구성을 제시한다.

기능 범위에는 비공개 방 생성, 2인 매칭, 라운드제 승부, 재대결, 바람 충전 투사체, 낙하 거리에 비례해 강해지는 메이스 공격이 포함된다. 특히 대전 게임에서 중요한 원칙은 분명하다. 플레이어의 체력이나 피해량, 승패를 클라이언트가 결정하게 두지 않는 것이다.

이 설계에서는 클라이언트가 이동 입력, 시점 방향, 공격 명령만 전달한다. 실제 이동·피격·투사체·체력·라운드 결과는 서버가 계산한다. 네트워크 환경에서 완벽한 부정행위를 막는 만능 해법은 아니지만, 브라우저 대전 게임의 기본적인 신뢰 경계를 서버 쪽에 두는 방식이다.

모바일 조작은 ‘두 손가락 동시 입력’이 기준

모바일 환경에서는 왼쪽 가상 스틱으로 이동하고, 오른쪽 화면 드래그로 시점을 돌리는 구성이 중심이다. 여기에 점프, 달리기, 메이스 공격, 바람 충전 버튼을 별도로 배치하면 이동과 시점, 공격을 동시에 수행할 수 있다.

터치스크린에서는 여러 손가락 입력을 안정적으로 구분하는 일이 중요하다. MDN의 모바일 게임 조작 가이드는 터치 포인터가 손가락 하나를 나타내며, 여러 포인터를 동시에 관리할 수 있다고 설명한다. 1 따라서 가상 스틱과 시점 조작, 공격 버튼을 단일 입력처럼 처리하기보다 포인터별 상태를 분리해 설계하는 편이 적합하다.

PC 사용자도 고려해 키보드·마우스 조작을 유지하면 테스트와 접근성이 좋아진다. 휴대전화에서는 가로 화면 사용을 권장하는 방식이 자연스럽다.

전투 판정: 일반 타격과 낙하 공격을 구분

게임 규칙은 메이스 공격에 낙하 요소를 더한다. 공중에서 하강 중일 때 일정 거리 이상 떨어진 뒤 공격에 성공하면 일반 공격보다 높은 피해와 넉백을 주는 방식이다. 반대로 지상 또는 낮은 낙하 상태에서는 기본 피해만 적용된다.

바람 충전은 투사체로 발사되며, 충돌 또는 수명 종료 시 주변 플레이어를 밀어내고 띄운다. 이 효과는 상대를 공중으로 올린 뒤 낙하 공격 기회를 만드는 전술적 수단이 될 수 있다. 다만 피해와 넉백, 투사체 충돌 여부 모두 서버에서 산출해야 양쪽 화면의 결과가 어긋나는 문제를 줄일 수 있다.

설계안은 서버를 초당 30회 업데이트하는 고정 틱 방식으로 제시한다. 또한 공격 판정에서 네트워크 왕복 지연의 일부를 고려해 상대의 최근 위치 기록을 되돌려 확인하는 제한적 보정도 사용한다. 이는 고지연 환경에서 공격이 눈앞의 상대를 통과한 것처럼 보이는 상황을 완화하려는 접근이다.

렌더링 성능: 반복 지형은 인스턴싱, 그림자는 선택 기능

모바일 브라우저용 3D 게임은 드로우콜과 그림자 비용을 관리해야 한다. 동일한 지오메트리와 재질을 반복해 배치하는 오브젝트에는 Three.js의 InstancedMesh를 사용할 수 있다. Three.js는 이를 인스턴스 렌더링을 지원하는 특수한 Mesh로 설명한다. 2

그림자는 시각적 완성도를 높이지만 기기 성능에 따라 부담이 될 수 있다. Three.js의 WebGLRenderer.shadowMap은 그림자 맵을 관리하며, 그림자가 필요하지 않다면 비활성화할 수 있다. 4 따라서 저사양 기기용 품질 옵션에서 그림자를 끄거나, 동적 그림자 갱신을 줄이는 선택지를 두는 편이 현실적이다.

구현 시 점검할 항목

• 서버 권위 유지: 클라이언트는 입력과 요청만 보내고, 체력·피해·승패는 서버가 산출한다.
• 메시지 검증: 방 코드, 닉네임 길이, 수치 범위, 입력 시퀀스, 메시지 크기를 서버에서 확인한다.
• 방 단위 격리: 각 방의 플레이어·투사체·라운드 상태를 분리해 다른 경기 데이터가 섞이지 않게 한다.
• 연결 관리: 주기적 heartbeat와 연결 종료 처리를 두고, 빈 방은 정리한다.
• 배포 보안: 공개 서비스에서는 HTTPS와 WSS를 사용하고, 리버스 프록시가 WebSocket 업그레이드 요청을 올바르게 전달하도록 설정해야 한다.
• 모바일 우선 테스트: 실제 iOS·Android 브라우저에서 멀티터치 충돌, 화면 회전, 성능 저하, 백그라운드 복귀를 확인한다.

이 프로젝트의 흥미로운 지점은 화려한 기능을 늘어놓는 데 있지 않다. 모바일 입력, 서버 판정, 네트워크 보정, 3D 렌더링 비용처럼 온라인 대전 게임에서 쉽게 품질 문제가 드러나는 지점을 처음부터 구조에 반영했다는 데 있다. 프로토타입 단계에서는 전투 감각을 빠르게 검증하고, 이후에는 매치메이킹·인증·재접속·관전·치트 탐지 같은 운영 기능을 별도 단계로 확장하는 흐름이 적절하다.