CSS Viewport-fit과 Safe Area: 모바일 웹 디자인에서 중요한 역할을 하는 두 속성

CSS Viewport-fit과 Safe Area: 모바일 웹 디자인에서 중요한 역할을 하는 두 속성

최근에는 모바일 기기의 사용이 늘어나면서 모바일 웹 디자인이 중요한 이슈가 되었습니다. 그리고 이에 따라 웹 디자이너들은 사용자가 모바일 기기에서 최상의 환경을 누릴 수 있도록 다양한 방법을 모색하고 있습니다. 이 중에서도 viewport-fit과 safe area는 디자이너들이 꼭 알아야 할 속성입니다.

viewport-fit은 웹 페이지가 모바일 기기의 화면에 맞춰져 더 나은 사용자 경험을 제공하기 위한 속성입니다. safe area는 디자인이 모바일 기기의 화면에 맞추어 안전한 영역을 확보하도록 돕는 속성입니다. 이번 글에서는 viewport-fit과 safe area가 무엇인지, 어떻게 사용하는지에 대해 자세히 살펴보겠습니다.

viewport

브라우저에서 웹 콘텐츠를 볼 수 있는 window의 영역을 이야기 합니다.

• 모바일에서는 웹 콘텐츠가 결과를 작게 축소해서 보여줍니다.
• 설정을 함으로서 사용자가 줌을 굳이 할 필요가 없도록 도와줍니다.

  viewport-fit 설정

  viewport-fit은 viewport에 추가된 속성입니다. 사각형이 디스플레이를 위한 속성으로 주로 iphone X 이상의 디스플레이 같이 굴곡이 있는 모서리와 노치같이 디스플레이를 가릴 수 있는 요소가 존재하는 디스플레이를 말합니다.
  일반적인 네이티브 화면이 아닌 웹뷰로 모바일에서 화면을 호출할 때, Head 안에 meta 태그에서 설정을 해주면 됩니다.

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

  viewport-fit 에는 아래

viewport-fit을 설정해주었다면 css도 설정

만약 화면이 가려지는 것이 싫다면 css 에서 정의된 safe area에 관련돼서 정의된 변수를 사용하면 됩니다.
아래와 같이 4가지로 볼 수 있습니다.

• safe-area-inset
  • safe-area-inset-top
  • safe-area-inset-right
  • safe-area-inset-bottom
  • safe-area-inset-left
    보면 바로 알 수 있듯이 상하좌우의 safe area에 관련된 것을 이야기 합니다.

이를 사용할 때 에는 예시로

header {
  width: 100%;
  padding-top: env(safe-area-inset-top);
}

.container {
  padding: 0 env(safe-area-inset-rigth) 0 env(safe-area-inset-left);
}

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

이런 식으로 활용할 수 있으며, 만약 env 가 지원하지 않는 경우에는 constant()를 활용하면 됩니다.

따라서 보통은 env와 constant()를 같이 활용하면 좋습니다.

footer {
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
}

만약 safe area 이외의 값을 추가 하고 싶다면, calc()를 활용해서 값을 더 추가해주면 됩니다.

padding-bottom: calc(env(safe-area-inset-bottom) + 2.4rem);

궁금한 점이 있다면 댓글로 남겨주세요!!

감사합니다.