20260113 vanila-extract 공부

 

 

유레카에서 종합 프로젝트를 진행하게 되었고 기획하는 단계에서 기술 스택을 정했다. 팀원분 중 한분이 CSS에 vanila-extract라니 최신 기술이 있다고 알려주셔서 다같이 사용해보기로 했다. 처음 들어봤기 때문에 따로 공부를 하고 정리를 해볼까한다. vanilla-extract의 공식 사이트와 github의 readme 등을 참고했고 추가적인 공부는 정리된 블로그글들을 참고했다.

 

vanilla-extract

출처 : https://jgjgill-blog.netlify.app/post/css-in-ts-vanilla-extract/

 

TypeScript로 작성된 실행 시간이 필요 없는 스타일시트이다. 

기본적으로 타입스크립트 기반의 CSS 모듈이라고 할 수 있는데, 범위가 지정된 CSS 변수와 훨씬 더 많은 기능을 제공한다.

 

기존 스타일 방식의 문제점

CSS 모듈의 한계

CSS 모듈은 여전히 많이 쓰이는 방식이고 클래스 네임 충돌을 방지하고 설정히 간단하고 런타임 비용이 없다는 장점이 있다.

 

하지만 vanilla-extract와 비교했을 때

1. 타입 안정성이 없다.
2. 디자인 토큰 관리가 어렵다.
3. 조건부 스타일 관리가 번거롭다.
4. 스타일과 로직의 분리가 애매하다. -> 구조가 커질수록 추적 어려움

이는 이전 프로젝트에서 적용했던 방식인데 간단하면서도 조건부 스타일이 까다로워지면 가독성면이나 작성할 때에도 어려움이 생긴다.

CSS-in-JS 라이브러리 단점

CSS-in-JS는 CSS에서도 자바스크립트 문법을 사용할 수 있다. 컴포넌트 파일과 관련된 코드를 같이 둘 수 있으며 기본적으로 스타일을 지역 스코프로 지정한다.

 

하지만 CSS-in-JS는 런타임 오버헤드를 발생시킨다. 일반 CSS로 직렬화 과정을 거치면서 앱의 성능에 영향을 끼친다. 또한, 번들 크기도 증가한다.

 

vanilla-extract 주요 특징 Zero runtime

Zero runtime

출처 : https://blog.logrocket.com/comparing-top-zero-runtime-css-js-libraries/

제로 런타임은 런타임에 스타일을 생성/계산하는 JavaScript 코드가 전혀 실행되지 않는 것이다.

즉, 브라우저에서 자바스크립트가 실행되는 시점에 스타일 관련 로직이 없다. 

vanilla-extract 사용법

스타일 파일 생성

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

export const button = style({
  padding: '12px 16px',
  borderRadius: '8px',
  backgroundColor: '#5f9cff',
  color: '#fff',
});

컴포넌트에서 사용

import { button } from './button.css';

export function Button() {
  return <button className={button}>Click</button>;
}

 

결과적으로 CSS Module처럼 className만 사용하는 방식이다.

 

느낀 점

CSS를 모듈방식으로 이전 프로젝트에 적용해보았는데, 이번 기회에 새로운 방식을 적용해볼 수 있을 것 같아 기대가 된다. 하지만 한 번 공부한 걸로 완벽한 이해가 되지는 않았다. 직접 사용해보고 체화하면서 이해를 넓혀야될 것 같다.

 

참고 자료 URL

1. https://vanilla-extract.style/documentation/api/create-var/

createVar — vanilla-extract

2. https://jgjgill-blog.netlify.app/post/css-in-ts-vanilla-extract/

CSS에 타입을 입히다 (vanilla-extract)

3. https://github.com/vanilla-extract-css/vanilla-extract

GitHub - vanilla-extract-css/vanilla-extract: Zero-runtime Stylesheets-in-TypeScript