성능과 접근성 향상을 위한 Replit 파일 트리 재구축

기존 Replit의 파일 트리는 프로젝트 규모가 커질수록 성능 저하 문제가 발생했다. 특히 약 8,000개의 파일이 포함된 웹 저장소를 다룰 때 UI 응답성이 떨어지는 현상이 두드러졌다.

이를 해결하기 위해 가상화(Virtualization) 기술을 도입했다. 모든 행을 한꺼번에 렌더링하는 대신, 사용자의 화면에 보이는 부분만 렌더링하도록 구조를 변경했다. 이를 위해 트리 구조의 데이터를 플랫 리스트(Flat list) 형태로 변환하여 처리한다.

그 결과, 디렉토리 확장 시 발생하던 클릭 핸들러 실행 시간이 344ms에서 16ms로 대폭 단축되었다. 또한, 드롭 미리보기(Drop preview)의 크기와 위치를 유연하게 조절할 수 있게 되어 파일 이동 시 훨씬 부드러운 사용자 경험을 제공한다.

성능 향상을 위한 또 다른 핵심은 **로컬 캐싱(Local caching)**이다. 최근에 본 파일 트리를 읽기 전용 뷰로 즉시 렌더링할 수 있도록 캐싱하여, 네트워크 속도가 느린 환경에서도 파일을 빠르게 확인할 수 있다.

마지막으로 **접근성(Accessibility)**도 강화했다. 가상화된 플랫 리스트 환경에서도 키보드 내비게이션이 원활하게 작동하도록 트리 데이터와 리스트 간의 매핑을 최적화하고, aria-level 등 적절한 ARIA 속성을 적용했다.