GitHub, CSS Modules 전면 도입으로 서버 렌더링 시간 55% 단축

GitHub가 컴포넌트 수 급증으로 인한 성능 병목을 해결하기 위해 CSS-in-JS 구현을 CSS Modules로 교체했습니다. 이 전환으로 클라이언트 측 스타일 초기화와 서버 측 수집 비용이 제거되어 서버 측 렌더링 시간이 55% 단축되고 컴포넌트 초기화 속도가 25% 빨라졌습니다.

점진적 마이그레이션 전략

Primer Design System 팀은 GitHub UI의 파손을 방지하기 위해 신중하고 단계적인 접근 방식을 채택했습니다. 각 컴포넌트는 다음 워크플로우를 통해 업데이트되었습니다:

• 번역: 기존 스타일을 CSS Modules 파일로 변환했습니다.
• 기능 플래그: 토글을 통해 구버전과 신버전 스타일을 전환하며 통제된 롤아웃을 진행했습니다.
• 시각적 회귀 테스트: 구버전과 신버전 구현의 스냅샷이 동일한지 검증했습니다.
• 단계적 롤아웃: 내부 팀, GitHub 직원, 최종적으로 모든 사용자에게 변경 사항을 배포했습니다.

2024년 12월까지 모든 Primer 컴포넌트가 CSS Modules로 마이그레이션되어 즉각적인 성능 향상을 달성했습니다.

sx Prop 제거

가장 큰 난관은 TypeScript 지원은 우수하지만 런타임 비용이 높은 GitHub의 스타일링 표준인 sx prop이었습니다. styled-components를 완전히 제거하기 위해 팀은 수천 개의 sx 사용을 없애야 했습니다.

• 래퍼 라이브러리: 임시 패키지 @primer/styled-react를 통해 레거시 sx 사용을 허용하면서도 신규 컴포넌트는 CSS Modules를 사용하도록 했습니다.
• 자동화된 마이그레이션: 2025년 4월, 8명의 엔지니어가 6개월 동안 커스텀 VS Code 플러그인과 코드 모드를 사용하여 6,419개의 sx prop을 마이그레이션했으며, 특정 페이지에서 SSR 성능이 1–22% 개선되었습니다.
• AI 지원: 2026년 4월까지 남은 895개의 sx prop은 Copilot 코딩 에이전트를 사용한 엔지니어 2명이 3주 만에 정리했습니다.

테마 최종화 및 정리

최종 단계에서는 GitHub의 7개 테마(고대비 변형 포함)를 styled-components에서 분리하는 작업이 포함되었습니다. 두 달간의 마이그레이션과 기능 플래그 테스트를 거쳐 GitHub는 2026년 6월에 100% CSS Modules 도입을 달성했습니다. 이 리플랫폼으로 styled-components와 styled-system이 코드베이스에서 제거되어 서비스 중단 없이 성능과 사용자 경험이 향상되었습니다.