코어 웹 바이탈, 점수만 높이면 끝일까요?: INP 시대의 진짜 사용자 경험 설계법

Google의 Core Web Vitals(코어 웹 바이탈)는 이제 많은 마케터와 웹사이트 관리자에게 익숙한 개념입니다. 하지만 단순히 PageSpeed Insights의 점수를 높이는 데에만 집중하고 있다면, 가장 중요한 변화의 흐름을 놓치고 있을지 모릅니다. 검색엔진이 페이지를 평가하는 기준은 ‘얼마나 빨리 뜨는가’에서 ‘얼마나 쾌적하게 반응하는가’로 진화하고 있기 때문입니다.

TL;DR

• Core Web Vitals의 핵심이 FID(최초 입력 지연)에서 INP(다음 페인트에 대한 상호작용)로 완전히 전환되었습니다.
• INP는 페이지 로딩 후 사용자의 모든 클릭과 키 입력에 대한 ‘전체 반응성’을 측정하는 종합적인 지표입니다.
• 좋은 INP 점수(< 200ms)를 위해서는 무거운 자바스크립트 작업을 분할하고 메인 스레드 부담을 줄이는 것이 핵심입니다.

왜 구글은 ‘빠른 로딩’에서 ‘빠른 반응’으로 기준을 옮겼을까?

과거 우리는 LCP(가장 큰 콘텐츠 렌더링)처럼 초기 로딩 속도를 단축하는 데 많은 노력을 기울였습니다. 이는 마치 손님을 식당으로 빠르게 안내하는 것과 같습니다. 하지만 자리에 앉은 손님이 주문을 위해 직원을 불렀을 때, 1분이 지나도 오지 않는다면 어떨까요? 좋은 첫인상은 금세 나쁜 경험으로 바뀔 것입니다.

INP(Interaction to Next Paint)가 바로 이 ‘주문 후의 반응 속도’를 측정하는 지표입니다. 사용자가 페이지에 들어와 버튼을 클릭하거나, 메뉴를 열거나, 양식을 작성하는 등 어떤 행동을 했을 때, 화면에 시각적인 변화가 나타나기까지 걸리는 시간을 말합니다. 구글이 FID(최초 입력 지연) 대신 INP를 새 표준으로 삼은 것은, 사용자의 첫 경험뿐만 아니라 사이트에 머무는 모든 순간의 경험 품질을 보겠다는 강력한 신호입니다.

실제 현장에서 보면, 로딩은 빠르지만 특정 기능이 유독 버벅거리는 사이트들이 많습니다. 바로 이런 문제를 잡아내는 것이 INP의 역할입니다.

‘나쁨’ 등급의 주범, INP는 어떻게 측정되고 개선할까?

Google Search Central 공식 문서에 따르면 INP는 200밀리초(ms)를 기준으로 좋음/나쁨이 갈립니다. 200ms 이하는 ‘좋음’, 500ms를 초과하면 ‘나쁨’ 등급을 받게 되며, 이는 SEO 순위에도 영향을 미치는 페이지 경험 신호가 됩니다.

INP 저하의 주범은 대부분 무거운 자바스크립트(JavaScript) 실행 때문입니다. 브라우저가 자바스크립트 코드를 처리하는 동안에는 다른 작업을 할 수 없는데(이를 ‘메인 스레드 차단’이라 부릅니다), 이 시간이 길어지면 사용자의 클릭에 대한 시각적 피드백이 늦어집니다. 따라서 INP 개선은 곧 자바스크립트 최적화와 직결됩니다.

다음은 INP를 개선하는 기본적인 단계입니다.

1. 느린 인터랙션 식별하기: PageSpeed Insights나 Chrome 개발자 도구의 'Performance' 탭을 사용해 어떤 사용자 행동에서 INP가 길게 측정되는지 확인합니다.

2. 긴 작업(Long Task) 분할하기: 50ms 이상 메인 스레드를 차지하는 자바스크립트 작업을 찾아 더 작은 단위로 쪼개야 합니다. 예를 들어, 한 번에 500개의 목록을 처리하는 대신 50개씩 10번에 나눠 처리하는 방식입니다.

3. 메인 스레드에 양보하기: setTimeout 같은 기법을 사용하면 긴 작업을 여러 조각으로 나누고, 각 조각 사이에 브라우저가 렌더링 등 다른 중요한 작업을 처리할 시간을 벌어줄 수 있습니다. 이는 복잡한 연산 중간에 잠시 숨을 고를 틈을 주는 것과 같습니다.

   // 개선 전: 한 번에 모든 작업을 처리하여 화면 멈춤을 유발
   function processQueue() {
     for (const task of tasks) {
       // 무거운 작업 수행
       process(task);
     }
   }
   
   // 개선 후: setTimeout으로 작업을 분할하여 반응성 확보
   function processQueueInChunks() {
     if (tasks.length === 0) return;
   
     let chunk = tasks.splice(0, 5); // 5개씩 처리
     for (const task of chunk) {
       process(task);
     }
   
     // 다음 chunk 처리를 위한 스케줄링. 브라우저에 렌더링 틈을 줌
     setTimeout(processQueueInChunks, 0);
   }    
   

4. 불필요한 서드파티 스크립트 점검: 분석 툴, 광고 스크립트 등 외부에서 불러오는 코드가 INP를 저해하는 경우가 많습니다. 정말 필요한 스크립트인지, 더 가벼운 대안은 없는지 정기적으로 검토해야 합니다.

LCP와 CLS, 여전히 중요한 이유

INP가 새로운 주인공으로 떠올랐다고 해서 LCP와 CLS의 중요성이 사라진 것은 아닙니다. 이들은 여전히 Core Web Vitals의 핵심 구성원이며, 각각 ‘로딩 경험’과 ‘시각적 안정성’이라는 중요한 축을 담당합니다.

• LCP (가장 큰 콘텐츠 렌더링, 2.5초 이내 권장): 페이지의 핵심 콘텐츠가 얼마나 빨리 보이는지를 측정합니다. 반응이 아무리 빠른들, 빈 화면만 오래 보인다면 사용자는 뒤로 가기를 누를 것입니다.
• CLS (누적 레이아웃 이동, 0.1 미만 권장): 페이지가 로딩되면서 갑자기 광고가 튀어나오거나 이미지가 밀려 내려가 버튼 위치가 바뀌는 현상을 측정합니다. 의도치 않은 클릭을 유발하는 불안정한 페이지는 최악의 사용자 경험입니다.

결국 훌륭한 사용자 경험은 빠른 로딩(LCP), 안정적인 레이아웃(CLS), 즉각적인 반응(INP) 이 세 박자가 모두 조화롭게 이루어질 때 완성됩니다.

💡 잠깐, 우리 사이트도 점검해 볼까요?

우리 웹사이트의 Core Web Vitals 점수는 과연 건강할까요? INP는 물론 LCP, CLS까지, 사용자가 느끼는 경험 품질을 객관적인 데이터로 확인하고 싶다면 SearchTune OS의 진단을 받아보세요. 어디서부터 개선해야 할지 명확한 방향을 제시해 드립니다.

👉 무료 SEO·AEO·GEO 진단 받기

Core Web Vitals, 점수 너머의 '경험 품질' 신호

Core Web Vitals 점수를 높이는 것은 단순히 검색 순위를 위한 기술적 SEO 활동이 아닙니다. 이것은 우리 웹사이트를 방문하는 고객에 대한 예의이자, 우리 브랜드의 디지털 경험 품질을 증명하는 중요한 신호입니다.

특히 ChatGPT나 Perplexity 같은 AI 검색 엔진은 어떤 정보가 ‘도움이 되는가’를 판단할 때, 콘텐츠의 내용뿐만 아니라 해당 정보를 담고 있는 페이지의 경험 품질까지 고려할 가능성이 높습니다. 버벅거리고 사용하기 불편한 사이트의 정보를 신뢰도 높은 답변으로 인용할 확률은 낮아질 수밖에 없습니다. 실제 컨설팅 현장에서도 Core Web Vitals 점수가 높은 사이트들이 AI 검색 답변에 포함될 가능성이 더 높다는 초기 데이터가 관찰되고 있습니다.

따라서 이제 웹사이트 성능 최적화는 개발팀만의 숙제가 아닙니다. 마케터와 기획자 모두가 ‘사용자 경험’이라는 큰 틀에서 Core Web Vitals를 이해하고, 점수 너머의 가치를 개선하기 위해 협력해야 합니다.

✅ 실행 체크리스트

• 내 사이트의 INP 점수 200ms 이하로 관리되고 있는지 확인 (PageSpeed Insights, Search Console)
• 가장 느린 인터랙션의 원인이 되는 자바스크립트 파일 식별
• 50ms 이상 실행되는 긴 작업을 setTimeout 등으로 분할
• LCP(2.5초 이내)와 CLS(0.1 미만) 점수 기준 충족 여부 재확인
• WebP/AVIF 포맷 사용 등 이미지 및 폰트 로딩 최적화 병행
• 불필요한 서드파티 스크립트가 INP를 저해하지 않는지 분석
• 실제 사용자가 느끼는 '반응성'을 기준으로 UI/UX 기획 검토

경험의 차이가 순위의 차이를 만듭니다

Core Web Vitals의 진화는 검색엔진이 사용자의 입장에서 웹을 바라보고 있다는 가장 명확한 증거입니다. 단순히 정보를 나열하는 것을 넘어, 사용자가 정보를 소비하는 과정 전체를 쾌적하게 만드는 것이 새로운 SEO의 핵심 과제가 되었습니다. 오늘 소개된 INP 최적화 전략과 체크리스트를 통해, 방문하는 모든 사용자가 만족하는 웹사이트로 한 걸음 더 나아가시길 바랍니다.

어디서부터 시작해야 할지 막막하시다면, SearchTune OS가 여러분의 웹사이트를 정밀하게 분석하고 구체적인 개선 로드맵을 제시해 드립니다. 지금 바로 무료 진단을 통해 우리 사이트의 경험 품질을 높여보세요.

자주 묻는 질문

Q. INP가 FID를 대체했는데, FID는 이제 신경 쓰지 않아도 되나요?

네, 공식적으로 FID(최초 입력 지연)는 Core Web Vitals에서 제외되고 INP(다음 페인트에 대한 상호작용)가 그 자리를 대체했습니다. FID는 사용자의 '첫' 상호작용에 대한 반응성만 측정했지만, INP는 페이지에 머무는 동안 발생하는 '모든' 주요 상호작용을 평가하여 훨씬 더 포괄적인 사용자 경험 지표이기 때문입니다. 따라서 최적화의 우선순위는 FID가 아닌 INP에 두는 것이 맞으며, Google Search Console에서도 FID 보고서는 INP 보고서로 대체되었습니다.

Q. INP 점수를 가장 쉽게 확인할 수 있는 방법은 무엇인가요?

두 가지 주요 방법이 있습니다. 첫째, Google의 PageSpeed Insights에 URL을 입력하면 '실제 사용자 경험 진단' 섹션에서 필드 데이터(실제 사용자 데이터) 기반의 INP 점수를 확인할 수 있습니다. 둘째, Google Search Console의 '코어 웹 바이탈' 보고서에서 사이트 전반의 INP URL 그룹별 '나쁨' 또는 '개선 필요' 상태를 모니터링할 수 있습니다. 개발 단계에서는 Chrome 개발자 도구의 Lighthouse나 Performance 패널을 통해 랩 데이터(실험실 환경)를 측정하는 것이 유용합니다.

Q. 자바스크립트 분할(Task Splitting) 외에 INP를 개선할 다른 기술적 방법이 있나요?

네, 여러 가지 방법이 있습니다. 첫째, 사용량이 적거나 불필요한 서드파티 스크립트(채팅 위젯, 광고 등)를 지연 로딩하거나 제거하는 것이 효과적입니다. 둘째, 복잡한 CSS 선택자나 애니메이션은 렌더링 부하를 유발하므로, transform이나 opacity 같이 레이아웃을 재계산하지 않는 속성을 사용하는 것이 좋습니다. 셋째, 웹 워커(Web Workers)를 활용해 무거운 자바스크립트 연산을 메인 스레드가 아닌 백그라운드 스레드에서 처리하여 반응성을 높이는 고급 최적화 전략도 있습니다.

Q. LCP 점수를 개선하기 위한 가장 효과적인 방법 2가지를 꼽는다면?

가장 효과적인 두 가지는 '이미지 최적화'와 '중요 렌더링 경로 최적화'입니다. 첫째, WebP 또는 AVIF 같은 최신 이미지 포맷을 사용하고, 화면 크기에 맞는 반응형 이미지를 제공하며, loading="lazy" 속성을 활용해 뷰포트 밖 이미지는 나중에 로드하는 것이 중요합니다. 둘째, 렌더링을 차단하는 CSS와 JavaScript를 최소화하고, 초기 뷰포트에 필요한 핵심 CSS는 HTML에 인라인으로 삽입하는 전략이 LCP 시간을 크게 단축시킬 수 있습니다.

Q. Core Web Vitals 점수가 SEO 순위에 미치는 영향은 어느 정도인가요?

Core Web Vitals는 구글의 페이지 경험(Page Experience) 신호 중 하나로, 검색 순위 결정에 직접적인 영향을 미칩니다. 이것이 유일하거나 가장 중요한 순위 요소는 아니지만, 콘텐츠 품질, 관련성 등 다른 조건이 비슷한 경쟁 환경에서는 우수한 Core Web Vitals 점수를 가진 페이지가 순위에서 유리한 고지를 점할 수 있습니다. Google 공식 문서에서도 페이지 경험을 중요한 순위 신호 중 하나로 명시하고 있으며, 특히 AI 검색 시대에는 좋은 사용자 경험이 더욱 중요한 평가 기준이 될 것입니다.