[CSS] CSS 전처리기와 후처리기, 뭐가 다를까?

 

CSS를 사용하다 보면 다음과 같은 문제를 겪은 적이 있을 것입니다.

“같은 색상을 여러 곳에 썼는데, 바꾸려면 전부 수정해야 해...”
“flex를 썼는데, 브라우저마다 다르게 보이네?”
“스타일이 많아지니 점점 유지보수가 어렵다…”

 

이런 문제를 해결하는 데 도움이 되는 도구가 바로 전처리기(Preprocessor)와 후처리기(Postprocessor)입니다.

 

전처리기(Preprocessor)란?

전처리기는 CSS를 작성하기 전에 사용하는 도구로, CSS를 더 프로그래밍답게 쓸 수 있게 해줍니다.
대표적인 전처리기로는 SASS, LESS, Stylus 등이 있습니다.

 

전처리기를 쓰면 다음과 같은 기능을 사용할 수 있습니다:

• 변수: 색상, 폰트 등 반복되는 값을 한 곳에 정의
• 중첩(Nesting): 선택자 구조를 더 직관적으로 표현
• 믹스인(Mixin): 반복되는 코드 블록을 재사용 가능
• 연산, 조건문, 반복문 등 프로그래밍적 요소

/* 반복되는 색상을 변수로 뽑아 쓸 수 있다 */
$main-color: #ff6f61;

.card {
  background-color: $main-color;
  &:hover {
    background-color: darken($main-color, 10%);
  }
}

 

🔽 컴파일 결과 (CSS)

.card {
  background-color: #ff6f61;
}
.card:hover {
  background-color: #e65b50;
}

 

후처리기(Postprocessor)란?

후처리기는 CSS를 다 작성한 뒤, 브라우저에 맞게 변환하거나 최적화하는 도구입니다.
대표적인 후처리기는 PostCSS이며, 다양한 플러그인을 조합해서 원하는 기능을 추가할 수 있습니다.

 

후처리기는 다음과 같은 작업을 자동화해 줍니다:

• 벤더 프리픽스 자동 추가 (-webkit-, -moz- 등)

ℹ️벤더 프리픽스(Vendor Prefix) 

CSS 속성이 모든 브라우저에서 공식적으로 지원되기 전에, 각 브라우저 제조사(벤더)가 실험적으로 기능을 먼저 제공하기 위해 붙이는 접두사입니다. 주로 브라우저 간 CSS 동작 차이를 줄이고, 호환성 문제를 예방하기 위해 사용됩니다.

예: -webkit-(Chrome/Safari), -moz-(Firefox), -ms-(IE)

• CSS 압축(minify): 용량을 줄여 성능 향상
• 변수나 조건문 등 일부 전처리 기능 대체
• CSS 모듈화 및 네이밍 관리

/*  예시: PostCSS + autoprefixer */

/* 원본 */
.flex-box {
  display: flex;
}

 

🔽 변환 결과

.flex-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

 

전처리기 vs 후처리기

항목	전처리기	후처리기
처리 시점	CSS 작성 이전	CSS 작성 이후
주요 목적	코드 재사용, 구조화, 유지보수 용이	브라우저 호환성, 최적화
대표 도구	SASS, LESS, Stylus	PostCSS (autoprefixer, cssnano 등)
문법 지원	변수, 중첩, 믹스인 등	플러그인을 통한 기능 확장
필수 여부	선택 사항	실무에서는 거의 필수에 가까움

 

Q. 그럼 어떤 걸 쓰나요?

실제 프로젝트에서는 전처리기와 후처리기를 함께 사용하는 경우가 많습니다.

예를 들어:

1. SASS로 구조화된 CSS를 작성한 뒤,
2. PostCSS로 벤더 프리픽스를 자동 추가하고, CSS를 압축해서
3. 브라우저 호환성과 성능을 동시에 챙기는 방식입니다.

Webpack, Vite 같은 번들러를 사용하면 SASS + PostCSS 플러그인을 연동해 빌드 파이프라인에 자연스럽게 포함시킬 수 있습니다.