Viewport Segments API로 폴더블 기기 지원

Alexis Menard
Alexis Menard
X GitHub

게시일: 2025년 6월 9일

Viewport Segments API는 JavaScript 또는 CSS를 사용하여 논리적으로 분리된 표시 영역의 위치와 크기에 액세스할 수 있으며 Chrome 138부터 사용할 수 있습니다.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: not supported.

뷰포트 세그먼트는 뷰포트가 구분선 역할을 하는 하나 이상의 하드웨어 기능(예: 별도의 디스플레이 간의 폴드 또는 힌지)으로 분할될 때 생성됩니다.

세그먼트는 사이트나 앱을 개발할 때 논리적으로 별개로 취급할 수 있는 뷰포트 영역입니다. 이러한 흥미로운 API를 사용하면 폴더블 기기에 맞게 인터페이스를 만들거나 최적화할 수 있습니다. 예를 들어 이중 창 사용자 환경을 만들거나 콘텐츠가 폴드에 걸쳐 배치되지 않도록 하는 것입니다.

지난해 실행한 오리진 트라이얼에서 다음과 같은 두 가지 변경사항이 있습니다.

  • 이제 JavaScript 속성 segments이 window.visualViewport이 아닌 새로 추가된 window.viewport 객체에 있습니다.
  • 기기가 접혀 있지 않을 때의 segments 속성 동작이 이 기능의 CSS 동작과 일치하도록 조정되었습니다. 기기가 접혀 있지 않거나 접을 수 없는 경우 segments 속성에는 전체 뷰포트 크기를 나타내는 단일 세그먼트의 배열이 포함됩니다.

폴더블 기기 데모를 확인하여 API가 작동하는 모습을 확인하세요.

힌지를 따라 두 개의 논리적 세그먼트로 분할된 웹페이지를 보여주는 폴더블 기기