구글이 첫 폴더블 스마트폰 픽셀 폴드를 발표하면서, 접거나 두 화면으로 펼치는 기기를 위한 웹 설계가 다시 화두에 올랐다. 새 폼팩터에 회의적인 시각과 1세대 기기의 높은 가격 논쟁은 잠시 접어두고, 지금 당장 브라우저에서 무엇을 구현할 수 있는지를 짚어볼 필요가 있다. 결론부터 말하면, CSS에는 이미 두 개의 화면 영역을 인식하고 그 위에 콘텐츠를 배치하기 위한 기능이 마련되어 있다.
두 개의 미디어 쿼리
폴더블 기기를 겨냥하는 미디어 쿼리는 두 가지다. horizontal-viewport-segments는 책을 펼치듯 두 화면이 좌우로 나란히 놓인 상태를 대상으로 하고, vertical-viewport-segments는 노트북처럼 두 화면이 위아래로 접힌 상태를 대상으로 한다. 원문 저자는 서피스 듀오에서 파워포인트를 쓸 때 후자가 유용했다고 소개한다. 아래 화면에는 발표자 노트를, 위 화면에는 슬라이드를 띄워 두 영역을 역할별로 나눠 쓰는 식이다. 이처럼 미디어 쿼리는 단순히 화면 크기가 아니라 '기기가 어떤 자세로 펼쳐져 있는가'라는 물리적 상태를 조건으로 삼는다는 점이 기존 반응형 설계와 다르다.
환경 변수로 화면 경계를 읽는다
각 화면의 기하학적 정보를 얻기 위해 듀얼 스크린용 CSS 환경 변수(environment variables)가 도입됐다. x·y 좌표는 하드웨어적으로 화면을 가르는 경계가 만들어내는 2차원 격자를 나타내며, 좌측 상단 영역을 0,0 기준점으로 삼는다. 이 방식의 장점은 값이 기기별로 자동 계산된다는 데 있다. 현재 나와 있는 폴더블 기기들은 화면 크기도, 경첩(힌지) 폭도 제각각인데, 환경 변수를 쓰면 개발자가 기기마다 별도의 디자인을 만들 필요 없이 필요한 치수를 브라우저가 대신 맞춰준다. 또한 이 변수들을 이용해 두 화면에 걸쳐 콘텐츠를 배치하는 것도 가능하다.
원문 저자는 이를 CSS 그리드와 결합한 레시피 페이지 데모로 설명한다. 듀얼 스크린 기기에서는 페이지가 2열 레이아웃으로 바뀌는데, 환경 변수를 그리드의 열이나 행 값으로 그대로 사용한다. 예컨대 기기를 책처럼 세로로 펼쳤을 때 첫 번째 열이 왼쪽 화면 전체를 차지하고, 두 번째 열이 남는 오른쪽 화면 폭을 채우도록 지정할 수 있다. 더 명시적으로 각 열이 각각의 화면을 차지하도록 작성하는 것도 가능하다. 즉 콘텐츠가 힌지를 피해 각 화면에 자연스럽게 나뉘어 담기게 된다.
굳이 대응해야 할까
듀얼 스크린 디자인 이야기가 나올 때마다 부정적 반응이 따라붙는다. 하지만 모든 사이트나 앱이 두 화면 모드를 갖춰야 하는 것은 아니다. 서피스 듀오만 해도 브라우저를 한쪽 화면에만 띄우면 평범한 반응형 웹처럼 동작한다. 저자가 강조하는 판단 기준은 명확하다. 우리 고객이 실제로 어떤 기기를 쓰는지 파악하고, 두 화면 대응이 투자할 만한 가치가 있는지를 데이터로 결정하라는 것이다. 2023년 출하가 예상되는 폴더블은 2100만 대 이상으로, 전체 모바일 시장에서 보면 아주 얇은 조각에 불과하지만 그래도 수백만 대가 실제로 쓰인다는 뜻이기도 하다. 반대로, 남들과 차별화해 사용자에게 색다른 경험을 주고 싶다면 폴더블 대응이 눈에 띄는 카드가 될 수 있다.
브라우저 지원이 관건
실무 관점에서 가장 큰 제약은 지원 범위다. 해당 미디어 쿼리와 환경 변수는 현재 마이크로소프트 엣지 정식 버전에서 지원된다. 반면 크롬 정식 버전에는 아직 같은 수준의 지원이 없어, chrome://flags에서 실험적 웹 플랫폼 플래그를 켜고 서피스 듀오 에뮬레이터로 테스트해야 한다. 픽셀 폴드를 내놓은 구글과 크롬 팀 입장에서는 아쉬운 공백이다. 기술 자체가 준비돼 있어도 브라우저와 운영체제 차원의 안정적 지원이 뒤따르지 않으면, 기업이 개발자와 디자이너에게 폴더블 경험 구축을 진지하게 맡기기 어렵기 때문이다.
정리하면, 접히는 화면을 위한 웹 레이아웃 기법은 '언젠가 나올 미래'가 아니라 이미 표준 CSS로 시도해볼 수 있는 영역이다. 다만 지금 단계에서는 엣지 위주의 부분 지원이라는 현실을 감안해, 프로덕션 적용보다는 자사 사용자층 데이터를 근거로 한 실험과 준비 정도로 접근하는 것이 합리적이다. 새로운 폴더블 기기가 계속 출시되는 만큼, 지원 상황을 주기적으로 점검하며 대응 여부를 저울질하는 편이 좋다.