Tailwind의 암묵적 계약을 넘어 Type-Safe CSS Contract 설계

Context

Tailwind CSS의 Utility-first 방식은 빠른 개발 속도를 제공하나, 검색 및 리팩토링이 어려운 String-based 구조의 한계를 가짐. 특히 AI 생성 코드의 증가로 인해 디자인 시스템의 일관성을 강제할 수 없는 암묵적 계약의 붕괴가 가속화됨.

Technical Solution

• Typed Input을 통한 디자인 토큰의 엄격한 관리로 컴파일 단계에서의 오류 검증 구현
• 함수 시그니처 기반의 Contract 설계를 통해 잘못된 CSS 값 주입을 원천 차단하는 구조 채택
• JIT 컴파일러의 단순 스캔 방식을 넘어 Type-checking이 가능한 헬퍼 레이어 도입
• CSS Spec의 복잡성을 흡수하면서도 경계면에서는 강력한 타입 제약을 부여하는 하이브리드 설계
• 특정 런타임에 종속되지 않고 Typed CSS String을 생성하는 Compiler-agnostic 아키텍처 구축
• Media-query Factory 등 정형화된 인터페이스를 통해 브레이크포인트 누락을 Call-site에서 즉시 발견