TL;DR

  • CSS 미디어 쿼리와 환경 변수를 활용하면 듀얼 스크린·폴더블 기기의 화면 분할과 힌지 영역에 맞춰 웹 경험을 조정할 수 있으며, 지원 기기와 투자 가치를 데이터로 판단해야 함.
  • horizontal-viewport-segments와 vertical-viewport-segments가 책처럼 나란히 놓이거나 노트북처럼 위아래로 겹친 화면 구성을 구분함.
  • viewport-segment-width와 viewport-segment-height 등 환경 변수가 기기별 디스플레이 크기와 위치를 계산해 CSS Grid 레이아웃에 활용됨.
  • 2023년 폴더블 기기 출하량 전망이 2,100만 대 이상으로 모바일 시장의 일부에 불과하지만, 듀얼 스크린 모드는 차별화 수단이 될 수 있음.
  • 관련 기능은 현재 Microsoft Edge Stable에서 지원되며, Chrome Stable에서는 실험용 웹 플랫폼 플래그를 활성화해야 테스트 가능함.

뷰포트 세그먼트용 CSS 미디어 쿼리

  • Google Pixel Fold 발표를 계기로 폴더블 기기에 맞춰 조정되는 경험을 설계·개발하는 데 사용할 수 있는 기술을 재검토하는 시점임.
  • 새로운 폼 팩터를 위한 설계에 부정적인 반응과 Google 1세대 기기의 가격은 배제하고, 현재 가능한 구현에 집중함.
  • 폴더블 기기를 대상으로 하는 미디어 쿼리는 두 가지임.
  • horizontal-viewport-segments: 기기를 책처럼 잡아 두 화면이 좌우로 나란히 놓인 상태를 대상으로 함.
  • vertical-viewport-segments: 두 화면이 위아래로 쌓이고 노트북처럼 접힌 상태를 대상으로 함.
  • vertical-viewport-segments 모드는 Surface Duo에서 PowerPoint를 사용할 때 유용함. 아래 화면에 발표자 노트를 표시하고 위 화면에 프레젠테이션을 표시하는 구성이 가능함.

CSS 환경 변수

  • 듀얼 스크린 기기에서 각 디스플레이의 기하 정보를 가져오기 위해 다음 환경 변수 집합을 사용할 수 있음.
  • env(viewport-segment-width <x> <y>): 화면 세그먼트 너비
  • env(viewport-segment-height <x> <y>): 화면 세그먼트 높이
  • env(viewport-segment-top <x> <y>): 화면 세그먼트 상단 위치
  • env(viewport-segment-left <x> <y>): 화면 세그먼트 왼쪽 위치
  • env(viewport-segment-bottom <x> <y>): 화면 세그먼트 하단 위치
  • env(viewport-segment-right <x> <y>): 화면 세그먼트 오른쪽 위치
  • x와 y 위치는 각 뷰포트 세그먼트를 분리하는 하드웨어 요소가 만든 2차원 격자를 나타내며, 좌표 0,0은 왼쪽 위 세그먼트에서 시작함.
  • 환경 변수는 기기가 각 치수를 계산해 조정을 수행하므로, 서로 다른 화면과 힌지 치수를 가진 모든 기기별로 별도 디자인을 만들 필요를 줄임.
  • 여러 폴더블 기기에 서로 다른 화면·힌지 치수가 존재하는 상황에서도 콘텐츠를 두 화면에 걸쳐 배치하고 위치를 지정할 수 있음.
  • 예제에서는 듀얼 스크린 기기에서 레시피 페이지가 2열 레이아웃으로 바뀌도록 구성하고, CSS Grid의 열 또는 행 값에 환경 변수를 사용함.
  • 가로 뷰포트 세그먼트가 2개인 경우 첫 번째 그리드 열이 왼쪽 디스플레이 전체를 차지하고, 두 번째 열이 남은 표시 영역인 오른쪽 디스플레이를 차지하도록 구성함.
  • 각 열이 하나의 디스플레이를 명시적으로 차지하도록 두 세그먼트의 너비 값을 각각 지정하는 구성도 가능함.

제품에 듀얼 스크린 모드를 포함해야 하는 시점

  • 듀얼 스크린 디자인을 반드시 도입해야 하는 것은 아니며, 두 디스플레이에 걸쳐 표시될 때 조정되는 웹사이트나 앱을 만들도록 강제하는 조건도 없음.
  • Surface Duo에서는 브라우저를 한쪽 디스플레이 창에서 사용할 수 있고, 일반적인 반응형 웹사이트처럼 표시할 수 있음.
  • 모든 사이트나 앱에 듀얼 스크린 모드가 필요한 것은 아니므로, 고객이 어떤 기기를 사용하는지와 듀얼 스크린 모드에 대한 투자가 가치 있는지를 파악해야 함.
  • 도입 여부는 언제나 데이터에 따라 판단해야 함.
  • 2023년 폴더블 기기 출하량은 2,100만 대 이상으로 전망됨([source]).
  • 전체 모바일 기기 시장과 비교하면 작은 비중이지만, 실제로 사용되는 폴더블 기기가 수백만 대 규모임.
  • 폴더블 기기에 맞춰 조정되는 앱이나 웹사이트를 만드는 또 다른 이유는 제품을 차별화하기 위함임.
  • Pixel Fold는 폴더블 기기가 계속 존재할 폼 팩터임을 뒷받침하며, 사용자 경험을 향상할 기회가 됨.

브라우저 지원

  • 미디어 쿼리와 환경 변수는 현재 Microsoft Edge Stable에서 지원됨.
  • Chrome Stable은 아직 동일한 지원을 제공하지 않는 것으로 보이며, Pixel Fold와 Chrome 팀 관점에서 큰 누락으로 볼 수 있음.
  • chrome://flags에서 실험용 웹 플랫폼 플래그를 활성화하면 Chrome에서 Surface Duo 에뮬레이터로 테스트 가능함.

마무리

  • 이 글은 폴더블 웹·앱 경험에 사용할 수 있는 기능이 존재한다는 점을 개괄하고 상기하는 내용임.
  • 새로운 폴더블 기기가 출시되면서 웹과 네이티브 앱의 디자인·레이아웃에서 혁신할 여지가 큼.
  • 브라우저와 운영체제 지원이 없으면 기업이 개발자와 디자이너에게 폴더블 경험 구축을 진지하게 받아들이도록 만들기 어려움.
  • 듀얼 스크린 레이아웃의 구현 가능성을 더 살펴보려면 Smashing Magazine에 게시된 레시피 데모 관련 심층 글을 참고할 수 있음.
  • Microsoft Edge를 설치하면 해당 웹 레이아웃을 직접 구축하고 테스트할 수 있음.