Read Original
#AI

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

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

Summary

“퇴근할 때 돌려둔 AI 에이전트, 출근하니 에디터 속도를 23% 올렸다”

Andrej Karpathy의 Auto Research를 활용한 위지윅 에디터 성능 최적화 자동화 도전기

개발자가 직접 코드를 고치는 전통적인 방식에서 벗어나, AI가 스스로 가설을 세우고 성능을 측정하며 코드를 최적화하는 '탐색형 루프' 시스템의 실무 적용기를 다룹니다. 단순한 코드 생성을 넘어 성능 지표 기반의 자율 최적화가 실무에서 어떻게 작동하는지, 그리고 이를 위해 개발자가 설계해야 할 평가 환경의 중요성을 심도 있게 보여줍니다.

  • 01안드레 카파시의 Auto Research 오픈소스를 활용한 '가설-실험-검증' 최적화 루프 구축
  • 0250번의 자율 반복 실험을 통해 5개의 유효 최적화 커밋 도출 및 실무 적용
  • 03User INP 23% 개선 및 53ms 규모의 브라우저 Long Task 완전 제거 달성
  • 04React Profiler와 전용 벤치마크 페이지를 통한 정교한 성능 점수(Score) 가이드라인 설계
  • 05AI가 범할 수 있는 반복적 시도 오류와 측정 노이즈에 대한 시니어 엔지니어의 통찰

RECOMMENDATION

정량적 지표 측정이 가능하지만 수동 최적화에 많은 리소스가 소모되는 성능 개선 과제를 안고 있는 팀에게 추천합니다. 특히 AI 에이전트를 단순 코딩 보조가 아닌 자율적인 문제 해결 도구로 활용하고자 하는 엔지니어에게 훌륭한 인사이트를 제공합니다.

The Problem

채널톡의 위지윅(WYSIWYG) 에디터에서 대형 문서 작업 시 특정 노드의 변경이 전체 NodeView의 리렌더링을 유발하여 입력 지연 및 성능 저하가 발생하는 고질적인 문제가 있었습니다. 이를 해결하기 위한 리소스를 확보하기 어려운 상황에서, 사람이 직접 최적화하는 대신 AI가 스스로 성능 개선을 반복하게 만드는 자동화 시스템 도입을 시도했습니다.

The Solution

Andrej Karpathy의 'Auto Research' 개념을 도입하여 가설 수립, 코드 수정, 벤치마크 측정, 결과 검증(Keep/Revert) 과정을 자동화하는 탐색형 루프를 구축했습니다. React Profiler 기반의 정교한 벤치마크 전용 페이지와 성능 점수 체계를 설계하여 AI가 객관적인 지표를 바탕으로 성능 개선을 반복 수행하도록 환경을 조성했습니다.

The Result

50회의 반복 루프를 실행하여 5개의 유효한 최적화 커밋을 확보했으며, 이를 통해 User INP를 104ms에서 80ms로 23% 개선하고 53ms에 달하던 Long Task를 완전히 제거하는 성과를 거두었습니다. 특히 NodeView 업데이트 시의 참조 비교 및 구독 구조 최적화 등 사람이 놓치기 쉬운 미세 최적화를 AI가 스스로 수행해냈습니다.

Trade-off

실제 코드 수정보다 신뢰할 수 있는 벤치마크 환경과 평가 지표를 설계하는 데 훨씬 더 많은 시간이 소요되었으며, 단발성 과제에 대해서는 수동 디버깅이 더 효율적일 수 있다는 한계가 확인되었습니다. 또한 AI가 동일한 실패 가설을 반복해서 시도하거나, 측정 환경의 노이즈로 인한 미세한 점수 상승을 실제 성능 개선으로 오판하는 등의 부작용이 관찰되었습니다.

03

Key Concepts

Concept · 01

Auto Research

Andrej Karpathy가 공개한 탐색형 자동화 루프로, 점수가 오르는 코드 변경은 유지하고 그렇지 않으면 되돌리는 무한 반복 프로세스입니다.

  • 파일 수정을 전담하는 train.py와 평가를 담당하는 prepare.py로 구성됨
  • 가설 설정부터 결과 검증까지 AI가 스스로 반복하여 최적의 지점을 탐색함
Concept · 02

User INP (Interaction to Next Paint)

사용자의 입력으로부터 다음 프레임이 화면에 그려질 때까지의 지연 시간을 측정하는 핵심 웹 지표입니다.

  • 본 아티클에서는 에디터 내 타이핑 응답성을 객관적으로 측정하는 지표로 활용됨
  • 최적화 루프를 통해 104ms에서 80ms로 단축되어 사용자 체감 성능 개선을 증명함
Concept · 03

NodeView & NodePortal

ProseMirror 에디터 내부에 React 컴포넌트를 렌더링하기 위해 사용되는 기술적 브릿지 구조입니다.

  • 한 노드의 변경이 모든 NodeView의 리렌더링을 유발하는 성능 병목의 핵심 지점으로 파악됨
  • AI는 이 부분에 React.memo와 useSyncExternalStore 기반 구독 모델을 도입하여 문제를 해결함