얼마 전 스터디를 하다가 PostCSS에 대해 간단하게 설명을 들었다. 듣다보니 이거 이름 어디서 들어봤는데..? 하고 생각이 들었다. 생각해보니 옛~날에 잠깐 퍼블리싱 과정을 들을 때 스치듯이 들었던 게 기억이 났다. 그냥 들었던 것만 기억이 나고 정확히 어떤 도구인지에 대해서는 정작 잊고 있었다. 그래서 마침 설명도 들은 김에 좀 알고 싶어서 문서를 찾아봤다.
PostCSS란?
공식 문서에서 "PostCSS는 JavaScript 기반 플러그인을 사용하는 소프트웨어 개발 도구로, CSS를 린트하고, 변수 및 믹스인을 지원하고, 향후 CSS 구문, 인라인 이미지 등을 변환할 수 있다."고 설명하고 있다. 그렇지만 SASS나 LESS같은 CSS 전처리기나 프레임워크와는 조금 다른 개념이다.
PostCSS는 Wikipedia, Twitter, Alibaba 및 Facebook, Github의 코드를 개발하기 위해 사용되었다. 그리고 npm 사용자들 간에 가장 선호되는 CSS 도구이기도 하다.
특징 및 개념
-
플러그인 기반 아키텍처 : PostCSS는 플러그인을 사용하여 CSS 변환작업을 수행하는데, 각 플러그인은 특정한 기능을 하거나 CSS를 수정하는 데 사용될 수 있다. 이러한 플러그인을 조합하여 원하는 변환 과정을 정의할 수 있다.
PostCSS에서 플러그인을 어떻게 활용하는지 몇 가지 예시를 가져왔다.
-
Autoprefixer : Autoprefixer는 PostCSS의 가장 유명한 플러그인 중 하나로, 벤더 접두사(Vendor Prefix. '-webkit-', '-moz-', '-ms-', '-o-')를 자동으로 추가해주는 역할을 한다. 다양한 브라우저에 호환되는 CSS를 작성하고 Autoprefixer를 사용하면, 해당 브라우저의 벤더 접두사를 자동으로 추가해 일관된 스타일을 유지할 수 있다.
-
CSS Next : CSS Next는 미래의 CSS문법을 사용할 수 있게 해주는 PostCSS 플러그인이다. CSS 변수나 그리드 레이아웃 같은 최신 CSS 기능을 사용하려면 브라우저의 지원을 기다리지 않고도 CSS Next 플러그인을 사용하여 미래의 문법을 현재 지원하는 문법으로 변환할 수 있다.
-
PostCSS Import : 이 플러그인은 CSS 파일 내에서 '@import' 구문을 사용하여 다른 CSS 파일을 포함할 수 있도록 해준다. 이를 통해 CSS 파일을 모듈화하고 관리할 수 있다.
3가지 예시만 가져왔지만 더 다양하고 유용한 플러그인들이 많다. PostCSS Github Repository에서 확인할 수 있다.
-
-
확장성 : PostCSS 플러그인은 독립적으로 개발되며, 필요한 플러그인을 선택하여 프로젝트에 추가할 수 있어 개발자들이 프로젝트의 요구 사항에 맞게 사용자 정의된 CSS 처리를 쉽게 구현할 수 있게 해준다.
-
CSS 변환 및 최적화 : 여러가지 플러그인을 사용하여 CSS를 변환하고 최적화하는 데 유용하다. 위에서 설명한 Autoprefixer를 사용해 벤더 접두사를 자동으로 추가하거나, CSS Minification이라는 플러그인을 사용하여 CSS 파일 크기를 줄일 수 있다.
-
CSS Next 및 미래의 CSS 문법 지원 : 가져온 3가지 예시에서도 한 번 언급했던 CSS Next를 통해 사용해 아직 표준으로 승인되지 않은 CSS 문법을 사용할 수 있으며, PostCSS가 해당 문법을 현재 브라우저에 지원하는 문법으로 변환해준다.
-
유연한 사용 : PostCSS는 빌드 도구 (ex:Webpack, Gulp)와 통합하여 사용할 수 있다. 이를 통해 개발자들은 프로젝트의 빌드 과정에 PostCSS를 통합하여 자동으로 CSS 변환 및 최적화 작업을 수행할 수 있다.
PostCSS를 사용하면 좋은 점?
- 유연성과 확장성 : PostCSS는 플러그인 기반 아키텍처를 사용하기 때문에 원하는 변환 작업을 쉽게 구성하고 조합할 수 있어 자유롭게 확장성을 갖춘 CSS 처리를 할 수 있다.
- 미래 CSS 문법 지원 : 미래의 문법을 지원하는 플러그인을 통해 브라우저의 지원을 기다리지 않아도 되는 장점이 있다.
- 코드 최적화 : 여러 최적화 플러그인을 제공하여 CSS 파일 크기를 줄이고, 자동으로 벤더 접두사를 추가하거나, 중복된 스타일을 제거하는 등의 작업을 수행해 성능을 향상시킬 수 있다.
- 브라우저 호환성 관리 : Autoprefixer와 같은 플러그인을 사용하여 벤더 접두사를 자동으로 추가해주어 다양한 브라우저에서 일관된 스타일링을 유지할 수 있다.
- 다양한 플러그인 생태계 : 다양한 플러그인이 개발되어 있어 CSS 전처리, 후처리, 변환 작업을 수행하는 등 원하는 기능을 쉽게 추가할 수 있다.
PostCSS의 단점?
- 높은 진입 장벽 : PostCSS는 초기 설정 및 플러그인 관리 등이 필요한데, 특히 전처리기와 비교했을 때 초기 설정이나 기본 기능의 부재로 처음에는 복잡하다고 생각할 수 있다.
- 초기 설정 및 플러그인 관리 : PostCSS를 사용하려면 프로젝트에 필요한 플러그인을 개별적으로 설치하고 설정해야 한다. 이로 인해 초기 설정 및 플러그인 관리가 번거로운 단점이 있다.
- 플러그인의 퀄리티 차이 : 플러그인은 다양한 개발자가 만들기 때문에 플러그인의 품질과 업데이트 주기에 차이가 있을 수 있다. 때문에 업데이트가 되지 않거나 호환성 문제가 발생할 수도 있다.
- 생태계의 다양성 : 생태계가 다양한 건 장점이기도 하고 단점이기도 하다. 많아서 원하는 기능을 쉽게 추가할 수도 있겠지만, 너무 많아서 어떤 플러그인을 사용해야 하는지 선택이 어렵고 시간이 오래 걸릴 수 있다.
- 프레임워크의 부재 : PostCSS는 프레임워크와 직접 통합되지 않기 때문에 사용자가 개발 환경을 설정해야 한다. 이는 프레임워크가 이미 PostCSS를 기본으로 포함하는 경우보다 추가 설정이 필요할 수 있음을 의미한다.
참고할만 한 링크
- PostCSS 플러그인 목록
- 플러그인 예제 : Autoprefixer, CSSnano
- 튜토리얼 및 가이드
- PostCSS와 함께 사용되는 빌드 도구 관련 문서
- Using PostCSS width Webpack : Webpack과 함께 PostCSS를 사용하는 방법에 대한 가이드
- Gulp와 함께 사용하는 PostCSS : Gulp와 함께 PostCSS를 사용하는 방법을 설명하는 글
마치며
PostCSS의 특징과 장,단점에 대해 정리를 했는데 내가 생각할 때는 그래도 단점보다는 장점이 더 큰 도구인 것 같다는 생각이 든다. 특히 Autoprefixer를 사용해 브라우저의 호환성 관리를 하는 부분과 CSS Next를 통해 브라우저의 지원을 기다리지도 않아도 된다는 점이 매력적으로 느껴졌다.
그리고 정리하면서 옛날에 벤더프리픽스(Vendor Prefix)에 대해서도 잠깐 설명을 들었던 게 기억이 나서 이건 뭐지? 하면서 찾아봤다. 벤더프리픽스는 접두사를 추가하는 것을 의미하는 거였다. '-webkit-', '-moz-', '-ms-', '-o-' 같은 접두사가 벤더프리픽스다.
이렇게 글을 정리하다보니 내가 놓치고 있는 것들이 정말 많구나 하는 사실을 깨닫게 되었다. 더 열심히 하나씩 정리를 해서 이런 개념들을 확실히 짚고 넘어가야겠다.
