CSS 라이브러리 어떤 것이 좋을까요? (SCSS, Styled Components, Emotion, Tailwind CSS 비교)

웹 개발에서 복잡한 CSS 코드는 유지보수를 어렵게 만듭니다.
이 문제를 해결하기 위해 다양한 CSS 라이브러리가 등장했습니다.

각 라이브러리는 장단점을 가지고 있어, 프로젝트에 맞는 라이브러리를 선택하는 것이 중요합니다.

저는 여러 CSS 라이브러리를 사용해보면서 겪은 경험을 토대로
SCSS, Styled Components, Emotion, Tailwind CSS의 특징과 장단점을 정리해보았습니다.

npm trends

최근 2년간 인기 CSS 라이브러리인 SCSS, Styled Components, Emotion, Tailwind CSS의 다운로드 수를 보면 각 라이브러리의 다운로드 수가 500만회 이상으로 나타났습니다.
이는 다양한 팀에서 각자의 취향과 필요에 맞춰 여러 라이브러리를 활발하게 사용하고 있음을 시사합니다.

특히 Tailwind CSS는 Next.js의 적극적인 권장에 힘입어 빠르게 성장하며 주목할 만한 성장세를 보이고 있습니다.
또한 SCSS는 여전히 많은 팀에서 사용되고 있으며, 꾸준한 사용량을 유지하며 높은 인기를 보여주고 있습니다.

다음으로는 SCSS로 다운로드 순으로 정리해보았습니다.

1. SCSS: CSS의 전처리기

가장 기본적인 CSS 라이브러리인 SCSS는 CSS의 문법을 확장하여 변수, 중첩, 믹스인 등 강력한 기능을 제공합니다.

마치 JavaScript처럼 CSS를 작성할 수 있게 되어 코드의 재사용성과 유지보수성이 크게 향상됩니다.

SCSS 변환 예시

변수 도입 (Before):

.container {
  width: 800px;
  margin: 0 auto;
}

변수 도입 (After):

$base-width: 800px;
 
.container {
  width: $base-width;
  margin: 0 auto;
}

반복되는 값을 변수로 정의하여 한 곳에서 변경하면 전체 스타일 시트에 적용되어 유지보수가 훨씬 편리해집니다.

중첩 구조 (Before):

.header h1 {
  font-size: 24px;
  color: #333;
}
 
.nav ul li a {
  color: white;
  text-decoration: none;
}

중첩 구조 (After):

.header {
  h1 {
    font-size: 24px;
    color: #333;
  }
}
 
.nav {
  ul {
    li {
      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}

CSS 선택자를 중첩하여 사용하면 코드의 구조가 명확해지고 가독성이 향상됩니다.

장점:

생산성 향상: 변수, 중첩, 믹스인 등 다양한 기능으로 CSS의 한계를 극복하고 생산성을 높입니다.
구조화 및 재사용성: 코드를 체계적으로 관리하고 재사용하여 유지보수를 용이하게 합니다.

단점:

컴파일 과정: SCSS 코드는 브라우저에서 바로 해석되지 않으므로 CSS로 컴파일하는 과정이 필요합니다. (빌드 시점에 처리)

총평:

다른 CSS 라이브러리와 함께 사용될 정도로 스타일 관리에 유용하며, 특히 대규모 프로젝트에서 효율적입니다.
SCSS는 emotion이나 다른 라이브러리와 곁들여서 사용하는 경우도 있습니다.

2. Tailwind CSS

Tailwind CSS는 다양한 스타일의 컴포넌트(예: 버튼, 카드, 컨테이너)를 미리 만들어 놓았습니다.
이 컴포넌트들을 HTML에 바로 적용하고, 필요에 따라 추가적인 스타일을 조합하여 원하는 디자인을 쉽고 빠르게 만들 수 있습니다.
또한, 화면 크기에 따라 스타일을 다르게 적용하는 반응형 디자인도 간편하게 구현할 수 있습니다.

tailwindCSS 적용 예시

<div class="container mx-auto bg-gray-100 p-4 rounded-md sm:px-6 md:max-w-2xl lg:max-w-4xl">
  <h1 class="text-2xl font-bold mb-2">Tailwind CSS 예시</h1>
  <p class="text-gray-700">
    Tailwind CSS는 유틸리티 클래스를 사용하여 빠르고 쉽게 스타일을 적용할 수 있습니다.
    다양한 화면 크기에 대응하는 반응형 디자인도 간편하게 구현할 수 있습니다.
  </p>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    버튼
  </button>
</div>

설명:

container: Tailwind CSS에서 미리 만들어 놓은 컨테이너 컴포넌트입니다.
mx-auto: 컨테이너를 수평 중앙 정렬합니다.
bg-gray-100: 컨테이너의 배경색을 밝은 회색으로 설정합니다.
p-4: 컨테이너 내부에 모든 방향으로 4만큼의 패딩을 추가합니다.
rounded-md: 컨테이너 모서리를 둥글게 만듭니다.
sm:px-6: 화면 너비가 640px 이상일 때 좌우 패딩을 6만큼으로 변경합니다. (sm: small screens)
md:max-w-2xl: 화면 너비가 768px 이상일 때 컨테이너의 최대 너비를 2xl로 제한합니다. (md: medium screens)
lg:max-w-4xl: 화면 너비가 1024px 이상일 때 컨테이너의 최대 너비를 4xl로 제한합니다. (lg: large screens)

위 예시처럼 Tailwind CSS는 sm:, md:, lg: 등의 접두사를 사용하여 특정 화면 크기에서만 스타일을 적용하는 반응형 클래스를 제공합니다.
이를 통해 다양한 기기 화면에 맞춰 디자인을 최적화할 수 있습니다.

장점:

빠른 개발 속도: 미리 정의된 클래스를 사용하여 스타일을 빠르게 적용할 수 있습니다.
반응형 디자인: 반응형 디자인을 위한 유틸리티 클래스를 제공하여 다양한 화면 크기에 대응하기 쉽습니다.

단점:

HTML 마크업 복잡성 증가: 많은 클래스를 사용하면 HTML 마크업이 길어지고 복잡해질 수 있습니다.
학습 곡선: Tailwind CSS의 방대한 유틸리티 클래스를 익히는 데 시간이 필요합니다.

총평:

Tailwind CSS는 빠른 개발 속도와 일관성 있는 디자인을 중시하는 프로젝트에 적합합니다.
컴포넌트 기반 개발 방식과 잘 어울리며, 디자인 시스템을 구축하여 효율적인 스타일 관리를 할 수 있습니다.
하지만 HTML 마크업의 복잡성 증가와 초기 학습 곡선은 고려해야 할 부분입니다.

사용하는 기업:

코드너리 기준으로 12개의 기업이 사용한다고 적혀있습니다.
최근 tailwindCSS가 많이 떠오르면서 이보다 더 많이 사용할 것으로 예상합니다.

3. Styled Components & Emotion

Styled Components와 Emotion은 CSS-in-JS 라이브러리로, 자바스크립트 코드 내에서 CSS 스타일을 정의하고 컴포넌트와 함께 관리합니다.

컴포넌트의 상태(props)에 따라 스타일을 유연하게 변경할 수 있어, 버튼 클릭이나 사용자 입력 등에 반응하는 인터랙티브한 UI를 만들기 좋습니다.

Styled Components 예시

import styled from 'styled-components';
 
const Button = styled.button`
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
 
  &:hover {
    background-color: #3e8e41;
  }
`;
 
function App() {
  return (
    <div>
      <Button>Styled Components 버튼</Button>
    </div>
  );
}

emotion은 emotion/styled를 통해 사용할 수 있습니다.
styled Components와 다르게 인라인 스타일링도 가능합니다.

Emotion css 예시

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
 
const buttonStyle = css`
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
 
  &:hover {
    background-color: #3e8e41;
  }
`;
 
function App() {
  return (
    <div>
      <button css={buttonStyle}>Emotion 버튼</button>
    </div>
  );
}

위처럼 인라인 스타일을 통해 관리할 수 있습니다.

장점:

컴포넌트 기반 스타일링: 컴포넌트와 스타일을 함께 관리하여 코드의 가독성과 유지보수성을 높입니다.
동적 스타일링: JavaScript 변수와 로직을 사용하여 스타일을 동적으로 변경할 수 있습니다.
테마 관리: 테마를 쉽게 변경하고 관리할 수 있습니다.
CSS-in-JS 장점: CSS 전역 문제를 해결하고, JavaScript의 강력한 기능을 활용하여 스타일을 관리할 수 있습니다.

단점:

런타임 오버헤드: 스타일 계산이 런타임에 이루어지므로 성능에 영향을 줄 수 있습니다.
App Router 지원: next app router를 현재 지원하지 않습니다.

총평:

Styled Components와 Emotion은 React 생태계에서 많이 사용되는 CSS-in-JS 라이브러리입니다.
컴포넌트 기반 스타일링과 동적 스타일링을 통해 유연하고 강력한 CSS 관리를 가능하게 하지만, RSC(React Server Components)를 지원하지 않는 점은 고려해봐야할 부분입니다.

사용하는 기업:

코드너리 기준으로 대한민국에서 가장 많이 사용하는 CSS-in-JS 라이브러리는 Styled Components입니다.

emotion도 통계에 집계된 것보다 더 많이 사용할거라고 생각하지만 styled components가 가장 많은 것으로 예상합니다.

결론

각 CSS 라이브러리는 장단점을 지니고 있습니다.
따라서 프로젝트의 규모, 복잡도, 팀의 숙련도, 개발 방식 등을 종합적으로 고려하여 최적의 라이브러리를 선택하는 것이 중요합니다.

SCSS는 CSS 전처리기로, 변수, 중첩, 믹스인 등 강력한 기능을 사용하여 CSS를 더욱 효율적으로 작성하고 관리할 수 있습니다.
Tailwind CSS는 빠른 스타일링과 일관된 디자인 시스템 구축을 우선시하는 경우에 매력적인 선택지입니다.
Styled Components와 Emotion은 컴포넌트와 스타일을 긴밀하게 연결하고 동적인 스타일링을 원하는 React 프로젝트에 이상적입니다.

어떤 라이브러리를 선택하든 꾸준한 학습과 숙련을 통해 CSS 스타일링의 효율성을 극대화하고 유지보수를 용이하게 만들 수 있습니다.

감사합니다.

출처:
https://npmtrends.com/@emotion/react-vs-sass-vs-styled-components-vs-tailwindcss
https://www.codenary.co.kr/techstack/list
https://tailwindcss.com/
https://sass-lang.com/
https://emotion.sh/docs/introduction
https://styled-components.com/