CSS 라이브러리 비교

3주차

CSS 라이브러리 비교

hwiy 2025. 5. 2. 19:29

안녕하세요! 웹 36기 YB 황인영입니다.

웹 애플리케이션이 점점 복잡해지고 컴포넌트 기반 개발이 많아지면서

스타일을 어떻게 관리하고 유지할 것인지도 개발 생산성과 직결되는 문제가 되었습니다.

과거에는 단순히 .css 파일에 작성했지만, 지금은 프로젝트 구조, 재사용성, 퍼포먼스 등을 고려해 다양한 스타일링 전략이 존재합니다.

이번 글에서는 주요 스타일링 방식들을 정리하고, 각각의 개념과 장단점을 비교하도록 하겠습니다.

CSS-in-CSS

CSS-module

CSS를 각 컴포넌트 단위로 분리하고, 자동으로 클래스명 해시화를 통해 충돌을 방지하는 방식입니다.

/* Button.module.css */
.button {
  background-color: green;
  color: white;
}

import styles from './Button.module.css';
<button className={styles.button}>Click</button>

💟 장점

기존 CSS 문법 그대로 사용 가능
클래스 충돌 없음
컴포넌트 기반 개발에 잘 맞음

⚠️ 단점

JS에서 동적 스타일 적용은 다소 불편
전역 스타일 관리 어려움

CSS preprocessor

기존 CSS 문법에 변수, 중첩, 믹스인, 함수 등 프로그래밍 개념을 추가한 확장형 CSS입니다.

$primary-color: purple;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

💟 장점

반복되는 스타일 간결하게 표현 가능
유지보수성과 확장성 향상

⚠️ 단점

런타임 동작이 아님 → 빌드 필요
최신 CSS 기능에 밀리는 추세 (ex: CSS 변수, nesting)

CSS-in-JS

Styled-component

template literal을 사용해 styled.div 형태로 스타일 선언하는 방식입니다.

import styled from 'styled-components';

const Button = styled.button`
  background: tomato;
  color: white;
`;

<Button>Click</Button>

💟 장점

React 친화적 문법
props 전달로 조건부 스타일 쉽게 구현
테마 및 전역 스타일 지원

⚠️ 단점

런타임 성능 비용 존재
번들 크기 커질 수 있음

Emotion

가볍고 빠른 CSS-in-JS 라이브러리로, styled, css, Global 등 다양한 스타일 방식 지원합니다.

/** @jsxImportSource @emotion/react */
import styled from '@emotion/styled';

const Button = styled.button`
  background-color: navy;
  color: white;
`;

<Button>Click</Button>

💟 장점

css prop, styled, ClassName, Global 등 문법 유연함
빠른 성능 (Babel 플러그인 최적화 가능)
TypeScript와 궁합 좋음

⚠️ 단점

여러 방식이 혼용될 수 있어 팀 규칙 필요

Styled-JSX

Next.js 기본 지원 CSS-in-JS 으로, 컴포넌트 내부에 <style jsx> 태그를 선언해 스타일 적용하는 방식입니다.

export default function Button() {
  return (
    <>
      <button>Click</button>
      <style jsx>{`
        button {
          background: teal;
          color: white;
        }
      `}</style>
    </>
  );
}

💟 장점

Next.js와 통합됨
컴포넌트 단위 스타일링 자동 적용

⚠️ 단점

React 외에서는 사용 불편
CSS 문법만 지원 (Sass 등 불가)

Utility First CSS

Tailwind CSS

미리 정의된 유틸리티 클래스들을 조합해 스타일을 구성하는 방식입니다.

<button class="bg-red-500 text-white py-2 px-4 rounded">
  Click
</button>

💟 장점

빠른 UI 개발
클래스명만으로 디자인 구현 가능
정적 분석 및 퍼지(Purge) 기능으로 번들 최적화

⚠️ 단점

HTML이 지저분해질 수 있음
커스텀 디자인 시스템 만들기 전까지 러닝 커브 존재

CSS 프레임워크

Bootstrap

가장 널리 사용되는 CSS 프레임워크 중 하나로, 반응형 그리드 시스템, UI 컴포넌트, 유틸리티 클래스를 제공합니다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<button class="btn btn-primary">Click</button>

💟 장점

바로 사용할 수 있는 다양한 UI 구성 요소
반응형 레이아웃 지원
커뮤니티와 문서가 풍부함

⚠️ 단점

커스터마이징 어려움 (디자인이 강하게 고정됨)
불필요한 CSS 로딩 가능성
클래스 의존성이 높아 HTML이 복잡해질 수 있음

결론적으로,, 언제 어떤 방식을 선택하는게 좋을지는 다음과 같이 분류할 수 있습니다.

정적 사이트, 간단한 구조	CSS-in-CSS, CSS Preprocessor
컴포넌트 기반 프로젝트	CSS Modules, CSS-in-JS
동적 스타일이 많은 SPA	Emotion, styled-components
빠른 UI 조립, 디자인 시스템 필요	Tailwind CSS, Bootstrap
Next.js 사용 시 기본 제공 방식	Styled-JSX

적절한 스타일링 방식을 선택해서 플젝을 예쁘게 꾸며보면 좋을 것 같습니다 🧚