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의 지원이 없으면 기업들이 개발자와 디자이너에게 폴더블 경험 구축을 진지하게 받아들이도록 할 수 없다.
HN 토론
20- socalgal2
설득이 잘 안 되는 것 같아요.
UI를 나누는 게 유용하다면, 기기를 따져서 결정하기보다는 단일 디스플레이에서도 내가 선택해서 나눌 수 있게 해줘야 한다고 생각해요. 제 노트북은 펼친 폴더블 폰과 비슷한 화면 비율을 가지고 있어서, 화면 절반을 두 개의 패널로 나누는 게 유용하다면 기기와 상관없이 유용해야 하죠.
개인적으로 폴더블 폰을 산다면, 기존 콘텐츠를 위한 더 큰 화면을 원해서 사는 거예요. 앱이 제 대신 결정해서 두 개의 디스플레이처럼 취급하는 건 원치 않아요. vi나 emacs에서 글에 나온 것처럼 화면 비율에 따라 자동으로 패널을 나눈다고 상상해보세요. 제발 안 돼요! 나누고 싶을 때 내가 선택하게 해주세요.
- ChiperSoft
그리고 물론, Safari는 기술 프리뷰 기준으로 아직 이걸 지원하지 않아요.
- DarmokTanagra
Apple Duo 화면 UX는 전 세계 사람들이 모두 오른손잡이라고 가정하네요.
새로운 Duo는 Apple Mouse급 UX 간과를 보여줍니다.