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

페이지 가시성 API(Page Visibility API)는 이름에서 짐작할 수 있듯 페이지가 현재 유저에게 보이고 있는지 아닌지를 알 수 있게 해주는 API입니다. 정확히 말하면 모니터상에서 보여질 수 있는 상황인지 아닌지겠네요. 유저가 눈을 감거나 다른 곳을 보고 있으면 알 방법이 없으니까요 :)

예전엔 onblur와 onfocus 이벤트를 사용했었는데요 사실 이 이벤트들은 가시성을 판단하는 이벤트라기보다는 페이지가 액티브한지 아닌지를 판단하는 이벤트였죠.

그래서 나온 것이 Page Visibility API 즉 페이지 가시성 API입니다.

왜 쓸까?

페이지 가시성 API를 활용하면 다음과 같은 상황을 감지할 수 있습니다.

• 사용자가 브라우저의 다른 탭으로 이동함
• 브라우저를 미니마이즈했을 때
• 브라우저 위에 다른 어플리케이션 윈도우가 위로 겹쳐져서 웹페이지가 안 보일 때
• 컴퓨터가 잠자기 상태에 들어갔을 때

이렇게 모니터상에서 웹 페이지가 보이는지 안 보이는지를 감지할 수 있습니다.

어떻게 쓸까?

페이지 가시성 API는 두 개의 프로퍼티와 한 개의 이벤트로 구성되어 있습니다.

document.hidden // 현재 페이지가 유저에게 보일 수 없는 상황이면 true
document.visibilityState // 유저에게 보일 수 있는 상황이면 'visible', 아니면 'hidden'

이벤트를 거는 방법은,

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === 'hidden') { // or document.hidden
    myVideo.stop();
  } else {
    myVideo.play();
  }
});

간단하죠.

이렇게 되면 유저가 다른 탭으로 이동하거나 잠시 잠자기 모드로 돌린다면 이벤트 핸들러가 실행되고 visibilityState는 hidden 값을 갖게 돼 비디오가 멈출 것이고, 다시 돌아왔을 때 역시 이벤트 핸들러가 실행되고 visibilityState는 'visible' 값을 갖게 돼 영상이 이어서 재생될 것입니다.

어디에 쓸까?

주로 퍼포먼스나 유저의 사용성을 위해 사용될 수 있습니다.

불필요한 서버 비용을 줄일 수 있어요. 다양한 상황에 적용될 수 있는데요. 사용자가 사용 중이지 않을 때 불필요한 서버 요청을 막는 것이죠. 예를 들어 비디오 재생 서비스라면 사용자의 가시성이 확보되지 않을 때는 오디오만 재생하도록 변경할 수 있을 것 같고요.

다른 방법으로 가시성을 잃으면 오디오나 비디오 컨텐츠의 재생을 멈췄다가 유저의 가시성이 확보될 때 다시 자동으로 재생할 수도 있을 것 같습니다.

로그나 클라이언트 데이터 가공과 전송 등 무거운 작업을 유저가 못 볼 때 실행해 불필요하게 유저의 UX 만족도를 떨어트리지 않을 수 있고요.

메신저와 같이 유저 간 커뮤니케이션을 지원하는 서비스의 경우 잠자기 모드로 전환할 수 있는 트리거가 될 수도 있을 것 같고요.

모바일 환경이라면 유저의 데이터를 절약해 줄 수 있는 방법들을 제공할 수 있을 것 같습니다.