네, 가능합니다. 크롬을 비롯한 대부분의 모던 브라우저는 탭 전환이나 창 포커스 변화를 웹페이지가 감지할 수 있도록 여러 가지 API를 제공합니다.
1. Page Visibility API
페이지가 백그라운드로 전환되었는지(탭이 가려졌는지) 감지할 때 주로 씁니다.
// visibilitychange 이벤트 등록
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
console.log('페이지가 백그라운드로 전환되었습니다.');
// TODO: 사용자 이탈 처리 로직
} else {
console.log('페이지가 다시 활성화되었습니다.');
// TODO: 복귀 로직
}
});
document.hidden 은 Boolean(true: 백그라운드)document.visibilityState 로 "visible", "hidden" 등 상태 확인 가능
2. Window Focus/Blur 이벤트
창(윈도우) 단위로 포커스가 가거나 벗어날 때 감지합니다.
window.addEventListener('blur', () => {
console.log('브라우저 창이 포커스를 잃었습니다.');
});
window.addEventListener('focus', () => {
console.log('브라우저 창이 포커스를 얻었습니다.');
});
- 탭 외에 다른 애플리케이션으로 전환했을 때에도
blur 가 발생
3. Page Lifecycle API (옵션)
크롬 109+ 에서 지원하며, 백그라운드 탭 상태를 더 세밀하게 알 수 있습니다.
document.addEventListener('freeze', () => {
console.log('페이지가 freeze(일시 정지) 상태에 진입');
});
document.addEventListener('resume', () => {
console.log('페이지가 resume(재개) 상태');
});
주의사항
- 정확한 “사용자 시청 여부”(실제로 화면을 바라보는지)는 알 수 없습니다.
- 브라우저별 정책(절전 모드, 탭 쓰로틀링)으로 이벤트 호출 시점이나 주기가 달라질 수 있습니다.
- 모바일 브라우저나 임베디드 웹뷰의 경우 일부 API가 제한될 수 있습니다.
이렇게 하면 “탭이 숨겨지거나”(Page Visibility API), “창 포커스가 바뀌거나”(focus/blur) 할 때 웹사이트에서 그 변화를 감지해 대응할 수 있습니다. 추가로 궁금한 점 있으면 언제든 말씀해주세요!