AI를 활용한 Web 성능개선 실전 사례

문제 상황

• 기능 개발과 버그 수정 속에서 성능 부채가 쌓이며 UI 지연이 발생하는 실시간 Web 앱 환경
• React Profiler만으로는 saga, Web Worker, 소켓 이벤트 같은 컴포넌트 바깥 병목 파악이 어려운 상황

해결 방법

• Chrome DevTools Performance의 flame chart로 JS 전체 call stack과 Long Task를 추적하고 병목 구간을 특정
• AI에게 함수명, 파일명, HAR 로그를 넘겨 병목 원인 분석과 패턴 탐지를 맡기고 사람은 우선순위 판단에 집중
• O(n²) 순회 구조를 Map, Set, push 기반으로 바꾸고 Worker round-trip, 소켓 이벤트를 dedup·filter·batch로 축소

성능/운영 포인트

• 팀챗 리스트 섹션 연산 399ms → 72ms, Worker 블로킹 5608ms → 4144ms, GC 390ms → 152ms 개선
• 실시간 앱에서는 이벤트 수가 늘수록 store update와 리렌더가 선형 증가하므로 중복 제거와 배치 처리 중요
• 크리티컬 패스 중심의 측정과 AI 보조 분석 조합이 반복적인 성능 개선에 유효