GitHub Copilot 앱, 대규모 풀 리퀘스트 렌더링 성능 개선

GitHub Copilot 앱은 대규모 풀 리퀘스트(PR)의 렌더링 성능을 크게 개선했다. 이번 재구축을 통해 수천 개의 파일, 수백만 줄의 변경 사항, 그리고 수백 개의 인라인 댓글을 포함하는 방대한 PR도 일반적인 PR과 동일하게 빠르고 부드럽게 열고 스크롤하며 상호작용할 수 있게 되었다. 핵심적인 변화는 문서의 전체 높이를 '확정적인 코드 높이'와 '동적인 블록 유효 높이'라는 두 가지 독립적인 기하학적 영역으로 분리하여 처리하는 새로운 아키텍처를 도입한 것이다.

이러한 변화는 광범위한 리팩토링이나 마이그레이션과 같이 단일 PR로 처리해야 하는 대규모 변경 사항이 증가하면서 필요성이 대두되었다. 기존의 PR 검토 경험은 이러한 대규모 변경 사항에서 거대한 diff와 수많은 댓글로 인해 성능 저하를 겪었다. 특히 코드 라인의 높이는 고정되어 예측 가능하지만, 댓글의 높이는 마크다운 래핑, 확장 가능한 섹션, 답글 작성 상자, 이미지 로딩 등 렌더링 시점에 결정되는 동적인 요소들로 인해 예측하기 어려웠다. 이로 인해 기존의 '렌더링 전 모든 높이 파악' 방식은 대규모 PR에서 스크롤 점프나 불필요한 공백과 같은 문제를 야기했다.

새로운 아키텍처는 문서의 높이를 두 가지 기하학적 구조로 분리하여 이 문제를 해결한다. '코드 기하학'은 코드 라인과 같이 높이가 확정적이고 미리 알려진 콘텐츠를 담당하며, 이는 확정적이고 변경되지 않는 방식으로 처리된다. 반면 '동적 블록 기하학'은 댓글 스레드, 임시 저장, 답글 작성기 등 높이를 예측할 수 없는 콘텐츠를 처리한다. 각 동적 블록은 고유한 키를 가지며 파일, 라인, 측면에 고정되어 콘텐츠 로딩 후에도 안정적으로 추적된다. 블록의 유효 높이는 측정된 높이, 캐시된 높이, 또는 추정치 중 하나로 결정되며, 코드 기하학과 별도의 인덱스에 저장되어 댓글 크기 변경이 코드 렌더링에 영향을 주지 않도록 설계되었다.

측정 스케줄러는 초기 `ResizeObserver` 방식의 피드백 루프 문제를 해결하기 위해 유휴 및 스크롤 게이트(scroll-gated) 측정 방식을 도입했다. 이 방식은 스크롤 중에는 측정 작업을 수행하지 않고, 스크롤이 멈춘 후 뷰포트 약 2400px 이내의 가시 범위에 있는 블록만 측정한다. 화면에 마운트된 블록의 높이는 한 번의 배치 작업으로 읽어들여 실제 값으로 사용하며, 화면 밖의 블록은 뷰포트로 스크롤되기 전에 최대 한 번의 오프스크린 렌더링을 통해 높이를 보정한다. 사용자 상호작용으로 인한 가시 블록의 높이 변경은 예외적으로 즉시 측정 및 적용하여 부드러운 사용자 경험을 제공한다. 또한, 스크롤 앵커링 기술은 측정된 높이가 추정치와 다를 때 뷰포트가 점프하는 현상을 방지하기 위해 픽셀 대신 '아이덴티티'를 기준으로 스크롤 위치를 보정하여 사용자가 보고 있는 위치를 유지한다.

데이터 파이프라인 측면에서는 '구조 우선 스트리밍' 방식을 채택하여 PR 데이터가 점진적으로 요청되고 파일 트리와 메타데이터가 먼저 렌더링된다. 또한, 구문 강조와 같은 항목별 작업은 메인 스레드 외부에서 실행되며, 대규모 마크다운 본문이나 제안된 변경 사항은 뷰포트에 가까워질 때까지 빌드되지 않아 성능을 최적화한다. 메모리 관리를 위해 탐색 시 PR 문서를 해제하지만, 최근 몇 개의 PR diff는 캐시하여 빠른 재접근을 지원한다. 이러한 개선 사항은 개발자들이 대규모 변경 사항을 검토하는 데 드는 시간과 노력을 크게 줄여 생산성을 향상시키는 데 기여한다.

이러한 복잡한 시스템의 버그를 효과적으로 찾아내기 위해 GitHub Copilot 팀은 영구적이고 구조화된 프로브를 도입하여 앱의 실제 동작을 측정했다. 또한, 자율적인 '변경 → 측정 → 개선' 루프를 구축하여 헤드리스 프로브 레인과 오토파일럿을 통해 모의 서버 및 실제 데스크톱 앱 환경에서 대규모 PR 흐름을 반복적으로 실행하며 성능 병목 현상을 분석하고 '건강 신호'를 통해 객관적인 검증을 수행했다. 이 시스템은 대규모 PR 검토 시 발생하던 대기 시간이나 다른 도구로 전환해야 했던 불편함을 해소하며, 댓글이 잘리거나 중첩된 스크롤바 없이 전체가 렌더링되고, 접힌 섹션을 확장해도 아래 코드만 이동하며, 이전에 보던 PR로 돌아가면 마지막으로 보던 위치가 정확히 유지되는 등 사용자 경험을 크게 향상시킨다.

이 기능은 GitHub Copilot 앱 내에서 구현되었으며, 원문은 이 솔루션이 대규모 PR의 렌더링 성능 문제를 해결하기 위해 특별히 설계되었음을 강조한다. 특히 댓글의 동적인 높이 변화와 스크롤 점프 현상을 해결하는 데 중점을 두었으며, 시스템이 극단적인 PR에서도 성능을 발휘하도록 설계되었음을 밝힌다. 특정 사용 환경이나 조건에 대한 추가적인 제약 사항은 명시되지 않았으나, '사용자 스크롤'과 '표면 자체에 의한 스크롤'을 구분하는 것과 같이 미묘한 상호작용 문제 해결에 대한 깊은 고민이 있었음을 보여준다.