게시: 2025년 2월 28일
더 넓은 화면은 Android 시스템 표시줄 뒤에 그려 애플리케이션이 디스플레이의 전체 너비와 높이에 걸쳐 표시되도록 하는 Android 기능입니다.
Chrome 135 이전에는 Android용 Chrome에서 화면 전체를 사용하지 않았습니다. 이 가이드에서는 이 변경사항이 웹사이트에 미치는 영향과 개발자가 이 변경사항을 수용하기 위해 할 수 있는 일을 설명합니다.
모든 플랫폼의 바
Android에는 운영체제 자체에서 제공하는 시스템 표시줄이 있습니다.
상태 표시줄, 자막 표시줄, 탐색 메뉴를 통틀어 시스템 표시줄이라고 합니다. 배터리 잔량, 시간, 알림과 같은 중요한 정보를 표시하고 어디서나 직접 기기와 상호작용할 수 있습니다.
화면 상단에는 알림 아이콘과 시스템 아이콘이 포함된 상태 표시줄이 있습니다.
화면 하단에는 뒤로, 홈, 전체보기 컨트롤을 사용하여 탐색을 제어할 수 있는 탐색 메뉴가 있습니다. 이는 기존의 3버튼 탐색 또는 최신 동작 탐색 메뉴일 수 있습니다.
Android 시스템 표시줄 외에도 Chrome 자체에는 스크롤할 때 동적으로 확장 및 축소되는 주소 표시줄이 있습니다.
Chrome의 더 넓은 화면 표시
웹사이트를 방문하면 해당 웹사이트가 (레이아웃) 표시 영역이라는 직사각형으로 표시됩니다.
Android의 Chrome에서 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, viewport-fit=cover" />
MDN에서 viewport-fit의 다양한 값에 대해 자세히 알아보세요.
동작 탐색 메뉴에 의해 가려질 수 있는 콘텐츠 처리
더 넓은 화면 모드에서는 동작 탐색 메뉴로 인해 가려질 수 있는 콘텐츠를 고려해야 합니다.
대부분의 경우 하단 턱이 저절로 움직이므로 별도의 조치를 취할 필요가 없습니다. 사용자는 이전과 마찬가지로 웹사이트의 모든 콘텐츠에 계속 액세스할 수 있습니다.
하지만 기본적으로 더 넓은 화면을 선택하거나 표시 영역 하단에 배치된 요소가 있는 경우 해당 콘텐츠가 가려질 수 있다는 점을 고려해야 할 수 있습니다.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
친이 있으면 사용자가 처음에는 콘텐츠에 도달할 수 있지만 친이 사라지면 Android 탐색 메뉴에 의해 콘텐츠가 가려집니다.
이 문제를 완화하려면 안전 영역 인셋을 사용하여 영향을 받는 요소를 항상 Android 네이티브 하단 탐색 메뉴 위에 배치하거나 배경을 해당 영역으로 확장하세요.
안전 영역 인셋
안전 영역 인셋은 표시 영역 가장자리에서 상단, 오른쪽, 하단, 왼쪽 인셋으로 직사각형을 정의하는 네 가지 환경 변수입니다.
이 네 가지 값을 결합하면 안전 영역 직사각형이 형성되며, 이 직사각형에 콘텐츠를 배치하면 Android 동작 탐색 메뉴와 같은 요소에 의해 가려지지 않습니다.
안전 영역 하단 인셋 사용
표시 영역 하단에 배치된 요소의 경우 safe-area-inset-bottom를 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를 safe-area-inset 값으로 설정하지 마세요.
.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-max-inset-bottom를 safe-area-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(원하는 경우 'Enabled Debug'로 설정하면 하단 영역의 절반이 분홍색으로 표시되어 다른 UI와 더 명확하게 구분할 수 있음)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor('Enabled'로 설정하지 말고 'Enabled Dispatch yOffset'으로 설정)DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint('사용'으로 설정하지 말고 '사용 설정된 스크롤 가능한 변형'으로 설정)
다음 플래그가 사용 설정되어 있지 않은지 확인합니다.
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Chrome을 두 번 다시 시작합니다.
여러분의 의견을 기다립니다
Chrome 및 Chrome의 더 넓은 화면 구현에 관한 의견이 있으면 'UI > 브라우저 > 모바일 > EdgeToEdge' 구성요소에서 Chromium 버그를 신고하여 알려주세요. 의견을 보내주셔서 감사합니다.