다음 페인트에 대한 상호작용 (INP)

Jeremy Wagner

Barry Pollard

게시: 2022년 5월 6일, 최종 업데이트: 2025년 9월 9일

Chrome 사용 데이터에 따르면 사용자가 페이지에서 보내는 시간의 90% 는 페이지가 로드된 후에 소요됩니다. 따라서 페이지 수명 주기 전반에 걸쳐 응답성을 신중하게 측정하는 것이 중요합니다. INP 측정항목이 평가하는 내용입니다.

응답성이 좋다는 것은 페이지가 상호작용에 빠르게 응답한다는 의미입니다. 페이지가 상호작용에 응답하면 브라우저는 페인트하는 다음 프레임에 시각적 피드백을 표시합니다. 시각적 피드백은 예를 들어 온라인 쇼핑 카트에 추가한 상품이 실제로 추가되었는지, 모바일 탐색 메뉴가 열렸는지, 로그인 양식의 콘텐츠가 서버에서 인증되었는지 등을 알려줍니다.

일부 상호작용은 다른 상호작용보다 시간이 더 오래 걸리지만, 특히 복잡한 상호작용의 경우 사용자에게 작업이 진행 중임을 알리기 위해 초기 시각적 피드백을 빠르게 표시하는 것이 중요합니다. 브라우저가 페인트할 다음 프레임이 이를 실행할 수 있는 가장 빠른 기회입니다.

따라서 INP의 목적은 네트워크 가져오기 및 기타 비동기 작업의 UI 업데이트와 같은 상호작용의 최종 효과를 모두 측정하는 것이 아니라 다음 페인트가 차단되는 시간을 측정하는 것입니다. 시각적 피드백이 지연되면 사용자는 페이지가 충분히 빠르게 응답하지 않는다는 인상을 받을 수 있으며, 개발자가 사용자 환경의 이 부분을 측정할 수 있도록 INP가 개발되었습니다.

다음 동영상에서 오른쪽의 예시는 아코디언이 열리고 있다는 시각적 피드백을 즉시 제공합니다. 왼쪽 예시에서는 반응성이 좋지 않은 경우와 이로 인해 사용자 환경이 저하되는 방식을 보여줍니다.

이 가이드에서는 INP의 작동 방식, 측정 방법, 개선을 위한 리소스를 설명합니다.

INP란 무엇인가요?

INP는 페이지에서 사용자의 페이지 방문 전체 생애 주기 동안 발생하는 모든 클릭, 탭, 키보드 상호작용의 지연 시간을 관찰하여 사용자 상호작용에 대한 페이지의 전반적인 반응성을 평가하는 측정항목입니다. 최종 INP 값은 관찰된 가장 긴 상호작용이며 이상점을 무시합니다.

상호작용은 동일한 논리적 사용자 동작 중에 실행되는 이벤트 핸들러 그룹입니다. 예를 들어 터치 스크린 기기에서 '탭' 상호작용에는 pointerup, pointerdown, click와 같은 여러 이벤트가 포함됩니다. 상호작용은 JavaScript, CSS, 내장 브라우저 컨트롤 (예: 양식 요소) 또는 이들의 조합에 의해 발생할 수 있습니다.

상호작용의 지연 시간은 사용자가 상호작용을 시작한 시점부터 브라우저가 다음 프레임을 페인트할 수 있는 순간까지 상호작용을 유도하는 이벤트 핸들러 그룹의 단일 최대 기간으로 구성됩니다. 드물지만 페인트할 프레임이 없는데 브라우저가 프레임을 페인트할 수 있을 때 상호작용이 종료될 수 있습니다.

좋은 INP 점수란 무엇인가요?

응답성 측정항목에 '좋음' 또는 '나쁨'과 같은 라벨을 고정하기는 어렵습니다. 한편으로는 우수한 응답성을 우선시하는 개발 관행을 장려하고 싶습니다. 반면, 달성 가능한 개발 기대치를 설정하기 위해 사용자가 사용하는 기기의 기능에는 상당한 변동성이 있다는 점을 고려해야 합니다.

반응성이 우수한 사용자 환경을 제공하려면 모바일 및 데스크톱 기기에서 필드에 기록된 페이지 로드의 75번째 백분위수를 측정하는 것이 좋습니다.

• INP가 200밀리초 이하이면 페이지의 응답성이 양호하다는 의미입니다.
• INP가 200밀리초를 초과하고 500밀리초 이하이면 페이지의 응답성이 개선이 필요하다는 의미입니다.
• INP가 500밀리초를 초과하면 페이지의 응답성이 좋지 않음을 의미합니다.

상호작용에는 어떤 내용이 포함되나요?

상호작용의 기본 드라이버는 JavaScript인 경우가 많지만 브라우저는 체크박스, 라디오 버튼, CSS로 구동되는 컨트롤과 같이 JavaScript로 구동되지 않는 컨트롤을 통해 상호작용을 제공합니다.

INP의 목적에 따라 다음 상호작용 유형만 관찰됩니다.

• 마우스로 클릭
• 터치 스크린이 있는 기기를 탭합니다.
• 물리적 키보드 또는 터치 키보드의 키를 누르는 경우

상호작용은 기본 문서 또는 문서에 삽입된 iframe에서 발생합니다(예: 삽입된 동영상의 재생 버튼 클릭). 최종 사용자는 iframe에 무엇이 있는지 알 수 없으므로 최상위 페이지의 사용자 환경을 측정하려면 iframe 내의 INP가 필요합니다. JavaScript 웹 API는 iframe의 콘텐츠에 액세스할 수 없으므로 CrUX와 RUM 간에 차이가 표시될 수 있습니다.

상호작용은 여러 이벤트로 구성될 수 있습니다. 예를 들어 키 입력에는 keydown, keypress, keyup 이벤트가 포함됩니다. 탭 상호작용에는 pointerup 및 pointerdown 이벤트가 포함됩니다. 상호작용 내에서 가장 긴 지속 시간을 갖는 이벤트가 상호작용의 총 지연 시간에 영향을 미칩니다.

다이어그램에 표시된 것처럼 INP의 처리 기간에는 해당 프레임 내의 모든 이벤트 핸들러 콜백이 포함됩니다. 이렇게 하면 상호작용의 콜백이 처리되기 전의 시간이 입력 지연이 되고, 모든 콜백이 실행되는 시간이 처리 기간이 되며, 콜백이 실행된 후 프레임이 사용자의 화면에 표시될 때까지의 시간이 표시 지연이 됩니다.

페이지의 INP는 사용자가 페이지를 떠날 때 계산됩니다. 그 결과 수명 주기 전반에 걸쳐 페이지의 전반적인 반응성을 나타내는 단일 값이 도출됩니다. INP가 낮다는 것은 페이지가 사용자 입력에 안정적으로 반응했다는 의미입니다.

INP는 첫 입력 지연 (FID)과 어떻게 다른가요?

INP는 첫 입력 지연 (FID)의 후속 측정항목입니다. 둘 다 응답성 측정항목이지만 FID는 페이지의 첫 번째 상호작용의 입력 지연만 측정했습니다. INP는 입력 지연부터 이벤트 핸들러를 실행하는 데 걸리는 시간, 마지막으로 브라우저가 다음 프레임을 페인트할 때까지 페이지의 모든 상호작용을 관찰하여 FID를 개선합니다.

이러한 차이로 인해 INP와 FID는 서로 다른 유형의 응답성 측정항목입니다. FID는 사용자에 대한 페이지의 첫인상을 평가하도록 설계된 로드 응답성 측정항목인 반면, INP는 페이지 수명 중 상호작용이 발생하는 시점과 관계없이 전반적인 응답성을 나타내는 더 신뢰할 수 있는 지표입니다.

INP 값이 보고되지 않으면 어떻게 되나요?

페이지에서 INP 값을 반환하지 않을 수도 있습니다. 이 문제는 다음과 같은 여러 가지 이유로 발생할 수 있습니다.

• 페이지가 로드되었지만 사용자가 클릭하거나 탭하거나 키보드의 키를 누르지 않았습니다.
• 페이지가 로드되었지만 사용자가 스크롤하거나 요소 위로 마우스를 가져가는 등 측정되지 않는 동작을 사용하여 페이지와 상호작용했습니다.
• 페이지와 상호작용하도록 스크립트가 작성되지 않은 검색 크롤러나 헤드리스 브라우저와 같은 봇이 페이지에 액세스하고 있습니다.

INP 측정 방법

실제 사용자 상호작용을 시뮬레이션할 수 있는 범위 내에서 필드와 실험실 모두에서 INP를 측정할 수 있습니다.

필드

INP 최적화 여정은 필드 데이터로 시작하는 것이 좋습니다. 실제 사용자 모니터링 (RUM)의 필드 데이터는 페이지의 INP 값뿐만 아니라 INP 값 자체를 담당한 특정 상호작용, 상호작용이 페이지 로드 중에 발생했는지 아니면 후에 발생했는지, 상호작용 유형 (클릭, 키 누르기 또는 탭)을 강조 표시하는 컨텍스트 데이터와 상호작용의 어느 부분이 반응성에 영향을 미치는지 파악하는 데 도움이 되는 기타 유용한 타이밍도 제공합니다.

웹사이트가 Chrome 사용자 환경 보고서 (CrUX)에 포함될 수 있는 경우 PageSpeed Insights의 CrUX를 통해 INP 필드 데이터 (및 기타 Core Web Vitals)를 빠르게 확인할 수 있습니다. 최소한 웹사이트의 INP를 출처 수준에서 파악할 수 있으며, 경우에 따라 URL 수준 데이터도 확인할 수 있습니다.

하지만 CrUX는 문제가 있는지 알려줄 수 있지만 문제의 원인은 알려줄 수 없습니다. RUM 솔루션을 사용하면 응답성 문제가 발생하는 페이지, 사용자 또는 사용자 상호작용에 관한 세부정보를 자세히 파악할 수 있습니다. INP를 개별 상호작용에 기여도 분석할 수 있으면 추측을 피하고 불필요한 노력을 줄일 수 있습니다.

실험실

페이지의 상호작용이 느리다는 것을 나타내는 필드 데이터가 있으면 실험실에서 테스트를 시작하는 것이 좋습니다. 필드 데이터를 사용하면 실험실에서 문제가 있는 상호작용을 재현하는 작업이 훨씬 간단해집니다.

하지만 필드 데이터가 없을 수도 있습니다. 일부 실험실 도구에서 INP를 측정할 수 있지만 실험실 테스트 중 페이지의 결과 INP 값은 측정 기간 동안 실행된 상호작용에 따라 달라집니다. 사용자 행동은 예측하기 어렵고 변동성이 클 수 있으므로 실험실에서 테스트할 때 현장 데이터에서와 같은 방식으로 문제 상호작용이 표시되지 않을 수 있습니다. 또한 일부 실험실 도구는 상호작용 없이 페이지 로드만 관찰하므로 페이지의 INP를 보고하지 않습니다. 이러한 경우 총 차단 시간 (TBT)이 INP의 적절한 프록시 측정항목일 수 있지만 INP 자체를 대체하지는 않습니다.

페이지의 INP를 평가할 때 실습 도구에 제한이 있지만 실습에서 느린 상호작용을 재현하는 몇 가지 전략이 있습니다. 전략에는 일반적인 사용자 흐름을 따르고 그 과정에서 상호작용을 테스트하는 것뿐만 아니라 사용자 환경의 중요한 부분에서 느린 상호작용을 식별하기 위해 페이지가 로드될 때(기본 스레드가 가장 바쁜 경우) 페이지와 상호작용하는 것도 포함됩니다.

JavaScript에서 INP 측정

JavaScript에서 INP를 측정하려면 모든 상호작용의 이벤트 타이밍을 측정한 다음 페이지 언로드 시 이러한 모든 상호작용에서 98번째 백분위수를 가져와야 합니다. INP 계산 방법에 관한 참조 구현이 포함된 web vitals JavaScript 라이브러리 소스 코드를 참고할 수 있습니다.

대부분의 경우 페이지가 언로드되는 시점의 현재 INP 값이 해당 페이지의 최종 INP 값이지만 다음 섹션에 설명된 몇 가지 중요한 예외가 있습니다. web vitals JavaScript 라이브러리는 웹 API의 제한 내에서 최대한 이를 고려합니다.

측정항목과 API의 차이점

• 104밀리초 미만의 event 항목은 기본적으로 성능 관찰자를 사용하여 보고되지 않습니다. 이 기본값은 durationThreshold 매개변수를 사용하여 성능 관찰자가 등록될 때 변경할 수 있지만 이 경우에도 최솟값은 16밀리초입니다. 따라서 이벤트 타이밍 항목이기도 하지만 기간이 durationThreshold 미만인 경우에도 관찰할 수 있는 first-input 항목도 관찰하는 것이 좋습니다. 이렇게 하면 상호작용이 있는 페이지에서 항상 INP 값을 보고할 수 있습니다.
• 백분위수를 완벽하게 계산하려면 모든 샘플을 메모리에 보관해야 하므로 비용이 많이 들 수 있습니다. 하지만 최악의 N 상호작용 목록을 작게 유지하면 백분위수, 특히 p98과 같은 매우 높은 백분위수를 근사치로 구할 수 있습니다. 10이 일반적인 선택입니다.
• 페이지가 뒤로/앞으로 캐시에서 복원되면 사용자가 이를 별도의 페이지 방문으로 경험하므로 INP 값을 0으로 재설정해야 합니다.
• API는 iframe 내에서 발생하는 상호작용에 대한 event 항목을 보고하지 않지만 측정항목은 페이지의 사용자 환경에 포함되므로 보고합니다. CrUX와 RUM 간의 차이로 표시될 수 있습니다. INP를 올바르게 측정하려면 이러한 요소를 고려해야 합니다. 하위 프레임은 API를 사용하여 event-timing 항목을 상위 프레임에 보고할 수 있습니다.

이러한 예외 외에도 INP는 페이지의 전체 수명을 측정하므로 몇 가지 추가적인 복잡성이 있습니다.

• 사용자는 탭을 매우 오랫동안(며칠, 몇 주, 몇 개월) 열어 둘 수 있습니다. 실제로 사용자는 탭을 닫지 않을 수도 있습니다.
• 모바일 운영체제에서 브라우저는 일반적으로 백그라운드 탭의 페이지 언로드 콜백을 실행하지 않으므로 '최종' 값을 보고하기가 어렵습니다.

이러한 사례를 처리하려면 페이지가 백그라운드에 있을 때마다 페이지가 언로드될 때마다 INP를 보고해야 합니다 (visibilitychange 이벤트는 이러한 두 시나리오를 모두 포함함). 이 데이터를 수신하는 분석 시스템은 백엔드에서 최종 INP 값을 계산해야 합니다.

이러한 모든 사례를 직접 기억하고 처리하는 대신 개발자는 web-vitals JavaScript 라이브러리를 사용하여 INP를 측정할 수 있습니다. 이 라이브러리는 iframe 사례를 제외하고 이전에 언급된 모든 사항을 고려합니다.

import {onINP} from 'web-vitals';

// Measure and log INP in all situations
// where it needs to be reported.
onINP(console.log);

INP 개선 방법

INP 최적화에 관한 가이드 모음을 통해 실제 환경에서 느린 상호작용을 식별하고 실험실 데이터를 사용하여 원인을 파악하고 최적화하는 과정을 안내받을 수 있습니다.

변경 로그

측정항목을 측정하는 데 사용되는 API에서 버그가 발견되는 경우도 있고 측정항목 정의 자체에서 버그가 발견되는 경우도 있습니다. 따라서 변경이 필요한 경우가 있으며 이러한 변경사항은 내부 보고서 및 대시보드에 개선사항 또는 회귀로 표시될 수 있습니다.

이를 관리할 수 있도록 이러한 측정항목의 구현 또는 정의에 대한 모든 변경사항이 이 변경 로그에 표시됩니다.

이러한 측정항목에 대한 의견이 있으면 web-vitals-feedback Google 그룹에 의견을 제공하세요.

학습한 내용 테스트