Interaction to Next Paint(다음 페인트와의 상호작용)(INP)

Jeremy Wagner

브라우저 지원

• 96
• 96
• x
• x

소스

참고: 다음 페인트에 대한 상호작용(INP)은 Event Timing API의 데이터를 사용하여 반응성을 평가하는 안정적인 코어 웹 바이탈 측정항목입니다. INP는 사용자가 페이지와 함께 한 모든 상호작용의 지연 시간을 관찰하고 모든 상호작용 또는 거의 모든 상호작용이 아래에 있는 단일 값을 보고합니다. INP가 낮으면 페이지가 모든 사용자 상호작용 또는 대부분의 사용자 상호작용에 일관되게 빠르게 응답할 수 있었음을 의미합니다.

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

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

일부 상호작용은 자연스럽게 다른 상호작용보다 오래 걸리지만, 특히 복잡한 상호작용의 경우 사용자에게 무슨 일이 일어나고 있음을 알리기 위해 초기 시각적 피드백을 빠르게 표시하는 것이 중요합니다. 브라우저가 그릴 다음 프레임이 가장 먼저 이를 실행할 수 있는 기회입니다.

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

다음 동영상에서 오른쪽의 예시는 아코디언이 열리고 있음을 즉각적으로 시각적으로 알려줍니다. 왼쪽의 예는 응답이 느려서 사용자 환경이 저하되는 방식을 보여줍니다.

반응이 좋지 않거나 좋은 응답의 예 왼쪽에서 긴 작업은 아코디언이 열리지 않도록 차단합니다. 이로 인해 사용자는 환경이 손상되었다고 생각하여 여러 번 클릭하게 됩니다. 기본 스레드가 따라잡으면 지연된 입력을 처리하여 액션이 예기치 않게 열렸다가 닫힙니다. 오른쪽의 페이지는 반응성이 더 높아서 사고 없이 빠르게 섹션을 엽니다.

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

INP란 무엇인가요?

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

INP 계산 방법에 대한 세부정보

INP는 페이지와의 모든 상호작용을 관찰하여 계산됩니다. 대부분의 사이트에서 지연 시간이 가장 긴 상호작용이 INP로 보고됩니다.

하지만 상호작용이 많은 페이지의 경우 임의의 문제가 발생하면 다른 방식으로 반응하는 페이지에서 비정상적으로 긴 지연 시간이 발생할 수 있습니다. 특정 페이지에서 상호작용이 많이 발생할수록 이러한 상황이 발생할 가능성도 커집니다.

상호작용이 많은 페이지의 실제 응답성을 더 정확하게 측정하기 위해 50회의 상호작용마다 상호작용이 1회씩 발생하지 않습니다. 대부분의 페이지 환경에는 상호작용이 50개가 넘지 않으므로 가장 나쁜 상호작용이 가장 자주 보고됩니다. 그런 다음 모든 페이지 조회수의 75번째 백분위수가 평소와 같이 보고되며, 이때 이상치를 추가로 삭제하여 대다수의 사용자가 경험하는 값 또는 그보다 나은 값을 제공합니다.

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

상호작용의 지연 시간은 사용자가 상호작용을 시작한 시점부터 브라우저가 다음에 프레임을 그릴 수 있는 순간까지 상호작용을 구동하는 이벤트 핸들러 그룹의 가장 긴 기간으로 구성됩니다.

핵심사항: INP 측정 방법에 관한 자세한 내용은 '상호작용의 구성요소' 섹션을 참고하세요.

좋은 INP 점수는 얼마인가요?

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

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

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

INP 값이 200밀리초 이하이면 좋습니다. 나쁨 값은 500밀리초보다 큽니다.

상호작용의 내용

상호작용의 수명입니다. 이벤트 핸들러가 실행될 때까지 입력 지연이 발생합니다. 기본 스레드의 긴 작업과 같은 요인으로 인해 발생할 수 있습니다. 그러면 상호작용의 이벤트 핸들러 콜백이 실행되고 다음 프레임이 표시되기 전에 지연이 발생합니다.

상호작용의 기본적인 원동력은 자바스크립트이지만 브라우저는 체크박스, 라디오 버튼, CSS 기반 컨트롤과 같이 JavaScript가 아닌 컨트롤을 통해 상호작용을 제공합니다.

INP의 목적에 따라 다음과 같은 상호작용 유형만 준수됩니다.

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

핵심사항: 사용자는 마우스 오버, 확대/축소, 스크롤과 같은 다른 방법으로 페이지와 상호작용할 수도 있습니다. 이러한 상호작용은 INP의 목적으로 관찰되지 않습니다. 그러나 이러한 상호작용의 일부 변형에는 INP가 측정하는 클릭, 탭, 키 누름과 같은 동작이 포함될 수 있습니다.

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

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

여러 이벤트 핸들러와의 상호작용을 보여주는 그림입니다. 상호작용의 첫 번째 부분은 사용자가 마우스 버튼을 클릭할 때 입력을 수신합니다. 하지만 마우스 버튼을 놓기 전에 프레임이 표시됩니다. 사용자가 마우스 버튼에서 손을 떼면 다음 프레임이 표시되기 전에 다른 일련의 이벤트 핸들러가 실행되어야 합니다.

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

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

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

이러한 차이점은 INP와 FID가 모두 다른 유형의 응답성 측정항목이라는 것을 의미합니다. FID는 페이지가 사용자에게 주는 첫인상을 평가하기 위해 설계된 로드 응답성 측정항목인 반면, INP는 페이지 상호작용이 발생한 시점에 관계없이 전반적인 응답성을 나타내는 더 신뢰할 수 있는 지표입니다.

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

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

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

INP 측정 방법

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

핵심 사항: 웹사이트의 INP를 측정하는 가장 좋은 방법은 필드의 실제 사용자로부터 측정항목을 수집하는 것입니다. 실습 데이터를 사용해 실적을 평가하는 데 익숙하다면 실습 및 필드 데이터가 다를 수 있는 이유와 이에 대해 취해야 할 조치를 읽어보세요.

현장에서

INP 최적화 여정은 필드 데이터에서 시작하는 것이 가장 좋습니다. 기껏해야 RUM (Real User Monitoring)의 필드 데이터는 페이지의 INP 값뿐만 아니라 INP 값 자체에 기여한 특정 상호작용, 페이지 로드 중이나 페이지 로드 이후에 상호작용이 발생했는지 여부, 상호작용 유형 (클릭, 키 누름 또는 탭) 및 상호작용의 어떤 부분이 반응에 영향을 미쳤는지 식별하는 데 도움이 되는 기타 중요한 타이밍을 강조하는 문맥 데이터도 제공합니다.

자세히 알아보기: 현장에서 느린 상호작용 찾기

웹사이트가 Chrome 사용자 환경 보고서(CrUX)에 포함될 수 있다면 PageSpeed Insights의 CrUX를 통해 INP(및 기타 Core Web Vitals)의 필드 데이터를 빠르게 가져올 수 있습니다. 최소한 웹사이트의 INP에 대한 출처 수준의 그림을 얻을 수 있지만 경우에 따라 URL 수준의 데이터를 얻을 수도 있습니다.

하지만 CrUX는 문제가 있는지 알려줄 수는 있지만 문제의 원인은 알려줄 수 없습니다. RUM 솔루션을 사용하면 반응성 문제가 발생한 페이지, 사용자 또는 사용자 상호작용에 관한 자세한 정보를 파악할 수 있습니다. 개별 상호작용에 대해 INP를 파악할 수 있으면 추측에 의존하거나 노력을 허비하지 않아도 됩니다.

실험실

페이지의 상호작용이 느리다는 현장 데이터가 확보되면 실험실에서 테스트를 시작하는 것이 가장 좋습니다. 필드 데이터를 사용하면 실습에서 문제가 되는 상호작용을 재현하는 작업이 훨씬 더 쉬워집니다.

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

페이지의 INP를 평가할 때 실험실 도구에 제한사항이 있지만 실험실에서 느린 상호작용을 재현하는 몇 가지 전략이 있습니다. 일반적인 사용자 흐름을 따라가면서 상호작용을 테스트하는 전략과 페이지가 로드될 때(주로 가장 로드가 많은 때) 페이지와 상호작용하여 사용자 환경의 중요한 부분에서 느린 상호작용을 식별하는 전략이 있습니다.

자세히 알아보기: 실험실에서 느린 상호작용을 수동으로 진단

INP 개선 방법

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

변경 로그

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

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

이러한 측정항목에 관한 의견이 있으면 web-vitals-feedback Google 그룹에 알려주세요.

학습한 내용 테스트

INP 측정항목의 주요 목표는 무엇인가요?

페이지의 첫 번째 콘텐츠가 표시되는 데 걸리는 시간을 측정합니다.

잘못됨 - 콘텐츠가 포함된 첫 페인트를 설명합니다.

페이지의 시각적 안정성을 수치화하고 예상치 못한 레이아웃 변경을 최소화하기 위해

틀림 - 이는 누적 레이아웃 변경을 설명합니다.

페이지와 완전히 상호작용할 수 있게 될 때까지 걸리는 시간을 평가합니다.

잘못됨 - INP는 Time to Interactive(TTI)와 관련이 있지만 특히 사용자 입력에 대한 응답성에 중점을 둡니다.

사용자가 시작하는 모든 상호작용 또는 대부분의 상호작용에서 사용자가 상호작용을 시작할 때부터 다음 프레임이 페인트될 때까지의 시간을 최소화합니다.

정답입니다.

INP를 계산하기 위해 다음 중 어떤 상호작용 유형이 관찰되나요? (해당하는 보기를 모두 선택)

마우스로 클릭

정답입니다.

마우스 휠이나 트랙패드로 페이지 스크롤

잘못됨 - INP에서 스크롤을 고려하지 않음

터치 스크린을 탭하는 모습.

정답입니다.

요소 위로 마우스 커서를 가져갑니다.

잘못됨 - INP에서 마우스 오버를 고려하지 않음

키보드의 키를 누르는 동작

정답입니다.

페이지 확대 또는 축소

잘못됨 - INP에서 확대/축소를 고려하지 않음

INP에 상호작용의 '지연 시간'은 어떻게 정의되나요?

브라우저가 상호작용의 이벤트 핸들러를 처리하는 데 걸리는 시간입니다.

잘못됨 - 입력 지연이나 다음 프레임을 표시하는 데 걸리는 시간이 아닌 처리 시간만 고려합니다.

페이지의 모든 상호작용에서 시각적 응답을 생성하는 데 걸리는 평균 시간입니다.

잘못됨 - INP는 평균이 아닌 가장 긴 상호작용에 중점을 둡니다.

브라우저가 상호작용과 연결된 이벤트 핸들러 처리를 시작하는 데 걸리는 시간입니다.

잘못됨 - 처리 및 렌더링 시간은 고려하지 않고 입력 지연만 고려합니다.

상호작용이 시작된 시점부터 다음 프레임이 완전히 표시되는 시점까지의 시간입니다.

정답입니다.

INP와 FID의 차이점은 무엇인가요?

INP는 페이지의 첫 번째 콘텐츠가 표시되는 데 걸리는 시간을 측정하는 반면 FID는 사용자 입력에 대한 응답성을 측정합니다.

잘못됨 - INP가 아닌 콘텐츠가 포함된 첫 페인트를 설명합니다.

INP는 모든 상호작용의 전체 기간을 고려하지만 FID는 첫 번째 상호작용의 입력 지연만 측정합니다.

정답입니다.

INP와 FID는 페이지가 상호작용이 가능해지는 서로 다른 타임스탬프를 측정합니다.

잘못됨 - INP 및 FID는 상호작용이 발생한 시점과 관계없이 페이지가 상호작용에 얼마나 빠르게 반응하는지를 측정합니다.

차이가 없습니다. INP와 FID는 동일한 측정항목의 두 가지 다른 이름일 뿐입니다.

틀림 - 각기 다른 정의가 있음

PageSpeed Insights와 같은 도구에서 페이지의 INP 데이터를 사용할 수 없는 상황은 언제인가요?

페이지에서 INP 데이터를 보고하지 않는 맞춤 실적 측정 라이브러리를 사용 중입니다.

틀림 - INP는 웹 플랫폼 API를 사용하여 자동으로 측정되며 맞춤 라이브러리를 통해 실적을 자체 보고하는 페이지에 의존하지 않습니다.

CrUX 데이터 세트에서 의미 있는 INP 값을 계산하기에 Chrome 사용자의 상호작용 데이터가 충분하지 않습니다.

정답입니다.

사용자가 스크롤 및 마우스 오버만으로 페이지와 상호작용했으며 이는 INP에 고려되지 않습니다.

정답입니다.

이 페이지는 INP에 맞게 자동으로 최적화되는 프레임워크를 사용하여 작성되므로 보고할 필요가 없습니다.

잘못됨 - 프레임워크가 INP에 도움이 될 수 있지만 측정항목은 여전히 관련성이 있으며 데이터를 사용할 수 있는 경우 보고됩니다.

실험 환경에서 느린 상호작용을 재현하는 데 가장 효과적인 전략은 무엇인가요?

느리고 불안정한 네트워크 연결이 있는 고급 기기를 시뮬레이션하여 어려운 조건을 만듭니다.

잘못됨 - 네트워크가 영향을 줄 수 있지만 기기 기능이 느린 상호작용을 노출할 가능성이 더 높습니다.

페이지가 완전히 로드되고 유휴 상태인 후에만 상호작용을 테스트합니다.

틀림 - 로드 중에 느린 상호작용을 놓칠 수 있습니다.

로드 중에 페이지와 상호작용하고 일반적인 사용자 흐름을 따라 잠재적인 병목 현상을 파악합니다.

정답입니다.

대부분의 사용자가 경험하지 않을 복잡하고 극단적인 상호작용에 중점을 둡니다.

잘못됨 - 일반적인 사용자 흐름은 일반적인 INP 문제를 식별하는 데 더 적합합니다.

✨ 이 퀴즈는 Gemini 1.5로 생성되었으며 사람이 검토했습니다. 의견 공유하기