← 목록으로 돌아가기

[TIL] CSS 단순 정리(SCSS, Tailwind, UnoCSS)

2024/03/12

SCSS Tailwind UnoCSS

SCSS

SCSS는 CSS의 확장 언어로, 프로그래밍적 기능(변수, 믹스인, 중첩 등)을 추가한 전처리기입니다.

전처리 과정

브라우저는 순수 CSS만 이해하므로, 빌드 타임에 SCSS를 CSS로 변환해야 합니다.

파싱: SCSS 컴파일러가 소스 코드를 읽고 토큰화합니다.
AST 생성: 파싱된 토큰을 추상 구문 트리(Abstract Syntax Tree)로 변환합니다.
변환: 변수 치환, 믹스인 확장, 중첩 규칙 평탄화, 함수 실행 등을 처리합니다.
최적화: 중복 제거, 선택자 병합 등의 최적화를 수행합니다.
CSS 생성: 최종 순수 CSS 코드를 출력합니다.

장점:

컴파일 타임 최적화 (변수 계산 등이 빌드 단계에서 완료)
코드 재사용성
소스맵 지원으로 디버깅 용이

단점:

빌드 시간 증가
런타임 최적화 불가능 (모든 스타일이 미리 생성됨)
빌드 도구 의존성 (sass 컴파일러 필수)

Atomic CSS란?

Atomic CSS는 각각의 CSS 클래스가 단일 스타일 속성만을 담당하는 방법론입니다. 마치 원자(Atom)처럼 더 이상 쪼갤 수 없는 최소 단위의 스타일 클래스들을 조합하여 UI를 구성합니다.

/* 전통적인 CSS */
.card {
  margin: 1rem;
  padding: 0.5rem;
}

/* Atomic CSS */
.m-4 {
  margin: 1rem;
}
.p-2 {
  padding: 0.5rem;
}

대표적인 Atomic CSS 프레임워크: Tailwind CSS, UnoCSS, Tachyons

Tailwind CSS

Tailwind CSS는 HTML에서 미리 정의된 유틸리티 클래스를 조합하여 스타일링하는 방식입니다. SCSS와 달리 Tailwind는 JIT(Just-In-Time) 컴파일 방식을 사용하여 실제 사용된 클래스만 CSS로 생성합니다.

Tailwind의 컴파일러가 빌드 타임에 동작합니다:

파일 스캔: 소스 파일(HTML/JSX)에서 클래스명 추출
CSS 생성: 실제 사용된 클래스의 CSS만 생성
PostCSS 처리: 벤더 프리픽스 추가, 최적화
출력: 최종 CSS 파일 생성

장점

빠른 컴파일 속도: JIT로 필요한 클래스만 생성
작은 번들 크기: 사용한 것만 포함

단점

동적 스타일링 제한: 런타임에 클래스명을 동적으로 생성하기 어려움
HTML 가독성 저하: 많은 클래스명으로 인한 마크업 복잡성

UnoCSS

Tailwind CSS에서 영감을 받은 Atomic CSS 엔진으로, 더 빠른 성능과 유연성을 제공합니다.
Vite 플러그인으로 동작하며 매우 빠른 컴파일 속도를 자랑합니다:

파일 스캔: 소스 파일에서 유틸리티 클래스 탐지
규칙 매칭: 사전 정의된 규칙과 매칭하여 CSS 생성
온디맨드 생성: 필요한 시점에만 CSS 생성
최적화: 중복 제거 및 압축

장점

매우 빠른 컴파일 속도: Tailwind보다 5-200배 빠른 컴파일
작은 번들 크기: 사용한 것만 포함

단점

작은 커뮤니티: Tailwind 대비 생태계가 작음
학습 곡선: 새로운 설정 방식과 프리셋 시스템 학습 필요

목차