CSS 프레임워크

김지우·2022년 6월 30일

Bulma CSS CSS Framework CSS 프레임워크 Foundation Less Materialize CSS Milligram Post CSS Sass Tailwind CSS bootstrap pure-css quasar tailwind vuetify

CSS 프레임워크 종류

전처리기

CSS 전처리기는 우리(개발자)에겐 CSS보단 친화적이지만 브라우저가 해석하지 못하는 언어로 작성된 스크립트를 별도 플러그인과 프레임워크를 통해 우리가 아는 CSS로 변환하는데 사용한다. 기존 CSS의 단점인 유지보수의 불편함 등을 보완한다.

Sass (Syntactically Awesome Style Sheets)

Sass는 기본적으로 SASS, SCSS 두 문법을 제공한다. 어떤 문법을 써도 Sass의 기능을 다 사용할 수는 있지만 모양새가 많이 다르다. SASS는 identation(들여쓰기)과 newline을 사용하고 SCSS는 curly braces(중괄호)와 semicolon을 사용한다.

위 비교를 보면 SCSS가 좀 더 CSS와 유사한 모양을 띈다. 아무튼 뭘 사용해도 Sass 구현엔 상관 없다고 하니 취향껏 고르면 될 듯하다. 공홈의 많은 예제들도 SASS와 SCSS 두 가지 다 제공한다. 근데 SCSS는 CSS의 모든 버전에 대해 완전한 호환성을 제공한다고 하고 commonly used 라고 하니 SCSS를 사용하는 걸 고려해야겠다.

Sass는 Ruby로 구현되어서 구동하려면 설치가 필요하다.
OS 별 installation package를 다운로드 받아서 설치하거나 npm, brew 등의 package manager를 통해 Command Line으로 설치한다.
문법 Error 정도만 리포트 해준다.

LESS (Leaner Style Sheets)

LESS는 CSS의 확장버전으로 하위 호환성이 좋다고 쓰여있다. 사실 조사하다보니 Sass와 크게 차이가 없을 정도로 유사하여 LESS에 대한 설명은 Sass와 비교해가면서 나열해보겠다. 가장 크게 다른 점은 Sass는 Ruby를 사용하여 구축되었고, LESS는 javascript를 사용했다는 점. 물론 문법적으로 다른 점은 있다. 먼저 자잘한 차이는 아래 표에서 보자.

LESS는 어디에나 다이나믹하게 호환이 잘되는 JS로 구현되어 다양한 생태계에서의 재사용성과 커스터마이징에 유용하다.
설치랄 게 없다. 그냥 HTML파일에서 JS Library를 link해주기만 해도 되고, GUI 형태로 제공되는 컴파일러들도 있다(LESS.app, WinLess).
Error의 발생 위치와 함께 정확한 Error 리포팅을 해준다. (오..)

후처리기

PostCSS

앞서 말한 자기들만의 문법을 제공해주는 전처리기 Sass, LESS가 있다면, 후처리기도 있다. 후처리기이기에 일단 개발자는 CSS로 작성을 한다. 그리고 여기서 PostCSS는 JS Plugin을 이용해서 CSS를 좀 더 현대적으로 변환시켜준다. 다시 말하면 Sass나 LESS는 하나의 언어라고 보면 되고 PostCSS는 CSS 신기술들을 브라우저에 호환되도록 변환시켜주는 하나의 개발 도구이고 수많은 JS Plugin들을 쓸 수 있게 해주는 환경을 제공한다.(전처리기에서 제공되는 기능들이 각각의 Plugin으로 존재한다고 이해하면 될 것 같다.) 하나의 묶음으로 제공되는 전처리기들에 비해 다소 번거롭지 않을까 생각했는데, 곰곰히 짚어보면 내가 원하는 만큼 CSS 기능을 확장해서 쓸 수 있다는 면에서 장점이 되기도 한다. 심지어 특정 Plugin을 이용하면 Sass/LESS 문법으로 코드를 작성할 수도 있다.

PostCSS Playground

CSS UI framworks

프레임워크를 사용하면 개발자 간 일관된 코딩 스타일을 유지할 수 있게 해줌에 있어 이점을 준다. 더불어 프레임워크에 이미 포함된 컴포넌트들(버튼, 테이블 등)을 사용하면 개발 시간도 단축시킬 수 있고 별도의 코딩이 별로 필요 없다. 사실 찾아보니 프레임워크 종류가 너무 많아서 최근 가장 많이 쓰이는 프레임워크 위주로 간단하게 장단점을 나열해보았다.

Bootstrap

장점

Sass, LESS 지원
Twitter에서 개발 -> 안정적인 릴리즈와 장기 지원 가능
사용자가 많아서 커뮤니티가 잘 마련되어있음
다양한 컴포넌트가 정의되어 있어서(alert, modal 등) 구현 시간 절약 가능
Grid System Layout이 해상도 별 대응이 되어있어서 반응형 처리에 용이
(Grid Layout Playground)
Bootstrap Vue: Vue용 bootstrap

단점

모바일 우선 (물론 장점일 수도 있지만, 적용하려는 프로젝트에선 필요한 요소가 아니므로 단점행)
정형화된 디자인이 많고, !important 속성(나중에 설정한 값이 적용되지 않게함)이 여기저기 박혀있어 따로 재정의 하기가 어려움
하도 많이 쓰다보니 Bootstrap으로 만든 사이트들은 다 똑같아 보인다는 의견이 많음
상당히 무거워서 페이지 로딩 속도가 타 프레임워크에 비해 떨어짐
Bootstrap vue는 Vue3를 미지원

Foundation

장점

Sass 지원
Bootstrap과 비슷하게 각종 UI 컴포넌트가 제공되어 구현 시간을 줄여줌
다양한 HTML Template들을 제공하여 빠른 Kick-off 가능
컴포넌트별 시안과 예제들이 있고 Tutorial이 굉장히 상세하게 잘 되어있음
Facebook, eBay, Adobe, Disney, Mozilla 등에서 사용

단점

모바일 우선
Tutorial이 상세한 건 좋은데 기능이 너무 많아서 복잡함(실제로 단순 CSS 프레임워크 이상인 프론트엔드 개발 도구로 분류됨) -> 초보 개발자에겐 어려움
성질이 비슷한 Bootstrap과 비교했을 때 커뮤니티가 작음
QA를 비롯한 troubleshooting 지원이 협소함

Bulma

생긴지 얼마 안된 것 같긴 한데 짧은 시간 내에 커뮤니티도 많이 커졌고 인기도 많아졌다고 한다.

장점

Javascript 없이 CSS 만을 사용해서 엄청 가볍다
최신 CSS 기술을 사용하고 미학적이고 현대적인 디자인을 추구함
이미 구현된 컴포넌트들을 재정의하고 커스터마이징 하기 쉬움(Bulma에서 지정한 class를 지정해야만 스타일이 적용되고 아무것도 안쓰면 영향받지 않음)
flexbox 기반으로 구현되어 반응형 레이아웃 구현에 용이하다
Buefy : Vue.js 를 위한 Lightweight library가 있음

(여기서 잠깐, flexbox랑 bootstrap에서 사용하는 grid layout 차이가 뭘까 하고 찾아본 거.)

단점

모바일 우선 접근방식
Pure CSS 기반에 최신 기술을 활용하여서 브라우저 호환 문제가 있음
Buefy Vue 3 미지원

Materialize CSS

장점

사람들에게 친숙한 Material 디자인 룩앤필을 쉽게 구현할 수 있게 해줌
사전제작된 template들이 있어 시간 절약 가능
floating search 나 swipe interaction 등 모바일 친화적 구성 요소들이 많음
Sass와 호환이 잘됨

단점

Material 디자인에 엄격하게 맞춰져 있으므로 다른 디자인을 추구한다면 이점이 없음
따로 기업 지원이 없는 소규모 독립 프로젝트
무료로 이용 시 기능 한계 존재

Vuetify

장점

거의 모든 브라우저를 지원함
다양한 플랫폼(웹 앱, 모바일 앱, 데스크톱 앱)을 위한 Template이 제공됨
반응형을 위한 동적 레이아웃 제공
커뮤니티가 크고 문서가 많다
Vue 3 지원을 위한 Vuetify 3.0 릴리즈 예정 (June 2022). 현재는 Beta 버전으로 제공 중

단점

Strict하게 Material 디자인 표준을 따름
커스터마이징이 까다로움
용량이 크고 무겁다

Quasar

장점

Quasar v2는 Vue 3를 지원한다!
반응형 레이아웃을 갖춘 컴포넌트 제공
Vue based 구성 요소들이 속도와 효율성에 최적화 되어있음

단점

한글화가 부족함

Element plus

장점

Vue용 Framework 중 명성이 높은 편이다 (Element UI 기준)
다양한 컴포넌트들과 색상 테마 기능을 제공한다
사용을 돕는 VSCode 플러그인도 존재

단점

IE 호환이 잘 안된다 (어차피 IE는 이제 Deprecated 되지만)
중국인이 만들어서 한글화가 부족함
중국어가 메인이다 (default 언어가 중국어)
중국.

Utility-first frameworks

CSS UI Framework와 달리 미리 설계된 구성 요소들이 없어서 전반적으로 가볍다. 사용자가 입맛에 맞게 커스터마이징하기 쉽게 저 수준의 Utility class(자체적으로 설명 가능한 단일 목적의 CSS 클래스, 다시 말해 한 class는 하나의 의미만 갖는 것)를 제공한다.

Tailwind CSS

장점

미리 정의된 스타일이 없어서 커스터마이징 시 기존 스타일을 재정의하는데 시간을 낭비하지 않아도 됨
Atomic CSS 패러다임, 말 그대로 원자 단위로 CSS utility class를 쪼개놨기 때문에 HTML 태그의 클래스들만 보고도 어떻게 생겼는지 알 수 있음

<div class="m-1 text-center bg-black"></div>
<!-- margin이 1, 글자는 가운데 정렬, 백그라운드 검정 -->

미리 정의된 요소들은 없지만 내가 만든 요소(사용자 지정 구성 요소)를 프로젝트에서 재사용 가능
높은 퀄리티의 애니메이션과 트랜지션 제공

단점

가파른 러닝 커브. CSS 경험이 부족한 개발자에겐 어려움.

TailWind Playground

Milligram

장점

gzip 파일로 2kb 밖에 되지 않는 가벼움
설정과 시작이 쉽고 전체적으로 간단해서 빨리 배울 수 있다
flexbox 기반으로 반응형 레이아웃 구현 용이
성능과 생산성을 주된 목적으로 설계됨

단점

미리 만들어진 template이 없음
커뮤니티가 작아서 문서가 부족함

Pure CSS

장점

gzip 파일로 3.7kb 사이즈. 가볍고 반응이 빠름
Yahoo에서 개발하여 수명이 길고 유지보수가 잘 된다
모바일 친화적으로 반응형 레이아웃에 최적화 되어있음

단점

CSS에 숙련된 개발자가 커스터마이징에 사용하기 좋음
컴포넌트 다양성이 떨어지며 생산성이 부족함

결론

뭘 쓰든 사람 취향 차이겠지만, 준비 중인 프로젝트가 Nuxt3 기반으로 구현된다는 점에서 Vue 3와의 충분한 호환성을 가지고 있는지와 SSR에 적합한 프레임워크인지 고려해야 할 것 같다. (거기에 나의 부족한 CSS 경험을 보완할 수 있어야 한다는 점까지..) 아무튼 궁금해서 NPM Trend 검색을 해보았다.