제로 런타임 css란

Zero Runtime CSS란?

Zero Runtime CSS는 브라우저에서 실행되는 JavaScript를 사용하지 않고도 스타일을 적용할 수 있도록 하는 CSS 방식을 의미합니다.
기존 CSS-in-JS 라이브러리처럼 런타임에 JavaScript로 스타일을 생성·삽입하는 과정을 제거하고, 빌드 단계에서 모든 스타일을 미리 CSS 파일로 생성하는 방식을 사용합니다.

이 방식은 브라우저가 스타일을 적용할 때 JavaScript 실행이 필요하지 않기 때문에 성능 개선 효과가 크며, 초기 로딩 속도 또한 향상됩니다.

 

Zero Runtime CSS가 필요한 이유

1) 성능 최적화

CSS-in-JS는 런타임에 스타일을 계산한 뒤 <style> 태그를 삽입하는 과정이 필요합니다.
반면 Zero Runtime CSS는 빌드 시점에 모든 스타일이 정적으로 생성되기 때문에, 브라우저는 CSS 파일만 로드하면 즉시 렌더링할 수 있습니다.

2) 번들 크기 감소

런타임 스타일 계산을 위한 JavaScript 코드가 제거되어 전체 번들 크기가 줄어듭니다. 이는 모바일 환경이나 저사양 기기에서 특히 유리합니다.

3) 초기 페인트 안정성(FoUC 방지)

JavaScript 로직이 실행되기 전 스타일이 적용되지 않는 현상이 줄어들어 초기 화면 깜빡임(FoUC) 문제가 개선됩니다.

4) 오류로부터의 안정성

JavaScript 오류가 발생하더라도 스타일 적용이 영향을 받지 않기 때문에 안정적인 UI 렌더링이 가능합니다.

 

---

Zero Runtime CSS의 대표적인 예

• Tailwind CSS: 유틸리티 기반으로, 모든 클래스가 빌드 단계에서 CSS로 구현됩니다.
• vanilla-extract: JS 파일에서 스타일을 정의하지만 결과물은 정적 CSS 파일로 빌드됩니다.
• CSS Modules: 클래스 이름을 해시하여 정적 CSS 파일로 변환하는 방식입니다.
• Linaria, Panda CSS, UnoCSS 등도 Zero Runtime 방식을 지원합니다.

---

CSS-in-JS와의 비교

CSS-in-JS (런타임 존재)

• 런타임에 JS 실행 → 스타일 생성 → DOM에 삽입
• 초기 렌더링이 JS 실행 속도에 영향을 받음
• 번들 크기 증가

Zero Runtime CSS

• 빌드 단계에서 CSS 파일 생성
• 브라우저는 순수 CSS만 로드
• 초기 렌더링 속도와 안정성 향상
• 번들 크기 감소

---

언제 Zero Runtime CSS를 선택해야 할까?

다음과 같은 프로젝트에서 특히 효과적입니다.

• SSR 기반 프레임워크(Next.js, Remix, Astro 등)
• 초기 로딩 속도가 중요한 서비스
• 모바일 중심 서비스
• 런타임 JS 의존도를 줄이고 싶은 프로젝트
• 대규모 UI 컴포넌트 혹은 디자인 시스템 구축

반면, 스타일이 복잡한 동적 JS 로직과 강하게 연동되는 경우에는 기존 CSS-in-JS가 더 적합할 수 있습니다.

---

정리

Zero Runtime CSS는 빌드 타임에 스타일을 모두 생성하고, 브라우저에는 오직 정적 CSS만 전달하는 방식입니다.
이 접근 방식은 성능, 안정성, 유지보수 측면에서 장점이 크기 때문에 최근 프론트엔드 생태계에서 빠르게 채택되고 있습니다.