react-render-profile-mcp가 v0.3.1을 출시하면서 React 성능 진단의 판이 조용히 바뀌었다. 이제 AI 에이전트는 React DevTools Profiler 내보내기 파일 하나를 받아 Hydration 불일치, Zustand 셀렉터 루프, 컨텍스트 업데이트 전파 깊이까지 단계적으로 진단한다. 버튼 하나를 클릭했는데 컴포넌트 28개가 리렌더링된 이유를 사람이 크롬 프로파일러를 뒤지지 않아도 에이전트가 trace_state_cascade_footprint로 뽑아낸다.
이번 업데이트에서 눈여겨볼 도구는 네 가지다. analyze_compiler_efficacy는 React Compiler나 React.memo가 붙어 있어도 실제로 메모이제이션이 동작하지 않는 컴포넌트를 Invalidation Index(I = spurious_count / total_count × wasted_ms)로 수치화한다. diagnose_hydration_and_suspense는 SSR 후 전체 트리를 리마운트하는 Hydration 복구 패턴과 Suspense 워터폴을 동시에 잡는다. evaluate_external_store_performance는 셀렉터가 매 호출마다 새 객체 참조를 반환해 무한 리렌더링을 유발하는 Zustand 패턴을 탐지한다. 그리고 trace_state_cascade_footprint는 단일 커밋이 컴포넌트 트리를 얼마나 깊이, 얼마나 넓게 오염시키는지를 그린다. 일곱 단계 에이전트 워크플로우 안에 이 도구들이 순서대로 배치되면, 프로파일 파일 하나로 진단 보고서가 완성된다.
기술적으로 인상적인 이 흐름에 한 가지 물음이 끼어든다. 진단이 자동화될수록, 개발자는 무엇을 해야 하는가. dev.to에 올라온 「What AI Can't Understand About Your Users」는 이 물음에 날카롭게 답한다. AI는 과거의 데이터를 학습한다. 무엇이 일어났는지는 알지만, 왜 그 사용자가 그 순간 탭을 닫았는지는 모른다. 히트맵을 분석할 수 있어도, 그 히트맵이 사용자의 삶에서 무엇을 뜻하는지는 해석하지 못한다. 성능 진단도 마찬가지다. 에이전트는 ProductList의 wasted_ms가 84.3ms라고 알려줄 수 있다. 하지만 그 84.3ms가 실제 사용자의 이탈을 만드는 경로 위에 있는지, 아니면 트래픽이 거의 없는 관리자 화면의 수치인지는 맥락을 가진 사람만 안다.
이 간극을 메우는 패턴으로 CLAUDE.md 자동 규칙 진화 사례가 실마리를 준다. 한 솔로 개발자가 3주 동안 프로덕션 인시던트 네 건에서 규칙 네 개를 추출한 과정은, 규칙이 사전에 작성된 교리가 아니라 실제 장애를 겪고 나서야 만들어지는 '굳은 흉터'임을 보여준다. 추상적인 원칙이 아니라 특정 커밋, 특정 SQL 감사 쿼리, 특정 인시던트 번호를 품은 규칙만이 에이전트를 실제로 제어한다. 성능 진단 도구도 같은 구조를 요구한다. evaluate_external_store_performance가 CartSummary의 셀렉터 루프를 발견했다면, 거기서 끝내서는 안 된다. 그 패턴을 팀의 CLAUDE.md나 린트 규칙으로 굳히고, 다음 인시던트 전에 구조적으로 차단해야 한다. 진단은 도구가 하고, 그 진단을 시스템 지식으로 전환하는 작업은 사람이 한다.
세 소스를 겹쳐보면 AI가 바꾸는 프론트엔드 개발 루프의 윤곽이 드러난다. 도구는 탐지 비용을 0에 가깝게 낮춘다. 누가 의심할 컴포넌트를 고르고, 어떤 프로파일을 언제 수집할지 결정하고, 수치를 사용자 여정 위에 올려놓는 판단은 여전히 사람의 몫이다. 컨텍스트를 28개 컴포넌트에 흘려보낸 ThemeButton을 고치는 건 에이전트가 알려주는 대로 하면 된다. 하지만 그 ThemeButton이 왜 그 자리에 있어야 했는지, 어떤 사용자 요구가 그 설계를 낳았는지는 기록이 없으면 아무도 모른다. AI 성능 진단 도구가 강력해질수록, 맥락을 기록하고 보존하는 습관이 개발자의 핵심 역량으로 올라온다.
react-render-profile-mcp의 에이전트 워크플로우 마지막 단계는 suggest_memoization이다. ROI 점수가 붙은 권고안을 에이전트가 내놓는다. 이 권고안을 받아 실행할지, 미룰지, 아예 다른 구조로 풀지를 결정하는 것—그것이 지금 프론트엔드 개발자에게 남은 가장 중요한 인터페이스다.