제공해주신 텍스트는 'INP(Interaction to Next Paint) 최적화를 위한 기술 가이드'의 핵심 내용을 담고 있습니다. 사용자가 입력한 내용의 흐름을 분석하여, 마지막 섹션인 '3. 모니터링 및 트러블슈팅' 부분을 완성하기 위한 가이드라인을 제안해 드립니다.

이 가이드의 전체적인 톤앤매너(전문적, 기술적, 해결 중심적)를 유지하며 내용을 구성했습니다.

---

[추가 제안] 3. 모니터 응용 및 트러블슈팅 (Monitoring & Troubleshooting)



최적화 전략을 수립했다면, 이제 실제 환경에서 성능이 개선되었는지 측정하고 병목 지점을 찾아내는 프로세스가 필요합니다.

#### 3.1. 성능 지표 모니터링 (RUM: Real User Monitoring) Lab 환경(Lighthouse 등)에서의 테스트는 개발자의 환경을 반영할 뿐, 실제 사용자의 네트워크와 기기 성능을 대변하지 못합니다. 따라서 실제 사용자 환경의 데이터를 수집하는 RUM이 필수적입니다.

* Web Vitals Library 활용: Google에서 제공하는 `web-vitals` 라이브JS 라이브러리를 사용하여 실제 사용자의 브라우저에서 발생하는 INP 수치를 수집하고, 이를 Google Analytics, Sentry, 또는 자체 로그 서버로 전송합니다. * 에러 트래킹 연동: INP 수치가 급증하는 시점의 JavaScript 에러 로그(Sentry, Datadog 등)를 함께 분석하여, 특정 스크립트의 실행이 메인 스레드를 점유하고 있는지 확인합니다.

#### 3.2. 병목 지점 식별 (Identifying Bottlenecks) INP 수치가 높게 나타난다면, 다음의 도구들을 사용하여 원인을 파악해야 합니다.

* Chrome DevTools - Performance Tab: * Main Thread 분석: 'Long Task'로 표시된 영역을 확인하여 어떤 함수가 메인 스레드를 오래 점유했는지(Task duration) 확인합니다. * Bottom-Up / Call Tree: 어떤 함수 호출 스택이 가장 많은 시간을 소비했는지 역추적합니다. * Chrome DevTools - Rendering Tab: * 'Enable Layer Borders' 및 'Paint Flashing'을 활성화하여 불필요한 레이어 생성이나 과도한 리페인팅(Repaint)이 발생하는지 확인합니다. * Web Vitals Extension: 브라우저 확장 프로그램을 사용하여 실시간으로 현재 페이지의 INP 수치와 지연 시간을 즉각적으로 확인합니다.

#### 3.3. 트러블슈팅 체크리스트 (Troubleshooting Checklist) 문제가 발견되었을 때 다음의 순서로 점검하십시오.

1. [ ] JavaScript 실행 시간: `Long Task`가 발생하는가? (해결책: Web Workers 도입 또는 코드 분할) 2. [ ] 과도한 DOM 크기: DOM 노드 수가 너무 많아 레이아웃 계산(Recalculate Style)이 느린가? (해결책: DOM 트리 단순화 및 가상 리스트 도입) 3. [ ] 레이아웃 스래싱(Layout Thrashing): `offsetWidth`와 같은 속성을 반복 호출하여 강제 동기 레이아웃을 유발하는가? (해결책: Read/Write 분리) 4. [ ] 서드파티 스크립트: 광고, 분석 도구, 채팅 위젯 등 외부 스크립트가 메인 스레드를 점유하고 있는가? (해결책: `defer`/`async` 속성 사용 및 로딩 지연)

---

💡 작성 팁 (작성 시 참고하세요)



1. 일관성 유지: 앞선 섹션에서 사용한 용어(`Web Vitals`, `Main Thread`, `Long Task`)를 그대로 사용하여 전문성을 유지했습니다. 2. 실행 가능한 지침: 단순히 "모니터링하라"가 아니라 "어떤 도구(`web-vitals` 라이브러리)를 사용하여 어디로(`Sentry`) 보낼 것인가"와 같이 구체적인 액션 아이템을 제시했습니다. 3. 구조적 완성도: 1. 개념(INP) $\rightarrow$ 2. 해결책(Optimization) $\rightarrow$ 3. 검증 및 유지보수(Monitoring)로 이어지는 논리적 흐름을 완성했습니다.