MIRAENEC/Insights/WEBVIEW

하이브리드 앱이 느려지는 진짜 이유: WebView · 캐시 · API 구조 점검법

느림은 한 구간이 아니라 체인 전체의 합입니다. 사용자가 "앱이 느려요"라고 하면, 어디서 막혔는지 구간을 분리하는 것이 1순위입니다.

1. 첫 화면 로딩 — 네이티브 vs WebView 분기

Splash 직후 네이티브 화면을 띄울지, WebView로 직행할지에 따라 체감 속도가 1~2초 차이납니다. WebView는 cold start 시 백그라운드에서 prewarm하는 것을 권합니다.

2. WebView 캐시 · 자원 우선순위

HTML → CSS → font → JS → image 순서가 깨지면 화면이 늦게 그려집니다. preconnect, preload, font-display 정책을 확인하세요.

3. API 구간 — 토큰 갱신 · 재시도 폭주

만료된 토큰 한 번 → 갱신 → 원 요청 재시도. 재시도가 10번 쌓이면 첫 화면이 5초 멈춥니다. 갱신은 큐로 묶고, 재시도 횟수에 상한을 두세요.

4. Bridge 구간 — 동기 호출 금지

Native → JS 호출에서 메인 스레드를 잡으면 WebView 전체가 멈춥니다. 모든 Bridge는 비동기 + correlation id로 처리하세요.

5. 측정 없이는 최적화 없음

"느려요" 리포트마다 nav_start, first_paint, api_first_response, bridge_first_ack의 ms를 같이 보내세요. 감으로 고치는 순간 다른 게 느려집니다.