한땀한땀

최근에 개인 포트폴리오 웹사이트를 만들면서 스타일 시스템을 Vanilla Extract로 정리해 보기로 했다. 처음에는 빠르게 UI를 만들어서 배포하는 데만 초점을 뒀는데, 개발을 진행하면서 점점 구조를 정리하고 싶은 욕심이 생겼다. 단순히 "이쁜 UI"를 만드는 걸 넘어서, 스타일을 하나의 체계로 관리해보면 어떨까 하는 생각에 디자인 시스템 구조를 잡기 시작했다. 그러다 보니 자연스럽게 더 큰 규모의 프로젝트—예를 들면 내가 준비 중인 영화 추천 서비스—에까지 확장할 수 있는 아이디어들도 떠오르고 있다. 이번 글에서는 내가 어떤 방식으로 Vanilla Extract 기반의 디자인 시스템을 구성했는지, 그리고 이걸 어떻게 확장 가능한 형태로 설계했는지를 공유해보려고 한다. 토큰과 유틸리티로 시작하는 디자..

최근에 개인 포트폴리오 웹사이트를 만들기 시작했습니다. 디자인 시스템을 직접 구성하면서, 이번에는 평소 써보고 싶었던 스타일링 도구인 Vanilla Extarct를 선택했습니다. 타입 안전성과 CSS-in-Typescript의 이점을 모두 챙길 수 있다는 점에서 매력적이었고, 자연스럽게 웹사이트 테마를 어떻게 구성할지에 대해 고민하게 되었습니다. 그러던 중, Vanilla Extract에서는 테마를 정의하는 방식으로createTheme 그리고 createThemeContract 두 가지 방법을 제공하다는 걸 알게 되었고, 처음에는 어떤 차이가 있는지 직관적으로 잘 와닿지 않았습니다. 하지만 실제로 적용해보면서 두 방식 사이에 단순한 문법 이상의 구조적 차이와 사용성의 차이가 있다는 걸 깨닫게 되었고,결국..