# [[Zero-runtime CSS]]

## 📌 Brief Summary
Zero-runtime CSS는 런타임 단계에서 자바스크립트를 실행하여 스타일을 동적으로 생성하고 주입하는 대신, 빌드 타임에 정적인 CSS를 생성하는 스타일링 패러다임입니다 [1, 2]. 이를 통해 개발자는 타입스크립트 기반의 타입 안전성과 CSS-in-JS의 개발 편의성을 유지하면서도 브라우저의 런타임 성능 오버헤드를 완벽히 제거할 수 있습니다 [1, 3]. 대표적인 도구로는 `vanilla-extract`가 있으며, 최근 부상하는 React Server Components(RSC) 환경과 높은 호환성을 제공합니다 [1, 4].

## 📖 Core Content
* **출현 배경 및 RSC 호환성 문제 해결:** 
기존의 런타임 CSS-in-JS 라이브러리(예: Styled Components, Emotion)는 브라우저가 스타일 태그를 생성하고 주입하기 위해 자바스크립트를 실행해야 하므로 "런타임 세금(runtime tax)"이라고 불리는 성능 병목을 유발합니다 [5, 6]. 더욱이 React Server Components(RSC)는 서버에서만 실행되고 브라우저에는 정적 HTML만 스트리밍하므로, React Context에 의존하는 런타임 기반 CSS-in-JS는 RSC 환경에서 근본적인 호환성 문제를 겪게 되었습니다 [2, 4, 7]. 이러한 마찰을 극복하고자 자바스크립트 주입 오버헤드 없이 브라우저가 기본적으로 스타일을 파싱할 수 있게 돕는 제로 런타임 패러다임으로의 전환이 촉발되었습니다 [2].

* **기술적 특징과 대표 도구 (vanilla-extract):**
제로 런타임 CSS-in-JS의 선두 주자인 `vanilla-extract`는 빌드 타임에 정적 CSS를 생성한다는 점에서는 CSS Modules와 유사하지만, 타입스크립트를 활용한 타입 안전(type-safe) 스타일링을 지원한다는 차별점이 있습니다 [1]. 실행 시점의 성능 오버헤드가 전혀 없으며, 서버 컴포넌트(RSC)와 완벽하게 호환되어 현대적인 React 애플리케이션 구조에 적합합니다 [1, 3, 4]. 

* **성능 및 적용 권장 사례:**
제로 런타임 방식은 서버의 렌더링 지연 시간을 줄이고 코어 웹 바이탈(Core Web Vitals) 메트릭을 크게 향상시킵니다 [8, 9]. 따라서 전환율 확보가 필수적인 고성능 사용자 대면(Public-Facing) 애플리케이션 개발에 특히 유리합니다 [10]. 다수의 테마를 관리해야 하는 대규모 디자인 시스템을 Next.js App Router 기반으로 구축할 때, 런타임 부하가 없고 타입 안전성이 보장되는 제로 런타임 솔루션(`vanilla-extract` 등)이나 유틸리티 퍼스트 프레임워크(Tailwind CSS)의 채택이 강력히 권장됩니다 [10, 11].

## 🔗 Knowledge Connections
- **Related Topics:** [[React Server Components (RSC)]], [[CSS-in-JS]], [[Tailwind CSS]], [[vanilla-extract]], [[CSS Modules]]
- **Projects/Contexts:** [[Next.js App Router Migration]], [[Scalable Design Systems]]
- **Contradictions/Notes:** 소스에 따르면, Next.js의 기존 Pages Router를 사용 중이거나 런타임 테마 기능이 강력하게 필요한 다중 테마 제품에서는 기존 런타임 CSS-in-JS도 훌륭하게 작동하지만 [10, 11], Next.js App Router를 사용하는 신규 프로젝트의 경우 런타임 CSS-in-JS 사용을 지양하고 제로 런타임 방식이나 Tailwind CSS를 선택할 것을 명확히 권고합니다 [10, 11].

---
*Last updated: 2026-04-26*