왜 UnoCSS인가요?
동기
UnoCSS의 창시자인 Anthony Fu가 작성한 블로그 포스트 Reimagine Atomic CSS를 읽어보시는 것을 권장합니다. UnoCSS 뒤에 숨겨진 동기를 더 잘 이해할 수 있을 것입니다.
UnoCSS는 X와 어떻게 다른가요?
Windi CSS
UnoCSS는 Windi CSS 팀 멤버 중 한 명이 시작했으며, Windi CSS에서 수행한 작업에서 많은 영감을 받았습니다. Windi CSS는 더 이상 적극적으로 유지보수되지 않지만(2023년 3월 기준), UnoCSS를 Windi CSS의 _"정신적 후계자"_로 간주할 수 있습니다.
UnoCSS는 Windi CSS의 온디맨드 특성, attributify 모드, shortcuts, variant groups, compilation 모드 등을 상속받습니다. 그 위에 UnoCSS는 최대 확장성과 성능을 염두에 두고 처음부터 구축되어 순수 CSS 아이콘, 값 없는 attributify, tagify, 웹 폰트 등의 새로운 기능을 도입할 수 있게 되었습니다.
가장 중요한 것은 UnoCSS가 원자 CSS 엔진으로 추출되어 모든 기능이 선택적이며, 원하는 기능의 조합으로 자신만의 컨벤션, 디자인 시스템, preset을 쉽게 만들 수 있다는 것입니다.
Tailwind CSS
Windi CSS와 UnoCSS 모두 Tailwind CSS에서 많은 영감을 받았습니다. UnoCSS가 처음부터 구축되었기 때문에, 원자 CSS가 이전 작품들과 함께 어떻게 설계되었는지에 대한 훌륭한 개요를 가질 수 있고 우아하고 강력한 API로 추상화할 수 있었습니다. 상당히 다른 설계 목표를 가지고 있어서 Tailwind CSS와는 정말 사과와 사과를 비교하는 것이 아닙니다. 하지만 몇 가지 차이점을 나열해보겠습니다.
Tailwind CSS는 PostCSS 플러그인인 반면, UnoCSS는 빌드 도구와의 일급 통합 모음(포함 PostCSS 플러그인)을 가진 동형 엔진입니다. 이는 UnoCSS가 다른 곳에서 훨씬 더 유연하게 사용될 수 있음을 의미합니다(예: 즉시 CSS를 생성하는 CDN Runtime). 또한 빌드 도구와의 깊은 통합을 통해 더 나은 HMR, 성능, 개발자 경험을 제공합니다(예: Inspector).
기술적 트레이드오프를 제외하고, UnoCSS는 완전히 확장 가능하고 커스터마이징 가능하도록 설계되었지만, Tailwind CSS는 더 의견이 있습니다. Tailwind CSS 위에 사용자 정의 디자인 시스템(또는 디자인 토큰)을 구축하는 것은 어려울 수 있으며, Tailwind CSS의 컨벤션에서 벗어날 수 없습니다. UnoCSS를 사용하면 완전한 제어로 원하는 거의 모든 것을 구축할 수 있습니다. 예를 들어, 단일 preset 내에서 전체 Tailwind CSS 호환 유틸리티를 구현했으며, 다른 흥미로운 철학으로 구현된 많은 훌륭한 커뮤니티 presets이 있습니다.
UnoCSS가 제공하는 유연성 덕분에 그 위에 많은 혁신적인 기능을 실험할 수 있습니다:
Tailwind CSS와 다른 설계 목표로 인해 UnoCSS는 Tailwind CSS의 플러그인 시스템이나 구성을 지원하지 않습니다. 이는 심하게 커스터마이징된 Tailwind CSS 프로젝트에서 마이그레이션하기 어렵게 만들 수 있습니다. 이는 UnoCSS를 고성능이고 확장 가능하게 만들기 위한 의도된 결정이며, 트레이드오프가 가치가 있다고 믿습니다.