고전 아케이드 게임을 브라우저에서, 그것도 네트워크 대전까지 — LiveKit으로 동기화 문제를 푼 방법
핵심 요약
한 개발자가 고전 MAME 아케이드 게임을 웹 브라우저에서 즐길 수 있는 사이트 playarcade.to를 만들어 GeekNews에 공개했습니다. 단순 웹 플레이 사이트는 이미 많지만, 이 프로젝트의 차별점은 웹상에서 원활한 네트워크(멀티) 플레이를 지원한다는 점입니다. 1P/2P를 지원하는 게임이라면 종류와 상관없이 온라인 대전이 가능합니다.
어떻게 동작하나요?
- 사용자가 MAME 롬(ROM)을 업로드하면, 관리자가 해당 롬에 문제가 없는지 검사한 뒤 승인합니다.
- 승인된 게임만 사용자에게 노출되어 바로 플레이할 수 있습니다.
- 게임 진행 외의 부가 기능은 과감히 뺐습니다. 가볍게 접속해서 즐기는 데 집중한 구성입니다.
기술 스택
- 백엔드: FastAPI, Redis, PostgreSQL, WebSocket(WSS), LiveKit
- 프론트엔드: React + Vite, Tailwind CSS
진짜 재미있는 부분: 동기화 삽질기
이 프로젝트에서 가장 눈여겨볼 대목은 네트워크 플레이 동기화를 해결한 과정입니다.
1차 시도: 키 입력만 주고받기 (실패)
처음에는 각 사용자의 브라우저에 에뮬레이터를 각각 띄우고, 키 입력만 서로 전달하는 방식을 시도했습니다. 이론상 트래픽이 가장 적은 접근이지만, 실제로는 심각한 동기화 문제가 발생했습니다.
- 키 입력은 전달되지만 캐릭터 선택 같은 상태가 서로 어긋나고,
- 에뮬레이터 로딩 시간 차이 때문에 두 화면이 도저히 맞춰지지 않았습니다.
록스텝(lockstep) 방식의 네트워크 동기화가 왜 어려운지를 그대로 보여주는 사례입니다.
2차 시도: 화면 스트리밍 + 입력 전송 (성공)
발상을 바꿔서, 호스트의 게임 화면을 통째로 참여자의 브라우저에 스트리밍하는 방식을 택했습니다. 화면 전송에는 WebRTC 기반 미디어 서버인 LiveKit을 사용하고, 키 입력만 웹소켓으로 주고받도록 했습니다.
결과는 성공! 에뮬레이터가 한 곳에서만 돌아가니 동기화 문제가 원천적으로 사라졌고, 슈팅이든 대전 격투든 장르와 무관하게 문제없이 네트워크 플레이가 가능해졌습니다. 다만 화면을 통째로 스트리밍하는 만큼 네트워크 트래픽 부담이 남은 과제라고 합니다.
마무리
"입력 동기화 대신 화면 스트리밍"이라는 선택은 클라우드 게이밍(GeForce NOW 등)이 취하는 접근과 같은 방향입니다. 개인 프로젝트 규모에서 LiveKit + 웹소켓 조합으로 이를 구현해낸 점이 인상적입니다. 만든 분은 직접 사용해 보고 개선점을 알려주면 감사하겠다고 하니, 고전 게임에 추억이 있다면 한번 방문해 보세요.