웹 게임의 구조 이해하기: 게임 루프와 브라우저 점검 포인트

웹으로 게임을 만들기로 했다면 가장 먼저 마주치는 고민은 '내 게임은 대체 어떤 흐름으로 돌아가야 하는가'입니다. 콘솔이나 데스크톱 엔진을 다뤄본 사람도, 처음 코드를 짜보는 사람도 이 흐름을 이해하지 못하면 결국 임시방편으로 코드를 짜깁기하게 됩니다. MDN의 두 문서는 이 흐름의 핵심 개념인 '게임 루프'와, 그 루프를 돌리는 무대인 '웹 플랫폼'이 어떤 기술로 구성되는지를 설명합니다.

어떤 제작자에게 필요한가

이 내용은 웹에서 동작하는 게임을 처음 설계하는 사람, 혹은 다른 플랫폼에서 게임을 만들어봤지만 브라우저 환경은 낯선 사람에게 유용합니다. 특히 자바스크립트로 애니메이션이나 입력 처리를 직접 짜야 하는 제작자라면, 루프를 어떻게 구성해야 하는지 감을 잡는 데 도움이 됩니다.

실제로 무엇을 할 수 있나

모든 비디오 게임은 결국 같은 패턴을 반복합니다. 상황을 사용자에게 보여주고, 입력을 받아들이고, 그 입력을 해석해 행동으로 바꾸고, 그 결과로 새로운 상황을 계산하는 과정입니다. 이 네 단계로 이루어진 루프는 승리, 패배, 종료 등 어떤 종료 조건이 발생할 때까지 계속 반복되는 것이 게임의 기본 틀입니다.

이 반복 방식은 게임 종류에 따라 다릅니다. 예를 들어 '틀린 그림 찾기' 같은 게임은 사용자가 클릭하거나 터치할 때만 루프가 움직이는, 턴 기반에 가까운 구조를 가집니다. 반면 매 프레임마다 화면이 바뀌어야 하는 액션 게임이라면, 각 프레임마다 루프를 한 번씩 실행하는 '메인 루프' 구조가 필요합니다.

또한 MDN은 웹이 단순한 카드 게임이나 소셜 게임을 넘어 3D 액션 슈팅 게임이나 RPG 같은 본격적인 게임을 만들 수 있는 플랫폼으로 성장했다고 설명합니다. 자바스크립트 성능 개선과 다양한 웹 API 덕분에 가능해진 변화입니다.

사용 방법

프레임 단위로 동작해야 하는 게임이라면 `window.requestAnimationFrame()`이 메인 루프의 기반이 됩니다. 이 함수는 콜백 함수를 인자로 받아, 브라우저가 다음 화면을 다시 그리기 직전 적절한 시점에 그 콜백을 실행해줍니다.

MDN이 제시하는 가장 단순한 형태는 다음과 같습니다.

• `main()`이라는 함수를 전역으로 만들고, 그 안에서 `window.requestAnimationFrame(main)`을 호출해 다음 프레임에도 자기 자신이 다시 불리도록 예약합니다.
• 함수 본문에는 매 프레임마다 실제로 처리해야 할 로직을 넣습니다.
• 마지막으로 `main()`을 한 번 호출해 루프를 시작시킵니다.

여기서 중요한 점은 다음 `requestAnimationFrame` 예약을 루프 내용을 처리하기 전에 먼저 해둔다는 것입니다. 이렇게 하면 현재 프레임 처리가 지연되더라도 브라우저가 다음 프레임을 미리 계획할 수 있습니다. 이 방식은 브라우저가 화면을 그리려는 시점에 맞춰 루프가 돌기 때문에, 애니메이션을 프레임 단위로 세밀하게 통제할 수 있다는 장점이 있습니다.

다만 모든 애니메이션이 프레임 단위 제어를 필요로 하는 것은 아닙니다. 단순한 움직임이라면 CSS 애니메이션처럼 브라우저가 이미 제공하는 도구로 충분히 처리할 수 있습니다.

입력이나 오디오, 그래픽, 저장소 등 게임 제작에 필요한 기능들은 웹이 이미 여러 API로 제공하고 있습니다. 예를 들어 오디오 처리는 Web Audio API, 3D·2D 그래픽은 WebGL, 터치나 게임패드 입력은 각각의 입력 API, 데이터 저장은 IndexedDB가 맡는 식입니다. 게임의 각 영역을 담당하는 기술이 이미 나뉘어 있다는 점을 알아두면 설계할 때 어떤 API를 찾아봐야 할지 방향을 잡기 쉬워집니다.

한계와 주의할 점

MDN이 제시한 기본 메인 루프 예제에는 스스로 밝히는 한계가 있습니다. `main()` 함수가 전역 객체인 window를 오염시킨다는 점, 그리고 탭을 닫거나 새로고침하지 않는 한 루프를 멈출 방법이 없다는 점입니다. 원문은 이 문제들을 해결하는 구체적인 대안도 함께 제시합니다. 전역 오염 문제는 즉시 실행 함수 표현식(IIFE)으로 `main()`을 감싸는 방식으로 해결하고, 루프 정지 문제는 `requestAnimationFrame()`이 반환하는 ID를 저장해 두었다가 `window.cancelAnimationFrame()`을 호출해 해결하는 방법을 코드와 함께 설명합니다.

또한 게임마다 루프를 구동하는 기준이 다르다는 점도 유의해야 합니다. 시간 기반으로 도는 루프인지, 사용자 입력 기반으로 도는 루프인지, 혹은 둘 다 필요한지는 만들려는 게임의 성격에 따라 달라집니다. 무조건 프레임 단위 루프를 쓰는 것이 정답은 아니며, 자주 일어나지 않는 이벤트라면 메인 루프 바깥으로 빼는 편이 나을 때도 있습니다.

다음에 볼 것

이번 발췌는 메인 루프의 기본 개념과 가장 단순한 구현, 그리고 웹이 제공하는 게임 관련 기술 목록까지를 다룹니다. 루프를 더 안전하게 멈추고 재시작하는 방법이나 각 API의 구체적인 사용법은 MDN의 해당 문서에서 이어지는 내용을 직접 확인하는 것이 좋습니다.

이 글은 공식 문서를 한국어로 정리한 것이며 세부 내용은 원문을 기준으로 해 주세요.