INP란? 홈페이지에서 버튼을 눌렀을 때 얼마나 빠르게 반응하는지 쉽게 이해하기
INP는 클릭·터치·입력 후 결과가 화면에 나타나기까지의 반응성 지표입니다. LCP·FID와의 차이, 메인 스레드·Long Task·이벤트 핸들러·외부 스크립트·RUM까지 초보 기준으로 정리합니다.
화면은 떴는데 버튼이 안 먹으면
이미지도 글자도 보이는데 메뉴를 누르면 한동안 아무 반응이 없다면, 로딩 속도와 조작 반응은 다른 문제입니다. INP(Interaction to Next Paint)는 클릭·터치·키보드 입력 뒤 브라우저가 그 결과를 다음 화면에 보여주기까지의 반응성을 평가합니다. 엘리베이터 버튼을 눌렀을 때 불이 바로 켜지는지와 비슷합니다. Interaction = 사용자 행동, Next Paint = 그 결과가 화면에 그려진 시점입니다.
LCP와의 차이
LCP는 「주요 콘텐츠가 빨리 보이는가」, INP는 「조작에 빨리 반응하는가」입니다. 1초 만에 화면이 떠도 메뉴가 2초 뒤면 INP 문제일 수 있고, 히어로는 늦어도 버튼이 즉시 반응하면 LCP·INP가 서로 다르게 나올 수 있습니다. 스크롤 성능은 중요하지만 INP와 동일 축은 아닙니다. TTFB·CLS와도 각각 다른 경험을 봅니다.
클릭 → (메인 스레드 대기) → 이벤트 핸들러 → 레이아웃·스타일 → Paint → 사용자에게 결과 LCP = 보이는 속도 · INP = 반응하는 속도 · CLS = 화면이 갑자기 움직이지 않는가
메인 스레드 · Long Task · JavaScript
메뉴·장바구니·필터·모달 등 많은 상호작용이 JS로 처리됩니다. Main Thread가 긴 계산에 묶여 있으면 클릭이 대기열에 쌓입니다 — 이런 긴 점유를 Long Task라고 부르며, Lab에서 차단 시간을 합산하는 지표가 TBT입니다. 파일 크기만이 아니라 「클릭 순간에 얼마나 무거운 작업이 도는지」가 핵심입니다. 상품 1만 개 정렬·화면 전체 재생성처럼 이벤트 핸들러가 거대하면 반응이 늦어집니다. 작업을 쪼개거나, 서버·Web Worker로 무거운 계산을 분리하고, 가상화(Virtualization)·페이지네이션으로 DOM·데이터 양을 줄일 수 있습니다. Web Worker는 DOM을 직접 못 다루므로 모든 JS를 옮길 수는 없습니다.
피드백 · 서버 대기 · Debounce
서버가 3초 걸려도 「결제 처리 중」을 즉시 보여주면 입력에 대한 반응은 빠를 수 있습니다 — 클릭 지연과 서버 완료 지연을 구분하세요. 피드백이 없으면 사용자는 버튼을 여러 번 눌러 중복 요청이 날 수 있습니다. 다만 메인 스레드가 완전히 막히면 스피너조차 안 그려질 수 있어, 무거운 작업 전에 화면을 먼저 업데이트하는 흐름이 중요합니다. 검색 입력마다 요청하면 Debounce·Throttle로 빈도를 줄입니다. Optimistic UI는 「좋아요」처럼 되돌리기 쉬운 곳에만 신중히 — 결제 완료를 미리 띄우면 안 됩니다.
DOM · 렌더 · 외부 스크립트 · FID
요소가 지나치게 많고 클릭마다 Layout·Paint 범위가 크면 부담이 커집니다. React/Vue 자체가 나쁜 것이 아니라 불필요한 대량 리렌더가 문제입니다. 광고·채팅·분석·마케팅 JS가 메인 스레드를 오래 쓰면 우리 코드가 가벼워도 클릭이 늦어질 수 있습니다. 과거 FID는 첫 입력 지연에 초점을 두었고, INP는 이용 중 여러 상호작용의 반응성을 더 폭넓게 봅니다 — 「대부분 빨랐다」는 평균만으로 결제처럼 중요한 느린 순간을 가리지 않으려는 목적입니다.
측정 · 모바일 · 개선 순서
RUM으로 기기·페이지별 INP를, 개발자 도구 Performance로 Long Task·Layout·Paint를 봅니다. 합성은 재현에 도움이 되지만 실제 연속 클릭·대량 데이터 이용과 완전히 같지는 않습니다. 모바일 CPU가 약하면 PC에서 빠른 코드도 느릴 수 있습니다. 순서: 느린 상호작용 찾기 → 메인 스레드 → 이벤트 핸들러 → 화면 변경 범위 → 외부 스크립트 → 실제 사용자 확인. 회사 홈의 모바일 메뉴·문의 폼·관리자 대량 목록도 흔한 사례입니다. 기능·도구 추가 후 회귀는 CI/CD·배포 전후 측정으로 잡습니다. SEO 전용 점수가 아니라 실제 이용 경험을 보는 지표입니다.
자주 묻는 질문
INP란?
Interaction to Next Paint — 클릭·터치·입력 후 결과가 화면에 나타나기까지의 반응성 지표입니다.
LCP와 차이는?
LCP는 주요 콘텐츠가 보이는 속도, INP는 조작에 반응하는 속도입니다.
빨리 열리면 INP도 좋은가요?
아닙니다. 화면은 빨라도 무거운 JS 때문에 버튼이 느릴 수 있습니다.
서버가 느리면 INP도 나쁜가요?
클릭 직후 피드백과 서버 완료 시간을 구분합니다. 로딩 표시는 빨라도 결과는 늦을 수 있습니다.
FID와는?
FID는 첫 입력 지연에 가깝고, INP는 이용 중 여러 상호작용의 반응성을 더 폭넓게 봅니다.
모바일만 나쁠 수 있나요?
가능합니다. CPU·실제 환경 차이로 PC와 체감이 달라질 수 있습니다.
정리
INP는 클릭·입력 후 페이지가 얼마나 빠르게 반응하는지를 평가하는 지표입니다. LCP = 보이는 속도, INP = 반응하는 속도. 긴 JS·메인 스레드 과부하·큰 DOM·외부 스크립트를 확인합니다. 그런데 보이기도 빠르고 버튼도 즉시 반응해도, 누르려던 버튼이 광고·이미지 때문에 갑자기 밀리면 또 다른 문제입니다 — 다음으로 자주 이어지는 주제는 CLS(Cumulative Layout Shift)입니다.