CSS로 폴더블 기기 대응하는 방법
Designing for Dual Screen and Foldable Devices with CSS (2023)
Google의 Pixel Fold 발표를 계기로, CSS 미디어 쿼리와 환경 변수를 활용해 듀얼 스크린 및 폴더블 기기에 맞춘 레이아웃을 만드는 방법을 소개한다. horizontal-viewport-segments와 vertical-viewport-segments 미디어 쿼리, 그리고 env() 변수로 각 화면의 크기와 위치를 계산해 CSS Grid에 적용하는 실용적인 예제를 다룬다. 2023년 폴더블 출하량이 2,100만 대를 넘을 것으로 예상되는 가운데, 브라우저 지원 현황과 듀얼 스크린 모드 도입 시점에 대한 인사이트를 제공한다.
폴더블 기기가 계속 나오면서 웹과 앱 경험의 디자인 및 레이아웃 혁신 가능성이 크지만, 브라우저와 OS의 지원이 없으면 기업들이 개발자와 디자이너에게 폴더블 경험 구축을 진지하게 받아들이도록 할 수 없다.