CSS Framework들의 특징과 장단점 비교 (tailwind, styled-componets)

Introduce

 CSS 프레임워크를 선택하는 것은 웹 개발에서 매우 중요한 결정이다. 왜냐하면 CSS 프레임워크는 개발 속도와 코드 유지 보수성에 큰 영향을 미치기 때문이다. 다양한 CSS 프레임워크가 존재하며 각각의 프레임워크는 고유한 특징과 장단점을 가지고 있다. CSS 프레임워크를 선택할 때는 프로젝트의 요구 사항과 팀의 역량을 고려해야 한다. 따라서 이 글에서는 기업들에서 많이 사용하는 Tailwind, Styled-components, 두 가지 프레임워크를 비교하여 어떤 프레임워크가 적합한지 살펴보고자 한다.

 

Tailwind

About

Tailwind CSS는 최근 웹 개발 커뮤니티에서 급격히 인기를 얻고 있는 utility-first CSS 프레임워크이다. Tailwind는 빠른 UI 개발을 위해 설계된 프레임워크로, 스타일을 직접 HTML 파일에 작성할 수 있게 해주는 클래스들의 집합으로 구성되어 있다. 이는 CSS 파일을 따로 작성할 필요 없이 신속하게 사용자 인터페이스를 구축할 수 있게 해준다.

How it works

 Tailwind는 PostCSS 플러그인으로 작동하기 때문에 런타임 시에 스타일을 빌드하지 않고, 미리 컴파일된 CSS 파일을 제공한다. 이는 웹 페이지 로드 시간을 단축시키고 빠른 사용자 경험을 제공한다. 특히, Tailwind는 'tree-shaking' 기능을 통해 사용되지 않는 스타일을 제거하여 최종 CSS 파일 크기를 최소화한다. 이를 통해 페이지 로딩 성능이 향상되고, 모바일 기기에서도 빠르게 동작할 수 있다. 따라서 Tailwind CSS는 퍼포먼스 측면에서 매우 효율적이다.

Feature

 Tailwind의 가장 큰 특징 중 하나는 utility-first CSS 프레임워크라는 점이다. 이는 개별 CSS 속성에 해당하는 특수한 CSS 클래스를 사용하여 스타일을 작성하는 것을 의미한다. 예를 들어, 마진, 패딩, 색상 등의 속성을 나타내는 클래스를 HTML 요소에 적용함으로써 스타일을 정의할 수 있다. 이렇게 함으로써 별도의 CSS 파일을 작성하지 않고도 빠르게 UI를 구성할 수 있다.

 또한, Tailwind는 HTML 파일에 클래스를 직접 적용하는 방식이어서 불필요한 CSS 관리가 필요 없고, 코드 충돌이나 중복을 방지하여 유지보수성을 높인다. 미리 컴파일된 CSS 파일 덕분에 브라우저는 스타일을 빠르게 파싱하고 적용할 수 있어 부드럽고 빠른 사용자 인터페이스를 제공한다. 

 Tailwind를 사용하는 또 다른 큰 장점은 커스터마이징의 용이성이다. 프로젝트의 요구에 맞게 거의 모든 클래스를 편집하고 확장할 수 있어, 대규모 프로젝트에서도 유연하게 확장 가능하다. 이로 인해 Tailwind를 사용하면 특정 디자인 시스템에 맞춰 프레임워크를 조정하는 데 어려움이 없다.

 Tailwind를 사용한 코드는 마치 inline style처럼 보일 수 있다. 이는 Tailwind 클래스가 HTML 요소에 직접 적용되기 때문이다. 하지만 Tailwind는 inline style은 아니다. 왜냐하면 반응형 인터페이스를 만들 수 있으며, hover, focus, before, after 등의 상태를 스타일링할 수 있기 때문이다. 따라서 인라인 스타일링으로는 불가능한 복잡한 UI를 구현할 수 있다.

 

Styled-components

About

Styled-components는 React 개발 환경에서 자주 사용되는 스타일링 라이브러리 중 하나로, JavaScript와 스타일을 결합할 수 있게 해준다. 이 라이브러리는 CSS-in-JS 방식을 채택하여 컴포넌트 단위로 스타일을 작성하고, 동적 스타일링을 손쉽게 구현할 수 있다. 그러나 styled-components를 선택할 때는 몇 가지 중요한 단점도 고려해야 한다.

How it works

Styled-components는 컴포넌트 단위로 스타일을 정의하는 CSS-in-JS 라이브러리이다. 스타일은 JavaScript 파일 내에서 정의되고, 런타임 시에 해당 스타일이 동적으로 DOM에 주입된다. 이를 통해 스타일링과 컴포넌트 로직을 한 곳에서 관리할 수 있어 개발자 경험을 향상시킨다. 그러나 styled-components는 런타임 시에 스타일을 동적으로 주입하기 때문에 퍼포먼스가 Vanila CSS 혹은 tailwind보다 느리며 특히 대규모 애플리케이션에서는 퍼포먼스 문제를 일으킬 수 있다. 스타일을 런타임시 js로 계산하고 DOM에 삽입하는 과정에서 렌더링 지연이 발생할 수 있으며, 이는 사용자 경험에 부정적인 영향을 줄 수 있다. 또한 큰 번들 크기로 인해 성능 저하가 발생할 수 있다.

Feature

 Styled-components의 주요 특징 중 하나는 컴포넌트 기반 스타일링이다. 각 컴포넌트와 함께 스타일을 작성함으로써 코드의 모듈성과 재사용성을 높일 수 있으며, 스타일 충돌을 방지하고 유지보수를 용이하게 한다. 또한, JavaScript 변수와 로직을 활용하여 동적으로 스타일을 변경할 수 있어 다양한 사용자 인터페이스 상태(예: hover, focus, active 등)를 쉽게 관리할 수 있다.

 또한, prop 기반 스타일링도 특징 중 하나이다. 컴포넌트의 props를 사용하여 동적으로 스타일을 변경할 수 있어, 상태에 따라 스타일을 유연하게 조절할 수 있다. 예를 들어, 버튼의 색상이나 크기를 props를 통해 쉽게 변경할 수 있다.

 간편한 테마 설정 또한 특징이다. ThemeProvider를 통해 손쉽게 전역 테마를 설정하고, 이를 모든 컴포넌트에서 일관되게 사용할 수 있다. 이는 프로젝트 전반에 걸쳐 일관된 코드 스타일을 유지하는 데 도움이 된다.

 

Benchmark

Name	Transfer Size	First Meaningful Paint	First Contentful Paint	Time To Interactive	First CPU Idle
vanilla-react-ssr	47.2 kb	1.3 s	1.3 s	1.5 s	1.5 s
vanilla-react-concurrency-ssr	51.3 kb	1.3 s	1.3 s	1.5 s	1.5 s
vanilla-react	45.1 kb	1.6 s	1.6 s	1.6 s	1.6 s
vanilla-react-concurrency	49.2 kb	1.7 s	1.7 s	1.7 s	1.7 s
react-stitches-styled-ssr	50.7 kb	0.7 s	0.7 s	1.7 s	1.7 s
react-emotion	53.8 kb	1.7 s	1.7 s	1.7 s	1.7 s
react-emotion-ssr	57.3 kb	0.7 s	0.7 s	1.7 s	1.7 s
styled-components-ssr	60.1 kb	0.7 s	0.7 s	1.7 s	1.7 s

 위의 표는 첫번째 참고문헌에서 lighthouse devtool을 이용한 같은 네트워크 조건, 같은 컴퓨터에서 css 프레임워크만 달리하여 FCP, TTI 등을 측정한 benchmark이다. 앞서 말한 바와 같이 styled-componets가 vanilla css보다 느린 것을 볼 수 있다. 

Reference

 

• Timon, J. (n.d.). CSS Framework Performance. Retrieved from https://jantimon.github.io/css-framework-performance/
• Betti, Y. (2018, October 8). Why You Should Stop Using Styled-components in React Apps. Medium. Retrieved from https://medium.com/@yuribett/why-you-should-stop-using-styled-components-in-react-apps-879a239d5a27
• Elpassion. (2020, June 22). Tailwind CSS: How Does It Work? Retrieved from https://www.elpassion.com/blog/tailwind-css-how-does-it-work
• Tailwind Labs. (n.d.). Using with Preprocessors. Tailwind CSS Documentation. Retrieved from https://tailwindcss.com/docs/using-with-preprocessors