CSS 프레임워크 비교 (Bootstrap, Material UI, Antd, Semantic UI , Tailwind)

 

TMI일수는 있지만, 필자는 웹에 관심을 갖게 된 게 CSS 라이브러리/프레임워크 덕분(?)이기도 하다.

 

대학생 때 처음 웹 관련 과목을 들었을 때 Bootstrap이라는 CSS 프레임워크를 처음 접했는데,

HTML/CSS를 완전히 이해하지 못한 상태임에도 빠르게 결과물이 잘 나와서 자신감도 붙고 재미도 붙일 수 있었다.

 

물론 기본기도 중요하지만 CSS 라이브러리의 도움 없이

처음부터 모든 걸 직접 만들어야 했다면 중간에 좌절했을 수도 있을 거란 생각이 든다.

 

또 여러 CSS 라이브러리를 쓰다 보면 컴포넌트에 어떤 props가 있으면 좋을지, 디자인 패턴은 어떻게 가져가면 좋을지에 대한 안목(?)도 생기게 되는 것 같다.

 

그래서 새로운 미니 프로젝트를 할 때는 항상 새로운 CSS 라이브러리/프레임워크를 써보려고 하고 있다.

 

그럼 지금부터 사용해봤던 CSS 프레임워크 (리액트 기준) 몇 개를 비교해보고

어떤 점이 좋았고 불편했는지 나열해보도록 하겠다. 

 

Bootstrap - Twitter

https://getbootstrap.com/

Bootstrap

위에 언급했다시피 필자가 처음으로 사용한 CSS 프레임워크이다. 

현재는 버전 5까지 나왔는데 버전 5는 안 써보고 4까지만 써봤다.

반응형 웹을 빠르게 개발하고 싶다면 이만한 프레임워크는 없는듯하다.

 

스타일링 관련해서 커스터마이징도 굉장히 쉬웠고 무엇보다 가장 많이 쓰이는 프레임워크 중 하나이기 때문에 막혔을 때 공식문서 말고도 찾아볼 수 있는 관련 자료도 많았다. 가끔 보면 Bootstrap 만의 정형화된 레이아웃을 안 좋아하는 사람들도 찾아볼 수 있는데 이건 충분히 커스터마이징으로 커버할 수 있다고 생각한다. 

 

CSS 프레임워크는 프로젝트를 시작하기 앞서 기본 틀이 될 레이아웃, 컨벤션, 테마 등을 설정할 수 있도록 파운데이션 역할을 할 때 가장 큰 빛을 바란다고 생각한다. 그런 면에서 Bootstrap는 잘 짜인 grid system 하나만으로도 충분히 제 역할을 해주고 있다고 생각한다. 

 

Semantic UI 

https://semantic-ui.com/

Semantic UI

 

이 역시 대학생 때 처음 사용했었는데 사실 특별한 건 없던 걸로 기억한다. 심플하고 상대적으로 가볍지만 그만큼 제공하는 컴포넌트도 많지 않았다. 정말 간단하고 직관적이기 때문에 큰 러닝 커브 없이 빠르게 소규모 프로젝트에 적용 가능한 것 같다. 프로토타입을 만들 때에도 요긴하게 쓸 수 있을 것 같다. 하지만 semantic ui react가 아닌 그냥 semantic ui 같은 경우는 마지막 업데이트가 2018년도이니 이 점 주의하여 선택하길 바란다.

 

Material UI - Material Design (Google)

https://mui.com/

MUI: The React component library you always wanted

아직까지도 자주 사용하고 있는 프레임워크 중 하나다. 컴포넌트 단위 개발할 때 많이 유용한 것 같다. 물론 React-Bootstrap으로도 컴포넌트 단위 개발을 충분히 할 수 있지만, Material UI에서 제공하는 컴포넌트가 종류도 많고 좀 더 완성도가 높다는 느낌을 받았다. 완성도가 높은만큼 커스텀 스타일링 적용은 조금 더 어렵다는 느낌을 받았다 (상대적으로). 처음 사용했을 때 컴포넌트 일정 부분 스타일링하는 방법을 공식 문서에서 찾지 못해서 stack overflow에 검색했던 기억이 난다. (잘 찾아보면 있었을 텐데)

 

레이아웃을 잡는 용도로는 쓰질 않아서 잘 모르겠지만 Bootstrap 만큼이나 유연한 12 Column Grid System을 갖고 있다고 한다.  개발 속도보다 완성도를 중요시한다면 한번 고려해볼 만한 것 같다. 만약 Material Design을 선호한다면 MDB (Material Design for Bootstrap)도 한번 확인해보길 바란다.

 

 

Ant Design - antd 팀

https://ant.design/

Ant Design - The world's second most popular React UI framework

 

첫 회사에 입사하고 사용하게 된 프레임워크다. 두 번째로 인기가 많은 프레임워크라고 소개하고 있다 (본인 피셜).

어드민 페이지 개발에 특화되어있다고도 소문이 많이 난 프레임워크라 채택하게 되었는데 정말 어드민 페이지를 만들면서 이것도 있을까?라고 생각한 것은 대부분 컴포넌트로 구현이 되어있었다.

컴포넌트를 만들었는데 이미 있어서 그냥 만들어져 있는 거 쓸걸 하면서 아쉬워했던 적도 많다. 그래도 내가 만든 게 최고지. 

 

가장 잘 썼던 건 단연 Table 컴포넌트였다. 페이지 네이션부터 시작해, 정렬, 필터링, 검색 등, 기존 프레임워크에 비해 훨씬 디테일했기 때문에 빠른 시일 내에 큰 문제없이 어드민 페이지를 만들 수 있었다. 

 

Form 관련 컴포넌트도 많이 사용했었는데 이 역시 매우 디테일해서, 직접 form 컴포넌트를 만들어 사용할 때도 해당 프레임워크의 구조를 많이 참고하고 있다.

 

Tailwind - Adam Wathan

https://tailwindcss.com/

 

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

 

가장 최근에 사용해본 유틸리티(?) 형 프레임워크로 여태까지 사용했던 개념의 CSS 프레임워크랑은 좀 달랐다.

 

기존 UI Kit 기반의 프레임워크랑은 다르게 따로 컴포넌트라던지 스타일, 테마 등을 따로 제공하지 않는다.

정말 프레임워크가 해야 할 일, 파운데이션으로서의 역할만 딱 할 뿐이다.

 

일단 예제를 봤을 때 첫인상은 그다지 좋지는 않았다. 솔직하게 첫인상이 좋을 수가 없는 구조다.

Bootstrap 같은 프레임워크를 사용해봤다면 정말 생소하진 않을 거다.

 

        <div className="w-9 h-9 flex items-center justify-center xl:px-0 ml-auto">

 

이런 식으로 클래스 이름에 적용하고 싶은 스타일을 적기만 하면 된다. w-9 같은 경우는 문서를 참고해보면 2.25 rem이 된다,

 

tailwind 공식 문서

결과적으로 아래와 같은 스타일링이 적용된다

div {
 width: 2.25rem; /* w-9 */
 height: 2.25rem; /* h-9 */
 display: flex; /* flex */
 align-items: center; /* items-center */
 justify-content: center; /* justify-center */
 margin-left: auto, /* ml-auto */
 
 /* xl:px-0 xl은 스크린사이즈 1280px , p는 padding x는 left, right */
 @media (min-width: 1280px) { 
 	padding-left: 0px;
    padding-right: 0px;
   }
}

앞서 말했듯이 가장 큰 단점은 html에 스타일 로직이 추가되는 때문에 가독성이 떨어질 수 있다는 점과

익숙해지는데 시간이 좀 걸릴 수 있다는 점인 것 같다.

 

다행히도 후자는 Tailwind CSS Intellisense라는 플러그인을 사용하면

자동완성 기능을 제공하기 때문에 익숙해지기 전까지는 많은 도움이 될 수 있다

 

 

첫인상은 좋지 않았지만 쓰면 쓸수록 왜 많은 사람들이 찾는지 이해가 됐다. 

html과 스타일링을 한 곳에서 작성할 수 있다 보니 익숙하지 않은 상태임에도 불구하고 빠르게 결과물을 가져올 수 있었고

전부 독립적으로 스타일이 적용되다 보니 원치 않은 곳에 변화가 일어날 걱정을 할 필요가 없었다,

또 그렇다고 해서 공통적으로 사용할 스타일을 정의할 수 없는 것도 아니었다 (@apply로 공통 스타일 정의 가능).

 

확실히 러닝 커브는 있지만, 충분히 배워볼 만하고 익숙해진다면 이 프레임워크의 가치는 몇 배가 될 수 있을것으로 예상한다.