[STOCAT] vanilla-extract에서 CVA 패턴 쓰기 : @vanilla-extract/recipes 도입기

이 글은 STOCAT 프로젝트에서 디자인 시스템 토큰을 정리하면서 발견한 코드 개선 경험을 기록한 글이다. 발단 : styleVariants가 슬슬 불편해지기 시작했다이 프로젝트는 @vanilla-extract/css를 처음 도입하여, 스타일을 관리한다.컴포넌트에 여러 외형이 필요할 때는 styleVariants를 써왔는데, MarketCard 같은 컴포넌트에서 이런 식으로 작성했었다.// MarketCard.css.tsconst base = style({ flexShrink: 0, borderRadius: 16, backgroundColor: vars.color.role.background2,});export const layout = styleVariants({ horizontal: [bas..

• format_list_bulleted 개발 일지/FrontEnd_프론트엔드
• · 2026. 3. 3.
• textsms

[STOCAT] vanilla-extract 타이포그래피 토큰, 3줄 -> 1줄로 줄이기

이 글은 STOCAT 프로젝트에서 디자인 시스템 토큰을 정리하면서 발견한 코드 개선 경험을 기록한 글이다.들어가며STOCAT 프로젝트에 vanilla-extract로 디자인 토큰 체계를 새로 구축하는 작업을 했다.색상 토큰(color.role.css.ts)과 타이포그래피 토큰(typography.css.ts)을 정의하고,기존 컴포넌트들에 순차적으로 적용하는 작업이었다.그런데 적용하다 보니 반복되는 패턴이 눈에 들어왔다.// 이게 7개 파일에 걸쳐, 최대 5군데에서 반복되고 있었다fontSize: vars.typography.body3.fontSize,fontWeight: vars.typography.body3.fontWeight,lineHeight: vars.typography.body3.lineHeig..

• format_list_bulleted 개발 일지/FrontEnd_프론트엔드
• · 2026. 2. 28.
• textsms

[STOCAT] Tailwind CSS만 쓰던 나의 vanilla-extract 첫 도전기

이 글은 STOCAT 프로젝트에서 디자인 시스템 토큰을 정리하면서 발견한 코드 개선 경험을 기록한 글이다.들어가며처음 프론트엔드 스타일링을 접한 게 Tailwind CSS였다. 유틸리티 클래스 기반의 빠른 개발 속도에 만족하면서 쭉 써왔는데, 어느 순간 한 가지 불안이 생겼다."나는 CSS-in-JS 방식을 제대로 모른다." 실무에서는 styled-components, Emotion 같은 CSS-in-JS 라이브러리가 여전히 많이 쓰인다. 채용 공고에서도 이 기술 스택을 요구하는 곳이 적지 않다. Tailwind만 써본 입장에서는 styled.div 같은 문법도, ThemeProvider 패턴도 낯설었다. 이 갭을 메우고 싶었다.CSS-in-JS를 학습하기로 마음먹은 뒤, 여러 선택지를 조사하다가 van..

• format_list_bulleted 개발 일지/FrontEnd_프론트엔드
• · 2026. 2. 26.
• textsms