[Frontend] CSS 전처리기란? Zero Runtime CSS와의 차이점까지 정리!
[Frontend] CSS 전처리기란? Zero Runtime CSS와의 차이점까지 정리!
들어가며
CSS 전처리기(CSS Preprocessor)는 기존 CSS가 가진 한계점을 보완해주는 도구입니다.
CSS는 기본적으로 변수, 함수, 조건문 등 프로그래밍적 기능이 부족하여
복잡한 스타일 구조에서는 코드의 재사용성과 유지보수성이 떨어질 수 있습니다. 이러한 한계를 극복하기 위해 등장한 것이 바로 Sass, Less, Stylus 같은 CSS 전처리기입니다.
목차
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, Stylus | Vanilla 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 라이센스를 따릅니다.