화면 보임 확인: Page Visibility

핵심 개념

사용자가 지금 내 웹사이트를 보고 있는지, 아니면 다른 탭을 보고 있는지 알아낼 수 있어요.

코드 분석

HTML5📋 코드 (13줄)

<div id='result'>현재 탭을 보고 계시는군요!</div>
<p>다른 탭으로 이동했다가 돌아와보세요.</p>
<script>
  document.addEventListener('visibilitychange', function() {
    const res = document.getElementById('result');
    if (document.hidden) {
      console.log('숨김 상태로 전환');
    } else {
      res.innerHTML = '돌아오신 것을 환영합니다! (' + new Date().toLocaleTimeString() + ')';
      res.style.color = 'blue';
    }
  });
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Page Visibility API 코드의
visibilitychange 이벤트 누수, 모바일 백그라운드 처리 버그를
찾아 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

Page Visibility API로 동영상 자동 일시정지,
타이머 정지, 데이터 폴링 중단을
실전 코드 3개로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Page Visibility 활용을 분석해서
배터리 절약 효과, 분석(GA) 정확도,
사용자 이탈률 측정에 미치는 영향을 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 모바일 사용자의 멀티태스킹 패턴에서
Page Visibility API가 실제 UX에
얼마나 의미 있는지 솔직히 평가해줘.

⭐ 이것만 기억하세요

화면 보임 확인: Page Visibility는 이 3가지만 확실히 잡으세요

1.탭이 비활성 상태인데 동영상이나 애니메이션이 계속 돌아가면 CPU와 배터리가 불필요하게 소모됩니다

2.document.visibilityState와 visibilitychange 이벤트로 탭 활성 여부를 감지해서 리소스를 절약합니다

3.다음 챕터에서 CSS 애니메이션보다 정밀한 제어가 가능한 Web Animation API를 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.31 — 질문하거나 답변을 확인하세요

→

진행도 31 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)