GitHub는 2026년 6월 웹사이트 전체를 CSS Modules로 운영하는 작업을 완료하며, styled-components, styled-system, sx 속성을 포함한 CSS-in-JS 의존을 끝냈다. 회사에 따르면 이 전환으로 서버 측 렌더링 시간이 55% 단축되었으며, 페이지에서 컴포넌트를 초기화하는 데 필요한 시간도 25% 줄었다.
이번 조치는 2023년 이후 일부 GitHub 페이지에서 컴포넌트 수가 급증한 데 대한 대응으로 이루어졌다. 기존 방식은 클라이언트에서 스타일을 초기화해야 했고, 서버 측 렌더링 중 스타일을 수집하는 비용을 증가시켰으며, 페이지의 컴포넌트 수가 늘어날수록 스타일 업데이트를 더 어렵게 만들었다.
GitHub는 왜 CSS Modules를 선택했을까?
CSS Modules를 사용하면 컴포넌트 소스와 인접한 CSS 파일에 스타일을 작성할 수 있으며, 클래스 이름이 기본적으로 로컬 범위로 지정되어 충돌을 줄일 수 있다. 이 사례에서 더 중요한 점은 클라이언트나 서버에서 런타임 동작이 필요하지 않다는 것이다. 스타일이 페이지의 HTML과 함께 전송되는 CSS 파일로 번들되기 때문이다.
이전 작업은 Primer 디자인 시스템에서 시작됐다. 팀은 각 컴포넌트에 CSS Modules 파일을 추가하고, 이전 방식과 새로운 방식 사이를 전환할 수 있도록 컴포넌트를 기능 플래그와 연결한 다음, 결과가 일치하는지 확인하기 위해 시각적 회귀 테스트를 사용했다. 이후 Primer 팀에서 GitHub 직원 전체로, 다시 모든 사용자에게 점진적으로 확대했다.
2024년 12월까지 모든 Primer 컴포넌트가 CSS Modules로 이전됐다. 하지만 이것만으로는 충분하지 않았다. GitHub 코드베이스의 상당 부분이 여전히 인라인 객체를 통해 컴포넌트를 사용자 지정하는 sx 속성을 사용하고 있었기 때문이다. 이 방식은 TypeScript 및 디자인 토큰과의 통합성이 뛰어났지만, 동적인 특성 때문에 실행 비용이 증가했고 컴포넌트 수가 늘어날수록 확장이 어려워졌다.
대규모 전환 관리
기존 사용 사례가 중단되는 것을 방지하기 위해 GitHub는 @primer/styled-react라는 중간 라이브러리를 만들었다. 이 라이브러리를 사용하면 CSS Modules로 이전된 컴포넌트에서도 sx를 계속 사용할 수 있었고, sx가 필요하지 않은 경로는 @primer/react에서 직접 가져올 수 있었다.
sx 제거 작업은 2025년 4월에 시작됐으며, 당시 해당 속성은 약 7,760곳에서 사용되고 있었다. 내부 VS Code 확장 프로그램과 codemod 도구의 도움으로 엔지니어 8명으로 구성된 그룹은 6개월 동안 6,419건의 사용을 이전했으며, 일부 페이지에서 서버 측 렌더링 시간이 1%에서 22%까지 개선됐다. 2026년 4월에는 두 명의 엔지니어가 참여하고 GitHub Copilot의 프로그래밍 에이전트를 사용해 3주 만에 사용량을 895건에서 0건으로 줄였다.
GitHub는 7개의 테마를 지원하고 각 테마에 고대비 모드가 있었기 때문에 시각적 테마 역시 추가적인 과제로 남았다. 또한 이 시스템의 일부가 styled-components와 연결되어 있었다. 따라서 팀은 JavaScript 사용 사례와 테마 도구도 이전하면서 색상 변수를 CSS에 정의된 상태로 유지했다.
이 경험이 개발자에게 의미하는 것
GitHub의 수치는 런타임 스타일링 로직을 제거하면 사용자 인터페이스가 비대해졌을 때 눈에 띄는 성능 향상을 얻을 수 있음을 보여준다. 그러나 이 경험에서 가장 중요한 가치는 CSS Modules 자체를 선택한 데 있는 것이 아니라, 단계적 호환성, 기능 플래그, 시각적 테스트, 점진적 배포, 검토 가능한 자동화를 활용한 실행 방식에 있다.
반면 이 과정은 CSS-in-JS에서 전환하는 일이 단순히 스타일 작성 형식을 교체하는 데 그치지 않는다는 점도 보여준다. sx 속성을 제거하고, 테마와 styled-components의 연결을 끊으며, 오랜 기간 컴포넌트 호환성을 유지해야 했다. 따라서 이러한 결과가 모든 프로젝트에서 동일한 성과를 보장하는 것은 아니다. 결과는 GitHub의 규모, 컴포넌트 구조, 동적 스타일링 사용 방식과 관련되어 있기 때문이다.