Viewport 의존성 탈피를 통한 Component-Driven UI 설계 혁신

Context

Viewport 기반 Media Query에 의존한 기존 Responsive Design의 한계로 인해 컴포넌트의 배치 위치에 따른 개별 대응이 불가능한 구조적 제약 발생. 이를 해결하기 위해 특정 페이지 템플릿에 종속된 Global CSS 오버라이드와 JavaScript 기반 ResizeObserver 사용으로 인한 Main Thread 부하 증가 문제 직면.

Technical Solution

• container-type: inline-size 설정을 통한 개별 컴포넌트 단위의 Container 정의
• @container 룰을 적용하여 Viewport가 아닌 부모 컨테이너 크기에 반응하는 Context-Aware 스타일링 구현
• cqw, cqh 단위를 도입하여 컨테이너 크기에 비례하는 유연한 Typography 및 Spacing 시스템 구축
• container-name 명명을 통한 중첩 컨테이너 구조 내 Query Collision 방지 및 타겟팅 정밀도 향상
• JS 기반의 크기 감지 로직을 Native CSS 수준으로 이관하여 렌더링 파이프라인 최적화