웹 페이지의 가시성 상태 감지하기 - Visibility API를 활용한 자바스크립트 코드 설명
웹에서 실행되는 페이지가 화면에 보이는지 아닌지를 판별하는 방법을 다룹니다. 이 글, 웹 페이지의 가시성 상태 감지하기 - Visibility API를 활용한 자바스크립트 코드 설명 은 Visibility API의 핵심 동작과, 이를 이용해 불필요한 리소스 사용을 줄여 성능을 개선하는 실무 팁을 제공합니다. 간단한 이벤트 기반 접근으로 배터리나 CPU 사용량을 절감할 수 있습니다.
1. 🛠️ 가시성 상태 감지 JavaScript 코드
"visibilitychange" 이벤트를 이용하면 탭 전환이나 창 최소화 등으로 페이지가 보이는지 숨겨졌는지를 실시간으로 감지할 수 있습니다. 이 섹션은 웹 페이지의 가시성 상태 감지하기 - Visibility API를 활용한 자바스크립트 코드 설명 에서 바로 적용 가능한 기본 예제를 보여줍니다.
JavaScript 기본 감지코드
document.addEventListener("visibilitychange", () => {
// 상태가 변경될 때마다 document.visibilityState 값을 확인
console.log("현재 페이지 상태:", document.visibilityState);
});
2. 🔍 코드 및 속성 설명
2-1. 이벤트 리스너 설명
- document.addEventListener("visibilitychange", ...): 탭 활성화/비활성화나 창 최소화 시 발생하는 이벤트를 등록합니다. 이벤트가 발생하면 등록한 콜백이 호출됩니다.
- 콜백 함수: 이벤트가 트리거될 때 실행되는 로직입니다. 짧은 처리로 상태만 체크하거나, 더 복잡한 리소스 제어를 수행할 수 있습니다.
2-2. document.visibilityState 반환 값
이 속성은 현재 페이지의 가시성 상태를 문자열로 반환합니다. 주요 값과 의미는 다음과 같습니다.
| 값 (Value) | 의미 |
|---|---|
visible |
사용자가 현재 페이지를 보고 있는 상태. 활성 탭입니다. |
hidden |
페이지가 보이지 않는 상태. 백그라운드 탭, 최소화된 창, 잠금 화면 등이 해당됩니다. |
prerender |
브라우저가 페이지를 미리 로드하는 상태로, 모든 브라우저에서 항상 지원되는 것은 아닙니다. |
3. 🎯 실용적인 활용: 성능 최적화
가장 흔한 활용법은 페이지가 숨겨졌을 때 불필요한 작업을 중단하는 것입니다. 네트워크 요청, 애니메이션, 미디어 재생 같은 고비용 작업을 제어하면 사용자 장치의 리소스 소비를 크게 줄일 수 있습니다.
활용 예시 (비디오 재생 제어)
document.addEventListener("visibilitychange", () => {
const video = document.getElementById('myVideo');
if (document.visibilityState === 'hidden') {
// 페이지가 숨겨지면 비디오 일시 중지
if (video) video.pause();
} else if (document.visibilityState === 'visible') {
// 페이지가 다시 보이면 비디오 재생 재개
if (video) video.play();
}
});
함께 보면 좋은 엔터프라이즈 사례
🚀 이 주제, 우리 서비스에 어떻게 적용할까요?
웹 페이지의 가시성 상태 감지하기 - Visibility API를 활용한 자바스크립트 코드 설명를 실제 서비스와 조직에 녹여보고 싶다면, 현재 아키텍처와 운영 방식을 한 번 점검해 보는 것부터 시작해 보세요. 팀 위키나 기술 블로그, 사내 스터디 주제로도 아주 좋습니다.
이 글이 도움이 됐다면, 비슷한 엔터프라이즈 사례 글들도 함께 살펴보면서 우리 조직에 맞는 운영 상용구를 정의해 보세요.
댓글
댓글 쓰기