CSS를 활용한 폴더블 및 듀얼 스크린 기기 디자인 가이드
Designing for Dual Screen and Foldable Devices with CSS (2023)
Hacker NewsCSS를 활용하여 폴더블 및 듀얼 스크린 기기에 최적화된 웹/앱 경험을 설계하는 기술이 소개되었습니다.
- 새로운 미디어 쿼리는 장치의 펼침 상태(수평/수직)를 감지하며, 환경 변수는 각 디스플레이 영역의 정확한 크기와 위치 정보를 제공합니다.
- 환경 변수를 사용하면 다양한 폴더블 기기의 복잡하고 상이한 화면 규격에 일일이 대응할 필요 없이 유연하게 레이아웃을 조정할 수 있습니다.
- 기술 자체는 혁신적이나, 현재 이 기능은 Microsoft Edge Stable에서만 공식 지원되며 Chrome 등 주요 브라우저의 호환성 검토가 필수입니다.
폴더블 또는 듀얼 스크린 장치에 최적화된 웹 경험을 설계하기 위해 CSS 기술이 소개되었다. 개발자는 미디어 쿼리를 사용하여 장치의 물리적인 펼침 상태를 감지할 수 있다. 예를 들어, `@media (horizontal-viewport-segments: <count>)`는 기기가 책처럼 양쪽 화면이 나란히 배치된 상태일 때를 타겟팅하며, `vertical-viewport-segments`는 두 화면이 위아래로 쌓여 접힌 형태(노트북과 유사)일 때를 지정한다.
각 디스플레이 세그먼트의 정확한 기하학적 정보(geometry)를 얻기 위해서는 환경 변수(Environment Variables)가 활용된다. `env(viewport-segment-width <x> <y>);`와 같은 형태로 정의되는 이 변수들은 x축과 y축 좌표를 통해 각 뷰포트 세그먼트의 크기와 위치를 제공한다. 이러한 환경 변수를 사용하면, 다양한 폴더블 기기들이 가진 상이한 화면 및 경첩(hinge) 규격에 일일이 대응할 필요 없이 레이아웃을 동적으로 계산하고 조정하는 것이 가능하다.
실제 웹 구현에서는 CSS Grid와 환경 변수를 결합하여 특정 그리드 열이나 행의 크기를 지정함으로써 듀얼 스크린 레이아웃을 구성한다. 다만, 이 기술은 현재 Microsoft Edge Stable에서 지원되는 것으로 확인되었으며, Chrome Stable과 같은 주요 브라우저에서는 아직 동일한 지원이 부족하다는 점이 중요한 고려 사항이다. 따라서 개발 시에는 사용 환경의 브라우저 및 OS 지원 여부를 반드시 검토해야 한다.