게시일: 2025년 2월 28일
더 넓은 시야는 애플리케이션이 Android 시스템 표시줄 뒤에 그려 디스플레이의 전체 너비와 높이를 차지할 수 있는 Android 기능입니다.
Chrome 135 이전에는 Android에서 실행되는 Chrome이 더 넓은 화면을 그리지 않았습니다. 이 가이드에서는 이번 변경사항이 웹사이트에 미치는 영향과 개발자가 이번 변경사항을 수용하기 위해 할 수 있는 일을 설명합니다.
어디에나 있는 바
Android에는 운영체제 자체에서 제공하는 시스템 표시줄이 함께 제공됩니다.
상태 표시줄, 자막 표시줄, 탐색 메뉴를 합쳐 시스템 표시줄이라고 합니다. 배터리 잔량, 시간, 알림과 같은 중요한 정보를 표시하고 어디서나 직접 기기와 상호작용할 수 있습니다.
화면 상단에는 알림 아이콘과 시스템 아이콘이 포함된 상태 표시줄이 있습니다.
화면 하단에는 뒤로, 홈, 개요 컨트롤을 사용하여 탐색을 제어할 수 있는 탐색 메뉴가 있습니다. 기존 3버튼 탐색 또는 최신 동작 탐색 메뉴일 수 있습니다.
Android 시스템 표시줄 외에도 Chrome 자체에는 스크롤할 때 동적으로 확장 및 축소되는 주소 표시줄이 있습니다.
Chrome이 더 넓은 화면으로 표시됨
웹사이트를 방문하면 해당 웹사이트가 레이아웃 뷰포트라고 하는 직사각형에 표시됩니다.
Android에서 Chrome 135 이전에는 레이아웃 뷰포트가 상단 상태 표시줄과 하단 동작 탐색 메뉴 사이에 그려집니다. Chrome의 주소 표시줄이 있으면 (또는 없으면) 뷰포트 크기에 영향을 줄 수 있지만 뷰포트가 상단 시스템 표시줄이나 하단 동작 탐색 표시줄로 확장되지는 않습니다.
Chrome 135부터는 뷰포트가 Android의 동작 탐색 메뉴로 확장될 수 있습니다. 이 동작을 더 넓은 화면이라고 합니다.
더 넓은 화면이 없는 Chrome 동작
다음 녹화 영상에서는 Android에서 가장자리 대 가장자리 지원이 없는 Chrome을 보여줍니다. 페이지를 스크롤하면 Chrome의 주소 표시줄 (상단)이 동적으로 사라집니다. 하지만 Android 네이티브 상단 상태 표시줄과 하단의 Android 네이티브 탐색 메뉴는 제자리에 고정되어 있습니다.
여기서는 Chrome의 주소 표시줄이 접히거나 펼쳐짐에 따라 레이아웃 뷰포트의 크기가 변경됩니다.
더 넓은 화면에서 Chrome 동작
Chrome 135부터는 뷰포트를 동작 탐색 메뉴 영역으로 확장하여 Chrome이 기기 하단 가장자리까지 웹 콘텐츠를 그릴 수 있습니다.
'턱'이 있는 동적 에지 투 에지
기본적으로 Chrome 전체 화면 모드에서는 동작 탐색 메뉴 영역 위에 '턱'이라고 하는 새로운 동적 하단 바가 표시됩니다. Chrome 주소 표시줄과 마찬가지로 이 하단 영역은 스크롤을 시작하면 사라지며 표시 영역의 크기에 영향을 미칩니다.
다음은 더 넓은 화면을 지원하는 Android용 Chrome의 녹화 영상입니다. 페이지를 아래로 스크롤하면 Chrome 주소 표시줄과 하단이 모두 동적으로 접힙니다. 이렇게 하면 표시 영역이 확장되어 웹 콘텐츠가 기기의 하단 가장자리까지 그려질 수 있습니다.
이 턱 동작은 Chrome 135부터 새로운 기본 Chrome 동작입니다.
선택을 통해 기본적으로 더 넓은 화면을 활용
더 넓은 화면을 위해 빌드된 웹사이트는 viewport 메타 태그를 조정하여 이를 나타낼 수 있습니다. 사용 설정하면 턱이 표시되지 않고 뷰포트가 기본적으로 하단 가장자리까지 확장됩니다.
페이지는 viewport 메타 태그와 viewport-fit 키를 사용하여 더 넓은 화면을 지원한다고 나타낼 수 있습니다.
더 넓은 화면을 선택하려면 viewport-fit을 cover 값으로 설정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /
viewport-fit의 다양한 값에 대해 MDN에서 자세히 알아보세요.
동작 탐색 메뉴에 의해 가려질 수 있는 콘텐츠 처리
전체 화면 모드에서는 동작 탐색 메뉴에 의해 가려질 수 있는 콘텐츠를 고려해야 합니다.
대부분의 경우 하단 턱이 자동으로 움직여 방해가 되지 않으므로 별도로 조치를 취할 필요가 없습니다. 사용자는 이전과 마찬가지로 웹사이트의 모든 콘텐츠에 액세스할 수 있습니다.
하지만 기본적으로 더 넓은 화면을 선택하거나 뷰포트 하단에 배치된 요소가 있는 경우 콘텐츠가 가려질 수 있다는 점을 고려해야 합니다.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
턱이 있으면 사용자가 처음에는 콘텐츠에 도달할 수 있지만 턱이 사라지면 Android의 탐색 메뉴에 의해 콘텐츠가 가려집니다.
이 문제를 완화하려면 안전 영역 인셋을 사용하여 영향을 받는 요소를 항상 Android 네이티브 하단 동작 탐색 메뉴 위에 배치하거나 배경이 해당 영역으로 확장되도록 합니다.
안전 영역 인셋
안전 영역 인셋은 뷰포트 가장자리에서 상단, 오른쪽, 하단, 왼쪽 인셋으로 직사각형을 정의하는 네 개의 환경 변수입니다.
이 네 가지 값을 합치면 Android 동작 탐색 메뉴와 같은 요소에 의해 가려지지 않도록 콘텐츠를 배치할 수 있는 안전한 영역 사각형이 형성됩니다.
안전 영역 하단 인셋 사용
표시 영역 하단에 배치된 요소의 경우 bottom 속성의 값으로 safe-area-inset-bottom를 사용하여 동작 탐색 메뉴 아래에 배치되지 않도록 합니다. safe-area-inset-bottom에 의해 반환된 값은 턱이 움직여 방해가 되지 않도록 동적으로 업데이트되므로 하단에 배치된 요소가 Android의 동작 탐색 메뉴 바 위에 잘 유지됩니다.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}
bottom 속성을 사용하여 하단 안전 영역 인셋을 사용하는 하단 위치 요소가 있는 웹사이트의 그림 턱이 표시되면 표시줄이 Android의 동작 탐색 메뉴 위에 배치됩니다. 턱이 사라지면 요소도 턱 위에 배치됩니다.그림에서 볼 수 있듯이 아직 완벽하지는 않습니다. 턱이 이동하면 나머지 페이지 콘텐츠가 동작 탐색 메뉴 영역에 표시됩니다. 이 상태에서는 뷰포트가 동작 탐색 메뉴 영역으로 확장되기 때문입니다.
콘텐츠가 하단 고정 콘텐츠 아래에 그려지지 않도록 하는 흔히 사용되는 방법은 padding-bottom를 safe-area-inset-bottom로 설정하는 것입니다. 이렇게 하면 턱이 숨겨질 때 하단 고정 요소가 자동으로 커집니다. 이 방법은 작동하지만 턱이 움직여서 레이아웃 스래싱이 발생하므로 권장되지 않습니다.
padding을 안전 영역 인셋 값으로 설정하지 마세요.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}
안전 영역 하단 인셋 및 안전 영역 하단 최대 인셋 사용
대신 safe-area-inset-bottom 및 safe-area-max-inset-bottom의 조합을 사용하는 것이 좋습니다. 턱이 움직여서 시야에서 벗어나면 동적으로 업데이트되는 동적 safe-area-inset-bottom와 달리 safe-area-max-inset-bottom는 safe-area-inset-bottom의 최댓값을 나타냅니다.
이 safe-area-max-inset-bottom를 사용하여 하단 고정 요소를 미리 확장하고 safe-area-inset-bottom와 결합하여 요소가 턱 뒤에 위치하도록 아래로 당깁니다.
safe-area-inset-bottom와 함께 safe-area-max-inset-bottom 사용
:root {
--safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
--bottom-bar-height: 50px;
}
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
height: var(--bottom-bar-height);
padding-bottom: var(--safe-area-max-inset-bottom);
bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}
body {
padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}
시각적 결과는 padding-bottom: env(safe-area-inset-bottom, 0px); 접근 방식과 동일하지만 성능은 훨씬 뛰어납니다. 턱이 멀어질 때 bottom의 계산된 값만 변경하면 되므로 레이아웃 스래싱이 발생하지 않습니다.
Chrome 135 이전 버전에서 더 넓은 화면 사용해 보기
정식 안정화 버전이 출시되기 전에 더 넓은 화면을 사용해 보려면 chrome://flags를 통해 여러 Chrome 기능 플래그를 사용 설정해야 합니다.
EdgeToEdgeBottomChin(선택적으로 '디버그 사용'으로 설정하면 다른 UI와 더 명확하게 구분하기 위해 턱의 절반이 분홍색으로 표시됨)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor('사용'으로 설정하지 않고 'yOffset 디스패치 사용'으로 설정)DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint('사용'으로 설정하지 않고 '스크롤 가능한 변형 사용'으로 설정)
다음 플래그가 사용 설정되어 있지 않은지 확인합니다.
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Chrome을 두 번 다시 시작합니다.
여러분의 의견을 기다립니다
Chrome 및 전체 화면 구현에 관한 의견이 있으면 'UI > 브라우저 > 모바일 > EdgeToEdge' 구성요소에 Chromium 버그를 신고하여 문의해 주세요. 의견을 보내주셔서 감사합니다.