어제 UX/UI 특강을 들으면서 처음으로 테일윈드(Tailwind CSS, 이하 테일윈드) 에 대해서 처음 들었다.
부트스트랩의 만족도는 떨어지고, 사용자도 줄어드는 반면 테일윈드 사용자는 꾸준히 증가하고 있고 만족도도 크다는 것!! (근데 왜 싸피에서는 부트스트랩을….알려줘…? 어차피 하루 알려줬지만.. 트렌드에 맞게 소개라도 해주었으면.)
Anyway, 트렌드를 알게 된 이상 가만히 있을 수 없다.
테일윈드 홈페이지를 참고해서 공식문서를 보면서 빠르게 정체를(?) 파악해보기 시작했다.
1. Utility-First Fundamentals
전통적으로 class를 만들고 → class를 한땀한땀 만들었다면 → 테일윈드는 인라인 스타일로 이미 정해져있는 style을 ‘적용’ 만하면 되는 것이다.
⇒ 공식문서를 읽다가 ‘이거 그냥 인라인 스타일이잖아?’ 라고 할 사람들을 위한 설명이라며 : 어느정도는 그렇지만 클래스를 주고, 클래스를 꾸미는 것이 아니라 스타일을 요소에 바로 적용하는 거라고 모호한 설명을 해주고 있다
난 그냥 유사 인라인 스타일이라고 할래…
⇒ 이 점은 Bootstrap과 일치한다고 생각했다. 하지만 이 글을 읽고 생각을 정리할 수 있었다.
⇒ Bootstrap은 컴포넌트 기반 프레임 워크이다. 그러니까 이미 margin, color, 등등 모든 것들이 Bootstrap에서 만들어 둔 것이고 내가 그걸 깨고 내 마음대로 custom하려면 코드가 더 길어지고 지저분해진다.
⇒ 반면 Utility First는 ‘내가’ 색깔, margin, font-size 등등을 커스텀할 수 있다. 그렇기에 Bootstrap 문법(?), 내 문법 섞어 쓸 필요 없이 내 custom에만 집중해서 쓰면 되는 것이다!
⇒ Bootstrap 쓰면서 인라인으로 길~ 어 지는 코드를 보면서 ‘못생겼다’ 고 생각했었는데, Tailwind에서는 이걸 장점으로 꼽는다. class 이름 짓느라고 시간을 허비하지 않아도 된다는 것이다. ← 이걸 듣고 무릎을 탁쳤음. 진짜 이름 짓는거 너무너무 힘들다.
⇒ 중복되는 코드를 줄일 수 있다. 생각해보면 큰 Button, 작은 Button, 크기만 다르고 안의 내용은 같지만 이전 project에서는 두개의 class를 만들고 따로 관리했다. 그 결과 CSS 코드가 길어지고 CSS page와 Component 페이지 두개를 열어두고 왔다갔다 하면서 고쳐야 한다. 이런 중복 코드와 시간을 줄여 생산성을 높인다는 것이다!
⇒ 또 Hover, Focus, dark mode에 대한 지원도 한줄로 쓸 수 있기 때문에 코드 직관성이 높아지고 CSS가 아주아주 길어지는 것을 방지할 수 있을 것 같다.
2. Customize
tail wind의 가장 큰 장점인 Customize
tailwind.config.js의 theme에 나의 커스터 마이징을 추가 할 수 있다.
3. Why Tailwind?
테일윈드라고 검색하니 카카오페이지에서도 테일윈드 라이브러리를 도입했다는 것을 알 수 있었다.
확실히 나같은 개인 / 소규모 프로젝트보다 큰 기업, 디자이너와 개발자가 분리되어 있는 곳 일수록
테일윈드가 유용하겠다고 생각했다.
- 디자인 코드는 코드의 영역에 침범하면 안된다.
- 중복되는 컴포넌트가 많을 수록 유용하다.
- font size등 한번에 바꿔야 할 일이 있을 때 일일히 찾아서 바꾸지 않아도 된다.
아래는 Tailwind를 사용하는데 도움을 주는 도구들이다.
현업에서도 많이 쓰이고 핫하고, 장점을 보니 안 쓸 이유가 없어서 이번 프로젝트에서 도입을 해볼까 하고 생각중이다.
Uploaded by N2T