FE 디자인 시스템 재구축, Vanilla Extract와 컴파운드 컴포넌트 도입으로 UI/UX 통합!

Emotion 기반 기존 디자인 시스템의 문제점을 파악하고, Vanilla Extract를 활용한 제로 런타임 스타일링 방식으로 전환

CSS 변수 기반 디자인 토큰 도입 및 FOUC 현상 해결, 디자인 시스템의 가독성과 성능 개선

컴파운드 컴포넌트 패턴과 계층적 설계를 통해 상품 카드 컴포넌트 일원화 및 유지보수성 향상

Vanilla Extract 선택 배경: 제로 런타임과 타입 안정성

기존 Emotion의 런타임 스타일 방식은 성능 저하와 RSC 호환성 문제를 야기했다. 따라서 Vanilla Extract를 선택하여 빌드 타임에 스타일을 생성하고, 타입 안전성을 확보했다. 구체적으로, CSS 변수를 활용하여 디자인 토큰을 관리하고, 런타임 의존성을 제거하여 번들 사이즈 감소를 달성했다.

CSS 변수 기반 테마 관리: FOUC 해결과 디자인 토큰 가독성 향상

기존 ThemeProvider 기반 테마 관리 방식은 FOUC 현상과 리렌더링 문제를 발생시켰다. CSS 변수를 도입하여 브라우저 레벨에서 테마를 관리하고, createGlobalTheme API를 통해 동적으로 스타일을 적용했다. 결과적으로, FOUC 현상 해결과 함께 디자인 토큰 가독성을 높여 유지보수성을 개선했다.

컴파운드 컴포넌트 패턴: 상품 카드 일원화와 확장성 확보

상품 카드 컴포넌트의 중복 코드와 유지보수 어려움을 해결하기 위해 컴파운드 컴포넌트 패턴을 도입했다. UI 컴포넌트, 서비스 컴포넌트, 지면별 로직으로 레이어를 분리하여, 코드 재사용성을 높이고 지면별 요구사항에 유연하게 대응할 수 있도록 설계했다. 따라서 상품 카드 통합과 확장성 확보라는 두 마리 토끼를 잡았다.