채널톡이 1년간 미뤄둔 WYSIWYG 에디터 렌더링 끊김을, Andrej Karpathy 의 Auto Research 방식(점수 오르면 keep, 안 오르면 git revert)으로 AI 에게 맡겨 최적화한 실험기를 다룬다. 핵심 교훈은 "더 똑똑한 모델"보다 체감 성능을 제대로 반영하는 평가 루프(점수표)를 설계하는 게 관건이라는 점이다.
핵심 포인트- 문제는 NodeView(NodePortal) 구조의 과도한 연쇄 리렌더링으로, 테이블·코드블록 많은 문서일수록 끊김이 심했다.
- prepare.py(사람 고정 평가)·train.py(AI 수정)·program.md(방향)로 나눠 코드 수정→벤치마크→점수→keep/revert 루프를 돌렸다.
- 1차 PoC 는 기존 단위테스트를 점수표로 써 코드는 좋아 보여도 체감 성능이 안 변해 실패, 점수표 재설계가 핵심이었다.
- React Profiler 기반 렌더 카운트·5K 블록 시나리오로 점수표를 다시 짜자 INP 104→80ms, Long Task 53→0ms 개선을 얻었다.
- 50회 루프에서 keep 5·discard 31·crash 14 로, 크래시율 28%와 같은 함정 반복이 약점이었다.
상세 정리- 배경: 큰 문서 입력 시 NodeView 한 곳 변경이 연결된 모든 NodeView 를 동시 리렌더링해 끊김이 났고, 담당자 이동으로 1년간 방치됐다.
- Auto Research: Karpathy 가 2024년 공개한 방식으로, 점수가 오르면 keep, 안 오르면 git revert 하는 단순 루프다.
- 구성: prepare.py 는 사람이 고정한 평가 코드(AI 수정 불가), train.py 는 AI 가 고치는 샌드박스, program.md 는 연구 방향·제약을 담고, 코드 수정→커밋→5분 벤치마크→점수 측정으로 돈다.
- 1차 실패: 기존 단위테스트를 점수표로 삼자 점수는 올라도 체감 성능이 그대로였는데, 그 점수표가 기능 검증용이지 성능 측정용이 아니었기 때문이다.
- 점수표 재설계: React Profiler 로 NodeView 렌더 횟수를 측정하고, 에디터 전용 페이지로 노이즈를 격리하며, 5K 블록 문서 로드·테이블 타이핑·코드블록 인접 편집 같은 실제 병목 시나리오를 반영했다.
- 출근 루프: 20회 이상 반복이 필요해 빌드·벤치·측정을 전부 자동화해 무인 실행하고 출근 후 로그만 확인하게 했다.
- 결과 수치: 5K 블록 기준 Loop Score 50→54.2, User INP 104→80ms(-23%), Long Task 53→0ms 로 완전 제거, edit latency 16→14ms 로 개선됐다.
- 머지 커밋: 영향이 가장 큰 1번은 reference equality 체크와 Portal 의 React.memo 적용으로 INP 104→80·Long Task 53→0 을 냈고, 이후 useSyncExternalStore per-key 구독·leaf NodeView 렌더 스킵 등이 더해졌다.
- 실패 패턴: useCallback 오버헤드 제거 3회·node.eq() 깊은 비교 2회처럼 AI 가 같은 아이디어를 변주해 반복했고, 점수만 오르고 실제로는 회귀한 커밋을 AI 분석 로그가 잡아냈다.
- 한계: 점수표 오차범위(±2)인데 +0.4 도 keep 하는 느슨함, 50회 중 14회 크래시(28%), 같은 함정 3~5회 재시도가 약점으로, 단발 이슈면 직접 최적화가 더 빨랐을 수 있다.
왜 읽나AI 에게 성능 최적화를 맡기려는 프론트엔드 개발자에게, 모델보다 체감 성능을 대표하는 평가 루프·점수표 설계가 결과를 가른다는 실전 교훈.
채널톡·
LINE Engineering·
Vercel Blog·
토스 SLASH·