기절초퐁 문제 해결 사례 2 - 게임 엔진 코드 클라이언트에서 서버로 이전

0 문제 정의

• 플레이어 및 관전자의 클라이언트 코드에서 게임 엔진을 동시에 각각 실행하고, paddle 위치 업데이트만 서버를 통해 게임에 접속 중인 다른 유저들에게 WebSocket 이벤트로 알려주던 기존 설계.
• 기존 설계대로 구현했을 때, 반응형 UI 적용 시, browser 윈도우 크기가 변할 때마다 해당 클라이언트에서 실행되던 게임 엔진 재실행. 결과적으로 한 게임에 대한 각 클라이언트의 게임 엔진 동기화가 실패 문제 발생.

1 해결책

• 관련 Pull Request : ✨ feat : 게임 엔진 백엔드로 이전 및 반응형 구현 #214
• 설계 상의 문제라고 판단하여 게임 엔진 서버로 이전.
• 서버에서 각 게임 상태 (공 위치, paddle 위치, 점수) in-memory 에 저장.
• 한 게임 당 서버에서 하나의 게임 엔진 실행, 플레이어 및 관전자들에게 10 ms 마다 게임 데이터 계산해서 전송.
• 플레이어들은 paddle 위치 변경할 때마다 서버에게 WebSocket 이벤트로 paddle 위치 변경 알림.

2 리뷰

• 장점
• 여러 유저에게 안정적으로 동기화된 게임 데이터 전송.
• 서버에서 게임 규격을 0~1 사이의 비율로 저장하고 계산하여 클라이언트에게 전송. 클라이언트의 browser 윈도우 크기 곱하여 반응형 손쉽게 구현.
• 보다 간결해진 코드 (PR git diff +306, -511)
• 단점
• 서버 연산량 & 네트워크 데이터 송수신 과부화. 끊김 없는 게임 UX 를 위해 10ms 마다 서버는 게임 데이터 연산을 수행해야하고, 모든 플레이어 & 관전자들에게 데이터를 보내줘야한다. 게임이 많아질수록 서버 성능이 저하될 수 있다.
• 개선안
• 게임 데이터 연산 및 전송 역할 서버 분리. 서버의 API 핸들링 성능에 영향을 주지 않도록 게임 데이터 연산 및 전송 역할만을 담당하는 별도 서버 구축. 하지만 유저 인증이 복잡해질 수 있다.