safe area는 영상 매체에서 디스플레이 비율이 달라지더라도 타이틀이나 자막 같은 필수 요소들이 잘리지 않게 하기 위한 가이드이다. 이 개념이 모바일에서 생겨난 시점은 아마도 베젤이 얇아지면서 디스플레이 안으로 카메라나 홈 인디케이터 같은 것들이 들어오게 되면서부터였던 것 같다.

1. 2가지 문제 해결하기

1-1. 화면 꽉 채우기

아래 이미지의 왼쪽처럼 웹페이지는 safeArea만 채우기 때문에 safeArea를 제외한 영역은 빈공간으로 남게된다.

우리가 생각보다 이런 현상을 자주 마주치치 않았던 이유는 상하단 safeArea를 벗어나는 영역을 모바일 브라우저의 내비게이션바와 탭바가 알게 모르게 가려주고 있었기 때문이었다. 가려주는 UI가 없거나 가로 모드로 피벗하기라도 하면 safeArea를 벗어나는 영역이 잘린 것처럼 UI가 어글리해지는 상황을 맞이하게 된다.

이 문제를 해결하기 위해서는 html에서 웹 페이지의 viewport 설정을 지정하는 meta 태그를 건드려주면 된다. 기본적으로는 아래와 같이 작성되어 있고, viewport-fit=cover를 추가해주면 된다. viewport-fit은 기본적으로 auto로 설정되어 있다.

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

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

width=device-width 뷰포트의 폭을 디바이스의 실제 화면 폭과 일치시킴.
initial-scale=1 초기 화면 배율을 1로 설정. 모바일 브라우저가 웹 페이지를 처음 로딩할 때 화면을 확대/축소하지 않고 실제 크기로 표시하게 함
viewport-fit=cover 뷰포트에 콘텐츠가 꽉 차도록 조절 함. object-fit 속성(property)은 비디오나 이미지와 같은 대체 요소를 엘리먼트에 어떻게 채울건지에 대해서 정의할 수 있는데, 이 속성과 유사한 것 같다.

1-2. 부딪히는 부분 띄워주기

디바이스 전체가 채워지지 않는게 어색해서 이 부분을 채워주고 나면 사실상 safeArea 영역을 다시 벗어나게된 셈이긴하다. 그래서 safeArea 근처에 fixed되어 있던 컴포넌트나 스크롤 컨텐츠의 제일 하단에 있던 친구들은 아래 이미지들처럼 다이나믹 아일랜드/홈인디케이더에 다시 부딪히게 된다. 이런 현상은 특히 모바일앱에서 웹뷰를 전체로 띄워주거나, 모바일 브라우저에서 스크롤하는 상황에서 상/하단 UI가 없어졌을 때 자주 발생한다.

env() CSS 함수 사용하기

버튼이 하단 홈 인디케이터에 부딪힌다고 가정해보자. 그렇다면 아래와 같은 2가지 처리가 필요하게 될 것 같다.

1. 하단 safeArea가 있다면, 하단 safeArea 만큼 위로 띄워줘
2. 띄운 safeArea 만큼 하단 패딩으로 채워줘

.btn {
  padding-bottom: calc(env(safe-area-inset-bottom) + 15px);
}

계산할 수 있는 함수(calc)를 통해서 내가 원하는 15px에 safeArea 영역이 있다면 그만큼을 더해주는 방식으로 safeArea 유/무를 동적으로 대응할 수 있게 된다.

2. statusbar, theme 컬러 변경

2가지 해결 방법으로 safeArea 문제를 잘 해결한 것 같은데, 새로운 문제를 발견하게 됐을 때가 있다.

2-1. statusbar

statusbar의 기본 배경컬러가 불투명해서 GNB나 내비게이션바와 어울리지 못할 때 statusbar를 투명하게 처리해주면 된다.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

2-2. theme

모바일 브라우저의 기본 테마가 기본 컬러가 GNB나 내비게이션바와 어울리지 못할 때 컬러를 지정해줄 수 있다

<meta name="theme-color" content="헤더 컬러와 동일한 컬러" />

3. 번외

플로팅 버튼

HIG 문서였던 것 같긴한데, iOS에서 왼쪽처럼 하단 전체 영역을 차지하는 버튼보다 플로팅 버튼을 권장한다는 내용이 있었던 것 같다. safeArea를 처리하느라 버튼의 상/하 밸런스 문제도 있고, 터치 영역이 홈인디케이터와도 부딪힐 수 있기 때문일거라고 추측해본다.

Radius

요즘 특히 R값이 많이 들어가거나 캡슐 형태인 컴포넌트를 많이 보이는 것 같다. 단순히 UI적인 트랜드라기보다는 뇌피셜상 디스플레이 자체가 베젤리스로 가면서 R값이 생겨버렸기 때문이라고 생각해본다