11월에 Chrome 108이 출시됨에 따라 Chrome에서는 터치 키보드 (OSK)가 표시될 때 레이아웃 표시 영역이 작동하는 방식이 일부 변경됩니다. 이번 변경으로 Android용 Chrome에서는 더 이상 레이아웃 표시 영역의 크기를 조절하지 않고 시각적 표시 영역만 조절합니다. 이렇게 하면 Android의 Chrome 동작이 iOS의 Chrome 및 iOS의 Safari와 동일하게 작동합니다.
Chrome에서 이번 변경사항을 도입한 이유와 이에 대비하기 위해 필요한 사항을 안내해 드립니다.
레이아웃 표시 영역 및 시각적 표시 영역
웹사이트를 방문할 때 페이지가 로드된 후 전체 페이지의 콘텐츠를 볼 수 없습니다. 대신 브라우저에서 페이지의 일부를 볼 수 있는 표시 영역을 제공합니다. 이 표시 영역은 레이아웃 표시 영역이라고도 합니다. 페이지의 콘텐츠가 너무 커지면 브라우저에서 스크롤 메커니즘을 제공합니다.
position: fixed를 사용하여 요소를 배치하면 해당 레이아웃 표시 영역에 배치됩니다. 페이지를 아래로 스크롤해도 레이아웃 표시 영역이 그대로 유지되므로 position: fixed를 사용하는 요소도 그대로 유지됩니다.
position: fixed(파란색 상자)를 사용하여 배치된 두 요소가 있습니다. iPhone의 Safari, Android의 Chrome, Android의 Firefox가 왼쪽에서 오른쪽 순서로 표시되어 있습니다.
브라우저는 이러한 레이아웃 표시 영역 외에 시각적 표시 영역도 제공합니다. 표시 영역에서 현재 보이는 부분을 나타냅니다. 확대/축소 수준 1에서는 이 시각적 표시 영역 크기가 레이아웃 표시 영역만큼 큽니다.
손가락을 모으거나 펼쳐 확대하면 레이아웃 표시 영역을 기준으로 시각적 표시 영역의 크기가 줄어듭니다.
표시 영역 크기 조절 동작
입력 또는 기타 편집 가능한 영역에 포커스를 맞추면 기기(대부분 터치스크린 기기)에 터치 키보드가 표시됩니다. 가상 키보드라고도 하는 이 키보드를 사용하면 사용자가 편집 가능 영역에 콘텐츠를 입력할 수 있습니다.
이렇게 할 때 브라우저는 다양한 표시 영역과 관련하여 다음 방법 중 하나로 응답합니다.
- 시각적 표시 영역 크기만 조절하고 레이아웃 표시 영역을 오프셋합니다.
- 시각적 표시 영역 및 레이아웃 표시 영역의 크기를 모두 조절합니다.
- 레이아웃 표시 영역 또는 시각적 표시 영역 위에 가상 키보드를 오버레이하여 크기를 조정해서는 안 됩니다.
이 세 가지 동작을 다음과 같이 시각화합니다.
방문자가 사용하는 브라우저와 OS 조합에 따라 관리자가 제어할 수 없는 행동 중 하나가 사용됩니다.
다양한 크기 조절 동작 매핑
Interop 2022의 뷰포트 조사 작업에서는 모든 주요 브라우저 및 OS 조합에 대한 다양한 표시 영역 관련 측면을 조사했습니다.
테스트된 측면 중 하나는 OSK가 표시될 때의 크기 조절 동작입니다. 이는 다음과 같은 분류로 이어졌습니다.
그룹 1
시각적 표시 영역 크기를 조절하고 레이아웃 표시 영역을 그대로 유지하는 브라우저
- iOS의 Safari
- iPadOS의 Safari
- ChromeOS의 Chrome
- iOS의 Chrome
- iPadOS의 Chrome
- iOS의 Edge
- iPadOS의 Edge
그룹 2
시각적 표시 영역과 레이아웃 표시 영역의 크기를 모두 조절하는 브라우저
- Android용 Chrome
- Android의 Firefox
- Android의 Edge
- iOS의 Firefox
그룹 3
표시 영역의 크기를 조절하지 않는 브라우저:
- 기본적으로 없음 – Android용 Chrome에서는 VirtualKeyboard API를 통해 이 동작을 선택할 수 있습니다.
각 동작의 부작용
OSK가 표시될 때 다양한 표시 영역의 크기가 조절되는 방식의 이러한 차이로 인해 웹사이트의 레이아웃과 크기 조정 동작이 상호 운용되지 않습니다.
그룹 1의 브라우저(OSK가 표시됨)
- 표시 영역 기준 단위의 계산된 값은 동일하게 유지됩니다.
- 전체 시각적 공간을 차지하도록 설계된 요소는 크기를 유지합니다.
position: fixed를 사용하는 요소는 그대로 유지되며 OSK에 의해 가려질 수 있습니다.
그룹 2의 브라우저(OSK가 표시됨)
- 표시 영역 기준 단위의 계산된 값이 축소됩니다.
- 전체 시각적 공간을 차지하도록 설계된 요소가 축소됩니다.
position: fixed를 사용하는 요소는 레이아웃의 다른 위치에 있을 수 있습니다.
position: fixed를 사용하는 요소의 다양한 위치(파란색 상자)에 유의하세요. iOS의 Safari (왼쪽)와 Android의 Chrome (가운데와 오른쪽)이 표시되어 있습니다.
사용자 에이전트 스니핑을 사용하거나 광범위한 스크립팅에 의존하지 않는 한 어떤 동작이 사용되는지 알 수 없습니다. 또한 이 동작은 사용자가 방문하는 브라우저와 OS 조합에 따라 결정되므로 변경할 수 없습니다.
Chrome 108의 기본 동작 변경
Chrome 108부터 Android용 Chrome에서는 터치 키보드가 표시될 때 더 이상 레이아웃 표시 영역의 크기를 조절하지 않도록 표시 영역 크기 조절 동작을 조정합니다.
이에 따라 Android용 Chrome의 동작이 iOS, iPadOS, Windows, CrOS의 Chrome, iOS 및 iPadOS의 Safari, iOS, iPadOS, Windows의 Edge와 동일하게 작동합니다.
이러한 변경사항 덕분에 개발자는 Chrome이 실행 중인 OS와 관계없이 어떤 동작이 사용될지 알 수 있게 되었습니다. 또한 이를 통해 안정적인 표시 영역 기준 단위를 만들 수 있습니다. OSK를 표시하거나 숨기더라도 이러한 단위에는 영향을 미치지 않습니다.
다른 행동 선택
웹사이트에서 108 이전의 크기 조절 동작을 사용하고 싶으시다면 걱정하지 마세요. 또한 Chrome 108에서 표시 영역 메타 태그의 확장 프로그램이 제공됩니다.
interactive-widget 키를 사용하여 원하는 크기 조절 동작을 Chrome에 알릴 수 있습니다.
interactive-widget에 허용되는 값은 다음과 같습니다.
resizes-visual: 시각적 표시 영역만 조절하고 레이아웃 표시 영역의 크기는 조절하지 않습니다.resizes-content: 시각적 표시 영역과 레이아웃 표시 영역의 크기를 모두 조절합니다.overlays-content: 표시 영역의 크기를 조절하지 않습니다.
Android의 '이전' Chrome 동작을 다시 선택하려면 표시 영역 메타 태그를 다음과 같이 설정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
표시 영역 메타 태그에 interactive-widget를 포함하지 않으면 Chrome에서 기본 동작(resizes-visual)을 사용합니다.
시각화된 설정은 다양한 표시 영역에서 다음과 같은 영향을 미칩니다.
resizes-visual, resizes-content, overlays-content입니다.
이 데모 웹사이트에서 브라우저에서 각 값의 효과를 시험해 볼 수 있습니다.
테스트 및 의견
기존 사이트와 사소한 차이가 있을 것으로 예상되지만 이제 Android용 Chrome 108이 iOS의 Safari와 유사하게 작동하므로 이러한 사이트는 차단되지 않을 것으로 예상됩니다. 따라서 iOS의 Safari에서 제대로 작동하는 웹사이트는 Android의 Chrome 108에서도 정상적으로 작동합니다.
하지만 웹사이트 작성자는 2022년 10월 27일부터 베타 버전으로 제공되는 Chrome 108에서 웹사이트를 적극적으로 테스트하는 것이 좋습니다. 특히 position: fixed를 사용하거나 표시 영역 기준 단위를 사용하는 요소를 주의하세요.
의견은 crbug.com에서 신고할 수 있습니다. 보고서 제목에 '터치 키보드'를 포함해야 합니다.