우리가 게임을 만드는 방법 — 설치 없이, 파일 없이
2026년 8월 7일 · 개발 이야기
이 사이트의 게임 네 종은 전부 한 사람이 직접 만듭니다. 게임 엔진도, 다운로드도, 회원가입도 없습니다. 이번 글에서는 그 "없음"들이 어떻게 가능한지 — 우리가 게임을 만드는 방식의 뼈대를 소개합니다.
왜 브라우저인가
아이가 태블릿을 들고 "이거 하고 싶어"라고 했을 때, 앱 스토어에서 설치를 기다리고 계정을 만들고 권한을 허락하는 과정이 없기를 바랐습니다. 주소만 열면 몇 초 안에 게임이 시작되는 것 — 그것이 브라우저 게임을 선택한 이유의 전부입니다. 대신 그 몇 초를 지키기 위한 기술적 약속들이 필요해집니다.
3D는 Three.js로, 엔진 없이
키보드 탈출!의 거대 키보드도, 로켓 런처!의 하늘도, 숨은 친구 찾기!의 복셀 마을도 모두 웹 표준 3D 기술(WebGL) 위에서 Three.js라는 라이브러리로 그립니다. 상용 게임 엔진을 쓰면 편해지는 것이 많지만, 산출물이 무거워져 "주소만 열면 바로 시작"이 무너집니다. 우리 게임의 규모에서는 필요한 것만 직접 짜는 편이 더 가볍고 빠릅니다.
가볍게 그리는 요령도 몇 가지 정해 두었습니다. 키보드 탈출!의 수백 개 키캡은 한 번의 그리기 명령으로 묶어서 그리고, 숨은 친구 찾기!의 마을 지형도 백여 개의 블록을 하나의 형상으로 합쳐 그립니다. 태블릿과 스마트폰의 GPU는 PC보다 훨씬 약하기 때문에, "몇 번 그리는가"를 줄이는 것이 체감 성능을 가장 크게 바꿉니다.
소리는 파일이 아니라 코드로
게임의 효과음은 음원 파일을 내려받지 않고, 브라우저의 Web Audio 기술로 그 자리에서 합성합니다. 점프음, 코인 소리, 로켓 엔진음과 폭발음까지 전부 주파수와 파형을 코드로 지정해 만든 소리입니다. 내려받을 파일이 없으니 로딩이 빨라지고, 첫 소리가 늦게 나는 일도 없습니다. 무엇보다 소리의 높낮이·길이를 게임 상황에 맞춰 실시간으로 바꿀 수 있습니다.
스테이지는 코드가 아니라 데이터
키보드 탈출!의 스테이지 98개는 각각이 프로그램이 아니라 순수한 데이터입니다. 발판이 어디에 있고, 장애물이 어떻게 움직이고, 체크포인트가 어디인지를 적은 목록이지요. 새 스테이지를 만드는 일이 "코드를 짜는 일"이 아니라 "배치를 설계하는 일"이 되기 때문에, 규칙(물리·충돌·조작)은 한 곳에서만 관리되고 스테이지가 늘어도 게임이 무거워지지 않습니다.
월드를 하나 더하는 일도 같은 구조 위에 있습니다. 월드 하나는 자기 소개서 격의 파일 하나와 목록에 추가하는 한 줄이 전부입니다. 그래서 여섯 번째 초콜릿 월드의 19개 스테이지를 더할 때도 물리와 충돌 판정 코드는 한 줄도 건드리지 않았습니다. 월드가 여섯 개로 늘어난 지금까지 게임이 무거워지지 않은 이유입니다. 월드 전체 구성은 월드 안내 글에 정리되어 있습니다.
데이터는 당신의 기기에만
진행도·기록·닉네임은 서버가 아니라 지금 쓰고 있는 브라우저에만 저장됩니다. 우리는 이름도 이메일도 받지 않고, 서버에 게임 데이터를 두지 않습니다. 로그인 없이 바로 시작할 수 있는 것은 이 구조 덕분입니다. 대신 브라우저 데이터를 지우면 기록도 함께 사라지니, 자세한 내용은 개인정보처리방침을 참고해 주세요.
네 게임이 같은 부품을 나눠 씁니다
게임 네 종은 서로 다른 게임이지만, 몇 가지 부품은 각자 만들지 않고 하나를 나눠 씁니다. 게임을 열면 처음 뜨는 시작 카드, 왼쪽 위의 집 모양 버튼, 한국어와 영어를 오가는 언어 전환이 그렇습니다. 게임마다 따로 만들었다면 네 벌을 각각 고쳐야 했을 것들입니다. 지금은 한 곳을 고치면 네 게임이 같이 바뀝니다.
특히 신경 쓴 것은 화면에 보이는 글자입니다. 표시 문구는 게임 코드에 직접 쓰지 않고, 한국어와 영어를 같은 이름표로 묶어 한 곳에 모아 둡니다. 한쪽 언어에만 문구를 넣고 다른 쪽을 빠뜨리면 자동 검사가 그 자리에서 실패합니다. 영어 화면에 한국어가 그대로 남아 있는 사고는 눈으로 확인해서는 잘 걸러지지 않기 때문에, 사람 대신 검사에 맡겼습니다.
테스트로 지키는 것
혼자 만드는 게임일수록 "고쳤더니 다른 곳이 부서지는" 사고가 무섭습니다. 그래서 게임 규칙 — 마을 생성, 숨는 자리 선정, 난이도 곡선, 파티클 수명 같은 것들 — 은 화면과 분리된 순수 함수로 만들어 자동 테스트로 검증합니다. 실제로 로켓 런처!의 발사대 연기를 만들 때는, 새로 짠 테스트가 눈에 보이지 않던 입자 수명 버그를 먼저 잡아내 주었습니다.
이런 원칙들 위에서 게임을 하나씩 늘려 가고 있습니다. 다음 게임 소식도 이 개발 블로그에 이어서 적겠습니다. 게임은 게임 목록에서 바로 플레이할 수 있습니다.