Core Web Vitals 2026 — INP 200ms 달성 7가지 방법

요약: INP(Interaction to Next Paint)는 사용자가 클릭·입력한 뒤 화면이 다시 반응해 다음 프레임을 보여줄 때까지의 체감 속도 지표입니다. 2026년에는 사용자 기대치가 높아져 200ms를 넘기면 즉시 이탈로 이어지는 케이스가 늘었습니다.

왜 INP 200ms가 중요한가

• INP는 페이지 성능의 ‘최악 구간’을 반영합니다.
• 평균 렌더 성능이 좋더라도 한 번의 긴 지연 동작이 UX를 망칩니다.
• 전환형 사이트는 반응 속도가 곧 매출입니다.
• 모바일 트래픽 비중이 커진 현재, 터치 반응 지연은 즉시 이탈 리스크를 키웁니다.

1) 핵심 동작 5개를 정렬한다

가장 먼저 “핵심 상호작용”을 고릅니다. 결제, 검색, 필터, 탭 전환, 댓글/문의 중 5개를 우선순위로 잡습니다.

1. 1사용 경로별 p75/p95 응답시간을 수집한다.
2. 2상위 20%가 실제 이탈을 유발하는 버튼을 찾는다.
3. 3각 동작마다 허용 응답 구간을 만든 뒤 우선순위를 정한다.

2) 클릭 핸들러를 분리한다

클릭 직후 계산을 몰아 넣으면 장시간 메인 스레드 블록이 생깁니다.

• 즉시 UI 상태 전환(로딩, 비활성화, 토글)을 먼저 수행
• 무거운 연산은 requestAnimationFrame, setTimeout 0, Web Worker로 분리
• 상태 계산은 debounce로 빈번한 재렌더를 줄인다.

3) 레이아웃 시프트를 제거한다

INP는 체감 렌더 지연에도 민감합니다.

• 이미지/카드에 width/height 비율 placeholder를 항상 지정
• 폰트 로드 전 렌더 영역 이동을 최소화
• 스켈레톤 높이를 실제 콘텐츠와 동일한 범위로 맞춤

4) 렌더 경합을 제어한다

한 입력이 전체 라우트를 다시 그리는 패턴이 있으면 INP가 급격히 악화됩니다.

• 컴포넌트 갱신 범위를 줄이고 렌더 트리 크기를 제한
• 무한 스크롤/긴 리스트는 가상화
• 파생 상태는 memoized selector로 캐시

5) 즉시 피드백으로 체감 개선한다

완료 메시지와 버튼 상태 변경은 실제 성능 전보다 먼저 사용자 신뢰를 살립니다.

• 클릭 직후 버튼 disabled + 진행 문구
• 반복 클릭 방지
• 네트워크 실패 시 재시도 경로를 명확히 노출

6) API 왕복 단축

프론트만 빠르면 INP는 안정되지 않습니다.

• 필요한 데이터만 한 번에 조회
• 조건부 요청(If-None-Match/ETag), 캐시 정책 정리
• 폴링 주기와 재요청 조건을 재설계해 불필요 요청 제거

7) 배포 후 7일 회귀 추적

개선작업 이후 첫 주의 회귀가 가장 큽니다.

• 동작별 INP(특히 p95)를 주간으로 추적
• 임계치 초과 동작은 우선 롤백 후보로 등록
• 문제 지점별 리그레션 로그를 남기고 소유자를 지정

내부 링크

• INP 200ms 기준 정리
• LCP·CLS·INP 동시 대응
• 사이트 속도 90+ 달성 루틴
• Lighthouse 운영 체크

FAQ

INP는 LCP보다 더 중요할 수 있나요?

대부분의 상호작용 페이지에서는 INP가 전환율에 직접 영향을 줍니다. LCP와 INP 둘 다 중요하지만, 유저가 느끼는 병목은 INP가 먼저 드러납니다.

200ms를 모든 페이지에 적용해야 하나요?

모든 페이지에 같은 기준이 필요하지는 않습니다. 비즈니스 핵심 동작부터 200ms를 만족하도록 점진적으로 확장합니다.

모바일에서 가장 먼저 손대야 할 항목은?

긴 task를 만드는 이벤트 핸들러와 레이아웃 이동입니다. 실제 체감 악화가 여기서 많이 발생합니다.

배포 전 어떤 방식으로 검증하나요?

스테이징에서 핵심 동작을 스크립트로 재현하고 p75/p95를 함께 확인한 뒤 CI 단계에서 임계치 경고를 둡니다.

INP 목표가 놓쳤을 때 어떻게 접근하나요?

동작별로 긴 블록을 쪼개고, 렌더 경합, API 지연, 자바스크립트 블록을 분리해 원인별 우선순위를 정합니다.

7일 내 회귀가 자주 발생하면?

릴리즈 노트와 번들 diff를 동작별 INP 변화와 대조해 롤백 포인트를 즉시 찾습니다.

실제로 매출 개선이 되나요?

직접 클릭형 액션의 체감이 줄면 이탈률 감소와 재클릭률 개선이 동반되는 케이스가 반복됩니다.