feat: batch wikification of Skybound balance pass and scalable frontend architectures

Processed 80+ files including Skybound playtest feedback, Monorepo strategies, and Modern Component Patterns.

10_Wiki/Topics/Frontend_Mastery/Zero-Runtime CSS-in-JS.md

@@ -1,28 +1,22 @@
-# [[Zero-Runtime CSS-in-JS]]
+# [[Zero-runtime CSS-in-JS]]
 
 ## 📌 Brief Summary
-Zero-Runtime CSS-in-JS는 JavaScript 코드 내에서 스타일을 작성하는 기존 CSS-in-JS의 개발자 경험을 유지하면서도, 빌드 타임에 스타일을 정적 CSS 파일로 추출하여 런타임 오버헤드를 제거한 현대적인 스타일링 기법입니다 [1, 2]. 대표적인 도구로는 Linaria, Panda CSS, vanilla-extract 등이 있으며, 뛰어난 성능과 타입 안정성을 제공합니다 [1, 3, 4]. 특히 React Server Components(RSC) 환경과의 높은 호환성을 통해 대규모 프론트엔드 아키텍처에서 중요한 대안으로 자리 잡고 있습니다 [4-6].
+Zero-runtime CSS-in-JS는 브라우저에서 스타일을 처리하기 위한 JavaScript 런타임 오버헤드 없이, 빌드 타임에 정적 CSS를 생성하는 스타일링 패러다임이다 [1, 2]. 대표적인 도구인 `vanilla-extract`는 타입 안전(type-safe)한 스타일링을 제공하면서도 런타임 비용을 전혀 발생시키지 않는다 [1]. 이는 React Server Components(RSC) 환경과 호환되지 않는 기존 런타임 CSS-in-JS의 한계를 극복하고 네이티브 CSS 수준의 성능을 달성하기 위한 핵심 대안으로 평가받는다 [1-3].
 
 ## 📖 Core Content
+* **등장 배경 및 RSC 호환성 문제:** 
+기존의 Styled Components나 Emotion과 같은 CSS-in-JS 라이브러리들은 브라우저에서 JavaScript를 실행하여 CSS 문자열을 생성하고 주입하는 런타임 비용을 발생시켰다 [4, 5]. 이러한 방식은 특히 React Context에 의존하기 때문에, Context가 존재하지 않는 React Server Components(RSC) 환경에서는 근본적으로 호환되지 않는다는 큰 마찰을 빚게 되었다 [2, 3, 6]. 이러한 성능 및 호환성 문제를 해결하기 위해, 런타임 주입 오버헤드 없이 빌드 타임에 정적 CSS를 생성하는 zero-runtime 패러다임으로의 전환이 요구되었다 [2].
 
-*   **등장 배경 및 필요성**
-    *   초기 세대의 CSS-in-JS 라이브러리(styled-components, Emotion 등)는 런타임에 CSS 문자열을 파싱하고 DOM에 주입하는 과정에서 발생하는 성능 오버헤드(로딩 및 리렌더링 시간 증가)와 번들 크기 증가라는 단점이 있었습니다 [2, 7, 8].
-    *   특히 2024~2025년경 React Server Components(RSC)가 도입되면서, React Context에 의존하는 기존 런타임 CSS-in-JS 라이브러리들이 서버 컴포넌트 환경에서 작동하지 않는 치명적인 호환성 문제가 발생했습니다 [5, 6, 9]. 이를 해결하기 위해 성능 저하가 없는 Zero-Runtime 방식이 대두되었습니다 [2].
-*   **작동 원리 및 주요 특징**
-    *   Zero-Runtime CSS-in-JS는 개발 시 컴포넌트 로직과 스타일을 함께 배치하는 편리함을 제공하지만, 빌드 단계에서 이를 완전히 정적인 CSS 파일로 추출합니다 [1, 2].
-    *   동적으로 변해야 하는 스타일 속성은 CSS 사용자 지정 속성(CSS 변수)을 활용하여 처리하므로 런타임에 CSS를 재계산하거나 파싱할 필요가 없습니다 [1].
-    *   이 방식을 통해 브라우저 캐싱을 효과적으로 활용하고 렌더링 성능(초기 HTML에 크리티컬 CSS 포함 등)을 최적화할 수 있습니다 [1, 10].
-*   **대표적인 라이브러리**
-    *   **Linaria**: CSS-in-JS 문법을 그대로 사용하면서 빌드 타임에 정적 CSS로 추출하며, 기존 런타임 라이브러리 대비 눈에 띄는 렌더링 속도 향상을 보여줍니다 [1].
-    *   **Panda CSS**: 제로 런타임 성능, 유틸리티 퍼스트(Utility-first) 원칙, 디자인 토큰 시스템 및 원자적(Atomic) CSS 생성을 결합한 차세대 도구입니다 [2, 3].
-    *   **vanilla-extract**: 타입스크립트(TypeScript) 기반으로 타입 안정성을 제공하는 제로 런타임 도구로, RSC와 완벽히 호환되며 다중 테마(Multi-theme)를 관리해야 하는 시스템에 강력히 권장됩니다 [2, 4, 11].
-*   **실무적 적용 및 아키텍처적 가치**
-    *   유지보수 가능한 대규모 엔터프라이즈 프론트엔드 환경에서, Zero-Runtime CSS-in-JS는 CSS Modules처럼 정적 CSS의 성능을 보장하면서도 JavaScript 기반의 정밀한 캡슐화와 테밍 기능을 제공합니다 [3, 12].
+* **주요 특징 및 `vanilla-extract`:** 
+Zero-runtime CSS-in-JS는 JavaScript 최우선 스타일링의 개발자 인체공학적(ergonomics) 이점을 누리면서도 네이티브 CSS의 성능을 제공하는 것을 목표로 한다 [7]. 이 방식의 대표적인 라이브러리인 `vanilla-extract`는 빌드 타임에 CSS Modules처럼 정적인 CSS를 생성하며, TypeScript를 활용해 완전히 타입 안전한(type-safe) 스타일링을 제로 런타임 오버헤드로 지원한다 [1]. 결과적으로 브라우저는 무거운 JavaScript 실행 없이 스타일을 기본적으로 파싱할 수 있게 된다 [2].
+
+* **적용 시기 및 모범 사례:** 
+다수의 테마를 관리해야 하는 대규모 디자인 시스템을 구축할 때 제로 런타임이면서 타입 안전성을 보장하는 `vanilla-extract`의 사용이 강력히 권장된다 [8]. 반면 Next.js App Router를 사용하는 신규 프로젝트의 경우, 런타임 방식의 CSS-in-JS 사용은 지양해야 하며 zero-runtime CSS-in-JS, Tailwind CSS 또는 CSS Modules 중 하나를 채택하는 것이 아키텍처 관점에서의 모범 사례이다 [8].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[CSS-in-JS]], [[React Server Components (RSC)]], [[CSS Modules]], [[디자인 시스템 (Design Systems)]], [[Tailwind CSS]]
-- **Projects/Contexts:** [[Next.js App Router 환경의 컴포넌트 스타일링]], [[성능 최적화가 필수적인 대규모 다중 테마 플랫폼]]
-- **Contradictions/Notes:** 기존 CSS-in-JS(styled-components, Emotion)는 동적 런타임 테밍에 특화되어 있으나 성능 오버헤드와 RSC 비호환성을 야기합니다. 반면, Zero-Runtime CSS-in-JS는 빌드 시 정적 추출 방식을 사용하여 런타임 비용을 "0"으로 만들고 RSC와 호환되도록 하여 기존 CSS-in-JS의 단점을 효과적으로 극복합니다 [1, 4-7].
+- **Related Topics:** [[React Server Components (RSC)]], [[CSS-in-JS]], [[Tailwind CSS]], [[Design Tokens]], [[Next.js App Router]]
+- **Projects/Contexts:** [[vanilla-extract]], [[대규모 디자인 시스템(Large Design Systems)]]
+- **Contradictions/Notes:** 기존 런타임 CSS-in-JS(예: styled-components)는 컴포넌트 단위의 강력한 동적 스타일링 기능과 편리한 개발자 경험을 제공하지만 [4], Next.js App Router와 같은 최신 RSC 환경에서는 심각한 성능 저하와 런타임 호환성 문제를 야기하므로 Zero-runtime CSS-in-JS나 Tailwind CSS로 마이그레이션하는 것이 대안으로 제시된다 [3, 8].
 
 ---
 *Last updated: 2026-04-26*