Visibility API는 브라우저에서 제공하는 API로, 웹 페이지의 가시성 상태를 감지하고 처리하는 기능을 제공합니다. 이 API는 document.visibilityState 속성을 통해 현재 웹 페이지의 가시성 상태를 확인할 수 있으며, 이를 이용하여 가시성 상태가 변경될 때마다 원하는 동작을 수행할 수 있습니다. 이제 자바스크립트 코드를 살펴보겠습니다. 아래 코드는 Visibility API를 사용하여 웹 페이지의 가시성 상태가 변경될 때마다 현재 상태를 콘솔에 출력하는 간단한 예제입니다. 

document.addEventListener("visibilitychange", () => {
  console.log(document.visibilityState);
});
해당 코드를 설명드리겠습니다. document.addEventListener: 이벤트 리스너를 등록하는 메소드입니다. 첫 번째 인자로 "visibilitychange" 이벤트를 지정하였습니다. 이는 웹 페이지의 가시성 상태가 변경될 때 발생하는 이벤트입니다. 람다 함수(() => {}): 이벤트가 발생했을 때 실행될 콜백 함수를 정의합니다. 이 예제에서는 가시성 상태가 변경될 때마다 실행될 함수를 정의하고 있습니다. document.visibilityState: 가시성 상태를 나타내는 속성입니다. 이 속성은 visible, hidden, prerender, unloaded 중 하나의 값을 가집니다. visible: 페이지가 현재 보이는 상태입니다. hidden: 페이지가 현재 숨겨진 상태입니다. prerender: 페이지가 현재 프리렌더링 중인 상태입니다. (모든 브라우저에서 지원되지 않을 수 있습니다.) unloaded: 페이지가 현재 메모리에서 해제되어 로드되지 않은 상태입니다. (모든 브라우저에서 지원되지 않을 수 있습니다.) 이 코드는 웹 페이지가 사용자에게 보이는지 여부를 확인하는 간단한 예제이며, 실제 애플리케이션에서는 가시성 상태에 따라 다양한 작업을 수행할 수 있습니다. 예를 들어, 페이지가 숨겨진 상태일 때 비디오 재생을 일시 중지하거나, 페이지가 다시 보이는 상태로 변경되면 특정 애니메이션을 시작하는 등의 동작을 구현할 수 있습니다. 위의 코드를 웹 페이지에 추가하고 개발자 도구 콘솔을 열어보면, 페이지의 가시성 상태가 변경될 때마다 해당 상태가 출력되는 것을 확인할 수 있습니다. 이렇게 Visibility API를 사용하면 웹 페이지의 가시성 상태를 쉽게 감지하고 이를 활용하여 다양한 상황에 맞게 대응할 수 있습니다. 자바스크립트에서 웹 페이지의 가시성 상태를 활용하면 사용자 경험을 개선하고 성능을 최적화하는 데 도움이 될 수 있습니다.