# 디스플레이 전반에 걸쳐 예측 가능한 게임 루프 > 시뮬레이션 속도를 플레이어의 디스플레이 새로 고침 빈도에 연결하지 않고 브라우저 게임 업데이트를 구조화하고 애니메이션 프레임을 중심으로 그림을 그립니다. - URL: https://oneshotgems.ai/ko/topics/browser-game-loop - 카테고리: 게임 개발자용 - 유형: 가이드 - 업데이트일: 2026년 10월 5일 브라우저 게임 루프는 시뮬레이션, 그리기, 입력을 조정하지만 모든 화면이 초당 같은 수의 프레임을 만든다고 가정해서는 안 됩니다. 콜백은 화면 주사율에 따라 다른 빈도로 실행되고, 숨겨진 탭에서는 일시 중지되며, 메인 스레드가 바쁠 때는 늦게 실행될 수 있습니다. 시뮬레이션은 경과 시간을 기준으로 하고 화면 표시 시점은 브라우저가 예약하도록 하세요. 이렇게 분리하면 움직임을 이해하기 쉽고 긴 지연 후의 동작도 제어할 수 있습니다. ## 상태 변경과 그리기를 분리하세요 다음 시각적 업데이트를 위해 requestAnimationFrame을 사용한 다음 해당 타임스탬프를 작은 루프 코디네이터에 전달합니다. 경과 시간을 바탕으로 위치, 타이머, 규칙을 업데이트합니다. 업데이트 후 현재 상태를 그립니다. 렌더러는 충돌이 발생했는지 여부를 결정해서는 안 되며, 충돌 검사는 스프라이트가 칠해졌는지 여부에 의존해서는 안 됩니다. 소규모 플랫폼 테스트의 경우 선택한 초당 월드 유닛 수로 마커를 수평으로 이동합니다. 60Hz 디스플레이와 새로 고침이 높은 디스플레이에서 동일한 경로를 실행하세요. 마커가 한 화면에서 동일한 벽시계 간격으로 더 멀리 이동하는 경우 시간 단위가 아닌 콜백별로 일부 움직임이 계속 적용됩니다. ## 늦은 프레임에 대한 복구 정책 선택 긴 정지 뒤에는 경과 시간이 매우 커질 수 있습니다. 캐주얼 실시간 게임에서는 이 값을 제한해 돌아온 플레이어가 캐릭터가 여러 장애물을 순간 이동으로 통과하는 모습을 보지 않게 하세요. 결정론적 시뮬레이션에는 누산기를 사용하는 고정 업데이트 간격을 적용하고, 따라잡기 업데이트 횟수에 상한을 두세요. 보간이 유용하다면 시뮬레이션 상태 사이의 화면을 그립니다. 반복 가능한 장애물 코스에서 콜백 간격이 가장 길었던 시간을 기록한 다음, 다른 화면으로 전환했다가 돌아와 게임을 확인하세요. 게임을 일시 정지할지, 일부만 따라잡을지, 마지막 상태에서 재개할지 명시적으로 정하세요. 지연된 프레임 하나가 결정을 좌우하게 두지 마세요. ## 자주 묻는 질문 **그리기 위해 setInterval을 사용해야 합니까?** requestAnimationFrame은 다시 그리기 근처에 예약되고 일반적으로 숨겨진 문서에 대해 일시 중지되므로 시각적 작업에 사용하세요. 타이머는 여전히 비시각적 작업을 예약할 수 있지만 디스플레이 시계로 취급되어서는 안 됩니다. **프레임 타임스탬프는 어디에서 나오나요?** requestAnimationFrame 콜백은 고해상도 타임스탬프를 제공합니다. MDN은 타이밍과 일회성 동작을 문서화합니다. 콜백을 계산하는 대신 해당 타임스탬프를 사용하여 진행 상황을 계산합니다. ## 궁금한 것을 더 찾아보세요 - [델타 시간으로 튀지 않는 움직임 구현하기](https://oneshotgems.ai/ko/topics/delta-time-in-games): 게임 모션에 경과 시간을 적용하고, 안전한 따라잡기 정책을 선택하고, 다양한 새로 고침 빈도와 정지 후 움직임을 테스트합니다. - [탭이 숨겨져 있으면 게임을 일시 중지하세요](https://oneshotgems.ai/ko/topics/pausing-background-games): 페이지 가시성 변경을 사용하여 일시 중지할 항목, 저장할 항목, 시간 이동 없이 브라우저 게임을 재개하는 방법을 선택하세요. - [브라우저 게임 HUD를 동기화 상태로 유지](https://oneshotgems.ai/ko/topics/synchronizing-game-hud): 게임 상태를 진실의 소스로 취급하고 하나의 업데이트 경로에서 HUD 값을 렌더링하여 점수, 생명, 타이머의 일관성을 유지하세요. ## 추가 읽을거리 - [MDN: requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame) --- 대표 페이지: https://oneshotgems.ai/ko/topics/browser-game-loop