온라인 탭 포커스 감지 — 자리를 비울 때 페이지가 기록하는 것

이 테스트가 읽는 값

모든 브라우저는 서로 독립적인 두 가지 값을 공개합니다. document.visibilityState는 이 탭이 지금 표시되고 있는 탭인지를 알려 주고, document.hasFocus()는 이 문서가 키 입력을 받고 있는지를 알려 줍니다. 둘 다 권한이 필요 없고, 둘 다 끌 수 없습니다.

두 값은 같은 것이 아닙니다. 다른 탭으로 전환하면 페이지는 숨김 상태가 됩니다. 반면 두 번째 브라우저 창이나 메신저, 터미널을 클릭하면 이 탭은 표시된 채로 포커스만 잃습니다. 숨겨진 것이 아니라 포커스 없음 상태입니다.

평가 플랫폼은 보통 두 값을 모두 기록하고, 따로 집계하며, 각 이탈이 얼마나 이어졌는지 측정합니다. 아래 표는 그때 만들어지는 기록 그 자체입니다.

무엇이 감지를 유발하는가

• 다른 탭으로 전환 — visibilitychange가 발생하고 상태가 hidden이 됩니다. 휴대폰을 포함해 어디서든 기록됩니다.
• 창 최소화, 화면 잠금, 휴대폰 절전 진입 — 이 역시 숨김으로 처리됩니다.
• 다른 창이나 앱 클릭 — 두 번째 브라우저 창, 편집기, 메신저, 검색 패널이나 런처 등. 탭은 계속 표시되지만, 대신 창의 blur 이벤트가 발생합니다.
• 개발자 도구를 별도 창으로 열기 — 창 전환으로 간주되어 blur가 발생합니다.
• 브라우저가 메모리 확보를 위해 탭을 정지·해제 — Chromium에서 freeze와 pagehide가 발생합니다.
• 페이지 닫기 또는 새로고침 — pagehide가 발생하며, 플랫폼은 이 이벤트로 미완료 응시를 마감합니다.

온라인 평가를 앞두고

"페이지를 벗어나면 기록됩니다"라고 경고하는 시험이라면, 응시 전에 그 말이 실제로 무슨 뜻인지 알아 두는 편이 좋습니다.

1. 실제로 평가를 치를 브라우저에서 이 페이지를 열고 그대로 둡니다.
2. 다른 탭으로 갔다가 곧바로 돌아오세요. 로그에 hidden 이벤트와 정확한 초 단위 시간이 남는 것을 확인합니다.
3. 이번에는 탭 대신 다른 창(메신저나 편집기)을 클릭해 보세요. 로그에는 blur 이벤트가 남고, 탭은 한 번도 숨겨지지 않았습니다.
4. 차단 화면을 켜면 여러분이 벗어나는 순간 평가 페이지가 무엇을 보여 주는지 알 수 있습니다. 많은 플랫폼이 정확히 이것을 표시합니다.
5. 의도치 않은 경우도 주의하세요. 알림 배너, 별도 창으로 뜨는 비밀번호 관리자, 단축키 런처도 모두 기록에 남습니다.

무엇이 기록되는지 아는 것과 그것을 피해 가는 것은 다른 이야기입니다. 이 페이지는 어떤 값으로 읽히는지를 알려 줄 뿐이며, 그 값을 어떻게 해석할지는 플랫폼의 판단입니다.

판정 방식

포커스 있음 — visibilityState가 visible이고 hasFocus()가 true입니다. 이 탭이 화면에 있고 키 입력을 받고 있습니다.

포커스 없음 — 여전히 표시되고 있지만 포커스가 다른 창이나 앱으로 넘어갔습니다. 이 탭을 보면서 다른 곳에 입력하고 있거나, 다른 창이 위에 겹쳐 있는 상태입니다.

숨김 — 탭이 아예 그려지지 않는 상태입니다. 다른 탭이 앞에 있거나, 창이 최소화되었거나, 기기 화면이 꺼져 있습니다.

이탈 타이머는 포커스를 가져가는 첫 이벤트에서 시작해 두 값이 모두 참으로 돌아올 때 멈춥니다. 따라서 blur로 시작해 탭 전환으로 이어진 경우도 하나의 연속된 이탈로 계산됩니다.

감지할 수 없는 것

이 값들 중 어느 것도 여러분이 어디로 갔는지는 알려 주지 않습니다. 페이지가 아는 것은 이 탭이 더 이상 활성 상태가 아니라는 사실과 그 지속 시간뿐이며, 어떤 탭인지·어떤 앱인지·화면에 무엇이 있었는지는 알 수 없습니다.

키보드 포커스를 옮기지 않은 채 브라우저 밖에서 일어나는 일은 이 API에 전혀 보이지 않습니다. 발생할 이벤트 자체가 없기 때문입니다. 두 번째 실물 기기, 인쇄된 종이, 같은 방에 있는 다른 사람이 여기에 해당합니다.

횟수만으로는 아무것도 증명되지 않습니다. 포커스를 가져가는 알림, 스크린 리더 패널, 시스템 업데이트 안내, 그리고 의도적인 탭 전환은 모두 동일한 이벤트를 만듭니다.

본격적인 감독은 이것에만 의존하지 않습니다. 카메라, 마이크, 화면 공유, 설치형 잠금 브라우저는 웹 페이지보다 훨씬 많은 것을 봅니다. 페이지가 묻지 않고 읽을 수 있는 또 다른 값은 외부 모니터 감지 테스트를 참고하세요.

개인정보

이 페이지는 정적입니다. 분석 도구도, 쿠키도, 로컬 저장소도 없으며, 로드된 뒤에는 어떤 네트워크 요청도 하지 않습니다.

페이지의 모든 카운터와 시각은 여러분의 탭 안에서 계산되고, 탭을 닫는 즉시 사라집니다. 새로고침하면 모두 초기화됩니다.

전체를 읽어 볼 수 있습니다. 자바스크립트 파일 하나뿐이며, 링크는 하단에 있습니다.

브라우저 지원

visibilitychange와 document.hasFocus()는 데스크톱과 모바일을 가리지 않고 현행 모든 브라우저에서 동작하며, 권한도 보안 출처도 필요하지 않습니다.

freeze와 resume은 Chromium 전용으로, 브라우저가 메모리 확보를 위해 백그라운드 탭을 일시 중단할 때 발생합니다. 다른 브라우저는 아예 보고하지 않습니다.

iOS에서는 앱 전환이 포커스 손실이 아니라 숨김으로 기록됩니다. 브라우저 전체가 백그라운드로 들어가기 때문입니다. 둘의 구분은 창 개념이 있는 환경에서만 존재합니다.