VS Code 확장 프로그램의 상태 관리 아키텍처 재구축: Redux와 Redux-Saga를 통한 성능 및 안정성 혁신

Rebuilding state management: How we made our VS Code extension 2× faster

작성자
HackerNews
발행일
2025년 12월 18일

핵심 요약

  • 1 VS Code 확장 프로그램의 성능 저하와 충돌 문제를 해결하기 위해 기존의 암시적 상태 관리에서 Redux 및 Redux-Saga 기반의 명시적 아키텍처로 전면 재구축함.
  • 2 Svelte와 Redux를 효율적으로 연결하는 커스텀 셀렉터 시스템을 도입하여 불필요한 재계산을 방지하고, 복잡한 비동기 워크플로우를 Saga를 통해 안정적으로 제어함.
  • 3 AI 에이전트를 활용한 코드 분석 및 포팅 작업을 통해 대규모 리팩토링을 단 일주일 만에 완수했으며, 결과적으로 디버깅 효율 증대와 2배 이상의 성능 향상을 달성함.

도입

VS Code 확장 프로그램 개발 시 대화가 길어짐에 따라 발생하는 UI 프리징과 메모리 누수 문제는 사용자 경험을 크게 저해합니다. Augment 팀은 이러한 증상의 근본 원인이 컴포넌트 간의 암시적인 상태 소유권과 예측 불가능한 부작용에 있다고 판단했습니다. 이를 해결하기 위해 기존의 반응형 상태 관리 시스템을 폐기하고, Redux와 Redux-Saga를 도입하여 상태 관리의 기반을 처음부터 다시 설계하는 대규모 아키텍처 전환을 단행했습니다.

1. 기존 아키텍처의 한계와 도전 과제

  • 상태 소유권의 모호성: 여러 컴포넌트가 동일한 데이터에 반응하면서 상태 변경의 예측 가능성이 떨어지고 복잡도가 기하급수적으로 증가했습니다.

  • 비동기 처리의 불일치: 프로미스, 콜백 등이 혼재되어 복잡한 에이전트 워크플로우에서 레이스 컨디션(Race Condition)이 빈번하게 발생했습니다.

  • 관찰 가능성 부족: 상태 변화를 추적하기 어려워 버그 재현과 디버깅에 수일이 소요되는 비효율적인 구조였습니다.

2. Redux 및 Redux-Saga 기반의 새로운 설계

  • 단일 진실 공급원(Single Source of Truth): 모든 애플리케이션 상태를 정형화된 스키마를 가진 하나의 스토어에서 관리하여 투명성을 확보했습니다.

  • Svelte 전용 셀렉터 시스템: Redux의 명시적 상태 변경과 Svelte의 반응형 성능을 결합하기 위해, 필요한 시점에만 계산되는 지연 평가(Lazy Evaluation) 기반의 createSelector를 구축했습니다.

  • 비동기 오케스트레이션: Redux-Saga를 도입하여 LLM 응답 스트리밍, 도구 실행, UI 업데이트 등의 복잡한 비동기 단계를 선언적으로 관리하고 병렬 처리를 안전하게 구현했습니다.

3. AI 에이전트를 활용한 효율적인 리팩토링

  • 에이전트 친화적 문서화: _docs/ 디렉토리에 에이전트가 읽기 쉬운 구조로 가이드라인을 작성하여 리팩토링의 일관성을 유지했습니다.

  • 대규모 코드 포팅: 에이전트가 기존 로직을 분석하고 새로운 아키텍처 패턴에 맞춰 코드를 변환함으로써 수백 개의 파일을 다루는 대규모 작업을 신속하게 완료했습니다.

결론

이번 아키텍처 개편을 통해 Augment는 복잡한 워크플로우에서 최대 2배 빠른 성능을 구현했으며, 수일이 걸리던 디버깅 시간을 단 몇 분으로 단축했습니다. 특히 AI 에이전트를 리팩토링 과정에 적극적으로 참여시켜 대규모 아키텍처 변경의 리스크를 관리한 점은 현대적인 소프트웨어 개발의 중요한 이정표를 제시합니다. 명시적인 상태 관리와 관찰 가능성의 확보는 향후 멀티 에이전트 워크플로우와 같은 고도화된 기능을 구현하는 데 필수적인 토대가 되었습니다.

댓글 0

로그인이 필요합니다

댓글을 작성하거나 대화에 참여하려면 로그인이 필요합니다.

로그인 하러 가기

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!