[CSS] 노치(Notch)와 홈 바(Home Bar)에 대응하는 CSS 환경 변수(env()) 활용 방법

모바일 기기의 노치(Notch) 디자인과 홈 바(Home Bar)는 iPhone X 디바이스 이후로 흔히 볼 수 있는 특징 중 하나로, 디스플레이의 상단과 하단에 존재하는 공간을 차지합니다. 이러한 특수한 디자인 요소들은 사용자 경험을 향상하기 위해 도입되었지만, 웹 디자이너들에게는 새로운 도전을 제시하고 있습니다. 이러한 도전에 대응하기 위해 CSS의 env() 함수를 활용하여 노치와 홈 바에 대응하는 방법을 알아보겠습니다.
 

 

노치(Notch)란?

 

노치는 주로 모바일 기기의 디스플레이 상단에 있는 공간을 가리키며, 이 공간에는 전면 카메라, 스피커, 센서 등이 위치합니다. 노치 디자인은 기존의 정사각형 또는 직사각형 디스플레이를 벗어나서 디바이스의 윗부분에 작은 노치(Notch) 모양의 공간을 확보하는 디자인을 말합니다.
 
이 디자인은 주로 아이폰 X 이후의 iPhone 시리즈나 여러 안드로이드 디바이스에서 볼 수 있습니다. 이에 대한 안전한 여백을 고려하여 웹 디자인을 조절할 때 safe-area-inset-top 속성이 활용됩니다.
 

iPhone X 노치(notch) 영역

 
 

홈 바(Home Bar)란?

홈 바는 주로 안드로이드 기기에서 하단에 위치한 소프트웨어 기반의 홈 버튼입니다. iPhone X 이후의 아이폰에서는 노치 디자인에 대응하기 위해 물리적인 홈 버튼이 없어졌고, 대신에 홈 바가 소프트웨어로 구현되었습니다. 홈 바는 디바이스의 하단에 위치하며 디스플레이 공간을 차지하게 됩니다.
 
홈 바 영역에 대응하기 위해 사용되는 CSS 속성으로는 주로 safe-area-inset-bottom가 활용됩니다. 이를 통해 디바이스의 하단에 있는 홈 바에 대한 안전한 여백을 고려하여 레이아웃을 조절할 수 있습니다.
 

iPhone X 홈바(Home Bar) 영역

 
 
 
 
이렇게 노치와 홈 바 영역은 모바일 기기의 특수한 디자인을 고려하여 웹 디자인을 조절하는 데 중요한 역할을 합니다.
이 포스트 글에서는 환경 변수 safe-area 속성에 대한 개념을 제공하고, 모바일 웹 디자인에서 어떻게 활용할 수 있는지에 대해 알아보겠습니다.
 
 
 

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

 
 

 

env() 함수를 활용한 안전한 영역 크기 조절하기

- env(safe-area-inset-top) : 상단에 위치한 노치(Notch) 디자인이나 기타 안전한 영역의 크기를 나타냅니다.
- env(safe-area-inset-right) : 우측에 위치한 안전한 영역의 크기를 나타냅니다.
- env(safe-area-inset-bottom) : 하단에 위치한 노치 디자인이나 홈 바(Home Bar) 등의 안전한 영역의 크기를 나타냅니다.
- env(safe-area-inset-left) : 좌측에 위치한 안전한 영역의 크기를 나타냅니다.
 
 
 
하단에 위치한 홈 바에 대응하여 푸터의 하단 여백을 홈 바의 안전한 영역 크기로 동적으로 조절합니다.

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

 
 
여기서 사용된 calc() 함수는 수학적인 계산을 수행하는데, 이를 통해 env(safe-area-inset-bottom) 값과 15px를 더하여 최종적인 여백 값을 계산합니다.

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

 
 
여기서 사용된 max() 함수는 주어진 값 중에서 가장 큰 값을 선택하는 함수입니다. 이를 활용하여 안전한 영역과 추가 여백을 조합한 값과 30px 중에서 더 큰 값을 선택하여 최종적인 margin-bottom을 결정합니다.

.footer {
  margin-bottom: max(calc(env(safe-area-inset-bottom) + 15px), 30px);
}

 
 
 
 
CSS의 env() 함수를 활용하여 이제 디바이스의 안전한 영역을 고려하고, 화면의 다양한 크기와 형태에 유연하게 대응할 수 있습니다. 
이렇게 노치(Notch)와 홈 바(Home Bar)에 대응하는 CSS 환경 변수(env()) 활용 방법에 대해서 알아보았습니다.
 
 
 
 
 
 

[Safari] 웹접근성 향상을 위한 Tab 키 하이라이트 표시 설정 방법

 

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

 
 

간단하게 Vite로 프로젝트 생성하는 방법

 
 

[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법

 
 

[Utility] Snipaste - 무료 캡쳐 도구, 핀(Pin) 고정, 클립보드(Clipboard), 색상 추출(Color Picker)