HTML 파일 하나로 완성한 우주 슬링샷 게임, Starfling 뜯어보기

파일 하나짜리 게임이라고요?

웹 개발을 하다 보면 프로젝트 구조가 점점 복잡해지는 경험, 다들 해보셨을 거예요. 컴포넌트 폴더, 유틸 폴더, 설정 파일들이 줄줄이 늘어나죠. 그런데 "HTML 파일 딱 하나"로 완성도 높은 게임을 만든 프로젝트가 있어요. 바로 Starfling이라는 프로젝트인데요, 우주 공간에서 행성의 중력을 이용해 우주선을 슬링샷처럼 튕겨 나가게 하는 엔드리스(끝없는) 아케이드 게임이에요.

슬링샷이라는 개념이 뭐냐면, 실제 우주 탐사에서도 쓰이는 기법이에요. 우주선이 행성 근처를 지나갈 때 행성의 중력을 타고 가속을 받아서 연료 없이도 속도를 높이는 거죠. 보이저 탐사선이 목성과 토성의 중력을 이용해 태양계 바깥까지 날아간 게 대표적인 예시예요. Starfling은 이 물리 원리를 게임 메커니즘으로 가져온 거예요.

기술적으로 어떻게 가능한 걸까

단일 HTML 파일 안에 게임을 구현한다는 건, HTML 구조와 CSS 스타일링, 그리고 JavaScript 로직이 전부 한 파일에 들어간다는 뜻이에요. 보통은 유지보수를 위해 파일을 분리하지만, 이런 "싱글 파일" 접근법은 나름의 장점이 있거든요.

우선 배포가 극도로 간단해져요. 파일 하나만 어디든 올리면 끝이니까요. GitHub Pages든, 개인 서버든, 심지어 이메일로 보내도 바로 실행할 수 있어요. 별도의 빌드 과정도 필요 없고, npm install도 필요 없죠. 브라우저만 있으면 돌아가는 진짜 "제로 디펜던시" 프로젝트예요.

게임의 렌더링은 Canvas API를 활용하는 방식이에요. Canvas API가 뭐냐면, HTML의 <canvas> 태그 위에 JavaScript로 직접 그림을 그릴 수 있게 해주는 브라우저 내장 기능이에요. 별도의 게임 엔진 없이도 도형을 그리고, 애니메이션을 만들고, 사용자 입력을 처리할 수 있죠. 물리 엔진도 직접 구현하는 건데, 중력 시뮬레이션 자체가 수학적으로는 그리 복잡하지 않아요. 두 물체 사이의 거리와 질량으로 힘을 계산하는 뉴턴의 만유인력 법칙을 코드로 옮기면 되거든요.

조작도 탭(터치) 한 번으로 되게 설계되어 있어서, 모바일 환경에서의 접근성도 높아요. 복잡한 컨트롤 없이 타이밍만 맞추면 되니까, 게임 디자인 측면에서도 "원탭 메커니즘"이라는 미니멀한 접근이 인상적이에요.

싱글 파일 웹 프로젝트의 흐름

사실 단일 파일로 뭔가를 만드는 문화는 웹 개발에서 꽤 오래된 전통이에요. 예전에는 데모씬(demoscene)이라고 해서, 극도로 제한된 파일 크기 안에서 화려한 그래픽과 음악을 구현하는 대회가 있었어요. 요즘도 js13kGames 같은 대회에서 13KB 이내의 JavaScript 게임을 만들어 겨루기도 하죠.

최근에는 이런 싱글 파일 접근이 다시 주목받고 있어요. 리액트나 뷰 같은 프레임워크의 빌드 파이프라인이 점점 무거워지면서, 오히려 "바닐라 HTML/CSS/JS로 돌아가자"는 움직임이 생긴 거예요. 물론 대규모 프로덕션 앱에는 적합하지 않지만, 프로토타입이나 작은 도구, 인터랙티브 데모 같은 용도에는 오히려 이런 경량 접근이 훨씬 효율적이에요.

HTMX, Alpine.js 같은 라이브러리들이 인기를 얻는 것도 비슷한 맥락이에요. 무거운 SPA 프레임워크 없이도 충분히 인터랙티브한 웹을 만들 수 있다는 걸 보여주는 사례들이죠.

한국 개발자에게 주는 시사점

이 프로젝트에서 배울 점이 몇 가지 있어요. 먼저 포트폴리오나 사이드 프로젝트를 만들 때 꼭 거창한 기술 스택이 필요하지 않다는 거예요. HTML 파일 하나로도 완성도 높은 결과물을 만들 수 있고, 오히려 기본기가 탄탄하다는 걸 보여줄 수 있어요.

또 Canvas API를 활용한 2D 물리 시뮬레이션은 입문용 게임 개발 학습에 정말 좋은 주제예요. 프레임워크 의존 없이 requestAnimationFrame으로 게임 루프를 돌리고, 벡터 연산으로 물체의 움직임을 계산하는 과정을 직접 겪어보면, 게임 엔진이 내부적으로 어떻게 동작하는지 감을 잡을 수 있거든요.

실무적으로는 사내 해커톤이나 빠른 프로토타이핑 상황에서 이런 싱글 파일 접근이 유용해요. 아이디어를 빠르게 검증하고 공유하는 데 빌드 설정에 시간을 쓸 필요가 없으니까요. Slack에 파일 하나 던져놓으면 팀원 누구나 바로 열어볼 수 있잖아요.