웹페이지 반응형 대응: vw 단위 활용해 화면 축소 기법 적용

다양한 모바일 기기에서 웹페이지 디자인 버그를 줄이기 위해, 기준 사이즈보다 작은 화면에서 전체를 선형적으로 축소하는 방식을 채택했다. vw 단위를 활용해 화면 가로크기에 비례해 요소 크기를 조절함으로써, rem 방식에서 발생하던 브라우저별 최소 폰트 사이즈 문제를 우회했다.

기존 rem 방식은 Safari와 Chrome 등 WebKit 계열 브라우저에서 CJK 로케일 최소 폰트 사이즈(12px) 제한으로 인해 의도치 않은 레이아웃 붕괴를 일으켰다. zoom 속성은 비표준이라 Firefox 지원이 불가했고, transform: scale은 스크롤 영역 계산이 복잡해 제외되었다.

최종적으로 Sass mixin을 통해 px 값을 vw로 자동 변환하는 로직을 구현했다. CSSO의 forceMediaMerge 옵션을 사용해 빌드 시 중복되는 미디어 쿼리를 병합하고, 가로 화면(landscape)에서는 zoom: 0.5~0.6을 적용해 가독성을 개선했다.