Design Token 기반 4계층 CSS 설계를 통한 10KB 초경량 컴포넌트 라이브러리 구현

Context

Atomic CSS 프레임워크의 강제적 매핑으로 인한 유지보수 비용 증가 및 스타일-로직 결합도 심화 문제 발생. 성숙한 Design Token이 존재하는 환경에서 도구 의존적인 Atomic CSS가 제공하는 실익보다 오버헤드가 더 큰 상황 분석.

Technical Solution

• Design Token Layer를 CSS 변수 기반의 Configuration API로 정의하여 스타일 설정과 비즈니스 로직의 완전한 분리 달성
• CSS 파일을 Token, Component, Entry의 4개 계층으로 구조화하여 의존성 방향을 단방향으로 제어
• Vue 컴포넌트를 단순한 Thin Wrapper로 설계하여 스타일 정의 없이 Class 조합 및 인터랙션 로직 처리만 수행
• Utility Class를 최소화(약 30개)하고 Native CSS의 명명 자유도를 활용한 유연한 스타일링 체계 구축
• 프레임워크 종속성을 제거한 CSS 기반 설계를 통해 React, Svelte 등 타 프레임워크로의 마이그레이션 비용 최소화

Impact

• 전체 코드 500라인 미만 및 번들 사이즈 10KB 수준의 초경량 최적화 달성

Key Takeaway

강력한 Design Token 시스템이 전제될 경우 복잡한 빌드 도구 없이 Native CSS만으로도 충분한 유지보수성과 확장성을 확보할 수 있으며, 이는 엔지니어의 인지 부하 감소로 이어짐.