폴더블 웹 레이아웃용 CSS 뷰포트 세그먼트, Edge만 안정 지원
- CSS 뷰포트 세그먼트 미디어 쿼리는 가로 또는 세로로 분리된 화면 수를 감지해 폴더블·듀얼스크린 전용 레이아웃을 적용함
- viewport-segment 환경 변수는 각 화면 영역의 너비·높이·상하좌우 좌표를 계산하며, 기기별 힌지와 화면 크기를 직접 처리하지 않고 CSS Grid 열·행 값에 사용할 수 있음
- 예시에서는
horizontal-viewport-segments: 2일 때 왼쪽 화면 너비를 첫 Grid 열로 지정하고, 나머지 또는 오른쪽 화면 너비를 두 번째 열로 지정함 - 2023년 당시 이 미디어 쿼리와 환경 변수는 Microsoft Edge Stable에서 지원되며, Chrome Stable에서는 실험용 웹 플랫폼 플래그와 Surface Duo 에뮬레이터가 필요함
- IDC는 2023년 폴더블 출하량을 2,100만 대 이상으로 예상했으며, 작성자는 실제 고객 기기 사용 데이터를 보고 듀얼스크린 모드 투자 여부를 정하라고 권함
Hacker News opinions
Safari는 기술 프리뷰까지도 이 기능을 지원하지 않더라. caniuse에서도 horizontal-viewport-segments 지원이 안 잡힘.
원래 Surface Duo를 위해 Microsoft가 토대를 만들었고, 나중에 Chrome 쪽으로도 들어간 거임.
UI 분할이 유용하다면 폴더블에서만 앱이 멋대로 정할 게 아니라 단일 화면에서도 내가 고르게 해야 한다고 봄. 펼친 폰 비율은 내 노트북 화면과 비슷한데, vi나 emacs가 화면 비율만 보고 자동으로 패널을 나누면 싫을 것 같음.
prefer-reduced-motion처럼 OS에 prefer-unified-display 같은 설정을 두고 사용자가 분할 여부를 선택하게 하면 좋겠음.
설정 가능하게 하는 데는 동의하지만, 분할 화면 정보를 활용할 곳도 분명 있음. PowerPoint 발표자 모드나 닌텐도 DS 스타일 게임처럼 두 영역을 따로 제어하면 좋은 경우가 있음.
노트북과 폰은 손에 들고 쓴다는 차이가 큼. 양손으로 든 넓은 폰에서 조작 버튼을 양옆에 두는 식의 UX는 쓸모 있겠지만, 넓어졌다고 본문을 2열로 바꾸는 건 어느 기기에서나 사용자 선택이 더 낫다고 봄.
Apple Duo 화면 UX는 지구 전체가 오른손잡이라고 가정한 듯함. 새 Duo도 Apple Mouse 때 같은 UX 간과가 보임.
오른손잡이가 85% to 90% 정도니 제품 설계에서 그 다수를 기준으로 잡는 건 충분하다고 봄.
아직 제품이 출시되지도 않았음. 말하는 게 독 위치라면 왼쪽과 오른쪽을 고르는 설정이 나올 듯함.
폴더블을 써본 적이 없는데, 버튼이 화면 이음새 위에 놓이면 누르기 어렵지 않나? 이런 문제는 이미 해결된 건지 궁금함.