도구를 어떻게 쓸 지는 쓰는 사람 마음입니다.
망치로 달걀후라이를 만들던, 나무에 못을 박던 그것은 망치를 쥔 사람의 마음일 것입니다.
하지만...
대부분의 도구는 어떠한 특정한 의도와 철학에 따라 설계되고, 거기 맞춰서 도구를 활용할 때 최대한의 효율을 발휘할 수 있을 것입니다.
TailwindCSS 또한 설계 철학과 의도에 맞춰 사용할때 최고의 생산성과 DX를 경험할 수 있습니다.
이 글에서 제가 TailwindCSS를 사용하며 느꼈던 가치들을 짧게 풀어봤습니다.
Hassle Free
Module CSS, SCSS, BEM, Styled, Emotion, Stitches... 모던 프론트엔드에서는 CSS를 작성할 수 있는 수많은 방법들이 제공되고 있고 각 방법으로 스타일을 작성하다 보면 다양한 고민거리들이 생기게 됩니다.
고민을 해결하는 가장 쉽고 빠른 방법은 그 고민 자체를 없애는 것입니다.
TailwindCSS의 개발팀은 스타일링을 작성하며 발생하는 무수한 고민들 그 자체를 최대한 없애버리는 방향으로 설계했습니다.
전통적인 방식 - React & Module CSS 예시
1. module.css 파일을 생성한다
2. JSX에서 module.css import문을 작성한다
3. 스타일링할 컴포넌트와 스타일의 결합을 위해 class명을 고민한다
4. css 파일로 돌아가 구현할 스펙에 맞추어 css를 작성한다
5. JSX로 돌아가 해당 class명을 className에 반영한다
반복Tailwind way™
1. className에 구현할 스펙에 맞추어 유틸리티 클래스들을 조합한다.Opinionated style writing, Unopinionated appearance
Tailwind를 Bootstrap 등의 CSS 프레임워크와 비교하는 경우가 많은데, 추구하는 방향성이 다릅니다.
Tailwind는 스타일을 작성하는 방법에 대해서는 opinionated하지만, 그 결과물에 있어서는 unopinionated합니다.
Bootstrap등의 '완성된' CSS 프레임워크를 사용하게 되면 어떤식으로 사용하더라도 결국 부트스트랩의 컴포넌트들을 조립하여 만들어지게 되는 최종 결과물은 비슷한 외관을 가지게 됩니다. 즉 Bootstrap은 특정한 형태의 '스타일 시스템'을 제공합니다.
하지만 Tailwind는 스타일(CSS)을 작성하는 방식을 제공할 뿐, 스타일 그 자체를 제공하지는 않습니다. 또 Tailwind가 제공하는 유틸리티들은 CSS에 1대1로 대응하는 저수준 API기 때문에 특정한 형태의 외관이 강제되지 않습니다.
All in One
테일윈드에는 out of the box 상태에서 체계적이고 총체적인 기본 디자인 토큰과 거의 모든 CSS 속성에 대응하는 유틸리티들이 포함되어 있습니다.
따라서 더 이상 디자인 토큰 스펙을 코드로 구현하는 것에 과도한 시간을 투자할 필요가 없습니다.
디자인 토큰과 유틸리티들은 모두 config를 통해 Opt-in/out과 커스터마이징이 가능합니다.
Zero Abstraction
테일윈드는 HTML class에 직접 스타일을 결합하는 것을 권장합니다. 즉 view와 style이 강결합되게 됩니다.
사실 추상화에는 비용이 듭니다. 스타일과 뷰를 분리하고, 재사용을 위한 구조를 잡고, 다시 이를 결합하기 위한 API와 변수명을 고민하는 것에는 생각보다 훨씬 큰 코스트가 따릅니다.
Tailwind는 뷰와 스타일의 강결합을 통해 이런 추상화에 대한 고민 자체를 없애버렸습니다.
스타일의 추상화를 통해 얻는 이익보다 그를 구현하고 관리하는데 소요되는 비용에 따른 손해가 더 크다고 판단한 것입니다.
그럼 반복적인 스타일은 어떻게 구현하냐고요? 간단합니다. 멀티커서와 복사-붙여넣기를 이용하면 됩니다. 이는 Tailwind 팀에서 공식적으로 권장하는 방법입니다.
일반적인 상황에서 스타일의 재사용은 곧 뷰의 재사용을 통해 구현되게 되고 (React를 예시로 들면, 반복되는 뷰를 Component로 추출하게 되면 자동적으로 스타일도 재사용되게 됩니다!), 이는 대부분의 상황에서 놀랄 정도로 잘 작동합니다.
Born Fast
Tailwind는 빠릅니다. 또 빠르기 위해 고민할 필요도 없습니다.
스타일은 컴파일 타임에 소스코드의 정적 분석을 통해 추출되게 됩니다.
이때문에 Tailwind는 기본적으로 완벽하게 Zero Runtime입니다. 런타임에 단 한줄의 자바스크립트도 실행되지 않습니다.
또 같은 이유로 최종 CSS에는 자동적으로 코드 내에서 사용하는 스타일만 포함되고, 아토믹 CSS의 특성 상 반복되는 클래스들은 모두 자동적으로 재사용되기 때문에 아무 노력 없이도 CSS 번들 사이즈를 최소화할수 있습니다.
이렇게 번들 사이즈가 최소화되면 자연적으로 코드 스플리팅의 필요성도 없어집니다.
Tailwind는 코드 스플리팅을 위한 어떠한 노력도 하지 않습니다. 할 필요가 없으니까요.
Appendix
Tailwind도 물론 장점만 있는 것은 아닙니다. 기회가 된다면 다른 글을 통해 더 자세히 설명하고 이를 보완할 방법을 제시해보도록 하겠습니다.
비록 호불호가 갈릴 수는 있지만 Tailwind가 해결하고자 하는 고민거리 자체는 많은 분들이 이미 겪어보신 내용일 것입니다. 사실 Tailwind가 Utility First 접근을 통해 제공하는 가치들은 직접 사용해볼때 가장 빠르게 이해할 수 있습니다. 여러분도 한번 TailwindCSS를 사용해보시는것은 어떨까요?
