1. CSS 개발을 쉽게 돕는 CSS Preprocessor

CSS Preprocessor(CSS 전처리기) : CSS를 작성할 때 사용하는 특별한 도구
기존 CSS에서는 지원하지 않는 특별한 기능이 포함되어 있음.
전처리기를 사용하면 복잡한 CSS를 더 효율적으로 작성하고 유지보수하기 쉽게 만들수 있음.

특별한 기능 Enhanced CSS (CSS 확장 기능 사용): 코드를 간결하고 가독성 좋게 만들어줌.
믹스인(Mixin): 반복되는 CSS 코드를 재사용할 수 있게 하는 기능.
중첩 셀렉터(Nesting Selector) : CSS를 계층적으로 작성할 수 있는 기능.
상속 셀렉터(Inheritance Selector) : 특정 스타일을 다른 곳에서 상속받아 사용할 수 있는 기능.

1.1. CSS Preprocessor = Transpiler + Bundler?

CSS 전처리기는 기본적으로 Transpiler(트랜스파일러) 역할을 한다.
이를 통해 확장된 CSS문법(SASS, LESS emd)을 표준 CSS로 변환, 여러 파일(CSS 파일)을 병합(합치기) 할수 있는 기능도 제공(파일의 구조를 효율적으로 관리)
따라서 번들러 역할은 직접적으로 하지 않지만, 일부 전처리 또는 도구(Sass와 Webpack 조합 등)가 유사한 파일 합치기 기능을 제공.

Bundler라고 하기엔 애매하다!!!
Bundler(번들러)는 기본적으로 webpack과 같이 포괄적인 파일관리(CSS뿐만 아니라, JS, 이미지, 폰트 등 모든 자원)를 하기 위한 도구이다.

1.2. CSS Preprocessor / CSS Framework / UI Framework 구별하기

잠깐! 프레임워크(Framework)란?
소프트웨어 개발을 위한 뼈대 또는 기본 구조를 제공하는 도구입니다.
특정 유형의 애플리케이션을 더 빠르고 효율적으로 개발할 수 있도록 미리 정의된 코드, 규칙, 설계 패턴, 기능 등을 포함.

• CSS Preprocessor : SASS, SCSS

  • CSS 활용을 위한 확장 문법들을 제공

• CSS Framework
  CSS 프레임워크는 스타일링을 위한 유틸리티 클래스를 제공합니다.
  사용자가 필요한 스타일을 조합하여 자신만의 디자인을 구축할 수 있습니다.

  • Tailwind CSS : 클래스 이름만으로 빠르게 스타일을 적용할 수 있는 유틸리티 기반 스타일링 프로세스를 구조화하고 최적화 하는 CSS 프레임워크.
    • 미리 정의된 유틸리티 클래스 제공 : 색상, 여백, 크기 등 스타일링에 필요한 모든 속성을 클래스로 제공.
    • Purge 및 최적화 : 사용하지 않는 클래스를 자동으로 제거하여 CSS 번들 크기를 최소화.
    • 설정 가능 : tailwind.config.js를 통해 테마와 설정을 커스터마이징 가능.
    • 일관된 설계 : 팀에서 동일한 유틸리티 클래스를 사용하여 일관된 디자인 유지 가능.
  • Bootstrap : 미리 정의된 스타일과 컴포넌트를 제공하는 CSS 프레임워크.

• UI Framework
  UI 프레임워크는 미리 정의된 디자인 시스템과 UI 컴포넌트(버튼, 카드, 모달 등)를 제공합니다.
  사용자가 HTML과 CSS를 새로 작성하지 않아도, 이미 설계된 구성 요소를 바로 가져다 쓸 수 있습니다.

  • Material UI : Google의 Material Design 시스템을 기반으로 한 React 컴포넌트 라이브러리
  • Chakra UI : 간단하고 접근성 높은 React 기반 UI 라이브러리
  • Shadcn/ui : 최신 디자인 트렌드에 맞춘 Tailwind 기반 UI 라이브러리

  참고 : 그렇기 때문에 CSS Framework 와 UI Framework 를 합쳐 사용하지 않는다

  • 피치못할 상황이 아니라면 Tailwind CSS + Material UI 하지 말것
    • 디자인 시스템 충돌 발생 : CSS 프레임워크와 UI 프레임워크는 각자의 디자인 시스템을 사용. 이를 혼합하면 일관성 있는 스타일을 유지하기 어려울 수 있음.(물론 그렇게 사용해야할수밖에 없을시 공식 문서에서 방법을 제공)
    • 복잡성 증가 : CSS 프레임워크로 스타일을 직접 작성하면서 UI 프레임워크의 컴포넌트를 사용하는 경우, 코드가 복잡해지고 유지보수가 어려워질 수 있음.

1.3. JS 프론트엔드 프레임워크 / CSS Framework 각 역할 정리

• JS 를 통한 DOM 조작을 풍부하게 → Javascript Framework (번들링 + 컴파일/트랜스파일 + 렌더링)
• CSS 설정을 풍부하게 → CSS Preprocessor (번들링 + 트랜스파일)