CSS Bit Flag 시스템을 통한 브라우저 호환성 91% 달성과 자동 Accessibility 구현

Context

기존 Media Query 기반의 Breakpoint 설계는 Scrollbar 너비 계산 제외 및 시스템 폰트 크기 변경에 따른 레이아웃 붕괴 문제를 내포함. em 단위 사용을 통한 해결책이 제시되었으나, 설계 복잡도 증가와 개발 공수 가중으로 인해 실무 적용률이 낮았던 한계가 존재함.

Technical Solution

• tan(atan2()) 스칼라 기법을 활용하여 단위를 형태의 픽셀 값으로 변환하는 로직 구현
• abs(), clamp(), min(), max(), calc() 함수를 조합하여 뷰포트 너비와 Breakpoint를 비교한 Bit Flag(0 또는 1) 생성
• 생성된 Bit Flag를 --qlt-md, --qin-md와 같은 CSS 변수로 등록하여 @container style() 및 if(style()) 쿼리에서 조건부 렌더링 수행
• 100cqw 단위를 활용함으로써 Scrollbar 영역을 제외한 실제 가용 너비를 기준으로 Breakpoint를 정확히 판별하는 구조 설계
• 시스템 폰트 크기 변경 비율(예: 20px/16px = 1.25)을 스칼라 값으로 추출하여 Pixel 기반 Breakpoint를 동적으로 시프트하는 메커니즘 적용
• 항상 일시정지된 Animation의 Keyframes를 이용해 calc() 기반의 다중 속성 제어를 동시에 수행하는 최적화 기법 도입