[PostCSS] PostCSS란?

mozza·2024년 6월 6일

Etc

목록 보기

3/3

오늘은 Tailwind CSS를 알아보다가 궁금해진 PostCSS가 무엇인지에 대해 알아보는 시간을 가져보도록 하겠다 :)

1. PostCSS란?

CSS는 브라우저 호환성, 벤더 접두사 등의 문제로 어려움을 겪어왔다.

이를 극복하기 위해 루비언어로 만든 Sass/SCSS 라는 스타일 언어가 탄생했고 많은 개발자들이 사용하기 시작했다.
그래서 대부분의 CSS 프레임워크는 Sass/SCSS로 만들어져왔다.

그러던 2013년, Sass/SCSS를 이용하지 않는 "모듈화 된 CSS" 라는 슬로건을 내세운 PostCSS가 탄생했다.

① CSS 작성을 편하게 해주는 도구(플러그인) ⭕️ 언어 ❌

javascript기반의 플러그인을 이용해 CSS를 변환시키는 툴
다양한 플러그인과, 플러그인을 추가할 수 있는 환경을 제공
마치 javascript의 babel 같은 느낌
자세히 말하자면 CSS 파일을 AST(Abstract Syntax Tree) 로 변환하여 각 플러그인들에게 제공

② CSS 후처리기(CSS Post-processor)

PostCSS는 CSS 전처리기 중 하나로 알려져 있는데, 정확히는 동작 순서에 따라 CSS 후처리기가 맞음
그래서, Scss, Stylus, Less 같은 전처리기와 함께 사용할 수 있음
Webpack이 1차로 만든 CSS를 가공하여 최종 CSS를 생성
: CSS 파일 작성 → 렌더링 → 플러그인을 사용하여 변경

🧐 그렇다면 PostCSS의 장점이 뭘까 한번 알아보자!

2. 장점

① 확장성

위에서 말했듯이 필요한 플러그인을 선택하여 프로젝트에 추가할 수 있음
따라서 개발자들이 프로젝트의 요구 사항에 맞게 플러그인을 선택하여 CSS 처리를 쉽게 구현할 수 있음

② 유연성

PostCSS는 빌드 도구 (ex. Webpack, Gulp)와 통합하여 사용 가능함
따라서 개발자들은 프로젝트의 빌드 과정에 PostCSS를 통합하여 자동으로 CSS 변환을 수행할 수 있음

③ BEM 명명 규칙의 자동화

BEM이란?
: CSS 클래스 이름을 위한 명명 규칙 표준
　ex) photo라는 클래스의 하위 클래스는 photo__img, photo__caption
BEM 단점
: 클래스명이 복잡해지고 길어짐

❗️ But ❗️

PostCSS 를 사용하면 같은 이름의 클래스명을 사용해도 자동으로 PostCSS가 BEM 명명 규칙을 만들어 구분해줌

④ CSS 코드의 변수화 & 유지 보수 용이

기존 CSS에서는 할 수 없었던 컬러와 사이즈를 변수화 시켜 사용할 수 있어 유지 보수에 용이

⑤ 미래 CSS 문법 지원

미래의 문법을 지원하는 플러그인을 통해 브라우저의 지원을 기다리지 않아도 됨
예를 들어, CSS Next를 통해 아직 표준으로 승인되지 않은 CSS 문법을 사용할 수 있으며, PostCSS가 해당 문법을 현재 브라우저에 지원하는 문법으로 변환해줌

⑥ 코드 최적화

여러 최적화 플러그인으로 CSS 파일 크기를 축소, 자동으로 벤더 접두사 추가 등의 작업을 수행해 성능을 향상시킬 수 있음

하지만 모든 것에는 장점이 있으면 단점이 있듯이 PostCSS에도 단점은 있었다.
아래를 보자!

3. 단점

① 높은 진입 장벽

PostCSS는 초기 설정 및 플러그인 관리 등이 필요하기 때문에 복잡하다는 생각에 진입 장벽이 높은 편

② 플러그인 설치

필요한 플러그인을 개별적으로 하나하나 설치해야 하므로 번거로움

③ 플러그인 적용 순서

postcss.config.js 파일에 플러그인들을 하나씩 기재하며 적용해야 하는데, 이 때 플러그인의 순서가 매우 중요함 (위 → 아래)
순서를 잘못 설정하면 일부 기능이 동작하지 않을 수도 있음
대부분의 경우 Readme.md에 순서가 나와있으니 참고할 것

④ 플러그인 간 호환성

플러그인은 각자 다른 개발자들이 만들기 때문에 호환성 문제가 발생할 수도 있음

이렇게 PostCSS에 대해 알아보고 나니 PostCSS를 쓴다는 말은 각 플러그인을 사용한다는 말과 같은 의미란 걸 알 수 있었다 😀

현재 수백개의 PostCSS 플러그인들이 존재하는데 이 중에서 많이 사용되고, 유용한 플러그인 몇 개를 소개해 보겠다 :)

4. 유용한 PostCSS 플러그인

① Autoprefixer

PostCSS의 가장 유명한 플러그인
벤더 접두사(Vendor Prefix)(ex. -webkit-, -moz-, -ms-, -o-)를 자동으로 추가
다양한 브라우저에 호환되는 CSS 작성 가능
예

// Autoprefixer 적용 전

a {
    display: flex;
}


// Autoprefixer 적용 후

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

위 예처럼 개발자는 Autoprefixer 적용 전의 코드를 입력하기만 해도 Autoprefixer를 적용하면 벤더 접두사가 붙어있는 Autoprefixer 적용 후의 코드로 만들어준다!

② CSS Next

미래의 CSS 문법을 사용할 수 있게 해주는 플러그인
최신 CSS 기능(ex. 변수, 그리드 레이아웃 등)을 사용할 때 브라우저의 지원을 기다릴 필요 없게 현재 지원하는 문법으로 변환해 줌

③ PostCSS Import

@import 구문으로 CSS 파일 내에서 다른 CSS 파일을 포함할 수 있게 해주는 플러그인
이를 통해 CSS 파일을 모듈화할 수 있음

④ CSSnano

공백 제거 등으로 CSS 파일을 최적화 해주는 플러그인

5. 느낀점

Tailwind CSS를 공부하던 중 Tailwind CSS를 설치할 때 PostCSS가 등장하길래 엥? PostCSS는 뭐지? 하는 생각이 들었다.

그래서 간단하게나마 뭔지는 알고 넘어가자라는 생각에 검색을 해보기 시작했다.

하지만 여태껏 포스팅했던 다른 주제들과는 다르게 정확한 개념을 알기가 어려웠다.

프레임워크라는 건가?
언어라는건가?
이 둘 다 아니라는데 그럼 무슨 역할을 하는거지?

검색하는 내내 온통 의문 투성이였다. 또 어디서는 CSS 전처리기라고 하고 어디서는 후처리기라고 하기까지.. 혼란스러웠다.

며칠을 검색해 보고 나서야 완벽하게는 아니지만 "아, PostCSS가 이런 거구나!" 알 수 있게 되었다.

왜 Tailwind CSS를 사용할 때 PostCSS도 함께 설치해서 쓰면 좋다고 했는지 알 수 있게 되어 좋았다.

mozza

모짜

이전 포스트