포스트

[Frontend] CSS 전처리기란? Zero Runtime CSS와의 차이점까지 정리!

[Frontend] CSS 전처리기란? Zero Runtime CSS와의 차이점까지 정리!

들어가며

CSS 전처리기(CSS Preprocessor)는 기존 CSS가 가진 한계점을 보완해주는 도구입니다.
CSS는 기본적으로 변수, 함수, 조건문 등 프로그래밍적 기능이 부족하여
복잡한 스타일 구조에서는 코드의 재사용성과 유지보수성이 떨어질 수 있습니다. 이러한 한계를 극복하기 위해 등장한 것이 바로 Sass, Less, Stylus 같은 CSS 전처리기입니다.

목차

  1. CSS 전처리기란?
  2. CSS 전처리기 예시
  3. Zero Runtime CSS란?
  4. CSS 전처리기 vs Zero Runtime CSS
  5. 정리
  6. 참고 자료

1. CSS 전처리기란?

CSS 전처리기는 CSS 작성 시 변수, 중첩, 믹스인, 함수 등 프로그래밍적 기능을 제공하여
효율적이고 체계적인 스타일 관리가 가능하도록 도와줍니다. 전처리기로 작성한 코드는 컴파일 과정을 거쳐 일반 CSS로 변환되어 브라우저에서 적용됩니다.

대표적인 전처리기

  • Sass/SCSS (가장 많이 사용됨)
  • Less
  • Stylus

2. CSS 전처리기 예시

👎 일반 CSS

1
2
3
4
5
6
7
8
9
10
11
12
.primary-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}
.secondary-button {
  background-color: #6c757d;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

👍 Sass(SCSS) 사용 예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$button-padding: 10px 20px;
$border-radius: 4px;

@mixin button($bg-color) {
  background-color: $bg-color;
  color: white;
  padding: $button-padding;
  border-radius: $border-radius;
}

.primary-button {
  @include button(#007bff);
}

.secondary-button {
  @include button(#6c757d);
}

✅ 코드 중복 제거 ✅ 변수 활용으로 유지보수 편리 ✅ 공통 로직 재사용 (mixin)

3. Zero Runtime CSS란?

Zero Runtime CSS는 CSS-in-JS의 런타임 오버헤드를 줄이기 위해 등장한 스타일링 방식입니다.

등장 배경

기존 CSS-in-JS (예: styled-components, Emotion)는 JS 코드 안에서 CSS를 작성하고, 런타임에 스타일을 계산하고 적용합니다. 하지만 이 방식은 렌더링 시점에 부하가 크고, 성능 문제가 발생할 수 있습니다.

Zero Runtime CSS의 특징

  • 런타임 오버헤드 없음: 빌드 타임에 CSS 생성 및 클래스 추출
  • JS 기반 문법: React 등 컴포넌트 기반 개발에 적합
  • 예시 라이브러리: Vanilla Extract, Linaria

4. CSS 전처리기 vs Zero Runtime CSS

항목CSS 전처리기 (Sass 등)Zero Runtime CSS
등장 목적CSS 한계 보완 (변수, 중첩 등)CSS-in-JS의 성능 문제 해결
문법 기반CSS 기반 (SCSS, Less 등)JS 기반 (ESM, TS 등)
작동 시점컴파일 타임컴파일 타임
스타일 구조전역 또는 BEM 방식컴포넌트 단위
러닝커브낮음 (CSS 유사 문법)중간 이상 (JS 문법 이해 필요)
대표 도구Sass, Less, StylusVanilla Extract, Linaria

예시: Zero Runtime CSS (Vanilla Extract)

1
2
3
4
5
6
7
8
9
// button.css.ts
import { style } from '@vanilla-extract/css';

export const primaryButton = style({
  backgroundColor: '#007bff',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '4px',
});
1
2
3
4
5
6
// Button.tsx
import { primaryButton } from './button.css.ts';

export function Button() {
  return <button className={primaryButton}>Click</button>;
}

✅ 타입 안전성 ✅ 컴포넌트와 스타일 분리 ✅ 빠른 렌더링 성능

5. 정리

항목CSS 전처리기Zero Runtime CSS
변수/중첩 지원✅ (JS 문법 활용)
컴포넌트 스타일링❌ (전통적 방식)
런타임 오버헤드없음없음 (CSS-in-JS 대안)
CSS 친화적 문법❌ (JS 문법 기반)
목적유지보수와 재사용성 향상성능 최적화, 컴포넌트 기반 스타일링

6. 참고 자료

CSS 전처리기와 Zero Runtime CSS는 각자의 문제를 해결하기 위한 솔루션입니다. 당신의 프로젝트에 가장 잘 맞는 방식은 무엇인가요? 🤔

언제나처럼 도구보다 중요한 건 목적과 맥락입니다.

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.