이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Idle Detection API로 비활성 사용자 감지

유휴 감지 API를 사용하여 사용자가 기기를 활발하게 사용하지 않는 시점을 파악합니다.

Thomas Steiner

유휴 감지 API란 무엇인가요?

유휴 감지 API는 키보드, 마우스, 화면과의 상호작용 부족, 화면 보호기 활성화, 화면 잠금, 다른 화면으로의 이동 등을 나타내는 유휴 상태 시 개발자에게 알립니다. 개발자가 정의한 기준점에 따라 알림이 트리거됩니다.

Idle Detection API의 추천 사용 사례

이 API를 사용할 수 있는 사이트의 예는 다음과 같습니다.

채팅 애플리케이션이나 온라인 소셜 네트워킹 사이트에서는 이 API를 사용하여 현재 연락처에 연결할 수 있는지 여부를 사용자에게 알릴 수 있습니다.
박물관과 같이 공개적으로 노출된 키오스크 앱은 더 이상 키오스크와 상호작용하는 사용자가 없으면 이 API를 사용하여 '홈' 뷰로 돌아갈 수 있습니다.
예를 들어 차트를 그리는 데 비용이 많이 드는 계산이 필요한 앱은 사용자가 기기와 상호작용하는 순간으로 계산이 제한될 수 있습니다.

현재 상태

단계	상태
1. 설명 만들기	완전함
2. 사양의 초기 초안 만들기	완전함
3. 의견 수집 및 디자인 반복	진행 중
4. 오리진 트라이얼	완료됨
5. 출시	Chromium 94

유휴 감지 API 사용 방법

기능 감지

Idle Detection API가 지원되는지 확인하려면 다음을 사용하세요.

if ('IdleDetector' in window) {
  // Idle Detector API supported
}

유휴 감지 API 개념

Idle Detection API는 사용자, 사용자 에이전트 (즉, 브라우저), 사용 중인 기기의 운영체제 간에 일정 수준의 참여가 있다고 가정합니다. 이는 다음 두 가지 차원으로 표현됩니다.

사용자 유휴 상태: active 또는 idle: 사용자가 일정 기간 사용자 에이전트와 상호작용했거나 상호작용하지 않았습니다.
화면 유휴 상태: locked 또는 unlocked: 시스템에 사용자 에이전트와의 상호작용을 방지하는 화면 보호기와 같은 활성 화면 잠금이 있습니다.

active와 idle를 구별하려면 사용자, 사용자 에이전트, 운영체제에 따라 다를 수 있는 휴리스틱이 필요합니다. 또한 상당히 대략적인 기준점이어야 합니다(보안 및 권한 참고).

이 모델은 의도적으로 특정 콘텐츠(즉, API를 사용하는 탭의 웹페이지), 사용자 에이전트 전체 또는 운영체제를 공식적으로 구별하지 않습니다. 이 정의는 사용자 에이전트가 결정합니다.

유휴 감지 API 사용

Idle Detection API를 사용할 때 첫 번째 단계는 'idle-detection' 권한이 부여되었는지 확인하는 것입니다. 권한이 부여되지 않으면 IdleDetector.requestPermission()를 통해 요청해야 합니다. 이 메서드를 호출하려면 사용자 동작이 필요합니다.

// Make sure 'idle-detection' permission is granted.
const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
  // Need to request permission first.
  return console.log('Idle detection permission not granted.');
}

두 번째 단계는 IdleDetector를 인스턴스화하는 것입니다. 최소 threshold은 60,000밀리초 (1분)입니다. 마지막으로 IdleDetector의 start() 메서드를 호출하여 유휴 감지를 시작할 수 있습니다. 원하는 유휴 상태(밀리초 단위)가 있는 객체 및 AbortSignal가 있는 선택적 signal가 있는 객체를 사용하여 유휴 감지를 매개변수로 취소합니다.threshold

try {
  const controller = new AbortController();
  const signal = controller.signal;

  const idleDetector = new IdleDetector();
  idleDetector.addEventListener('change', () => {
    const userState = idleDetector.userState;
    const screenState = idleDetector.screenState;
    console.log(`Idle change: ${userState}, ${screenState}.`);
  });

  await idleDetector.start({
    threshold: 60000,
    signal,
  });
  console.log('IdleDetector is active.');
} catch (err) {
  // Deal with initialization errors like permission denied,
  // running outside of top-level frame, etc.
  console.error(err.name, err.message);
}

AbortController의 abort() 메서드를 호출하여 유휴 감지를 취소할 수 있습니다.

controller.abort();
console.log('IdleDetector is stopped.');

DevTools 지원

Chromium 94부터는 실제로 유휴 상태가 되지 않아도 DevTools에서 유휴 이벤트를 에뮬레이션할 수 있습니다. DevTools에서 센서 탭을 열고 유휴 상태 감지기 상태 에뮬레이션을 찾습니다. 아래 동영상에서 다양한 옵션을 확인할 수 있습니다.

DevTools의 유휴 상태 감지기 상태 에뮬레이션

Puppeteer 지원

Puppeteer 버전 5.3.1부터 다양한 유휴 상태를 에뮬레이션하여 프로그래매틱 방식으로 웹 앱의 동작이 어떻게 변경되는지 테스트할 수 있습니다.

데모

비활성 상태가 60초간 지속되면 콘텐츠를 삭제하는 임시 캔버스 데모를 통해 유휴 감지 API가 어떻게 작동하는지 확인할 수 있습니다. 아이들이 낙서를 할 수 있도록 백화점에 배포한다고 상상해 보세요

임시 캔버스 데모

폴리필

Idle Detection API의 일부 측면은 폴리필이 가능하며 idle.ts와 같은 유휴 감지 라이브러리가 있지만 이러한 접근 방식은 웹 앱의 자체 콘텐츠 영역으로 제한됩니다. 웹 앱의 컨텍스트에서 실행되는 라이브러리는 많은 비용이 드는 입력 이벤트를 폴링하거나 공개 상태 변경사항을 수신 대기해야 합니다. 하지만 좀 더 제한적으로는 사용자가 콘텐츠 영역 밖에서 유휴 상태가 된 시점 (예: 사용자가 다른 탭에 있거나 컴퓨터에서 완전히 로그아웃된 시점)을 라이브러리가 알 수 없습니다.

보안 및 권한

Chrome팀은 사용자 제어, 투명성, 인체공학 등 강력한 웹 플랫폼 기능에 대한 액세스 제어에 정의된 핵심 원칙을 사용하여 유휴 감지 API를 설계하고 구현했습니다. 이 API를 사용하는 기능은 'idle-detection' 권한으로 제어됩니다. API를 사용하려면 앱도 최상위 보안 컨텍스트에서 실행 중이어야 합니다.

사용자 제어 및 개인 정보 보호

Google은 항상 악의적인 행위자가 새로운 API를 오용하는 것을 방지하고자 합니다. 겉보기에는 독립적인 웹사이트이지만 실제로는 동일한 주체에 의해 제어되는 웹사이트에서 사용자 유휴 정보를 얻고 데이터의 상관관계를 파악하여 출처 전반의 순 사용자를 식별할 수 있습니다. 이러한 종류의 공격을 완화하기 위해 Idle Detection API는 보고된 유휴 이벤트의 세부사항을 제한합니다.

의견

Chrome팀은 유휴 감지 API 사용 경험에 관한 의견을 듣고자 합니다.

API 설계에 대해 알려주세요.

API에서 예상한 대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되었나요? 보안 모델에 대한 질문이나 의견이 있으신가요? 해당 GitHub 저장소에서 사양 문제를 제출하거나 기존 문제에 대한 의견을 추가하세요.

구현 관련 문제 신고

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 가능한 한 많은 세부정보와 간단한 재현 안내를 포함하고 구성요소 상자에 Blink>Input를 입력합니다. Glitch는 쉽고 빠른 재현을 공유하는 데 효과적입니다.

API 지원 표시

Idle Detection API를 사용할 계획이신가요? 공개 지원은 Chrome팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

사용 계획을 WICG 담화 대화목록에서 공유해 주세요.
해시태그 #IdleDetection를 사용하여 @ChromiumDev로 트윗을 보내고 사용 위치와 방법을 알려주세요.

유용한 링크

감사의 말

Idle Detection API는 Sam Goto에 의해 구현되었습니다. Maksim Sadym에서 DevTools 지원을 추가했습니다. 이 문서를 리뷰해 주신 Joe Medley, Kayce Basques 및 Reilly Grant님께 감사드립니다. 히어로 이미지는 Unsplash의 페르난도 에르난데스의 작품입니다.