PostCSS 완벽 가이드 | CSS 트랜스폼·Autoprefixer·Plugins·실전 활용

이 글의 핵심

PostCSS로 CSS를 트랜스폼하는 완벽 가이드입니다. Autoprefixer, CSS Modules, Nesting, Tailwind CSS 통합까지 실전 예제로 정리했습니다.

실무 경험 공유: PostCSS를 도입하면서, 브라우저 호환성 문제가 해결되고 CSS 작성이 편리해진 경험을 공유합니다.

들어가며: “CSS 호환성이 걱정돼요”

실무에서 마주치는 문제들

Vendor Prefix를 수동으로 추가해요

번거롭고 실수하기 쉽습니다. Autoprefixer가 자동으로 추가합니다. 최신 CSS를 사용하고 싶어요

구형 브라우저는 지원하지 않습니다. PostCSS로 변환합니다. CSS Nesting이 필요해요

Native CSS는 제한적입니다. PostCSS Nesting으로 가능합니다.

1. PostCSS란?

CSS 전처리기의 진화: LESS → Sass → PostCSS

PostCSS는 2013년 Andrey Sitnik(Autoprefixer 개발자)이 만든 CSS 변환 도구입니다. 당시 CSS 전처리기는 LESS(2009)와 Sass(2006)가 주류였지만, 두 가지 문제가 있었습니다:

1. 폐쇄적 문법: Sass는 Ruby 기반, LESS는 자체 파서 → 확장 어려움
2. All-or-nothing: Sass를 쓰려면 nesting·변수·mixin을 통째로 써야 함

PostCSS는 이를 “플러그인 생태계”로 해결했습니다. “CSS를 CSS로 변환하는 JavaScript 도구”라는 단순한 API를 제공하며, 나머지는 플러그인에 위임합니다.

PostCSS vs Sass vs CSS-in-JS

측면	PostCSS	Sass	CSS-in-JS
철학	플러그인 조합	통합 문법	JS 안에 CSS
문법	표준 CSS + 확장	독자 문법 (.scss)	JS 템플릿 리터럴
Autoprefixer	✅ 플러그인	❌ 별도 도구	❌ (런타임)
빌드 속도	빠름 (Rust 파서 가능)	중간 (Ruby→dart-sass)	느림 (런타임 생성)
사용 사례	Tailwind·Bootstrap 빌드	레거시 대형 프로젝트	React·Styled Components

내부 동작: AST 변환 파이프라인

PostCSS는 CSS를 AST(Abstract Syntax Tree)로 파싱한 뒤, 플러그인들이 순서대로 변환하며, 다시 CSS로 출력합니다.

CSS 입력 → Parser → AST → Plugin 1 → Plugin 2 → ... → Stringifier → CSS 출력

예시 (Autoprefixer):

// AST에서 'display: flex'를 찾음
{
  type: 'decl',
  prop: 'display',
  value: 'flex'
}

// 플러그인이 prefix 추가
{
  type: 'decl',
  prop: 'display',
  value: '-webkit-box'  // 추가
},
{
  type: 'decl',
  prop: 'display',
  value: 'flex'  // 원본 유지
}

핵심 특징

PostCSS는 JavaScript로 CSS를 트랜스폼하는 도구입니다. 주요 장점

• Plugins: 200+ 플러그인 (원하는 기능만 조합)
• Autoprefixer: 자동 Prefix (Can I Use 데이터 기반)
• CSS Modules: 스코프 격리 (클래스명 충돌 방지)
• Nesting: SCSS 스타일 (표준 CSS Nesting으로 변환)
• 빠름: Rust 기반 파서 선택 가능 (Lightning CSS)
• 표준 지향: 미래 CSS 문법을 현재 브라우저용으로 변환

Tailwind CSS의 비밀:

• Tailwind는 PostCSS 플러그인입니다
• @apply 지시자를 PostCSS로 처리
• JIT 컴파일러도 PostCSS 파이프라인 위에 구현

---

2. 설치 및 기본 설정

설치

npm install -D postcss postcss-cli

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
  },
};

package.json

{
  "scripts": {
    "css": "postcss src/styles.css -o dist/styles.css"
  }
}

---

3. Autoprefixer

설치

npm install -D autoprefixer

입력

/* src/styles.css */
.container {
  display: flex;
  user-select: none;
}

출력

/* dist/styles.css */
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

---

4. CSS Nesting

설치

npm install -D postcss-nesting

postcss.config.js

module.exports = {
  plugins: {
    'postcss-nesting': {},
    autoprefixer: {},
  },
};

입력

.card {
  padding: 1rem;
  & .title {
    font-size: 1.5rem;
  }
  &:hover {
    background: #f0f0f0;
  }
}

출력

.card {
  padding: 1rem;
}
.card .title {
  font-size: 1.5rem;
}
.card:hover {
  background: #f0f0f0;
}

---

5. CSS Modules

설치

npm install -D postcss-modules

postcss.config.js

module.exports = {
  plugins: {
    'postcss-modules': {
      generateScopedName: '[name]__[local]___[hash:base64:5]',
    },
  },
};

---

6. Webpack 통합

npm install -D postcss-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
};

---

7. Vite 통합

Vite는 PostCSS를 자동으로 지원합니다.

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-nesting': {},
    autoprefixer: {},
  },
};

---

8. Tailwind CSS 통합

npm install -D tailwindcss
npx tailwindcss init

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

---

9. 실전 예제: 풀 설정

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-nesting': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
  },
};

package.json

{
  "scripts": {
    "css": "postcss src/styles.css -o dist/styles.css",
    "css:watch": "postcss src/styles.css -o dist/styles.css --watch"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

---

정리 및 체크리스트

핵심 요약

• PostCSS: CSS 트랜스폼 도구
• Autoprefixer: 자동 Prefix
• Plugins: 200+ 플러그인
• CSS Nesting: SCSS 스타일
• CSS Modules: 스코프 격리
• Webpack/Vite: 완벽한 통합

구현 체크리스트

• PostCSS 설치
• Autoprefixer 설정
• CSS Nesting 추가
• CSS Modules 설정
• Webpack/Vite 통합
• Tailwind CSS 통합
• 프로덕션 최적화
• 브라우저 타겟 설정

---

같이 보면 좋은 글

• Tailwind CSS 완벽 가이드
• Webpack 완벽 가이드
• CSS 완벽 가이드

---

이 글에서 다루는 키워드

PostCSS, CSS, Autoprefixer, Plugins, Build Tools, Frontend, Tailwind CSS

자주 묻는 질문 (FAQ)

Q. SCSS와 비교하면 어떤가요?

A. PostCSS가 더 빠르고 플러그인이 풍부합니다. SCSS는 더 성숙하고 기능이 많습니다.

Q. Tailwind CSS와 함께 사용하나요?

A. 네, Tailwind CSS는 PostCSS 플러그인입니다.

Q. 성능은 어떤가요?

A. 매우 빠릅니다. Lightning CSS를 사용하면 더 빠릅니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 거의 모든 모던 프론트엔드 프로젝트에서 사용하고 있습니다.