Utility-first CSS 도입을 통한 CSS 번들 크기 상수화 및 유지보수 위험 제거

Context

전통적인 CSS Class 방식의 선형적 번들 크기 증가와 클래스 명명 비용 발생. 영향 범위 파악 불가로 인한 기존 스타일 수정 기피 및 중복 코드 양산의 한계점 노출.

Technical Solution

• CSS Variable 기반의 Utility Class 체계 도입으로 스타일 정의의 원자화 구현
• HTML 내 인라인 스타일 적용 방식의 전환을 통한 스타일과 구조의 강한 결합 유도
• Component-based Architecture 내 스타일 캡슐화를 통한 전역 오염 방지
• 컴포넌트 삭제 시 관련 스타일이 동시 제거되는 구조로 Refactoring 위험성 제거
• 시맨틱 커스텀 태그 뒤로 구현 세부 사항을 격리하여 레이아웃 가독성 유지