웹사이트를 클릭했는데 반응이 없어서 답답하셨던 경험, 다들 한 번쯤은 있으시죠? 그 짜증나는 순간이 바로 INP(Interaction to Next Paint)가 측정하는 부분이에요. 2024년 3월부터 구글이 FID를 대체해서 새롭게 도입한 이 지표는 단순히 기술적인 숫자가 아니라, 실제로 사용자가 느끼는 웹사이트의 반응성을 정확하게 보여주는 중요한 측정 기준입니다. 이 글에서는 INP의 정의부터 측정 방법, 최적화 전략까지 실무에서 바로 활용할 수 있는 모든 내용을 다뤄보겠습니다.
INP가 정확히 무엇인지 알아보기
INP는 ‘Interaction to Next Paint’의 줄임말로, 사용자가 웹페이지에서 클릭, 탭, 키보드 입력 등의 상호작용을 했을 때부터 화면에 변화가 나타날 때까지의 시간을 측정하는 지표예요. 쉽게 말해서 버튼을 눌렀을 때 실제로 뭔가 변화가 일어나기까지 걸리는 시간을 재는 거죠.
구글이 왜 이 지표를 중요하게 여기는지 생각해보세요. 우리가 웹사이트를 사용할 때 가장 짜증나는 순간이 언제인가요? 바로 뭔가를 클릭했는데 아무 반응이 없을 때잖아요. 그래서 INP는 사용자 경험의 핵심인 ‘반응성’을 정확하게 측정하려고 만들어진 거예요.
INP의 측정 원리
INP는 페이지를 방문하는 동안 발생하는 모든 상호작용 중에서 가장 느린 응답 시간을 기준으로 점수를 매겨요. 예를 들어 한 페이지에서 버튼을 5번 클릭했다면, 그 중에서 가장 오래 걸린 시간이 그 페이지의 INP 점수가 되는 거죠. 이렇게 하는 이유는 사용자가 기억하는 건 대부분 가장 나쁜 경험이기 때문이에요.
FID와 INP, 뭐가 다른 걸까?
기존에 쓰던 FID(First Input Delay)와 INP의 가장 큰 차이점은 측정 범위예요. FID는 페이지 로딩 후 첫 번째 상호작용만 측정했다면, INP는 페이지에 있는 동안 일어나는 모든 상호작용을 다 봐요.
실제 예를 들어볼게요. 온라인 쇼핑몰에서 상품을 고르다가 장바구니에 담고, 수량을 변경하고, 결제 버튼을 누르는 과정을 생각해보세요. FID는 맨 처음 클릭만 측정했지만, INP는 이 모든 과정에서 느꼈던 답답함을 종합적으로 평가하는 거예요. 그래서 INP가 실제 사용자 경험을 더 정확하게 반영한다고 볼 수 있어요.
왜 구글이 FID를 버리고 INP를 선택했을까?
구글 내부 연구에 따르면, 사용자들이 웹사이트가 ‘느리다’고 느끼는 순간은 주로 지속적인 상호작용 과정에서 발생한다고 해요. 페이지 첫 로딩은 빨라도 이후에 버튼들이 느리게 반응하면 사용자들은 그 사이트를 ‘느린 사이트’로 기억하거든요. 그래서 더 포괄적인 측정이 필요했던 거죠.
INP 점수 기준, 얼마나 빨라야 좋은 걸까?
INP 점수는 밀리초(ms) 단위로 측정되고, 기준은 다음과 같아요:
- 200ms 이하: 좋음 (사용자가 즉각적인 반응을 느낌)
- 200ms~500ms: 개선 필요 (약간 느리다고 느끼지만 참을 만함)
- 500ms 초과: 나쁨 (명확하게 느리다고 느껴짐)
재미있는 건 이 기준이 우리 뇌가 반응하는 속도와 관련이 있다는 거예요. 심리학 연구에 따르면 사람들은 100ms 이내의 반응을 ‘즉각적’으로 느끼고, 200ms를 넘어가면 ‘약간 느리다’고 느끼기 시작해요. 500ms가 넘으면 확실히 ‘이거 뭔가 문제 있네’라고 생각하게 되고요.
실제 데이터로 보는 INP 현황
구글의 크롬 UX 리포트 데이터를 보면, 전체 웹사이트 중 약 65%가 INP 200ms 이하를 달성하고 있어요. 그런데 모바일에서는 이 비율이 더 떨어져서 50% 정도만 좋은 점수를 받고 있죠. 모바일 기기의 성능이나 네트워크 상황이 더 열악하기 때문이에요.
INP는 어떻게 측정하고 확인할 수 있을까?
INP를 확인할 수 있는 도구들을 소개해드릴게요. 각각 장단점이 있으니까 상황에 맞게 골라서 쓰시면 돼요.
PageSpeed Insights – 가장 쉽고 정확한 방법
구글의 PageSpeed Insights는 INP를 확인하는 가장 기본적이면서도 정확한 도구예요. 실제 사용자 데이터(Real User Monitoring)와 실험실 데이터를 모두 보여주거든요. 웹사이트 URL만 입력하면 바로 INP 점수와 함께 개선 방향까지 알 수 있어요.
제가 실무에서 사용해보니까 PageSpeed Insights의 장점은 개선 제안이 구체적이라는 거예요. 단순히 ‘느리다’고만 하는 게 아니라 ‘어떤 JavaScript 파일이 문제인지’, ‘어떤 이미지를 최적화해야 하는지’ 등등 실행 가능한 조언을 해줘요.
Chrome DevTools를 활용한 상세 분석
개발자라면 Chrome DevTools의 Performance 탭을 활용하는 게 좋아요. 실시간으로 상호작용을 녹화하면서 어떤 부분에서 병목이 발생하는지 정확히 파악할 수 있거든요. Lighthouse 탭에서도 INP 관련 정보를 볼 수 있고요.
Search Console의 코어 웹 바이탈 보고서
Google Search Console의 코어 웹 바이탈 보고서는 사이트 전체의 INP 현황을 한눈에 볼 수 있어서 좋아요. 특히 어떤 페이지들이 문제인지, 시간에 따른 변화는 어떤지 추적하기에 최적이에요.
INP 점수를 개선하는 실전 방법들
이제 실제로 INP를 개선하는 방법들을 살펴볼게요. 제가 여러 프로젝트에서 적용해본 방법들 위주로 소개해드리겠습니다.
JavaScript 실행 시간 줄이기
INP 개선의 핵심은 JavaScript 실행 시간을 줄이는 거예요. 사용자가 버튼을 클릭했을 때 JavaScript가 너무 많은 일을 한 번에 처리하려고 하면 당연히 느려지거든요.
코드 분할(Code Splitting) 활용하기
필요한 기능만 필요할 때 로드되도록 코드를 분할하는 게 중요해요. 예를 들어 모달창을 여는 기능은 실제로 모달창이 열릴 때 로드하면 되죠.
requestIdleCallback 활용하기
급하지 않은 작업들은 브라우저가 한가할 때 처리하도록 requestIdleCallback을 사용하면 좋아요. 사용자 상호작용에 직접적으로 영향을 주지 않는 로그 전송이나 분석 데이터 처리 같은 작업들이 해당되죠.
이벤트 핸들러 최적화
이벤트 핸들러에서 무거운 작업을 하고 있다면 이를 분산시키는 게 좋아요. 한 번에 많은 DOM 조작을 하는 대신 requestAnimationFrame을 사용해서 분산시키거나, Web Worker를 활용해서 메인 스레드 부담을 줄일 수 있어요.
Third-party 스크립트 관리
광고, 분석 도구, 채팅 상담 등 서드파티 스크립트들이 INP에 미치는 영향이 생각보다 커요. 이런 스크립트들은 가능하면 사용자 상호작용 이후에 로드되도록 하거나, 꼭 필요한 것들만 남기고 정리하는 게 좋겠어요.
업종별 INP 최적화 전략
이커머스 사이트
온라인 쇼핑몰에서는 상품 필터링, 장바구니 담기, 수량 변경 등의 기능에서 INP가 중요해요. 특히 상품 목록에서 필터를 적용할 때 모든 상품을 다시 렌더링하지 말고, 가상화(virtualization) 기법을 써서 화면에 보이는 부분만 렌더링하는 게 효과적이에요.
미디어/뉴스 사이트
뉴스 사이트에서는 무한 스크롤, 댓글 로딩, 공유 기능 등에서 INP 이슈가 많이 발생해요. 이미지 지연 로딩(lazy loading)을 적절히 활용하고, 댓글 같은 부가 기능은 사용자가 실제로 관심을 보일 때 로드하는 게 좋아요.
SaaS/대시보드
대시보드나 관리 도구에서는 데이터 테이블 조작, 차트 인터랙션 등에서 성능 이슈가 생기기 쉬워요. 대용량 데이터를 다룰 때는 페이지네이션이나 가상 스크롤링을 적극 활용하고, 차트 라이브러리도 성능을 고려해서 선택하는 게 중요해요.
자주 묻는 질문들
INP 점수가 갑자기 나빠졌어요, 뭐가 문제일까요?
대부분 새로 추가된 기능이나 서드파티 스크립트가 원인이에요. Chrome DevTools의 Performance 탭에서 상호작용을 녹화해보시면 어떤 스크립트가 시간을 많이 잡아먹는지 확인할 수 있어요. 최근에 추가한 기능들을 중심으로 체크해보세요.
모바일에서만 INP가 나빠요, 왜 그럴까요?
모바일 기기는 데스크톱보다 처리 성능이 낮기 때문에 같은 코드라도 더 오래 걸려요. 특히 JavaScript 실행 시간이 모바일에서는 3-4배 더 걸릴 수 있어요. 모바일 우선으로 최적화하시고, 무거운 기능들은 모바일에서는 단순화하는 것도 방법이에요.
INP와 TTI(Time to Interactive)는 뭐가 다른가요?
TTI는 페이지가 완전히 로드되어서 상호작용이 가능해지는 시점을 측정하고, INP는 실제 상호작용이 일어났을 때의 반응 속도를 측정해요. TTI는 ‘언제부터 클릭할 수 있나’이고, INP는 ‘클릭했을 때 얼마나 빨리 반응하나’라고 생각하시면 돼요.
INP 개선 작업의 우선순위는 어떻게 정해야 하나요?
사용자가 가장 자주 사용하는 기능부터 개선하세요. 구글 애널리틱스나 히트맵 도구로 어떤 버튼이나 기능이 많이 사용되는지 파악하고, 그 부분의 INP를 우선적으로 개선하는 게 효과적이에요. 전체적인 개선보다는 핵심 사용자 여정에 집중하는 게 좋겠어요.
INP 최적화, 이제 시작해보세요
INP는 단순한 기술적 지표가 아니라 실제 사용자 경험을 정확하게 반영하는 중요한 측정 기준이에요. 2024년부터 구글 검색 랭킹에도 영향을 미치고 있으니까, 이제는 선택이 아니라 필수가 되었다고 봐야 해요.
가장 중요한 건 사용자 관점에서 생각하는 거예요. 내가 이 웹사이트를 사용한다면 어떤 부분에서 답답함을 느낄지, 어떤 기능이 빨라야 편할지 고민해보세요. 기술적인 최적화도 중요하지만, 사용자 경험 개선이라는 본질을 잊지 않는 게 핵심이에요.
오늘부터 PageSpeed Insights로 내 사이트의 INP 점수를 확인해보시고, 하나씩 개선해나가시기 바라요. 작은 변화들이 모여서 사용자들이 더 만족하는 웹사이트를 만들 수 있을 거예요.