"결국 구관이 명관?" 깃허브가 CSS-in-JS 버리고 순수 CSS로 돌아간 이유

요약 깃허브(GitHub)가 자사 웹사이트의 렌더링 성능을 극적으로 끌어올리기 위해 기존에 널리 쓰이던 'CSS-in-JS'를 걷어내고 순수 'CSS 모듈(CSS Modules)'로 회귀한 대규모 마이그레이션 기술 비하인드를 공개했습니다. 깃허브의 UI는 '프라이머(Primer)'라는 디자인 시스템 컴포넌트를 기반으로 구축되어 있습니다. 하지만 2023년 무렵 특정 웹페이지들에 쓰이는 컴포넌트 수가 폭발적으로 증가하면서 문제가 터지기 시작했습니다. 브라우저 클라이언트가 런타임에서 스타일을 일일이 초기화하느라 초기 로딩이 느려졌고, 서버 사이드 렌더링(SSR) 시에도 스타일을 수집하는 오버헤드가 커져 응답 속도가 눈에 띄게 떨어졌습니다. 이에 깃허브 엔지니어링 팀은 런타임 비용이 전혀 없는 대안을 모색한 끝에 네이티브 CSS의 장점과 캡슐화를 동시에 챙길 수 있는 CSS 모듈을 선택했습니다. 다만 서비스 중단 없이 수많은 컴포넌트를 교체해야 했기에 점진적인 마이그레이션 전략을 세웠습니다. 기존 스타일을 CSS 모듈로 변환한 뒤 피처 플래그(기능 제어 플래그)를 적용해 신구 스타일을 전환할 수 있게 만들고, 시각적 회귀 테스트로 렌더링 결과가 완벽히 일치하는지 검증하며 내부 직원부터 전체 사용자까지 단계적으로 배포했습니다. 그 결과 2024년 12월 기준 프라이머 내 모든 컴포넌트 마이그레이션이 완료되었으며, 페이지의 서버 사이드 렌더링 시간은 55% 단축되고 컴포넌트 초기화 시간도 25% 줄어드는 엄청난 성능 개선을 달성했습니다. 깃허브 팀은 컴포넌트 내 스타일 커스텀에 사용되던 sx prop과 styled-components의 의존성을 분리하기 위해 과도기용 래퍼 라이브러리를 구축하는 등, 코드베이스 전반에서 런타임 CSS-in-JS를 완전히 퇴출하는 후속 작업을 이어가고 있습니다.