Android의 Chrome 전체 화면 이전 가이드

Bramus

게시일: 2025년 2월 28일

전체 화면은 애플리케이션이 Android 시스템 표시줄 뒤에 그려져 디스플레이의 전체 너비와 높이를 차지할 수 있는 Android 기능입니다.

Chrome 135 이전에는 Android용 Chrome이 전체 화면을 그려 넣지 않았습니다. 이 가이드에서는 이 변경사항이 웹사이트에 미치는 영향과 개발자가 이 변경사항을 수용하기 위해 취할 수 있는 조치를 설명합니다.

참고: Chrome 135의 변경사항은 소형 화면 기기를 타겟팅합니다. 대형 화면 기기에서 실행되는 Android용 Chrome은 현재 제외되어 있으며 향후 Chrome 출시에서 다뤄질 예정입니다.

참고: 이 기능은 Chrome 변형을 사용하여 출시됩니다. 따라서 이전 버전의 Chrome에서는 이 버그가 표시될 수 있습니다.

어디서나 즐기는 술집

Android에는 운영체제 자체에서 제공하는 시스템 표시줄이 함께 제공됩니다.

상태 표시줄, 자막 표시줄, 탐색 메뉴를 통틀어 시스템 표시줄이라고 합니다. 배터리 잔량, 시간, 알림 알림과 같은 중요한 정보를 표시하고 어디서나 기기와 직접 상호작용할 수 있도록 지원합니다.

화면 상단에는 알림 아이콘과 시스템 아이콘이 포함된 상태 표시줄이 있습니다.

Android의 상태 표시줄에 (source)가 강조 표시되었습니다.

화면 하단에는 뒤로, 홈, 개요 컨트롤을 사용하여 탐색을 제어할 수 있는 탐색 메뉴가 있습니다. 기존의 3버튼 탐색 또는 최신 동작 탐색 바일 수 있습니다.

동작 탐색 메뉴(source)

Chrome 자체에는 Android 시스템 표시줄 외에도 스크롤할 때 동적으로 확장 및 접히는 주소 표시줄이 있습니다.

Chrome이 더 넓은 화면으로 이동

웹사이트를 방문하면 해당 웹사이트가 (레이아웃) 뷰포트라고 하는 직사각형으로 표시됩니다.

Android의 Chrome에서는 Chrome 135 이전에 이 레이아웃 표시 영역이 상단 상태 표시줄과 하단 동작 탐색 메뉴 바 사이에 그려집니다. Chrome의 주소 표시줄 유무는 표시 영역 크기에 영향을 줄 수 있지만 표시 영역은 상단 시스템 표시줄이나 하단 동작 탐색 메뉴 표시줄까지 확장되지 않습니다.

Chrome 135 이전의 Android용 Chrome에서 뷰포트의 최소 및 최대 크기입니다. 이러한 크기를 소형 및 대형 표시 영역이라고 합니다. 표시 영역 자체에는 파란색 점선 윤곽선이 있습니다.

Chrome 135부터 표시 영역이 Android의 동작 탐색 메뉴로 확장될 수 있습니다. 이를 더 넓은 화면이라고 합니다.

Android용 Chrome에 표시된 전체 화면이 아닌 대형 뷰포트 (왼쪽)와 Chrome에 표시된 전체 화면 대형 뷰포트 (오른쪽) 화면 전체를 지원하는 Chrome에서 Chrome의 동적 툴바가 접히면 뷰포트가 동작 탐색 메뉴 영역까지 확장됩니다.

참고: iOS의 Chrome은 iOS 11.3 출시와 함께 전체 화면 지원을 추가했습니다. 이 가이드의 권장사항은 iOS에서 실행되는 Chrome에도 적용됩니다.

더 넓은 화면이 없는 Chrome 동작

다음 녹화 파일은 전체 화면 지원이 없는 Android용 Chrome을 보여줍니다. 페이지를 스크롤하면 Chrome의 주소 표시줄 (상단)이 동적으로 사라집니다. 하지만 Android 네이티브 상단 상태 표시줄과 하단의 Android 네이티브 탐색 메뉴는 고정된 상태로 유지됩니다.

이전 동작: 전체 화면 지원이 없고 https://developer.chrome.com/이 로드된 Android용 Chrome

여기서 Chrome의 주소 표시줄이 접히거나 펼쳐짐에 따라 레이아웃 표시 영역의 크기가 변경됩니다.

더 넓은 화면을 사용하는 Chrome 동작

Chrome 135부터 Chrome은 뷰포트를 동작 탐색 메뉴 영역으로 확장하여 웹 콘텐츠를 기기 하단 가장자리까지 그릴 수 있습니다.

'턱'이 있는 동적 모서리 to 모서리

기본적으로 Chrome 전체 화면에는 동작 탐색 메뉴 영역 위에 '턱'이라고 하는 새로운 동적 하단 바가 표시됩니다. Chrome 주소 표시줄과 마찬가지로 이 턱은 스크롤을 시작하면 사라지며 뷰포트 크기에 영향을 미칩니다.

다음은 테두리까지 지원되는 Android용 Chrome의 녹화본으로, 페이지가 아래로 스크롤될 때 Chrome 주소 표시줄과 턱이 모두 동적으로 접힙니다. 이렇게 하면 뷰포트가 확장되어 웹 콘텐츠가 기기의 하단 가장자리까지 그려질 수 있습니다.

새로운 동작: 전체 화면 지원 및 https://developer.chrome.com/이 로드된 Android용 Chrome 페이지가 스크롤될 때 하단 턱이 어떻게 사라지는지 확인합니다.

이 턱 동작은 Chrome 135부터의 새로운 기본 Chrome 동작입니다.

선택사항으로 기본적으로 더 넓은 화면을 활용

전체 화면을 위해 빌드된 웹사이트는 viewport 메타 태그를 조정하여 이를 나타낼 수 있습니다. 사용 설정하면 표시 영역이 기본적으로 하단 가장자리까지 확장되며 턱이 표시되지 않습니다.

더 넓은 화면 선택 시의 새로운 동작: 페이지가 로드될 때 표시 영역이 하단 가장자리까지 확장됩니다. 턱이 없습니다.

페이지는 viewport 메타 태그와 viewport-fit 키를 사용하여 전체 화면을 지원한다고 표시할 수 있습니다.

전체 화면을 선택하려면 viewport-fit를 cover 값으로 설정합니다.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

viewport-fit의 다양한 값에 대해 자세히 알아보려면 MDN을 참고하세요.

동작 탐색 메뉴에 가려질 수 있는 콘텐츠 처리

전체 화면 모드에서는 동작 탐색 메뉴에 의해 가려질 수 있는 콘텐츠를 고려해야 합니다.

대부분의 경우 하단 턱이 저절로 벗어나므로 별도의 조치를 취하지 않아도 됩니다. 사용자는 이전과 같이 웹사이트의 모든 콘텐츠에 계속 액세스할 수 있습니다.

하지만 기본적으로 전체 화면을 선택했거나 뷰포트 하단에 배치된 요소가 있는 경우 해당 콘텐츠가 가려질 수 있다는 점에 유의해야 합니다.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

턱이 있으면 처음에는 사용자가 콘텐츠에 액세스할 수 있지만 턱이 사라지면 Android의 탐색 메뉴에 가려집니다.

`bottom: 0`으로 하단에 배치된 요소가 있는 웹사이트의 그림입니다. 턱이 표시되면 하단에 배치된 요소가 Android의 탐색 메뉴 위에 배치됩니다. 턱이 멀어지면 요소가 Android의 탐색 메뉴 뒤에 배치되어 이 시점에서 요소가 부분적으로 가려집니다.

이 문제를 완화하려면 안전 영역 인셋을 사용하여 영향을 받는 요소를 항상 Android 네이티브 하단 동작 탐색 메뉴 위로 배치하거나 배경을 해당 영역까지 확장합니다.

안전 영역 인셋

Browser Support

• 69
• 79
• 65
• 11

Source

안전 영역 인셋은 표시 영역 가장자리에서 상단, 오른쪽, 하단, 왼쪽 인셋으로 직사각형을 정의하는 4개의 환경 변수입니다.

이 네 개의 값을 결합하면 Android 동작 탐색 메뉴와 같은 요소에 의해 가려지지 않도록 콘텐츠를 안전하게 배치할 수 있는 안전 영역 직사각형이 형성됩니다.

뷰포트와 안전 영역 직사각형이 노란색으로 칠해진 전체 화면 모드의 Chrome을 보여주는 그림입니다. 턱이 접혀 있으므로 안전 영역 하단 인셋은 안전 영역 직사각형이 동작 탐색 메뉴에 도달하지 못하도록 합니다. 따라서 동작 탐색 메뉴 아래에서 뷰포트가 엿보입니다.

안전 영역 하단 인셋 사용

표시 영역 하단에 배치된 요소의 경우 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를 safe-area-inset 값으로 설정하지 마세요.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

중요: 성능 저하를 방지하기 위해 Chrome은 이 패턴을 감지하면 스크롤할 때 하단을 슬라이드하지 않습니다.

안전 영역 하단 인셋 및 안전 영역 하단 최대 인셋 사용

대신 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));
}

실시간 데모 사용해 보기

참고: safe-area-max-inset-bottom의 36px 대체 값은 safe-area-max-inset-bottom를 지원하지 않는 브라우저를 수용하기 위해 선택됩니다. 이 값은 iOS의 단일 탭 모드에서 Safari가 세로 모드에서 최대 하단 오프셋이 36px이기 때문에 선택되었습니다.

중요: Chrome에는 calc(env(safe-area-inset-bottom, …) +/- …); 패턴을 감지할 때 적용되는 코드 최적화(소위 빠른 경로)가 있습니다. 이 빠른 경로를 사용하면 턱이 사라질 때 하단에 고정된 콘텐츠가 턱과 함께 성능이 우수한 방식으로 이동할 수 있습니다.

시각적 결과는 padding-bottom: env(safe-area-inset-bottom, 0px); 접근 방식과 동일하지만 성능이 훨씬 우수합니다. 턱이 멀어지면서 bottom의 계산된 값만 변경하면 되므로 레이아웃 트래싱이 발생하지 않습니다.

안전 영역 인셋을 고려하는 하단 고정 요소가 있는 웹사이트의 그림입니다. 턱이 보이면 (왼쪽) 요소가 턱 위에 배치됩니다. 턱이 보이지 않으면 요소가 Android의 제스처 탐색 메뉴에 시각적으로 번짐

참고: 최대 안전 영역 인셋 (safe-area-max-inset-bottom 및 관련 함수)은 Chrome 135부터 사용할 수 있습니다.

Chrome 135 이전에 전체 화면을 사용해 보기

전체 화면을 공개 안정화 버전으로 출시하기 전에 사용해 보려면 chrome://flags를 통해 여러 Chrome 기능 플래그를 사용 설정해야 합니다.

• EdgeToEdgeBottomChin (선택적으로 'Enabled Debug'(디버그 사용 설정)로 설정하면 턱의 절반이 분홍색으로 표시되어 다른 UI와 더 명확하게 구분됩니다.)
• DrawCutOutEdgeToEdge
• BottomBrowserControlsRefactor ('사용'으로 설정하지 말고 'Dispatch yOffset 사용'으로 설정)
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• EdgeToEdgeSafeAreaConstraint ('사용'이 아닌 '스크롤 가능한 변형 사용'으로 설정)

다음 플래그가 사용 설정되어 있지 않는지 확인합니다.

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

Chrome을 두 번 다시 시작합니다.

여러분의 의견을 기다립니다

Chrome 및 전체 화면 구현에 관한 의견이 있으면 'UI > 브라우저 > 모바일 > EdgeToEdge' 구성요소에서 Chromium 버그를 신고하여 문의해 주세요. 의견을 보내주셔서 감사합니다.