핵심 요약
- 한 개발자가 브라우저 자바스크립트를 전혀 쓰지 않고 HTTP 연결을 열어둔 채 CSS를 계속 쏴주는 방식으로 '플래피 버드' 게임을 구현했습니다.
- 숨겨진 iframe으로 폼을 제출해 클릭 입력을 받고, Rust 백엔드 서버에서 60 FPS로 물리 연산을 돌려 화면을 실시간 갱신합니다.
- 코어당 500개 세션을 돌릴 정도로 서버 성능과 데이터 대역폭은 의외로 양호했으나, 클릭마다 서버를 왕복해야 해 레이턴시가 치명적이라는 결론을 얻었습니다.
요약 자바스크립트(JS)를 단 한 줄도 쓰지 않고 서버에서만 화면을 갱신해 게임을 돌릴 수 있을까요? 한 해외 개발자가 '익스트림 서버 사이드 렌더링(XSSR)'이라는 독특하고 광기 어린 실험 프로젝트를 공개해 개발자 커뮤니티에서 화제를 모았습니다.
작성자는 HTTP 연결을 종료하지 않고 계속 열어둔 채 브라우저로 데이터를 천천히 흘려보내면 어떻게 되는지에 주목했습니다. 과거 넷캣(netcat)으로 텍스트를 한 줄씩 쏠 때 브라우저가 새 HTML과 CSS가 들어오는 족족 실시간으로 화면을 다시 렌더링하던 특성을 그대로 응용한 것입니다. 여기에 사용자 입력을 받을 때 화면 전체가 깜빡이며 새로고침되는 현상을 막기 위해, 화면에 보이지 않는 투명 iframe을 만들고 그 안으로 form 제출(POST)을 전송하는 꼼수를 도입했습니다.
그 결과 완성된 것은 자바스크립트가 전혀 개입하지 않는 '플래피 버드(Flappy Bird)' 게임이었습니다. 화면 전체를 덮는 투명 버튼을 클릭하면 서버로 신호가 전달되고, 백엔드 서버(Rust 구현)가 물리 엔진을 60 FPS로 직접 연산하면서 새 CSS를 브라우저로 무한 스트리밍합니다. 브라우저에서 자바스크립트를 비활성화해도 새의 날갯짓과 장애물 이동, 점수 카운트가 정상 작동합니다.
실제 성능 측정 결과도 꽤 흥미롭습니다. 몇 분 동안 플레이하면 브라우저 메모리 부담으로 약간 버벅거림이 발생하지만, 홈랩의 오래된 서버 기준으로도 코어당 약 500개의 게임 세션을 거뜬히 돌릴 수 있었습니다. 대역폭 역시 초당 약 20KiB 수준으로, 요즘 흔한 1MB짜리 대형 JS 번들을 다운로드하는 대신 약 49초 동안 끊김 없이 게임을 스트리밍할 수 있는 셈입니다. 다만 유일한 치명타는 지연 시간(레이턴시)으로, 마우스를 클릭할 때마다 서버 왕복 통신이 필요해 물리적인 거리가 먼 환경에서는 정상적인 플레이가 불가능하다는 유쾌한 한계를 남겼습니다.
Sponsored · 광고