힌지는 하드웨어뿐만 아니라 페이지도 바꿀 수 있습니다
기기의 힌지는 하드웨어뿐만 아니라 웹 페이지도 바꿀 수 있습니다. CSS device-posture 미디어 기능은 웹 콘텐츠를 조정할 수 있는 강력한 방법을 제공합니다. 이는 평평한 태블릿과 같은 continuous 화면과 folded 상태를 구분하여, 기기의 물리적 상태에 따라 스타일이 직접 반응하도록 합니다.
최근 Better Stack의 영상에서는 가상의 Apple 폴더블 기기가 구부러질 때 페이지가 "flat"에서 "folded"로 변경되는 모습을 보여주었습니다. 영상에서 "2,000달러짜리 폴더블 폰"이나 "iPhone Surface Duo"를 언급하고 있지만, Apple은 아직 그러한 제품을 발표하지 않았으며, 이는 기술을 설명하기 위한 추측성 예시입니다.
JavaScript API를 통해서도 사용할 수 있는 이 기능은 단순히 보여주기 위한 것이 아닙니다. 목표는 목적이 있는 디자인입니다. 예를 들어, 비디오 플레이어는 기기가 continuous 상태일 때는 전체 화면으로 표시되다가, folded 상태가 되면 자동으로 조정되어 한쪽 세그먼트에는 비디오를, 다른 쪽에는 챕터 세부 정보나 댓글을 표시할 수 있습니다.
Google Chrome은 이미 이러한 기능을 지원하며, Samsung Internet은 Galaxy Z Fold와 같은 기기를 위해 수년 전부터 유사한 기능을 제공해 왔습니다. Safari는 "iPhone Surface Duo" 시뮬레이터에서 API를 구현했지만, 아직 기능 플래그 뒤에 숨겨져 있어 일반적인 사용보다는 초기 개발 단계임을 나타냅니다. Firefox는 아직 이러한 기능을 지원하지 않습니다.
기기가 구부러질 때 JavaScript가 반응하도록 하세요
CSS가 기기의 물리적 상태에 적응하는 것처럼, JavaScript는 Device Posture API라는 강력한 대응 기능을 제공합니다. navigator.devicePosture를 통해 현재 상태에 접근할 수 있으며, 더 중요하게는 change 이벤트를 사용하여 변경 사항을 감지할 수 있습니다. 이 이벤트는 기기가 continuous(평평함)와 folded(접힘) 상태 사이를 전환할 때마다 발생하여 웹 앱이 동적으로 반응하도록 합니다.
단순히 접힘 횟수를 세는 것 이상의 기능을 상상해 보세요! 이 API를 사용하면 정말 유용한 동작을 구현할 수 있습니다. 비디오 플레이어는 기기가 접힐 때 자동으로 재생을 일시 중지하여 의도치 않은 건너뛰기를 방지하거나, 텍스트 편집기는 저장되지 않은 편집 내용을 저장할 수 있습니다. 다단계 작업의 경우, 접히는 동작이 다음 단계로의 전환을 트리거하여 사용자의 맥락을 그대로 유지할 수 있습니다.
포스처(posture)는 신호일 뿐, 사용자에게 내리는 지시가 아님을 기억하세요. 단순히 기기가 구부러졌다는 이유로 핵심 기능을 급격하게 변경하거나 조작을 어렵게 만들어 사용자를 당황하게 하지 마세요. 대신 이러한 신호를 사용하여 경험을 향상시키고, 화면이 평평하든 접혀 있든 상관없이 주요 작업이 직관적이고 접근 가능하도록 보장하세요. Google Chrome과 Samsung Internet은 이미 이러한 기능을 지원하며, 적응형 인터페이스를 구축하기 위한 강력한 도구를 제공합니다.
접힌 부분을 레이아웃 경계로 활용하세요
폴더블 기기의 물리적 힌지는 단순한 하드웨어 기능이 아닙니다. 이는 하나의 디스플레이를 여러 개의 뷰포트 세그먼트로 나눌 수 있습니다. 즉, 접힌 화면은 별도의 논리적 영역을 노출할 수 있어 개발자가 각 측면에 보완적인 콘텐츠를 할당할 수 있게 합니다. 주요 컨트롤이나 콘텐츠를 접힌 부분에 어색하게 배치하는 대신, 별도의 창으로 디자인할 수 있습니다.
비디오 플레이어를 예로 들어보겠습니다. 기기가 평평할 때는 전체 화면을 채울 수 있지만, 접혔을 때는 한쪽 세그먼트에서 비디오 재생을 유지하고 다른 쪽에는 챕터, 설명 또는 댓글을 표시할 수 있습니다. 이는 더 직관적이고 효율적인 사용자 경험을 창출하며, 독특한 폼 팩터를 최대한 활용할 수 있게 합니다.
CSS는 horizontal-viewport-segments 및 vertical-viewport-segments와 같은 세그먼트 미디어 기능(segment media features)을 제공하여 이러한 개별 영역을 감지하고 스타일을 지정할 수 있게 합니다. calc() 표현식 내에서 env(viewport-segment-width 0 0) 또는 env(viewport-segment-height 0 0)과 같은 환경 변수를 사용하여 요소의 크기를 정밀하게 조정할 수 있습니다. 이는 중요한 UI 요소가 물리적인 힌지(hinge) 바로 위에 배치되는 것을 방지하는 데 도움이 됩니다.
이러한 도구들은 강력하지만, 항상 기존의 연속적인 화면에서도 레이아웃이 원활하게 작동하도록(degrade gracefully) 보장해야 합니다. Google Chrome과 Samsung Internet은 수년간 이러한 기능을 지원해 왔으며, WebKit 또한 플래그 뒤에서 진전을 보이고 있습니다. 더 자세한 기술적 내용은 Device Posture API - W3C 사양을 확인하세요.
이 글이 마음에 드셨나요? 매일 아침 이런 글을 메일로 받아보세요.
하루 한 통 · 두 번의 클릭으로 구독 취소 · 제3자 추적 없음
소문 속의 iPhone이 아닌, 오늘날의 브라우저를 위해 빌드하세요.
그렇다면 오늘날 이러한 영리한 폴더블 기능을 실제로 어디에서 사용할 수 있을까요? Google Chrome과 Samsung Internet이 선두를 달리고 있으며, device-posture 및 뷰포트 세그먼트에 대한 강력한 지원을 제공합니다. Samsung Internet은 수년 전 Galaxy Z Fold 및 Flip 기기를 위해 이러한 기능을 선구적으로 도입했으며, Google Chrome은 최근 오리진 트라이얼에서 베이스라인 지원으로 승격시켰습니다.
안타깝게도 Firefox는 현재 이러한 API를 지원하지 않습니다. Safari와 WebKit은 특정 "iPhone Surface Duo" 시뮬레이터 내에서 실험적인 작업을 보여주었지만, 이러한 기능은 여전히 플래그 뒤에 숨겨져 있으며 일반적으로 사용할 수는 없습니다. 브라우저 버전마다 지원 범위가 빠르게 변화하므로 항상 최신 MDN 참조 및 브라우저 호환성 표를 확인하세요.
폴더블 기기를 위한 개발 시 점진적 향상(progressive enhancement)을 수용하세요. 먼저 navigator.devicePosture가 존재하는지 감지한 후 사용을 시도하세요. 그다음, 모든 연속적인 화면에서 잘 작동하는 유용한 기본 레이아웃을 설계하고, 그 위에 폴더블 전용 스타일을 추가하세요.
항상 자세 전환(posture transitions) 전반에 걸쳐 인터페이스를 테스트하세요. 필수적인 콘텐츠나 기능을 접힌 상태에만 의존하게 만들지 마세요. 기기가 평평하든 접혀 있든 상관없이 원활한 경험을 보장하세요. 여러분의 세심한 디자인에 사용자들이 고마워할 것입니다.
자주 묻는 질문(FAQ)
CSS device-posture 미디어 쿼리는 어떤 역할을 하나요?
웹페이지가 폴더블 화면이 접혀 있는지 또는 연속적인지 등 기기의 물리적 자세에 따라 스타일을 적용할 수 있게 해줍니다.
뷰포트 세그먼트는 폴더블 화면에서 어떤 도움이 되나요?
세그먼트화된 디스플레이의 고유한 영역을 노출하여 페이지가 힌지나 접힌 부분의 양쪽에 콘텐츠를 배치할 수 있도록 합니다.
JavaScript로 폴더블 폰의 자세 변경을 감지할 수 있나요?
네. Device Posture API는 현재 자세를 노출하며, 자세가 변경될 때 페이지가 반응할 수 있도록 하는 변경 이벤트를 제공합니다.
모든 브라우저가 폴더블 기기용 웹 API를 지원하나요?
아니요. 지원 범위는 다양합니다. Chromium 기반 브라우저와 Samsung Internet은 기능을 제공하지만, Firefox는 구현이 부족하고 Safari 지원은 실험적인 단계입니다.
Apple이 폴더블 iPhone을 출시했나요?
폴더블 iPhone은 발표된 적이 없습니다. 이 영상은 가상의 기기와 Safari의 실험적인 작업에 대해 논의하는 것이며, 확인된 Apple 제품에 대한 내용이 아닙니다.