TL;DR: 핵심 요약
- INP(Interaction to Next Paint)는 2024년 3월부터 CWV 공식 지표 — 클릭·탭 후 화면 반응 속도를 측정
- 페이지 로딩 속도 100ms 개선 시 소매 전환율 +8.4%, AOV +9.2% — Deloitte/Google 실증 연구
- INP 고립 데이터는 아직 희소 — redBus(매출 +7%), QuintoAndar(전환 +36% YoY), Fotocasa 등이 주요 공개 사례
- 한국은 CWV 통과율 39.3%(세계 1위)이지만, 결제 SDK·마케팅 스크립트 과적재 사이트는 INP 실패 위험
- 한국 특화 INP 킬러: INICIS 결제 모듈, Naver Pay SDK, Kakao Pay SDK, Channel Talk, Cafe24 앱스토어 플러그인
INP란 무엇인가: 왜 페이지 로딩 속도와 다른가
INP(Interaction to Next Paint)는 사용자가 페이지와 상호작용(클릭, 탭, 키보드 입력)한 후 브라우저가 다음 프레임을 그리기까지의 시간을 측정합니다. 2024년 3월, 기존 FID(First Input Delay)를 대체하며 Core Web Vitals 공식 지표가 되었습니다.
| 지표 | 측정 대상 | 이커머스 해당 상황 |
|---|---|---|
| LCP | 페이지 로딩 완료 속도 | 상품 페이지 최초 렌더링 |
| INP | 상호작용 반응 속도 | "장바구니 담기" 클릭 후 UI 반응 |
| CLS | 시각적 안정성 | 결제 버튼이 밀려나는 레이아웃 변동 |
핵심 구분: LCP는 '페이지가 얼마나 빨리 뜨는가', INP는 '버튼을 눌렀을 때 얼마나 빨리 반응하는가'입니다.
이 구분이 중요한 이유는, 지금까지 축적된 속도-전환율 연구 대부분이 페이지 로딩 속도(LCP, TTFB, Speed Index)를 기준으로 하기 때문입니다. INP를 고립 변수로 측정한 전환율 연구는 아직 극소수에 불과합니다.
INP의 "좋음" 기준은 200ms 이하, "개선 필요"는 200-500ms, "나쁨"은 500ms 초과입니다.
속도와 전환율: 글로벌 실증 데이터
페이지 로딩 속도 연구 (INP 아님)
다음 데이터는 페이지 로딩 속도(load time, TTFB 등)와 전환율의 관계를 다룹니다. INP(상호작용 반응성)와는 다른 지표임을 명확히 합니다.
출처: Deloitte/Google — Milliseconds Make Millions
모바일 사이트 속도 0.1초 개선(100ms) 시:
- 소매: 전환율 +8.4%, 평균 주문 금액 +9.2%
- 여행: 전환율 +10.1%
- 럭셔리: 상품 상세→장바구니 전환율 +40.1%
- 로딩 1초→3초: 이탈 확률 +32%
- 로딩 1초→5초: 이탈 확률 +90%
- 모바일 방문자 53%가 3초 초과 시 이탈
Amazon의 유명한 내부 테스트에서도 100ms 지연 = 매출 1% 감소라는 결과가 보고된 바 있습니다.
이 데이터들은 "속도가 전환에 영향을 미친다"는 강력한 증거이지만, 모두 페이지 로딩 시점의 속도를 측정한 것입니다. 사용자가 페이지에 도착한 이후 버튼을 클릭했을 때의 반응성(INP)은 별도의 문제입니다.
INP 고립 전환율 데이터 (극히 제한적)
공개적으로 INP 개선을 전환율과 직접 연결한 사례는 현재 단 하나입니다.
출처: web.dev — redBus INP Case Study
인도 최대 버스 예약 플랫폼 redBus: INP 870ms→350ms(72% 개선) 후 매출 +7%(web.dev 확인). 전환율 +6~7.2%는 일부 국가 기준으로 redBus Medium 글에서 언급된 수치이며 web.dev 원문에는 포함되지 않음
WeDoWebApps에서 "INP 100ms 개선당 전환율 약 7% 증가"라는 수치를 제시한 바 있으나, 측정 방법론이 공개되지 않아 독립 검증이 불가능합니다.
왜 INP 고립 데이터가 부족한가: INP가 CWV 공식 지표가 된 것은 2024년 3월입니다. 그 이전에는 FID가 사용되었고, FID는 첫 번째 입력의 지연만 측정하여 INP보다 훨씬 제한적이었습니다. 업계가 INP를 별도 변수로 측정·보고하기 시작한 지 아직 2년밖에 되지 않았기 때문입니다.
한국 이커머스의 특수한 맥락
모바일 지배와 속도 기대치
출처: 통계청 — 2024년 온라인쇼핑 동향
한국 온라인 쇼핑의 73-76%가 모바일에서 발생합니다.
한국의 모바일 인터넷 속도는 202.61Mbps(세계 2위)입니다. 네트워크가 빠르기 때문에 사용자의 체감 기대치도 높습니다. 동남아시아나 인도에서는 3G/4G 환경 자체가 병목이 되지만, 한국에서는 네트워크가 아니라 클라이언트 사이드 JavaScript 실행이 INP 실패의 주된 원인입니다.
CWV 통과율: 숫자 이면의 현실
출처: Chrome UX Report
한국의 CWV 통과율은 39.3%(세계 1위), INP p75는 75ms(세계 최저)입니다.
이 수치만 보면 한국은 INP 문제가 없어 보입니다. 하지만 이는 CrUX에 보고되는 모든 사이트의 중앙값입니다. 실제로 외부 스크립트 15개 이상을 로드하는 이커머스 사이트는 이 평균에서 크게 벗어납니다. 특히 결제 시스템과 마케팅 도구가 중첩되는 한국 이커머스 환경에서, 개별 사이트의 INP는 국가 평균과 상당히 다를 수 있습니다.
한국 이커머스 INP 킬러: 원인 분석
한국 이커머스 사이트에서 INP를 악화시키는 주된 요인들을 정리합니다.
1. 결제 SDK
한국 이커머스의 구조적 특수성은 PG SDK의 동기 로딩(Payment Gateway)입니다.
| SDK | 문제점 |
|---|---|
| INICIS WebStandard | PC/모바일 별도 모듈, 동기식 JS 로드 |
| Naver Pay SDK | 상품 페이지에 결제 버튼 렌더링을 위해 선로딩 |
| Kakao Pay SDK | 인앱 결제 연동 시 메인 스레드 점유 |
이들 SDK의 정확한 번들 사이즈는 공개되지 않았지만, 각각이 동기식으로 메인 스레드를 점유한다는 것이 문제의 핵심입니다. 3개 결제 수단을 동시에 지원하는 사이트는 이 부담이 누적됩니다.
2. 마케팅·분석 스크립트
| 스크립트 | 역할 | INP 영향 |
|---|---|---|
| Channel Talk | 실시간 채팅 위젯 | 메인 스레드에서 DOM 조작, 이벤트 리스너 등록 |
| Kakao Channel | 카카오 채널 채팅 | JS 번들 + iframe 로딩 |
| Naver Analytics | 네이버 트래픽 분석 | 페이지 인터랙션 추적을 위한 이벤트 핸들러 |
| Google Analytics 4 | 구글 트래픽 분석 | gtag.js 실행 및 이벤트 수집 |
출처: web.dev — Third-party JavaScript
서드파티 코드가 메인 스레드를 차단하는 시간은 사이트의 50% 이상에서 42ms~1.6초에 달합니다.
3. Cafe24 플랫폼 특수성
한국 중소형 이커머스의 상당수가 사용하는 Cafe24는 앱스토어 플러그인 구조를 갖고 있습니다. 개별 플러그인은 가벼워 보여도, 리뷰 위젯 + 추천 상품 + 쿠폰 팝업 + 채팅 위젯 등이 누적되면 메인 스레드 차단 시간이 급격히 증가합니다. 플러그인 간 의존성 충돌이나 중복 라이브러리 로딩도 흔한 문제입니다.
4. 상품 캐러셀과 이미지 갤러리
상품 목록 페이지의 무한 스크롤, 상품 상세 페이지의 이미지 슬라이더가 무거운 JS 라이브러리(Swiper, Slick 등)와 결합되면, 스크롤이나 스와이프 시 INP가 급격히 나빠집니다. 특히 모바일에서 터치 이벤트 핸들러가 메인 스레드를 차단하는 패턴이 빈번합니다.
아시아 이커머스 사례: 가장 가까운 참고 데이터
한국 이커머스의 속도-전환율 공개 연구는 존재하지 않습니다. 가장 유사한 시장 환경의 아시아 사례를 참고합니다.
| 기업 | 국가 | 개선 내용 | 결과 |
|---|---|---|---|
| redBus | 인도 | INP 870ms→350ms | 매출 +7% (web.dev) |
| Rakuten 24 | 일본 | LCP 최적화 | 방문자당 매출 +53%, 전환율 +33% |
| Lazada | 동남아 | LCP 3배 개선 | 모바일 전환율 +16.9% |
출처: web.dev — Rakuten 24 Case Study · web.dev — Lazada Case Study
주의: Rakuten 24와 Lazada는 LCP(로딩 속도) 최적화 사례입니다. INP 개선 사례는 redBus뿐입니다. 또한 인도·동남아의 네트워크 환경(3G/4G 비율, 디바이스 성능)은 한국과 크게 다르므로 수치를 직접 대입할 수 없습니다.
그럼에도 이 사례들이 시사하는 바는 명확합니다: 웹 성능 개선이 전환율에 미치는 영향은 아시아 이커머스 전반에서 일관되게 확인됩니다.
네이버 쇼핑과 페이지 속도
네이버 쇼핑 노출을 위해 속도가 중요한지 묻는 질문이 많습니다.
스마트스토어
스마트스토어(Smart Store) 페이지는 네이버 인프라에서 호스팅됩니다. 페이지 속도는 네이버가 제어하므로, 개별 판매자가 INP를 직접 최적화할 여지가 제한적입니다. 스마트스토어 랭킹은 C-Rank(콘텐츠 품질), 상품 관련성, 사용자 참여도, 리뷰 등이 주된 요소입니다.
자체 쇼핑몰 (네이버 쇼핑 EP 연동)
자체 도메인 쇼핑몰을 네이버 쇼핑에 EP(상품 피드)로 연동하는 경우, P-Rank가 적용됩니다. P-Rank는 네비게이션 품질, 로딩 속도, 콘텐츠 가독성을 평가 요소에 포함합니다. 다만 페이지 속도가 독립적 랭킹 시그널로 얼마나 큰 비중을 차지하는지는 공개된 바 없습니다.
결론적으로, 네이버 쇼핑에서 속도는 간접적 요소입니다. 직접적인 순위 영향보다는, 느린 페이지→높은 이탈률→낮은 참여도→랭킹 하락의 간접 경로가 더 현실적인 영향 메커니즘입니다.
한국 이커머스 INP 점검 체크리스트
자사 사이트의 INP 리스크를 점검하기 위한 항목입니다.
결제 시스템
- INICIS, KG이니시스, NHN KCP 등 PG SDK가 동기식으로 로드되는가?
- Naver Pay, Kakao Pay 버튼이 상품 상세 페이지에서 선로딩되는가?
- 복수 결제 수단 SDK가 동시에 메인 스레드를 점유하는가?
마케팅·분석 도구
- Channel Talk 또는 Kakao Channel 채팅 위젯이 전 페이지에 로드되는가?
- Naver Analytics + GA4 + 기타 분석 스크립트가 3개 이상 동시 실행되는가?
- 리타겟팅 픽셀(Meta, Kakao Moment, Google Ads)이 메인 스레드에서 실행되는가?
플랫폼·프론트엔드
- Cafe24 앱스토어 플러그인이 5개 이상 활성화되어 있는가?
- 상품 캐러셀에 무거운 JS 라이브러리(Swiper full bundle 등)를 사용하는가?
- 무한 스크롤이 가상화 없이(virtualization) 구현되어 있는가?
- 이미지가 WebP/AVIF 미적용 상태로 원본 사이즈 로딩되는가?
측정 방법
- Chrome DevTools → Performance 탭 → "Interactions" 섹션에서 INP 확인
- PageSpeed Insights → 필드 데이터(CrUX)에서 INP 점수 확인
- web-vitals 라이브러리 → 실제 사용자 INP를 GA4 등으로 수집
INP 개선 우선순위: 한국 이커머스 맞춤 전략
즉시 적용 (난이도 낮음)
- 서드파티 스크립트 지연 로딩: Channel Talk, 분석 스크립트를
async또는defer로 전환. 채팅 위젯은 사용자 스크롤 후 로딩(Intersection Observer활용). - 이미지 최적화: 상품 이미지를 WebP/AVIF로 변환,
loading="lazy"적용. - 불필요한 플러그인 제거: Cafe24 앱스토어에서 미사용 플러그인 비활성화.
중기 개선 (난이도 중간)
- 결제 SDK 지연 로딩: 결제 SDK를 상품 페이지 최초 로드가 아닌, "구매하기" 버튼 클릭 시점에 동적 로딩. Naver Pay/Kakao Pay 버튼의 렌더링 시점을 뷰포트 진입으로 지연.
- 긴 태스크 분할:
requestIdleCallback또는scheduler.yield()로 50ms 이상의 긴 태스크를 분할. - 캐러셀 경량화: Swiper full bundle 대신 필요한 모듈만 임포트. 또는 CSS scroll-snap 기반 네이티브 구현 검토.
장기 개선 (난이도 높음)
- 서드파티 스크립트 Web Worker 이전: 분석·마케팅 스크립트의 데이터 수집 로직을 Web Worker로 분리하여 메인 스레드 부담 제거.
- 프레임워크 수준 최적화: React/Next.js 사용 시
startTransition,useDeferredValue로 비긴급 업데이트 우선순위 조정. SSR/SSG 활용으로 클라이언트 하이드레이션 최소화.
데이터의 한계: 솔직한 정리
이 글에서 다루는 데이터에는 명확한 한계가 있습니다. 투명하게 정리합니다.
존재하지 않는 데이터
- 한국 이커머스 속도-전환율 공개 연구: 쿠팡, 11번가, G마켓 등 국내 대형 플랫폼의 속도별 전환율 데이터는 공개된 적 없습니다.
- 한국 사이트 CrUX INP 개별 데이터: CrUX에서 개별 한국 이커머스 사이트의 INP를 조회할 수 있지만, 이를 전환율과 연결한 공개 분석은 없습니다.
- Naver Pay/Kakao Pay SDK 번들 사이즈: 정확한 JS 번들 크기가 공식적으로 공개되지 않았습니다.
- 한국 사용자의 속도 임계값: "한국 사용자는 몇 초에서 이탈하는가"에 대한 한국 특화 연구는 없습니다. Google의 글로벌 3초 기준을 참고할 뿐입니다.
주의해서 해석해야 할 데이터
- Deloitte/Google 연구: 신뢰할 수 있는 연구이나, 페이지 로딩 속도를 측정한 것이지 INP가 아닙니다.
- redBus 사례: INP 고립 효과를 보여주는 귀중한 사례이나, 인도 버스 예약 시장은 한국 이커머스와 사용자 행동 패턴이 다릅니다.
- Rakuten/Lazada 사례: LCP 최적화 사례이며, INP 개선 효과를 직접 대리할 수 없습니다.
- 한국 CWV 39.3%: 국가 평균이므로 개별 이커머스 사이트의 현실과 다를 수 있습니다.
합리적 추론
직접적인 한국 INP-전환율 데이터는 없지만, 다음은 합리적으로 추론할 수 있습니다:
- 속도가 전환에 영향을 미친다는 것은 산업·지역을 불문하고 일관되게 입증되었습니다.
- INP는 속도의 한 차원(상호작용 반응성)이므로, 동일한 원리가 적용될 가능성이 높습니다.
- 한국 사용자의 높은 속도 기대치(세계 2위 모바일 속도)를 감안하면, 느린 반응에 대한 민감도가 글로벌 평균보다 높을 수 있습니다.
- 다만 이것은 추론이지 실증 데이터가 아닙니다.
결론: INP는 이커머스의 "보이지 않는 전환 장벽"
페이지가 빨리 뜨는 것만으로는 충분하지 않습니다. 사용자가 "장바구니 담기"를 탭했을 때, "옵션 선택" 드롭다운을 열었을 때, "결제하기"를 클릭했을 때 — 그 반응이 200ms를 넘기면, 사용자는 의식하지 못하더라도 불쾌감과 불신을 느낍니다.
한국 이커머스는 결제 SDK, 마케팅 스크립트, 플랫폼 플러그인이라는 고유한 INP 악화 요인을 안고 있습니다. 글로벌 데이터가 보여주는 속도-전환 상관관계가 한국에서도 유효하다면(그렇지 않을 이유가 없다면), INP 최적화는 추가 마케팅 비용 없이 전환율을 개선할 수 있는 가장 확실한 기술적 레버입니다.
아직 한국 시장에서 INP를 체계적으로 개선하고 그 효과를 측정·공개한 사례가 없다는 것은, 역으로 선점 기회이기도 합니다.
이커머스 성능 최적화가 필요하시면 XEO 무료 진단을 신청하세요.