[ASAC 06] CSS 개발 확장 도구

이 글은 ASAC 06기를 수강하며 강의 자료 참고 및 추가 자료 수집을 통해 작성된 글입니다.

 

CSS 개발 확장 도구

CSS Preprocessor

• CSS Preprocessor = Bundler + Transpiler

JS를 통한 DOM 조작의 개발 편의성 및 성능 문제로 라이브러리나 프레임워크가 등장한 것처럼, CSS에도 개발 편의성을 위해 CSS Preprocessor가 등장했다.

기능

• Enhanced CSS => CSS 확장 문법을 제공한다.
• 번들링을 통해 파일 갯수를 줄여준다.

대표적인 CSS Preprocessor로 SASS가 있다. SASS는 트랜스파일링 + 번들링을 통해 최종 CSS로 변환시켜준다.

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

1. CSS Preprocessor : SASS, SCSS
   • 확장 문법 및 번들링 제공
2. CSS Framework : Tailwind CSS
   • CSS 활용을 위한 방법론 및 디자인 시스템, 유틸리티 클래스 제공
   • 디자인 시스템은 기본이 되는 단위를 정의한 일종의 Theme이다.
     ex) 어떤 디자인 시스템의 w-40은 width 40px를 뜻할 수 있겠지만,
     다른 디자인 시스템의 w-40은 widht 40rem을 뜻할 수 있다. 디자인 시스템마다 각각의 기준이 존재한다.
   • 유틸리티 클래스 = CSS 스타일을 미리 클래스로 정의해둔 것.
   • 디자인 시스템 사용의 장점 -> 기준의 통일
3. UI Framework : Tailwind UI, Material UI, Chakra UI, Shadcn/ui
   • 디자인 시스템 및 UI 컴포넌트 제공
   • UI 컴포넌트를 직접 HTML 태그를 확장하여 만들지 않아도 되고
   • 간단하게 디자인 시스템을 구축하여 일관된 Look & Feel 제공 가능
   • 보통 Back Office(내부 사용자)용 애플리케이션 개발에 사용된다. (외부 사용자용 애플리케이션은 디자이너가 존재)
   • 그렇기 때문에 CSS Framework와 UI Framework를 섞어서 사용하지 않는다. 디자인 시스템 충돌 발생 가능성이 있기 때문이다. 꼭 필요한 경우에는 공식 문서에서 방법을 제공한다.

Tailwind UI != Tailwind CSS
Tailwind CSS는 무료, Tailwind UI는 유료

Bootstrap의 분류에 관련해서는 다양한 의견이 있으나 대개 프론트엔드 프레임워크로 분류한다.