느려터진 에디터 좀 고쳐줘를 AI에게 시켜봤다

채널톡 위지윅 에디터의 NodeView 연쇄 리렌더링 이슈를 Andrej Karpathy의 Auto Research 기법으로 해결한 실험 기록이다. AI가 자율적으로 가설을 세우고 코드 수정 후 벤치마크 점수를 확인해 keep/revert를 반복하는 루프를 50회 돌려, User INP 104ms → 80ms(-23%), Long task 53ms → 0ms 개선을 달성했다. 핵심 발견은 AI 코드 수정 능력이 아니라 벤치마크 설계의 정확성이 성패를 결정한다는 점이었다.

핵심 포인트

Auto Research: "점수 오르면 keep, 안 오르면 git revert" 루프를 반복하는 AI 자율 탐색 기법 (Andrej Karpathy 공개 오픈소스)
초기 PoC 실패: 기능 검증용 기존 테스트를 점수표로 사용 → 점수는 올랐지만 실제 체감 성능 무변화
React Profiler 기반 렌더링 지표 + 병목 시나리오 전용 벤치마크 페이지 재설계 후 "점수 오름 = 체감 성능 향상" 연동 성공
50회 루프: 5 keep / 31 discard / 14 crash — User INP -23%, Long task 완전 제거
가장 큰 임팩트: Commit 1 — NodeView reference equality 체크 + portal React.memo 도입
핵심 교훈: AI는 주어진 score를 성실히 optimize할 뿐, score 설계 품질이 시스템 전체 성패를 결정

상세 정리

문제 구조: NodePortal이 한 노드 변경 시 연결된 모든 NodeView 리렌더링, 표·코드블록 많을수록 체감 저하
Auto Research 구성: prepare.py(평가 코드, AI 수정 불가) / train.py(AI 자유 수정 샌드박스) / program.md(연구 방향·제약)
Ralph Loop와 차이: Ralph는 TODO 완료형 종료, Auto Research는 점수가 오를 수 있는 동안 계속 탐색하는 열린 루프
벤치마크 재설계 3대 시나리오: 큰 문서 로드 / 표(NodeView) 안 타이핑 / 코드블록 옆 타이핑
5K 블록 기준 최종 지표: Loop score 50.0 → 54.2(+8.4%), headless edit latency 16ms → 14ms(-12%), scroll FPS·메모리 변화 없음
Commit 1: NodeView update에 reference equality 체크 + portal React.memo → INP 80ms, Long task 0ms (최대 단계 개선)
Commit 2: portal Map → useSyncExternalStore 기반 per-key 구독 + decorations 얕은 비교로 불필요한 재조정 제거
Commit 3: Leaf NodeView(mention 2,112개) 렌더 skip + Map.get 제거
Commit 4~5: !isTextblock 조건 확장(blockquote·callout 추가), view.focus() 조건부 스킵 + Array.from → forEach
Discard 패턴: useCallback 오버헤드 제거(3회 반복), node.eq() 깊은 비교(2회) — AI가 동일 함정에 반복 진입
점수는 오른 채 실제 회귀 케이스: sameDecos 가드 제거 시 렌더 카운트 미감소, latency만 증가 — AI 분석 로그로 검출
문제점: acceptance threshold 너무 유해 +0.4 수준 노이즈성 변경 통과, 크래시율 14/50(28%) 높음