폴더블 API의 오리진 트라이얼

Alexis Menard

Thomas Steiner

Chrome은 Chrome 125부터 오리진 트라이얼로 사용할 수 있는 Device Posture API 및 Viewport Segments Enumeration API라는 두 가지 API를 무료 체험합니다. 이러한 API를 총칭하여 폴더블 API라고 하며 개발자가 폴더블 기기를 타겟팅하는 데 도움이 됩니다. 이 게시물에서는 이러한 API를 소개하고 테스트를 시작하는 방법에 관한 정보를 제공합니다.

물리적 폼 팩터는 크게 두 가지가 있습니다. 하나의 유연한 화면 (매끄러운 화면)을 갖춘 기기와 두 개의 화면 (솔기, 듀얼 화면 기기라고도 함)이 있는 기기입니다.

이러한 기기는 개발자에게 과제와 기회를 제공합니다. 콘텐츠를 볼 수 있는 추가적인 방법을 제공합니다. 예를 들어 사용자가 책처럼 매끄러운 기기를 들고 평면 화면의 태블릿처럼 사용하도록 변경할 수 있습니다. 두 화면이 있는 기기는 화면 간에 고려해야 할 물리적 결합이 있습니다.

이러한 새로운 API는 개발자가 이러한 기기에 더 나은 사용자 환경을 제공할 수 있는 방법을 제공합니다. 각 API는 필요한 웹 플랫폼 프리미티브를 CSS와 자바스크립트를 통해 두 가지 방법으로 노출합니다.

Device Posture API

폴더블 기기에는 기기의 상태 또는 물리적 상태를 변경할 수 있는 기능이 있습니다. 폼 팩터를 변경하여 콘텐츠 작성자가 다양한 사용자 환경을 제공할 수 있으며, 이러한 새로운 API를 통해 웹 콘텐츠가 다양한 접기 상태에 반응할 수 있습니다.

기기는 다음 두 가지 상태에 있을 수 있습니다.

• folded: 노트북 또는 책 상태입니다.

• continuous: 평면, 태블릿 또는 매끄러운 곡선 디스플레이에 적합합니다.

CSS

Device Posture API 사양은 새로운 CSS 미디어 기능인 device-posture를 정의합니다. 이 미디어 기능은 일련의 고정된 상태로 확인됩니다. 이러한 상태는 각각 기기의 실제 상태를 포함하는 여러 개의 사전 정의된 값으로 구성됩니다.

device-posture 특성의 값은 가능한 상태에 관한 이전의 설명과 일치합니다.

• folded
• continuous

향후 새 기기가 시장에 출시되면 새로운 상태가 추가될 수 있습니다.

예:

/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }

/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }

JavaScript

기기의 상태를 쿼리하려면 새 DevicePosture 객체를 사용할 수 있습니다.

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

사용자가 기기를 완전히 열어 folded에서 continuous로 이동하는 것과 같은 기기 상태 변경에 반응하려면 change 이벤트를 구독하세요.

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

표시 영역 세그먼트 API

표시 영역 세그먼트는 논리적으로 별도의 표시 영역 영역의 위치와 크기를 정의하는 CSS 환경 변수입니다. 표시 영역 세그먼트는 구분선 역할을 하는 하나 이상의 하드웨어 기능 (예: 개별 디스플레이 사이의 접힘 또는 힌지)으로 분할될 때 생성됩니다. 세그먼트는 작성자가 논리적으로 구별하는 것으로 간주할 수 있는 표시 영역의 영역입니다.

CSS

논리 분할의 수는 CSS 미디어 쿼리 수준 5 사양에서 정의된 두 가지 새로운 미디어 기능(vertical-viewport-segments 및 horizontal-viewport-segments)을 통해 노출됩니다. 표시 영역이 분할된 세그먼트 수로 확인됩니다.

또한 각 논리 나누기의 차원을 쿼리하기 위해 새로운 환경 변수가 추가되었습니다. 이러한 변수는 다음과 같습니다.

• 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)

각 변수에는 세그먼트를 구분하는 하드웨어 기능으로 생성된 2차원 그리드에서 각각 x 및 y 위치를 나타내는 2개의 차원이 있습니다.

다음 코드 스니펫은 스크롤 없이 볼 수 있는 부분의 양쪽에 두 개의 콘텐츠 섹션 (col1 및 col2)이 있는 분할 UX를 만드는 간단한 예입니다.

<style>
  /* Segments are laid out horizontally. */
  @media (horizontal-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: row;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-right 0 0);
      background-color: steelblue;
    }

    #fold {
      width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
      background-color: black;
      height: 100%;
    }

    #col2 {
      display: flex;
      background-color: green;
    }
  }

  /* Segments are laid out vertically. */
  @media (vertical-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: column;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-bottom 0 0);
      background-color: pink;
    }

    #fold {
      width: 100%;
      height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
      background-color: black;
    }

    #col2 {
      display: flex;
     background-color: seagreen;
    }
  }
</style>

<div id="segment-css-container">
   <div id="col1"></div>
   <div id="fold"></div>
   <div id="col2"></div>
 </div>

다음 사진은 실제 기기에서 환경이 어떻게 표시되는지 보여줍니다.

JavaScript

표시 영역 세그먼트의 수를 가져오려면 visualViewport에서 segments 항목을 확인하세요.

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

segments 배열의 각 항목은 좌표와 크기를 설명하는 DOMArray로 표시 영역의 각 논리적 세그먼트를 나타냅니다. segments 필드는 쿼리될 때 지정된 상태의 스냅샷입니다. 업데이트된 값을 수신하려면 상태 변경을 수신 대기하거나 이벤트 크기를 조절하고 segments 속성을 다시 쿼리해야 합니다.

Foldable API 사용해 보기

Foldable API는 Chrome 125~Chrome 128의 오리진 트라이얼에서 사용할 수 있습니다. 오리진 트라이얼에 대한 배경 정보는 오리진 트라이얼 시작하기를 참고하세요.

로컬 테스트의 경우 chrome://flags/#enable-experimental-web-platform-features에서 실험용 웹 플랫폼 기능 플래그를 사용하여 Foldable API를 사용 설정할 수 있습니다. 명령줄에서 --enable-experimental-web-platform-features로 Chrome을 실행하여 사용 설정할 수도 있습니다.

데모

데모는 데모 저장소를 참고하세요. 테스트할 실제 기기가 없다면 Chrome DevTools에서 Galaxy Z Fold 5 또는 Asus Zenbook Fold 에뮬레이션된 기기를 선택하고 연속 및 접기 간에 전환할 수 있습니다. 가능한 경우 힌지를 시각화할 수도 있습니다.

관련 링크

• Device Posture API
  • Mozilla 위치
  • WebKit 위치
  • Chrome 상태 입력
  • W3C 사양
• 뷰포트 세그먼트 API
  • Mozilla 위치
  • WebKit 위치
  • Chrome 상태 입력
  • W3C CSS 미디어 쿼리 사양 및 W3C CSS 환경 변수 사양
  • W3C JS 사양