Vanilla Extract

일단 vanilla extract는 CSS 라이브러리이다. TailwindCSS는 init 등의 명령어와 환경을 제공해주기 때문에 프레임워크의 성격을 띄지만 이번에 알아볼 VE는 라이브러리이다.

기본적인 사용법

VE의 기본적인 사용법은 아래와 같다. 개인적으로는 React Native를 할 때 StyleSheet를 작성하는 느낌이 들었다.

// 먼저 스타일을 정의하고,
const styles = style({
    display: 'flex',
    gap: '8px'
    backgroundColor: 'green',
});

// 이런 식으로 사용할 수 있다
<Component text={'와우'} className={styles} />

정말 쉽게 사용할 수 있다.

상태를 활용하는 방법 (조건부 스타일)

개인적으로 이게 vanilla extract의 장점이라고 느꼈다. 웹 개발을 하다보면 어떤 상태가 있을 때 해당 상태의 값에 따라 다른 스타일을 렌더링해야 할 때가 많다.

그럴 때 Vanilla extract에서 지원하는 recipe 함수를 사용해보자.

// 공통 스타일은 base 아래에 작성, 분기하고 싶은 상태를 variants 아래에 작성한다.
const box = recipe({
    base: {
      borderRadius: "8px",
      padding: "16px",
      fontSize: "24px",
      backgroundColor: "darkgray",
    },
    variants: {
      color: {
        red: {
          color: "red",
        },
        blue: {
          color: "blue",
        },
      },
    },
  }),

// 사용은 이렇게
<div className={box({color: 'red'})}>배고프다.</div>
<div className={box({color: 'blue'})}>와우</div>

이런 식으로 사용이 가능하다.

recipe 대박

recipe의 활용, compoundVariants

레시피는 상태를 스타일에 반영할 수 있다는 특징이 있다. recipe에는 단일 상태 뿐아니라 조합 상태에도 스타일링을 할 수 있다.

compoundVariants를 사용하면 아래처럼 적용이 가능하다.

상태가 A 일 때 --> BackgroundColor: white;
상태가 B 일 때 --> BackgroundColor: black;
상태가 A와 B가 둘 다 일 때 --> BackgroundColor: green;

재미없는 사용법 외의 장점에 대해서 알아보자

사용하는 것이 매우 쉽고, recipe가 base 덕분에 깔끔하게 스타일을 작성할 수 있는 것 같다. 사용법을 알아봤으니 재미없는 부분에 대해서도 알아보자

개발이 편리하다 💀

일단 작성 자체가 어렵지 않고, recipe를 통한 공통 스타일 분리 등으로 인해서 개발하기 편리하다는 장점이 있다. 그리고 기본적으로 파일이름.css.ts 형식으로 스타일 파일을 분리하는데, 그만큼 TypeScript 친화적이라는 장점도 있다.

제로 런타임 오버헤드다 💀

그리고 빌드 타임에 변환된다는 장점이 있다. 변환 방식이 크게 두 가지가 있는데 하나는 런타임에 변환되는 것이고, 다른 하나는 빌드 타임에 생성된다는 점이다. 런타임에 생성되는 경우 성능상의 오버헤드가 존재할 수 있다. CSS를 처리하는데 평소보다 노력이 들어간다는 의미이기 때문이다. 하지만 빌드 타임에 하는 경우 물론 빌드 타임이 늘어나기는 하겠지만, 실제 실행할 때 성능상의 오버헤드는 존재하지 않는다. 일반 .css 파일처럼 변환되어 처리되기 때문이다. 성능에 있어서 다른 라이브러리 대비 우위를 가져갈 수 있음이 특징이다.

Vanilla Extract로 만든 네온사인

내 생각

일단 TailwindCSS를 엄청 좋아하는 편이었기 때문에 적응하는데 시간이 조금 필요했다. 물론 Tailwind를 접하기 전에도 CSS Module이나 RN 스타일링 등을 경험했었기 때문에 어렵지는 않았다.

Vanilla Extract가 재미있었지만 TailwindCSS의 빠른 개발 경험은 못따라간다고 생각했다. Tailwind에 익숙해지면 간단한 스타일링과 레이아웃은 굉장히 빠르게 구현을 할 수 있는데, Vanilla Extract는 .css.ts 파일을 만들고 export 한 후 className에 넣어주는 과정이 포함되기 때문에 아쉬웠다.

하지만 스타일링과 코드의 명확한 분리가 쉽고, Tailwind의 단점으로 지적되는 횡으로 길어지는 코드에 대해 걱정을 하지 않아도 된다는 것이 특징이다.

나만의 결론

TailwindCSS는 아직 좋다고 생각한다. 하지만 Vanilla Extract는 어느정도 규모가 있는 프로젝트에서 스타일링에 소요되는 코스트까지 줄이고 싶거나, 테마&팔레트를 명확하게 정의하고 스타일과 코드를 완벽하게 분리하고 싶다면 선택할 수 있는 좋은 대안이라고 생각이 들었다.

CSS Library