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

Alexis Menard

Thomas Steiner

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

물리적 폼 팩터는 크게 두 가지가 있습니다. 하나의 유연한 화면 (원활한 화면)이 있는 기기와 화면이 두 개인 기기 (솔기 부분이 있는 기기, 듀얼 화면 기기라고도 함)가 있습니다.

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

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

기기 Posture API

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

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

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

• continuous: 평평한 화면, 태블릿은 물론 매끄러운 곡선형 디스플레이를 지원합니다.

CSS

Device Posture API 사양은 새로운 CSS media-feature(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 속성을 다시 쿼리해야 합니다.

폴더블 API 사용해 보기

폴더블 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 에뮬레이션 기기를 선택하고 Continuous와 Folded 간에 전환할 수 있습니다. 해당하는 경우 힌지를 시각화할 수도 있습니다.

관련 링크

• Device Posture API
  • Mozilla 위치
  • WebKit 위치
  • Chrome 상태 항목
  • W3C 사양
• 표시 영역 세그먼트 API
  • Mozilla 위치
  • WebKit 위치
  • Chrome 상태 항목
  • W3C CSS 미디어 쿼리 사양 및 W3C CSS 환경 변수 사양