Vanilla-extract: 프론트엔드 프로젝트에서 styled-components 대신 선택한 이유

date

Aug 2, 2024

slug

why-use-vanilla-extract

author

status

Public

Tailwind를 사용하지 않는 이유

1. 기존 CSS 지식 활용을 위하여

Tailwind는 유틸리티 클래스를 사용하여 스타일을 적용하는 방식으로, 기존의 CSS 문법과 다릅니다. 새로운 문법을 배우고 적용하는 데 시간이 많이 걸리고, 기존에 쌓아온 CSS 지식을 충분히 활용하지 못한다는 느낌을 받았습니다.

2. 원하는 방식대로 구현 불가

일부 CSS 속성이나 고급 기술을 사용할 때 Tailwind에서는 한계가 있다고 느꼈습니다. 지속적인 업데이트가 이루어지겠지만, 현재로서는 원하는 스타일을 완벽하게 구현하기 어렵다고 판단했습니다.

3. 더 큰 HTML 크기

유틸리티 클래스 사용 방식은 HTML에 많은 클래스를 추가하게 되어, HTML의 다운로드 크기가 증가할 수 있습니다. 또한, CSS 문서의 크기가 커져 브라우저가 이를 탐색하고 적용하는 데 더 많은 처리가 필요하게 됩니다.

styled-components 를 적용하지 않은 이유

1. 런타임 오버헤드

styled-components 라이브러리는 컴포넌트가 렌더링될 때 스타일을 일반 CSS로 직렬화해야 하므로 런타임 오버헤드가 발생합니다.

2. 번들 크기 증가

사이트를 방문하는 각 사용자는styled-components 라이브러리를 위한 자바스크립트를 다운로드해야 하므로 번들 크기가 증가합니다.

이러한 이유로 Tailwind와 styled-components 방식 모두 학습해보았지만 저의 개발 방향과 맞지 않다고 생각하여 공부를 중단했습니다. 하지만, 기본적인 CSS를 사용하는 것만으로는 한계가 있어, 새로운 방법을 찾던 중 Vanilla-extract라는 라이브러리를 알게 되었습니다.

Vanilla-extract를 사용하기로 한 이유

1. zero-runtime

Vanilla-extract는 styled-components와 달리 빌드 시점에서 CSS를 생성합니다. 런타임에 추가적인 자바스크립트 실행 없이 이미 생성된 CSS를 사용하므로 런타임 성능이 개선됩니다.

2. 스타일 재사용성

Vanilla-extract에서는 스타일 객체를 배열 형태로 제공하여 중복된 스타일 코드를 줄일 수 있습니다. 예를 들면 아래 코드처럼 사용할 수 있습니다.


import { style } from '@vanilla-extract/css';

const baseButton = style({
  padding: '10px 20px',
  fontSize: '16px',
  borderRadius: '5px',
  border: 'none',
  cursor: 'pointer',
});

const primaryButton = style({
  backgroundColor: 'blue',
  color: 'white',
});

const secondaryButton = style({
  backgroundColor: 'gray',
  color: 'black',
});

const disabledButton = style({
  backgroundColor: 'lightgray',
  color: 'darkgray',
  cursor: 'not-allowed',
});

export const buttonStyles = {
  primary: [baseButton, primaryButton],
  secondary: [baseButton, secondaryButton],
  disabled: [baseButton, disabledButton],
};

3. 타입 안정성

Vanilla-extract는 TypeScript로 작성되었으며, 스타일과 테마 변수에 대한 타입 검사를 제공합니다. 이는 스타일 작성 시 타입 검사, 테마 변수 타입 검사, 스타일 변형 타입 검사를 통해 버그를 방지할 수 있습니다.

4. 개발자 경험 (DX)

styled-components보다 Vanilla-extract 형식이 더 편리하게 느껴지며, 개발 속도나 효율 면에서도 더 잘 맞습니다.

Vanilla-extract의 단점

1. 동적 스타일링 불가

Vanilla-extract는 빌드 시점에 CSS를 생성하기 때문에 CSS props를 이용한 동적 스타일링이 불가능합니다. 그러나 여러 기능들을 제공해줘서 CSS 변수를 사용하면 완벽하진 않지만 동적 스타일링이 가능하다고 하여, 이를 더 깊이 공부해볼 계획입니다.

Sprinkles Recipes Dynamic

2. SSR 추가 설정 필요

Next.js와 같은 SSR 환경에서는 Vanilla-extract 사용 시 추가적인 설정이 필요합니다. 이 부분에 대해서는 더 공부한 후에 다시 글을 작성할 예정입니다.

결론

기존 프로젝트들과 새로운 프로젝트에 Vanilla-extract를 도입해볼 예정입니다. Zero-runtime CSS의 장점을 살리면서, 스타일링 효율성을 높일 수 있을 것이라 기대합니다.

Vanilla-extract를 도입하게 된 이유와 그 장단점에 대해 작성해보았습니다. 만약 틀린 부분이 있거나 추가적으로 알고 싶은 내용이 있다면 언제든지 댓글로 알려주세요!