기기 레이아웃 모드: 회색 버튼이 하는 일, 그리고 가끔 필요한 이유

무슨 일이 일어나는가

이 앱을 포함해 iOS의 모든 브라우저는 Apple의 WebKit 엔진을 사용해야 합니다. 이는 누군가가 택한 지름길이 아니라 플랫폼의 규칙입니다. iOS의 WebKit은 터치 입력에 대한 특정한 가정을 하는데, 페이지가 두 번째 화면의 합성 커서로 조작될 때는 그 가정이 더 이상 성립하지 않습니다.

마찰은 내장 프레임에 집중됩니다. 사이트가 다른 도메인의 iframe 안에 일부를 불러올 때, 그 프레임은 격리되어 브라우저 엔진 자체의 입력 경로를 통해서만 이벤트를 받습니다. 쿠키 동의 관리자가 그렇게 하고, 결제 양식, 신원 확인 제공업체의 로그인 창, 내장 동영상 플레이어도 마찬가지입니다. 때로는 외부 디스플레이에서 발생한 클릭이 안으로 전달되지 않습니다.

사이트들도 이를 우연히 하는 것이 아닙니다. 민감한 컨트롤을 교차 도메인 프레임 안에 격리하는 것은 의도적인 부정 방지 조치입니다. 페이지에서 실행되는 자동화 스크립트는 안으로 들어가 "결제" 또는 "로그인"을 누를 수 없습니다. 이 조치는 제 역할을 잘 해내지만, 그 과정에서 두 번째 화면에서 온 정당한 커서까지 함께 걸러냅니다.

XeOS는 이런 상황을 드물게 만들기 위해 상당한 노력을 기울입니다. 클릭은 Shadow DOM을 통해 히트 테스트되며, 닫힌 shadow root까지 포함되어 대부분의 쿠키 배너를 커버합니다. 포커스는 중첩된 하위 요소가 아니라 올바른 편집 가능 호스트로 향하도록 설계되어, 채팅과 메모 사이트의 텍스트 필드가 제대로 동작합니다. 하지만 합성 입력을 거부하는 교차 출처 프레임은 앱이 넘을 수 없는 벽입니다.

4초 만에 끝나는 우회법

케이블을 뽑거나 페이지를 포기하게 만드는 대신, XeOS는 그 창을 완벽하게 조작할 수 있는 화면, 즉 휴대폰 화면으로 넘깁니다.

1. 창 모서리의 회색 전화기 버튼을 클릭하세요.
2. 페이지가 iPhone이나 iPad 자체 화면에 평소의 터치 레이아웃으로 나타납니다.
3. 작동하지 않았던 그 한 가지를 하세요. 배너에 동의하고, 로그인 버튼을 탭하고, 카드 필드를 채우세요.
4. 휴대폰에서 돌아가기 버튼을 탭하면 창이 원래 있던 그대로 외부 디스플레이로 돌아갑니다.

아무것도 다시 불러오지 않습니다. 있던 자리, 스크롤 위치, 입력했던 내용이 그대로 유지됩니다.

세로 모드일까요, 가로 모드일까요?

휴대폰에서 페이지가 어떤 방향으로 나타날지는 사용자가 선택합니다. 설정 과정에서 물어보며, 나중에 설정에서 언제든 바꿀 수 있습니다.

물리적 마우스를 사용한다면 가로 모드를 선택하세요. 휴대폰으로 넘어가 있는 짧은 순간 더 넓은 화면을 쓸 수 있습니다. 화면 트랙패드를 사용한다면 세로 모드를 선택하세요. 이미 기기를 그렇게 들고 있기 때문입니다.

언제 필요할까요

실제로는 몇 가지 상황으로 좁혀집니다. 제3자 동의 관리자의 쿠키 및 동의 배너. 프레임 안에서 신원 확인 제공업체로 넘어가는 로그인 흐름으로, "…로 로그인" 버튼이 흔한 원인입니다. 결제 필드는 위와 같은 이유로 결제 처리업체의 프레임 안에 있습니다. 그리고 지도, 예약 캘린더, 채팅 팝업처럼 주변 페이지와 다른 도메인에서 온 내장 위젯도 마찬가지입니다.

그 외의 모든 것, 즉 사이트 자체와 메뉴, 양식, 동영상은 외부 디스플레이에서 정상적으로 작동합니다.

왜 이것은 버그가 아닌가

클릭을 받아들이지 않는 페이지는 XeOS가 구현을 놓친 기능이 아닙니다. 이는 모든 iOS 앱이 사용해야 하는 브라우저 엔진의 한계이며, 앱이 그 계층을 제어할 수 없기 때문에 이 앱의 업데이트로도 바꿀 수 없습니다. 앱이 할 수 있는 일은 이 우회 과정을 짧고 손실 없이 유지하는 것뿐입니다.

그리고 그 우회는 실제로 짧습니다. 휴대폰에서 탭 한 번, 그리고 다시 큰 화면으로 돌아옵니다.