서론

이번 디자인 시스템 회의는 각자 하나의 CSS 라이브러리를 맡아 조사하고 서로의 내용을 공유하는 방식으로 진행되었다. 이번에 TailwindCss를 자세하게 파헤쳐보고자 생각했었는데, 막상 조사를 해보니 보다 매력적인 Uno Css에 대해 알게 되었다.

Atomic CSS

UnoCSS가 무엇인지 알아보기 위해 이것이 어떻게 등장하게 되었는지 흐름을 알아보자!

Atomic CSS는 utility-first라고도 불리며, 필요할만한 모든 CSS utility를 미리 만들어놓고 사용하는 방식이다. tailwindCSS를 예로 들면, m-1이라는 클래스는 4px짜리 마진을, flex라는 클래스는 display: flex를 의미한다.

Purge와 on-demand

초기 Tailwind는 CSS 용량이 크다는 문제점이 있었다. 이를 해결하기 위해 첫번째 방법으로 PurgeCSS를 고안해내었다. 이는 사용하지 않는 규칙은 제거하는 방법이다. 하지만, 여전히 개발 환경에서는 큰 CSS 파일을 가지고 있고, production 환경에서만 purge를 적용하여 용량을 줄였기 때문에 개발 환경과 production 환경이 달라진다는 단점이 있었다.

이 때, Windi CSS가 on-demand 방식을 들고 등장했다.

기존 방식을 그림으로 그려보면 위와 같다. 기존 방식은 만들어 놓고 사용하지 않는 불필요한 코드뿐만 아니라, 낭비되는 부분이 꽤 있다.

on-demand 방식은 기존 방식에서 scan과 코드 생성의 순서를 변경함으로써 낭비되는 영역을 줄일 수 있었따. 또한, production 환경과 개발 환경이 동일한 코드를 사용할 수 있게 되었다.

이 방법을 통해 Windi CSS는 tailwind의 속도를 약 100배 정도 개선했고, Tailwind는 이후 Tailwind만의 on-demand 방식인 JIT이라는 실험적인 기능을 내놓게 된다.

이제, UNO!

UNO CSS는 Windi CSS, Tailwind와 마찬가지로 atomic CSS 방식을 제공한다. 조사를 하며 알아보니 UNO CSS를 개발한 사람이 vite 팀원 중 한 명이던데, 속도에 미친 팀 답게 미친 속도를 확인할 수 있다.

게다가 속도만 빠른 게 아니라, UNO만의 장점이 곳곳에 산재해있다.

커스텀

아마 개발자가 UNO CSS를 만들게 된 계기는 Tailwind와 Windi CSS를 사용하면서 utility를 커스텀하는 데에 불편함을 느꼈기 때문인 것 같다.


위 이미지처럼 종종 만들고 싶은 CSS보다 더 긴 설정 코드를 작성해야할 때가 있고, on-demand 방식에 걸맞는 설정 추가가 아니라고 생각하여 이런 불편을 해결하고자 하였다고 한다.

UNO에서는...

그렇게 탄생한 UNO CSS에서는 정적인 룰을 추가할 때에는 이렇게 추가하고,

rules: [
  ['m-1', { margin: '0.25rem' }]
]

동적인 룰을 추가할 때에는 이렇게 추가한다.

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

사실 아직 기존 방식이 왜 on-demand에 부합하지 않는다는 건지는 모르겠지만, 일단 코드가 훨씬 간결하고 보기 쉬워졌다.

hover나 important와 같은 variants도 추가하기 쉬워졌고,

presets라는 놀라운 기능도 제공한다.
사실 이게 가장 놀라웠는데, tailwind, windi CSS, bootstrap 등 원하는 presets을 가져오면 이를 사용할 수 있다. 아마 custom preset을 만들어 공유하는 것도 가능한 것 같다.

예쁜 코드

사실 팀에 tailwind를 적용하자고 하면 반대하는 사람들 열에 아홉은 가독성이 떨어진다고 말을 하는데, 이 때문에 Windi CSS에서는 Attributify mode라는 것이 생겼다. 그리고, 이를 마음에 들어했던 UNO CSS의 개발자는 UNO에도 해당 기능을 추가했다.

그래서 이제 가독성 떨어진다는 얘기도 다 옛말이 되어버렸다.

아이콘

사실 이 부분이 가장 마음에 들었다.
UNO CSS를 사용하면 class만으로 아이콘을 이용할 수 있다. 더 이상 힘들게 figma에서 svg export하고, 아이콘 컴포넌트 만들고, 관련 타입 정의하고 할 필요 없이 사용할 수 있다.
게다가 hover와 같은 적용도 훨씬 쉬워졌다.

<div
  class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy"
/>

(다음 기회에 꼭 써봐야지 ㅎㅎ)

결론

UNO CSS 너무 맛도리인데, 디자인 시스템 회의에서 탈락해서 너무 아쉽다. 아직 아는 게 부족해서 이 완벽한 CSS 라이브러리를 잘 어필하지 못한 것 같아 열심히 발전해야겠다...