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

Alexis Menard

Thomas Steiner

Chrome은 Device Posture API와 Viewport Segments enumeration API라는 두 가지 API를 시험하고 있으며, 이 API는 Chrome 125부터 오리진 트라이얼로 제공됩니다. 이러한 API를 총칭하여 폴더블 API라고 하며, 개발자가 폴더블 기기를 타겟팅하는 데 도움이 되도록 설계되었습니다. 이 게시물에서는 이러한 API를 소개하고 테스트를 시작하는 방법에 관한 정보를 제공합니다.

주로 두 가지 다른 물리적 폼 팩터가 있습니다. 유연한 화면이 하나 있는 기기 (원활함)와 화면이 두 개인 기기 (이음선이 있음, 듀얼 화면 기기라고도 함)입니다.

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

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

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) { ... }

자바스크립트

기기의 상태를 쿼리하려면 새 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}`);
});

Viewport Segments 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 위치를 나타냅니다.

다음 코드 스니펫은 접힌 부분의 양쪽에 두 개의 콘텐츠 섹션 (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>

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

자바스크립트

뷰포트 세그먼트 수를 확인하려면 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의 실험용 웹 플랫폼 기능 플래그를 사용하여 폴더블 API를 사용 설정할 수 있습니다. 명령줄에서 --enable-experimental-web-platform-features를 사용하여 Chrome을 실행하여 사용 설정할 수도 있습니다.

데모

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

관련 링크

• Device Posture API
  • Mozilla 입장
  • WebKit 위치
  • Chrome 상태 항목
  • W3C 사양
• Viewport Segments API
  • Mozilla 입장
  • WebKit 위치
  • Chrome 상태 항목
  • W3C CSS 미디어 쿼리 사양 및 W3C CSS 환경 변수 사양