깃허브, 런타임 CSS-in-JS 전면 제거하고 CSS 모듈 전환 완료

깃허브(GitHub)가 자사 웹 서비스 전반에서 런타임 CSS-in-JS 방식을 전면 제거하고 CSS 모듈(CSS Modules)로의 전환을 완료했다. 깃허브 공개 기술 문서에 따르면, 깃허브는 2026년 6월부로 닷컴(dotcom) 환경에서 100% CSS 모듈 체제로 구동되고 있다. 이번 아키텍처 개편을 통해 버튼, 배너, 브레드크럼 등 핵심 UI를 담당하는 프라이머 디자인 시스템(Primer Design System)을 비롯해 깃허브 전체 코드베이스에서 styled-components, styled-system, 그리고 인라인 스타일링 프로퍼티인 sx prop이 완전히 제거되었다. 대규모 코드베이스를 보유한 깃허브는 기존 서비스의 파손이나 중단 없이 단계적인 점진적 롤아웃 전략을 통해 이번 플랫폼 전환을 마무리했다.

전환 작업의 계기는 2023년으로 거슬러 올라간다. 당시 깃허브의 특정 페이지에서 컴포넌트 수가 폭발적으로 증가하면서 기존 CSS-in-JS 솔루션에서 심각한 성능 저하 문제가 드러났다. 브라우저 클라이언트에서 스타일을 초기화하는 과정으로 인해 초기 페이지 로딩 시간이 지연되었으며, 이를 완화하기 위해 스타일 수집(style collection)을 서버 사이드 렌더링(SSR) 단계로 분담시키자 서버 렌더링 성능이 하락하는 악순환이 발생했다. 또한 단일 페이지에 렌더링되는 컴포넌트가 늘어남에 따라 런타임에서 발생하는 동적 스타일 업데이트 비용도 통제하기 어려운 수준에 이르렀다. 여기에 더해 전환 준비 단계에서 라이브러리인 styled-components 측이 공식 유지보수 모드(maintenance mode) 진입을 선언하면서, 런타임 스타일링 기술을 걷어내고 근본적인 대안을 찾아야 할 명분이 더욱 확실해졌다.

프라이머 팀은 클라이언트와 서버 양측의 런타임 계산 비용을 완전히 배제하면서도 기존 컴포넌트 주도 개발 방식의 장점을 유지할 수 있는 대안으로 CSS 모듈을 최종 선택했다. CSS 모듈은 컴포넌트의 자바스크립트 코드 파일 바로 옆에 CSS 파일을 함께 배치(co-location)하여 작성할 수 있어 코드 응집성을 보장한다. 아울러 기본적으로 모든 클래스 선택자를 로컬 스코프로 격리하여 전역 셀렉터 충돌 위험을 원천적으로 방지하면서도 네이티브 CSS 기능을 자유롭게 작성할 수 있도록 지원한다. 무엇보다 자바스크립트 런타임의 동적 스타일 파싱과 주입 과정 없이 빌드 단계에서 정적 CSS 스타일시트로 취합된 뒤 HTML 문서의 일부로 브라우저에 직접 전달되므로, 기존 CSS-in-JS의 런타임 오버헤드를 근본적으로 제거할 수 있었다.

프라이머 팀은 깃허브 전체 환경에 장애를 주지 않기 위해 단계별 검증 절차를 엄격하게 수립했다. 개별 컴포넌트마다 기존 스타일을 CSS 모듈로 변환한 신규 파일을 추가하고, 피처 플래그(feature flag)를 적용해 구형 스타일과 신형 CSS 모듈 스타일 사이를 자유롭게 전환할 수 있도록 제어했다. 변경 사항의 안전성을 확보하기 위해 기존 시각적 회귀 테스트(visual regression tests)를 활용하여 CSS-in-JS 환경과 CSS 모듈 환경 간의 렌더링 스냅샷이 완벽히 일치하는지 반복 검증했다. 이후 피처 플래그를 프라이머 팀 내부에서 시작해 깃허브 임직원, 그리고 전체 깃허브 사용자로 점진적으로 확대 배포했다. 이 방식을 통해 2024년 12월 프라이머의 모든 컴포넌트가 CSS 모듈로 성공적으로 전환되었으며, 그 결과 서버 사이드 렌더링(SSR) 시간이 55% 단축되고 페이지 내 컴포넌트 초기화 시간이 25% 단축되는 뚜렷한 성능 개선 효과를 거두었다.

프라이머 라이브러리 자체는 전환되었으나, 깃허브 본체 코드베이스에는 컴포넌트 커스터마이징을 위해 광범위하게 쓰이던 sx prop이 수천 개 이상 남아 있어 즉시 styled-components 의존성을 제거할 수는 없었다. sx prop은 디자인 토큰과의 긴밀한 통합과 뛰어난 타입스크립트 지원을 제공하지만, 인라인 객체를 동적으로 처리해야 해 런타임 비용이 매우 높았다. 이에 깃허브는 점진적 마이그레이션을 위한 브리지 라이브러리로 @primer/styled-react를 제작했다. sx prop을 여전히 사용하는 컴포넌트는 @primer/styled-react를 통해 임포트하여 기존 동작을 온전히 유지하도록 하고, sx prop이 필요 없는 컴포넌트는 styled-components 의존성이 제거된 신규 @primer/react 버전에서 직접 임포트하여 즉각적인 성능 향상을 유도하는 이원화 구조를 구축했다.

깃허브는 2025년 4월부터 패키지 단위로 sx prop을 CSS 모듈로 변환하고 @primer/react로 교체하는 '스타일드 박스 제로(Styled Box Zero)' 프로젝트를 전개했다. 초기 마이그레이션 대상은 최고 약 7,760개의 sx prop에 달했다. 초기에는 사내 개발자 이안 샌더스(Ian Sanders)가 제작한 VS Code 확장 플러그인과 내부 파일 변환용 코드모드(codemod)를 투입해 자동화와 수동 검증을 병행했다. 엔지니어 8명이 로테이션 체제로 참여해 6개월 동안 6,419개의 프로퍼티를 전환했으며, 이 과정에서 페이지별로 1%에서 최대 22%의 SSR 성능 향상이 기록되었다. 이후 2026년 4월 잔여 작업이 재개되었을 때는 최신 코파일럿 코딩 에이전트(Copilot coding agent)와 코파일럿 코드 리뷰(Copilot code review)가 결합되었다. 그 결과 엔지니어 2명과 코파일럿 에이전트의 집중 협업을 통해 남은 895개의 sx prop을 단 3주 만에 모두 제거하며 2026년 5월 sx prop 마이그레이션을 완수했다.

이번 전환은 개발 생산성과 최종 사용자 경험 양측에 구조적인 개선을 가져왔다. 깃허브 개발팀은 복잡하고 무거운 자바스크립트 런타임 스타일링 유틸리티 대신 네이티브 CSS 표준 기능과 CSS 모듈을 기반으로 예측 가능하고 캡슐화된 스타일을 안전하게 작성할 수 있게 되었다. 인라인 객체 생성으로 인한 가비지 컬렉션 부담과 컴포넌트 확장 시 발생하던 확장성 병목도 원천 해소되었다. 최종 사용자 측면에서는 페이지 렌더링에 필요한 자바스크립트 실행 지연이 제거되고 초기 로딩 속도 및 SSR 렌더링 반응 속도가 현저히 빨라져, 전 세계 개발자가 매일 사용하는 깃허브 웹 인터페이스의 안정성과 반응성이 전반적으로 강화되었다.

성공적인 전환 뒤에는 다층적인 제약 조건과 기술적 과제가 수반되었다. 특히 sx prop을 모두 제거한 후에도 고대비 모드를 지원하는 7개 테마(theme) 시스템이 여전히 styled-components 자바스크립트 유틸리티에 종속되어 있어 즉각적인 라이브러리 퇴출이 가로막히는 병목이 발생했다. 테마 변수 자체는 기존 @primer/css 패키지를 통해 CSS 변수로 관리되어 있었고 2025년 말 @primer/react 마이그레이션 당시 비-styled 테마 설계를 선제 반영해 두었으나, 런타임 자바스크립트 의존성을 분리해 내는 데 2개월의 추가 작업과 시행착오가 소요되었다. 또한 수천 개 컴포넌트가 맞물린 거대 웹 서비스를 중단 없이 전환하기 위해 브리지 패키지 운영, 엄격한 시각적 회귀 테스트, 최종 의존성 제거까지 피처 플래그로 격리하는 극단적인 안전장치가 필수적이었으며, 이는 대규모 디자인 시스템 재구축 시 반드시 고려해야 할 실질적 한계이자 적용 조건으로 기록되었다.