고민에 빠졌다.
포트폴리오 사이트를 만들기 위해, CSS 프레임워크를 고민 하던 중, 어떤 것을 사용해야 할 지에 대한 깊은 고민에 빠졌다. 내가 주로 사용하던 프레임워크는 tailwindcss라서 마음같아서는 tailwindcss를 사용하고 싶지만, 다른 프레임워크도 써보고 싶다는 단순한 호기심에서부터 시작되었다. 나는 tailwindcss를 왜 써왔고, 다른 프레임워크보다 어떠한 장점이 있을까?
1. 내가 지금까지 Tailwindcss를 써왔던 이유
가장 큰 이유는 NextJS에서 권장하기 때문이다. SSR과 SEO 등 다양한 기능을 지원하는 React 프레임워크인 NextJS에서는 tailwindCSS 사용을 권장한다.
Next가 tailwindcss 사용을 권장하는 것을 엿볼 수 있는 것으로는 npx create-next-app을 치면, 세 번째 질문이 Tailwind CSS를 사용하시겠습니까? 라는 점이다. Yes를 누르면 Tailwind CSS를 친절하게 설치부터 기본적인 세팅까지 마쳐준다.
Tailwindcss는 다른 유명한 Styled-component, Emotion같은 CSS-in-JS가 아닌 Utility CSS방식이다. 컴포넌트 단위로 css를 작성하는 방식이 아니라, 미리 세팅된 Utility Class를 활용하여 HTML 코드내에 스타일링을 할 수 있는 방식이다. 즉, className에 기능들을 조합한 문자열로 스타일을 지정하는 방식이다.
BootStrap vs TailwindCSS
tailwindcss의 문법은 BootStrap과 매우 유사하다. 대신, BootStrap과 다르게 Utility CSS이므로 필요에 따라 확장성 있게 CSS를 작성할 수 있다는 장점이 있다. 또한, BootStrap은 BootStrap문법에 맞게 적응을 해야하지만, tailwindCSS는 기존 css문법과 크게 벗어나지 않아 러닝커브가 비교적 낮은 편이다.
바닥부터 시작한 tailwindcss가 꾸준히 상승세를 타다가, 2023년을 기점으로 bootstrap을 따라잡은 것을 확인할 수 있다.
2. tailwindCSS vs 다른 프레임워크
tailwindCSS의 장점
- Utility CSS방식이기에 class명을 생각하지 않아도 된다.
tailwindcss.config로 css속성을 커스텀하여 이용하여 일관성 있는 디자인 시스템을 적용할 수 있다.- React코드와 함께 작성하기에 유지 관리하기 쉽다.
다른 프레임워크는?
전에 CSS 프레임워크들에 대해 정리한 글이다. 아래 지원 여부는 모두 2023년 11월 기준이다.
-
Vanilla Extract, Styled components : 23년 11월 1일 기준 client component에서만 지원
-
Emotion : NextJS13 App routing에서 지원하지 않는다.
-
SASS : CSS를 편리하게 사용할 수 있도록 하는 CSS의 확장판 언어
SASS는 빌드 타임에 CSS파일로 컴파일된다. 컴파일된 CSS파일은 minxin을 통해 의미 없이 남발되어 반복하여 쓰인 CSS 속성으로 코드가 지저분하다. 이로 인해 파일이 무거워져 웹사이트의 속도가 저하된다는 치명적인 단점이 존재한다.
-
CSS module : CSS를 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술
CSS module또한 SASS처럼 빌드 타임에 CSS로 컴파일된다.
Next.js 13 App routing에서 공식적으로 지원하지 않는 Emotinon과 Vanilla Extract, Styled Component은 우선 배제하였다. 그러고나니 선택지가 몇 개 없었다. Tailwind CSS와 SASS, 그리고 CSS Module이 남았다
SASS와 CSS Module은 한 번씩 사용해본 적이 있는데, 사용하기 불편했던 기억이 난다. 또한, SASS는 별도의 컴파일러가 필요하며 컴파일하는데 추가적인 시간이 필요하다. CSS Module은 별도로 많은 CSS파일을 만들어 관리해야 한다는 단점이 존재했다.
2. 결론
다른 CSS 프레임워크 중에 주로 사용하던 TailwindCSS보다 좋은 것이 있을까 했지만, 결국 TailwindCSS가 가장 좋다는 결론을 내렸다. 앞으로 기존에 내가 겪었던 TailwindCSS를 사용하며 느낀 단점과 불편한 점을 떠올리며, 이에 대한 개선점을 찾아보도록 해야겠다.
내가 TailwindCSS를 사용하며 겪은 불편한 점
-
CSS가 JSX코드와 섞여 있어 코드를 보는데 가독성을 해친다.
⇒ 확장프로그램을 활용
-
변수명 등 동적 스타일이 적용되지 않는다.
이 정도 불편함은 감수할 만하다고 봤다. 일단은 TailwindCSS로 가면서 하나씩 풀어보려 한다.