개인적으로 처음에는 절대적으로 기피했던 프레임워크에 대한 사용 빈도가 갈수록 높아지고 있다.
그러던 와중에 부트스트랩은 이제 좀 질려서 이번기회에 테일윈드CSS를 사용해보기로 했는데, 너무나 마음에 들어서 이런 글도 한번 적어보게 되었다. (이젠 테일윈드 없이는 코드를 짤수없는 몸이 되버렸다)
CSS 프레임워크를 사용하는 이유는?
한줄로 요약하면 코드를 쉽고 간편하게 사용하기 위해서이다.
그게 정형화된 코드로 인하여 유지 보수가 편리할수도 있고, 협업할때 좋을수도 있으며, 재사용성이 높을수도 있다. 이유는 다양하지만 결국 쉽고 간편하게 쓰고싶기 때문에 사용하게 된다.
#1 Bootstrap
장점도 많고 단점도 많은 가장 유명한 프레임워크.
일단 다른 장단점들 다 제쳐놓고 사용 방법이 가장 쉽다.
압도적으로 많은 수의 유저가있는것이 장점이지만 그만큼 많은 사이트들이 비슷한 형태를 띄게 되는것이 단점.
또한 수많은 기능들을 지원하다보니 편리한점도 많지만 그만큼 프로그램이 무겁고, 많은 기능들이 jQuery에 의존하고 있음.
대신 사용자 정의가 가능하고, 필요한 기능만 따로 선택하여 다운받아 사용할수 있는점은 매우 유용하다.
다른기능 필요 없고 그리드나 컨테이너 같은 레이아웃만 쓰고싶은데... 같은 형식으로 CSS와 혼용하여 작업하기엔 이거만한게 없다.
#2 Tailwind CSS
CSS 프레임워크 중 사용자에게 가장 높은 만족도를 준다고하는 Tailwind CSS
유틸리티 클래스 형태로 제공하는것이 특징인데, 대놓고 사용자에게 CSS 따로 코딩하지 말라고 하는 형식으로 만들어져있다.
이게 뭔말이냐 하면 다른 프레임워크처럼 미리 만들어진 구성요소나 특정 디자인 형태로 배포되는게 아니라, css 명령어 하나하나를 클래스로 만들어 놓은 형식.
물론 공식 사이트에서 몇가지 샘플을 확인해 볼 수 있고, 이 디자인들의 디자인들이 다른 프레임 워크보다 훨씬 최신 트랜드에 어울리는 형태로 제작되어 있어 이쁘게 보인다. (유저들끼리 공유하기도 하고 판매하기도 하며, 공식적인 유료 결제 옵션도 있음)
단점은... 크게 2가지로 꽤나 뚜렷한데, 우선 용량이 매우 크다.
그래서 CDN은 개발단계에서만 사용하고 실제로는 마지막 빌드단계에서 실질적으로 적용된 클래스만 검색하여 새로운 CSS 파일을 작성하여 작동하는 형식으로 사용하는것이 일반적. (그다지 문제는 아니지만 가볍게 쓰자고 하는건데 뭔가 하나라도 단계가 생긴다는것 자체가 불편한거기에...)
두번째 단점으로 많은 프레임워크중 테일윈드만의 가장 큰 특징이자 문제점인데...클래스명이 엄청나게 길어져서 가독성이 엉망이 되버린다.
아래는 공식 홈페이지의 샘플중 일부분.
<div class="space-y-2">
<div class="relative">
<div class="bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
<div class="bg-cyan-500 dark:bg-cyan-400 w-1/2 h-2" role="progressbar" aria-label="music progress" aria-valuenow="1456" aria-valuemin="0" aria-valuemax="4550"></div>
</div>
<div class="ring-cyan-500 dark:ring-cyan-400 ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow">
<div class="w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full ring-1 ring-inset ring-slate-900/5"></div>
</div>
</div>
<div class="flex justify-between text-sm leading-6 font-medium tabular-nums">
<div class="text-cyan-500 dark:text-slate-100">24:16</div>
<div class="text-slate-500 dark:text-slate-400">75:50</div>
</div>
</div>끝없는 div와 클래스의 향현...
이렇게 쓸거면 CSS 쓰는게 더 좋지 않을까 싶었지만,
일단 써보지 않아도 공감할수 있는 장점으로는 클래스명을 매번 고민하지 않아도 된다는것, 프로젝트가 일정 수준이상 커졌을때 파일이 합쳐지면서 문제가 생기는것을 방지한다는 점 등 의외로 장점이 상당한 편.
그리고 실제로 써보면... 의외로 가독성이 불편하다거나 하진 않았고(정말 의외로...) 최근엔 혼자 하는 작업은 모두 테일윈드CSS로 사용하고 있는데 진짜 작업속도가 말도안되게 향상되었다.
다른 리뷰들 보면 배우는데 조금 힘들다...라는 글들도 보이던데 VSCode에서 확장툴로 Tailwind CSS IntelliSense를 설치하면 자동완성까지 되기 때문에 CSS를 이미 알고있다면 사용하는데 큰 무리는 없을거라 보임.
tailwindcomponents Cheatsheet >
#3 Foundation
해외에서는 상당히 인기가 많은 CSS 프레임워크이자 프론트엔드 개발 도구.
메인에 나와있는 캐릭터부터 너무 서양감성이기도 하고... 다른 프레임워크에 비해 사용법도 상당히 복잡한편.
나와는 너무 맞지 않아 개인적인 취향으로는 목록에서 빼고 싶었지만 유명한건 유명한거니까...
#4 UIKit
여기서부터 아래의 3개는 모두 미니멀한 CSS
가볍고 모듈화된 프론트엔드 프레임워크.
UIKit은 마커나 패럴렉스 같은 이미지 형식의 샘플이 괜찮은듯.
#5 Materialize
구글에서 제작하였으며,
자신의 프로젝트에서 머티리얼 디자인 룩앤필을 쉽게 구현할 수 있게 해주는 오픈 소스 CSS 프레임워크.
#6 Milligram
미니멀리스트 CSS 프레임워크
설정과 시작이 쉽고 압축시 2KB의 매우 작은 용량이 특징.
너무나 간단하고 배우기 쉽지만, 미리 만들어진 템플릿 같은것이 없음