Safe area, 2017 iPhone X 노치 대응

한 줄로

화면에서 콘텐츠가 잘리지 않고 표시되는 영역입니다. 2017년 iPhone X의 노치와 함께 CSS 표준이 됐습니다.

어디서 왔나

iPhone X(2017) 이전, 모바일 화면은 직사각형이었습니다. 화면 끝까지 콘텐츠를 채울 수 있었습니다.

iPhone X는 두 가지 변화를 가져왔습니다.

1. 노치: 화면 위 가운데 검은 홈.

2. 홈 인디케이터: 화면 아래의 검은 막대.

이 두 영역에 콘텐츠가 들어가면 사용자가 잘 못 봅니다. Apple은 이 문제를 해결하기 위해 safe area를 정의했습니다. 화면에서 노치, 인디케이터를 제외한 안전한 영역입니다.

CSS는 2017년에 이걸 표준화했습니다. env() 함수와 safe-area-inset-* 환경 변수입니다.

.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }
.top-bar { padding-top: env(safe-area-inset-top); }

iPhone X에서 safe-area-inset-top은 약 44px (노치 영역), safe-area-inset-bottom은 34px (홈 인디케이터)입니다.

viewport-fit

기본적으로 웹은 노치 영역에 콘텐츠를 그리지 않습니다. 노치 영역까지 채우고 싶다면 viewport-fit=cover 설정입니다.

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

이러면 배경 색이 노치 영역까지 채워집니다. 단, 텍스트, 버튼은 여전히 safe area 안에 둬야 합니다.

안드로이드의 case

안드로이드 폰은 제조사마다 노치/펀치홀/카메라 위치가 다릅니다. CSS의 env() 함수는 안드로이드에서도 동작합니다.

다만 안드로이드는 status bar와 navigation bar가 OS가 그리는 시스템 영역이라 safe area 개념이 다르게 작동합니다.

Tailwind CSS

Tailwind에는 safe area를 위한 별도 클래스 없지만, plugin으로 추가 가능합니다.

.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

바이브 메이커가 챙길 한 가지

모바일 웹/앱을 만든다면 fixed 위치의 하단 요소 (bottom nav, 결제 버튼)는 항상 safe area를 고려해야 합니다. 그렇지 않으면 iPhone X 이후 모델에서 홈 인디케이터가 그 위에 겹칩니다. 안 좋은 첫 인상의 흔한 원인입니다.

관련

Notch · Dynamic Island · Responsive design