폴더블 폰의 주류화
1,999달러로 책정된 Apple의 최근 iPhone Duo 발표는 웹 개발에 있어 중요한 전환점이 되었습니다. 2026년 10월 23일에 출시되는 이 기기는 5.4인치 외부 디스플레이와 7.6인치 내부 디스플레이를 갖추고 있으며, 폴더블 폰을 틈새 시장의 호기심에서 모든 웹 개발자를 위한 주류 현실로 끌어올렸습니다. 이러한 적응형 폼 팩터를 무시하는 것은 더 이상 선택 사항이 아닙니다.
다행히 브라우저 엔지니어들은 이러한 변화를 예상했습니다. 이제 우리는 이러한 기기를 위해 특별히 설계된 강력한 CSS 미디어 쿼리인 @media (device-posture: folded)를 사용할 수 있습니다. 이 쿼리는 기기가 continuous한 평면 상태가 아닌, 책이나 소형 노트북처럼 folded 상태인지 감지합니다. 이를 통해 개발자는 다양한 물리적 구성에 맞춰 최적의 사용자 경험을 위한 타겟 스타일을 적용할 수 있습니다.
블로그 게시물을 상상해 보세요. 평평한 continuous 화면에서는 단일 열 레이아웃이 가독성을 극대화하며 완벽하게 작동합니다. 하지만 사용자가 iPhone Duo를 책처럼 접으면, 그 단일 열은 접힌 부분 때문에 읽기 불편해질 수 있습니다. device-posture를 사용하면 쉽게 2열 레이아웃으로 전환하여 각 화면 세그먼트에 콘텐츠를 우아하게 배치함으로써 사용성과 상호작용을 즉시 개선할 수 있습니다.
이 간단한 적응은 device-posture 미디어 쿼리의 즉각적인 힘을 보여줍니다. 이제 개발자는 화면 크기뿐만 아니라 기기 자체의 물리적 상호작용 모델에 유연하게 조정되는 반응형 디자인을 만들 수 있습니다. Chrome은 이미 이러한 기능을 지원하며, Safari의 iPhone Duo 시뮬레이터도 플래그 설정 하에 이를 포함하고 있어 곧 광범위하게 사용될 것임을 시사합니다.
사이트를 폴드 인식형(Fold-Aware)으로 만들기
정적 CSS 규칙을 넘어, 폴더블 기기를 위한 웹 경험은 동적 상호작용을 통해 진정으로 빛을 발합니다. JavaScript용 Device Posture API를 사용하면 사용자가 iPhone Duo나 다른 폴더블 폰을 어떻게 잡고 있는지에 따라 사이트가 반응하여 더 풍부하고 직관적인 경험을 제공할 수 있습니다. 이는 단순히 평면 또는 접힌 상태에 대한 스타일링을 넘어 실시간 반응을 가능하게 합니다.
애플리케이션은 기기 자세에 대한 change 이벤트를 수신하여 휴대폰 상태가 continuous(평면)와 folded(접힘) 사이에서 전환될 때마다 작업을 트리거할 수 있습니다. 즉, 사용자가 휴대폰을 닫기 시작할 때 비디오를 자동으로 일시 중지하거나, 자세를 바꿀 때 양식 진행 상황을 즉시 저장할 수 있습니다. 레시피 앱이 한 화면에는 재료를, 다른 화면에는 조리법을 표시하며 기기가 접힐 때 콘텐츠를 동적으로 분할하는 모습을 상상해 보세요.
JavaScript로 이러한 접힘 상태 변화를 감지하는 것은 간단합니다. 다음은 기본적인 코드 스니펫입니다:
if ('ondeviceposturechange' in window) { window.addEventListener('deviceposturechange', (event) => { const currentPosture = event.target.devicePosture.type; console.log(`Device posture changed to: ${currentPosture}`); // 여기서 currentPosture('continuous' 또는 'folded')에 따라 동적 작업 구현 });
}이 이벤트 리스너는 devicePosture.type을 제공하여 더 상호작용적이고 직관적인 폴더블 웹 경험을 구축할 수 있게 해줍니다. Chrome과 Samsung Internet은 이미 이 API를 완전히 지원하며, Safari의 iPhone Duo 시뮬레이터는 기능 플래그 뒤에 이를 포함하여 Apple의 1,999달러짜리 기기에 대한 향후 지원을 예고하고 있습니다.
두 화면을 동시에 고려한 디자인
폴더블 기기는 viewport segments라는 흥미로운 개념을 도입합니다. iPhone Duo가 접히면 두 개의 별도 디스플레이 영역이 나타나며, 각각 독립적으로 제어할 수 있습니다. 이는 단순히 접힘에 반응하는 것을 넘어, 각 세그먼트를 고유한 캔버스로 취급하여 진정한 듀얼 스크린 경험을 설계할 수 있게 합니다.
콘텐츠를 정확하게 배치하기 위해 개발자는 CSS environment variables를 사용합니다. 예를 들어, env(viewport-segment-width)와 env(viewport-segment-height)는 각 개별 세그먼트의 크기를 제공합니다. 이를 통해 강력하고 적응형인 레이아웃을 생성하여 물리적 힌지나 간격 주위로 요소가 완벽하게 정렬되도록 할 수 있습니다.
듀얼 스크린에서 진가를 발휘하는 advanced use cases를 고려해 보세요. 비디오 플레이어는 한 세그먼트를 차지하고, 대본, 챕터 또는 관련 댓글은 다른 세그먼트에 대화형으로 표시될 수 있습니다. 마찬가지로, 이메일 클라이언트는 한 세그먼트에 받은 편지함 목록을, 인접한 세그먼트에는 선택한 메시지의 전체 내용을 동시에 표시하여 생산성을 높일 수 있습니다.
Chrome은 이미 이러한 기능을 지원하며, Viewport Segments API는 Chrome 138부터 사용할 수 있습니다. Samsung Internet은 수년 전부터 폴더블 폰에서 이 기능을 제공해 왔습니다. Xcode 27.1과 함께 출시된 Safari의 iPhone Duo 시뮬레이터에는 기능 플래그 뒤에 이 API들이 포함되어 있으며, device-posture CSS media feature - MDN Web Docs에서 device-posture와 같은 관련 CSS 기능을 더 자세히 살펴볼 수 있습니다.
이 글이 마음에 드셨나요? 매일 아침 이런 글을 메일로 받아보세요.
하루 한 통 · 두 번의 클릭으로 구독 취소 · 제3자 추적 없음
브라우저 전쟁: 누가 준비되었는가?
폴더블 인식 디자인의 '이유'를 살펴보았으니, 이제 '어디서' 가능한지 알아보겠습니다. 다행히 많은 도구가 오늘 바로 사용할 준비가 되어 있습니다! Chrome은 device-posture 미디어 쿼리와 JavaScript API에 대한 안정적인 지원을 제공하며, Chrome 138부터는 Viewport Segments API도 포함되어 있습니다. 이는 Android 폴더블 시장의 상당 부분이 이미 귀하의 향상된 레이아웃을 경험할 수 있음을 의미합니다. Samsung Internet은 수년간 이러한 기능을 주도해 왔으며, 방대한 폴더블 기기 라인업에서 강력한 경험을 보장합니다.
Safari의 여정은 이제 막 시작되었습니다. Xcode 27.1과 함께 출시된 새로운 iPhone Duo 시뮬레이터에는 device-posture 및 viewport segments API가 모두 포함되어 있습니다. 이는 이러한 기능을 지원하려는 Apple의 명확한 의도를 보여줍니다. 그러나 이러한 기능은 현재 feature flag 뒤에 숨겨져 있어, Apple이 2026년 10월 23일 $1,999 iPhone Duo 출시를 준비하고 있음에도 불구하고 출시 시점에 전체 지원이 활성화되지 않을 수도 있습니다.
그렇다면 개발자는 무엇을 해야 할까요? progressive enhancement를 수용하세요! Firefox처럼 폴더블 API가 없는 브라우저를 포함한 모든 브라우저에서 기본 경험이 견고하고 접근 가능하도록 설계하십시오. 그런 다음, 고급 device-posture 및 viewport segments 기능을 향상 요소로 추가하십시오. 이 전략은 비디오와 메모를 위한 분할 화면과 같이 성능이 뛰어난 폴더블 기기 사용자에게는 맞춤형의 우수한 경험을 보장하면서, 다른 사용자에게는 기능을 저하시키지 않습니다. 핵심은 기능을 깨뜨리지 않고 우아하게 적응하는 것입니다.
자주 묻는 질문
CSS device-posture 미디어 쿼리란 무엇인가요?
기기의 물리적 상태에 따라 웹 페이지가 레이아웃을 조정할 수 있도록 하는 새로운 CSS 미디어 기능입니다. 평면 화면을 위한 continuous와 화면이 구부러지거나 힌지가 있는 상태를 위한 folded라는 두 가지 주요 값을 가집니다.
접힌 화면의 양쪽 콘텐츠를 어떻게 제어하나요?
Viewport Segments API를 사용할 수 있습니다. viewport-segment-width 및 viewport-segment-height와 같은 CSS 환경 변수를 사용하면 접힘 부분 양쪽의 별도 화면 영역 스타일을 지정하여 듀얼 스크린 경험을 만들 수 있습니다.
현재 어떤 브라우저가 폴더블 CSS 기능을 지원하나요?
Chrome과 Samsung Internet은 device-posture 미디어 쿼리와 Viewport Segments API를 완벽하게 지원합니다. Safari 지원은 iPhone Duo 시뮬레이터에서 가능하지만 현재는 기능 플래그(feature flag) 뒤에 숨겨져 있습니다. Firefox는 아직 지원하지 않습니다.
폴더블 기기를 위한 CSS 미디어 쿼리와 JavaScript API의 차이점은 무엇인가요?
CSS device-posture 미디어 쿼리는 선언적이며 기기 상태에 따라 레이아웃 스타일을 지정하는 데 사용됩니다. JavaScript Device Posture API는 명령형으로, 동영상 일시 정지나 데이터 저장과 같은 폴딩 이벤트에 대응하여 코드를 실행할 수 있게 해줍니다.