# 숨겨진 탭을 게임 상태로 처리

> 페이지 가시성 변경을 사용하여 일시 중지할 항목, 저장할 항목, 시간 이동 없이 브라우저 게임을 재개하는 방법을 선택하세요.

- URL: https://oneshotgems.ai/ko/topics/pausing-background-games
- 카테고리: 게임 개발자용
- 유형: 가이드
- 업데이트일: 2026년 10월 5일

브라우저 게임을 실행하는 동안 플레이어는 탭을 전환하거나 창을 최소화하거나 기기를 잠글 수 있습니다. 브라우저는 숨겨진 문서의 애니메이션 콜백을 일시 중지하고 타이머 실행 빈도를 낮추는 경우가 많으므로 업데이트 루프가 예약된 모든 틱을 받는다고 가정할 수 없습니다. 가시성을 명시적인 상태 전환으로 모델링하세요. 그러면 플레이어가 돌아왔을 때 불확실한 시뮬레이션 시간을 재구성하려고 애쓰는 대신 타이머, 입력, 사운드, 저장된 진행 상황을 어떻게 처리할지 정할 수 있습니다.

## 가시성이 바뀔 때의 동작을 정하세요

반사 신경 게임에서는 document.visibilityState가 hidden으로 바뀔 때 플레이를 일시 중지하고 카운트다운을 멈추며, 누르고 있던 키 상태를 지우세요. 페이지가 다시 보이면 재개 버튼을 표시합니다. 턴제 퍼즐은 일시 중지 화면 없이 보드를 그대로 둘 수 있으며, 그동안 오디오를 끄고 애니메이션 시계를 초기화할 수 있습니다.

구현하기 전에 타이머, 움직이는 위험 및 누른 키에 대해 예상되는 동작을 적어 두십시오. 그런 다음 각 경우마다 전환하고 돌아오십시오. 이 작은 매트릭스는 논리적으로 유지되는 키나 게임이 보이지 않는 동안 만료되는 타이머와 같은 버그를 포착합니다.

## 재개하기 전에 시간 기준을 초기화하세요

visibilitychange 이벤트를 감지하고 일시 중지 결정과 렌더링을 분리하세요. 돌아왔을 때 이전 프레임 타임스탬프를 현재 애니메이션 타임스탬프로 설정하거나, 재개 후 첫 프레임에서 시계를 초기화하도록 표시합니다. 그러지 않으면 다음 델타에 숨겨져 있던 전체 시간이 포함되어 객체가 갑자기 움직일 수 있습니다.

흐림 및 초점에만 의존하는 대신 페이지 가시성 API를 사용하십시오. 창은 표시된 상태에서 초점을 잃을 수 있으며 가시성은 문서가 실제로 숨겨져 있는지 여부를 전달합니다. 자동 저장 정책을 독립적으로 유지하세요. 일시 중지 동작과 지속성은 목적이 다르므로 별도로 테스트해야 합니다.

## 자주 묻는 질문

**requestAnimationFrame이 숨겨진 탭에서 계속 실행되나요?** 대부분의 브라우저는 배경 탭이나 숨겨진 iframe에서 애니메이션 콜백을 일시 중지하고 타이머 콜백도 제한될 수 있습니다. 이러한 동작을 정확한 시계가 아닌 가시성을 처리하기 위한 이유로 간주하세요.

**숨겨진 경우 모든 게임이 일시 중지되어야 합니까?** 모든 디자인에 맞는 단일 정책은 없습니다. 보이지 않는 시뮬레이션이 도전을 바꾸는 게임을 일시 중지합니다. 턴 기반 플레이의 경우 현재 보드를 보존하는 것만으로도 충분할 수 있습니다. 두 경우 모두, 돌아올 때 의도적으로 타이밍과 오디오를 재설정하십시오.

## 궁금한 것을 더 찾아보세요

- [안정적인 브라우저 게임 루프 구축](https://oneshotgems.ai/ko/topics/browser-game-loop): 시뮬레이션 속도를 플레이어의 디스플레이 새로 고침 빈도에 연결하지 않고 브라우저 게임 업데이트를 구조화하고 애니메이션 프레임을 중심으로 그림을 그립니다.
- [델타 시간으로 튀지 않는 움직임 구현하기](https://oneshotgems.ai/ko/topics/delta-time-in-games): 게임 모션에 경과 시간을 적용하고, 안전한 따라잡기 정책을 선택하고, 다양한 새로 고침 빈도와 정지 후 움직임을 테스트합니다.

## 추가 읽을거리

- [MDN: 페이지 가시성 API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)

---
대표 페이지: https://oneshotgems.ai/ko/topics/pausing-background-games
