<div id="readability-page-1" class="page"><article>페이지 가시성 API(Page Visibility API)는 이름에서 짐작할 수 있듯 페이지가 현재 유저에게 보이고 있는지 아닌지를 알 수 있게 해주는 API입니다. 정확히 말하면 모니터상에서 보여질 수 있는 상황인지 아닌지겠네요. 유저가 눈을 감거나 다른 곳을 보고 있으면 알 방법이 없으니까요 :)
예전엔 <code>onblur</code>와 <code>onfocus</code> 이벤트를 사용했었는데요 사실 이 이벤트들은 가시성을 판단하는 이벤트라기보다는 페이지가 액티브한지 아닌지를 판단하는 이벤트였죠.
그래서 나온 것이 Page Visibility API 즉 페이지 가시성 API입니다.
<h2>왜 쓸까?</h2>
페이지 가시성 API를 활용하면 다음과 같은 상황을 감지할 수 있습니다.
<ul>
<li>사용자가 브라우저의 다른 탭으로 이동함</li>
<li>브라우저를 미니마이즈했을 때</li>
<li>브라우저 위에 다른 어플리케이션 윈도우가 위로 겹쳐져서 웹페이지가 안 보일 때</li>
<li>컴퓨터가 잠자기 상태에 들어갔을 때</li>
</ul>
이렇게 모니터상에서 웹 페이지가 보이는지 안 보이는지를 감지할 수 있습니다.</article><article><h2>어떻게 쓸까?</h2>
페이지 가시성 API는 두 개의 프로퍼티와 한 개의 이벤트로 구성되어 있습니다.
<div data-language="javascript"><pre><code>document.hidden // 현재 페이지가 유저에게 보일 수 없는 상황이면 true
document.visibilityState // 유저에게 보일 수 있는 상황이면 'visible', 아니면 'hidden'</code></pre></div>
이벤트를 거는 방법은,
<div data-language="javascript"><pre><code>document.addEventListener("visibilitychange", () =&gt; {
 if (document.visibilityState === 'hidden') { // or document.hidden
 myVideo.stop();
 } else {
 myVideo.play();
 }
});</code></pre></div>
간단하죠.
이렇게 되면 유저가 다른 탭으로 이동하거나 잠시 잠자기 모드로 돌린다면 이벤트 핸들러가 실행되고 <code>visibilityState</code>는 <code>hidden</code> 값을 갖게 돼 비디오가 멈출 것이고, 다시 돌아왔을 때 역시 이벤트 핸들러가 실행되고 <code>visibilityState</code>는 'visible' 값을 갖게 돼 영상이 이어서 재생될 것입니다.
<h2>어디에 쓸까?</h2>
주로 퍼포먼스나 유저의 사용성을 위해 사용될 수 있습니다.
불필요한 서버 비용을 줄일 수 있어요. 다양한 상황에 적용될 수 있는데요. 사용자가 사용 중이지 않을 때 불필요한 서버 요청을 막는 것이죠. 예를 들어 비디오 재생 서비스라면 사용자의 가시성이 확보되지 않을 때는 오디오만 재생하도록 변경할 수 있을 것 같고요.
다른 방법으로 가시성을 잃으면 오디오나 비디오 컨텐츠의 재생을 멈췄다가 유저의 가시성이 확보될 때 다시 자동으로 재생할 수도 있을 것 같습니다.
로그나 클라이언트 데이터 가공과 전송 등 무거운 작업을 유저가 못 볼 때 실행해 불필요하게 유저의 UX 만족도를 떨어트리지 않을 수 있고요.
메신저와 같이 유저 간 커뮤니케이션을 지원하는 서비스의 경우 잠자기 모드로 전환할 수 있는 트리거가 될 수도 있을 것 같고요.
모바일 환경이라면 유저의 데이터를 절약해 줄 수 있는 방법들을 제공할 수 있을 것 같습니다.</article></div>

shiren.dev RSS Feed

페이지 가시성 API(Page Visibility API)는 이름에서 짐작할 수 있듯 페이지가 현재 유저에게 보이고 있는지 아닌지를 알 수 있게 해주는 API입니다. 정확히 말하면 모니터상에서 보여질 수 있는 상황인지 아닌지겠네요. 유저가 눈을 감거나 다른 곳을 보고 있으면 알 방법이 없으니까요 :) 예전엔 와  이벤트를 사용했었는데요 사실 이 이벤트들은 가시성을 판단하는 이벤트라기보다는 페이지가 액티브한지 아닌지를 판단하는 이벤트였죠. 그래서 나온 것이 Page Visibility API 즉 페이지 가시성 API입니다. 왜 쓸까…

알쓸FE팁 "페이지 가시성 API"

댓글