JIT 엔진 기반 Utility-First 설계를 통한 CSS 런타임 최적화 및 생산성 극대화

Context

기존 Component-Based 프레임워크의 경직된 디자인 시스템으로 인한 커스텀 스타일링 제약 발생. 전역 CSS 관리의 복잡도 증가와 !important 남용으로 인한 유지보수 효율 저하 및 Bundle Size 비대화 문제 직면.

Technical Solution

• Utility-First 접근법을 통한 HTML 내 원자 단위 클래스 조합 기반 스타일링 구조 설계
• JIT(Just-In-Time) 컴파일러 도입을 통한 사용된 클래스만 실시간 생성하여 CSS 파일 크기 최소화
• Arbitrary Values 지원으로 설정 파일 수정 없이 m-[17px]와 같은 동적 수치 즉시 반영
• Framework-Agnostic 설계를 통한 Next.js, Vue, Laravel 등 다양한 스택과의 심리스한 통합
• Prefix 기반의 Dark Mode 및 Responsive Design 제어 로직을 통한 조건부 스타일링 단순화
• Pre-built 컴포넌트 의존성을 제거한 Building Block 방식의 고유 디자인 자유도 확보