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

문제 상황

• 실시간 Web 앱에서 성능 부채가 쌓여 UI 지연이 체감되는 상황
• React Profiler만으로는 saga, Worker, 소켓 이벤트 등 컴포넌트 바깥 병목 파악이 어려운 구조

구조와 흐름

• Chrome DevTools Performance의 flame chart로 전체 JS 호출 흐름과 Long Task 확인
• 병목 지점을 사람이 대략 좁히고, 코드베이스 분석과 원인 추적은 AI에게 위임
• UX상 중요한 경로를 사람이 판단하고 정량 분석은 AI가 보조하는 워크플로우

해결 방법

• 배열 순회를 Map, Set 기반 조회로 전환해 O(n²) 패턴 제거
• Worker 메시지를 줄 단위 개별 전송에서 배치 전송으로 변경
• 소켓 이벤트는 dedup, filter, batch로 줄여 불필요한 store update와 리렌더 감소

성능/운영 포인트

• 팀챗 리스트 섹션 연산 399ms → 72ms 개선
• Worker round-trip 657회 → 1회, 전체 블로킹 5,608ms → 4,144ms, GC 390ms → 152ms 개선
• 실시간 이벤트 폭증 환경에서 클라이언트 단 최적화만으로도 체감 성능 개선 가능