노치로 인한 CSS 안전 영역 만들기

화면을 어떻게든 넓게 쓰고자 하는 모두의 바램이

 

베젤리스, 노치 디자인, 펀치홀 같은 것들을 만들었습니다

 

 

 

 

 

저는 처음에 노치 디자인을 보고 경악을 금치 못했는데요

 

다른 사람들과 같이 M탈모 디자인이라고 그렇게 놀렸는데

 

애플이 노치디자인을 버리지 않아서 결국 쓰고 있습니다...

 

 

딴소리는 이만 하고 본론으로 들어가볼께요

 

 

아이폰을 예로 들어 볼까요

 

아이폰의 디스플레이 모양이 변했습니다

 

 

아이폰SE계열을 포함하여 홈버튼이 있는 모델의 경우

 

정확히 직사각형의 디스플레이를 가지고 있습니다

 

디스플레이에 펀치홀이 있거나 노치디자인이 탑재되어있지도 않습니다

 

정확히 직사각형입니다

 

그래서 사실 css로 레이아웃을 만들때 별다른 고민을 하지 않아도 됩니다

 

 

하지만 홈버튼이 없어지고 노치디자인이 적용된 아이폰X 부터는

 

디스플레이의 네 귀퉁이는 직각에서 곡선으로 변했고

 

상단부분에는 노치디자인이 자리를 차지하고 있고

 

하단에는 가상 홈버튼 영역이 약간의 자리를 차지하고 있습니다

 

 

그래서 이럴때 필요한 개념이 safe area 라고 불리는 안전 영역입니다

 

노치디자인이나 다른 요소에 의해 잘려보일수 있는 영역을 제외한 나머지가 안전영역입니다

 

 

그래서 우리는 CSS로 레이아웃을 만들때

 

우리의 디자인 요소가 안전영역 밖에 위치해 있어 불가피하게 가려져 보이지 않는 불상사를 막아야 합니다

 

 

하지만 기본적으로는 이런 불상사가 발생하지 않도록

 

디바이스의 기본 설정은 안전영역만을 사용하도록 되어있습니다

 

그래서 여러분들이 만든 웹사이트는 별다른 설정이 없을때는 안전영역 내에서 그려집니다

 

 

 

하지만 안전영역에서 그려지다보니 안전영역을 벗어난 영역은 보통 흰색으로 표시되고있습니다

 

 

 

이렇게 말이죠

 

만약 여러분이 만든 웹사이트의 배경이 단순 흰색이 아니라 어떠한 디자인의 형태를 갖추고 있다면

 

아마도 이부분이 심하게 거슬릴거예요

 

이 부분도 채워넣을수 없을까? 라고 말이죠

 

이때 안전영역을 풀어버리는 설정을 추가하여 안전영역을 벗어난 영역까지 디스플레이전체영역을 사용할수 있습니다

 

<meta name="viewport" content="viewport-fit=cover" />

 

viewport-fit=cover를 설정하면 디스플레이 전체영역이 활용가능합니다

 

 

좌우의 흰색으로 보였던것들이 없어져서 확장되어 보이죠

 

다만 이렇게 설정하게 되면 말그대로 디스플레이 전체영역을 활용하기 때문에

 

웹페이지의 어떤 특정 요소가

 

노치, 펀치홀, 라운딩 이런것에 가려지는 경우가 발생할수 있습니다

 

바로 위의 스크린샷같이 말이죠

 

그렇다고 고정 픽셀의 padding이나 margin으로 처리하자니

 

기기마다 노치 크기가 다 다를텐데 그러면 어떻게 대응할수 있을까요?

 

 

그래서 CSS에서는 다음과 같은 값을 제공하고 있습니다

 

env() 함수를 통해서

 

safe-area-inset-top

safe-area-inset-right

safe-area-inset-bottom

safe-area-inset-left

 

이러한 값들을 제공해주고 있습니다

 

안전영역을 보장하기 위해 얼만큼의 영역이 필요한지 말이죠

 

body {
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

 

그래서 이렇게 작성하는 경우 상하좌우 4곳의 padding을 안전영역을 벗어나지 않도록 주입하게 됩니다

 

물론 body 태그말고도 padding 속성값말고도 어디든지에 활용할수 있습니다

 

body {
  padding:
    env(safe-area-inset-top, 20px)
    env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px)
    env(safe-area-inset-left, 20px);
}

env 함수는 fallback값을 설정할수 있어서 해당 환경변수가 존재하지 않을때의 기본값의 설정이 가능합니다

 

 

body {
  padding:
    calc(env(safe-area-inset-top) + 15px)
    calc(env(safe-area-inset-right) + 15px)
    calc(env(safe-area-inset-bottom) + 15px)
    calc(env(safe-area-inset-left) + 15px);
}

 

또한 calc 함수를 이용해서 좀 더 복잡한 수식을 만들수 있습니다

 

참고로 

 

calc와 같은 계산식을 사용할대 반드시 주의할점은 + - 기호 양쪽으로 빈공백(space)가 있어야 합니다

 

 

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/env

https://developer.mozilla.org/en-US/docs/Web/CSS/calc