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를 보여줍니다.
이 Layout Viewport 외에도 브라우저는 Visual Viewport도 제공합니다. 현재 표시되는 표시 영역 부분을 나타냅니다. 확대/축소 수준 1에서 이 시각적 뷰포트는 레이아웃 뷰포트와 같습니다.
손가락 모으기로 확대/축소하면 레이아웃 표시 영역을 기준으로 시각적 표시 영역의 크기가 줄어듭니다.
표시 영역 크기 조절 동작
입력란이나 수정 가능한 다른 영역에 포커스를 맞추면 기기(주로 터치 스크린 기기)에서 터치 키보드를 표시할 수 있습니다. 이 키보드는 가상 키보드라고도 하며 사용자가 수정 가능한 영역에 콘텐츠를 입력할 수 있도록 합니다.
이때 브라우저는 다양한 뷰포트에 따라 다음 방법 중 하나로 응답합니다.
- 시각적 표시 영역의 크기만 조절하고 레이아웃 표시 영역을 오프셋합니다.
- 시각적 표시 영역과 레이아웃 표시 영역의 크기를 모두 조절합니다.
- 레이아웃 표시 영역 또는 시각적 표시 영역의 크기를 조절하지 마세요. 그러면 가상 키보드가 둘 다 위에 오버레이됩니다.
이러한 세 가지 동작은 다음과 같이 시각화됩니다.
방문자가 사용하는 브라우저와 OS 조합에 따라 개발자가 제어할 수 없는 동작 중 하나가 사용됩니다.
다양한 크기 조절 동작 매핑
상호 운용성 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 (중앙 및 오른쪽)을 보여줍니다.
User-Agent 스니핑을 사용하거나 광범위한 스크립팅에 의존하지 않는 한 어떤 동작이 사용되는지 알 수 없습니다. 또한 사용자가 방문하는 브라우저 및 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에서 신고할 수 있습니다. 보고서 제목에 '터치 키보드'를 포함해야 합니다.