iOS에서 하단 메뉴 화면 잘림 방지하는 꿀팁! 안전 영역(Safe Area) 완벽 적용하기

iOS Safari에서 Safe Area 챙기는 꿀팁!

요즘 스마트폰 보면, 화면 끝까지 꽉 찬 디자인이 대세죠?
그런데 이럴 때 웹사이트 디자인할 때 꼭 신경 써야 할 게 있어요. 바로 **안전 영역(Safe Area)**인데요! 특히 iOS Safari에서 홈 버튼이나 노치 때문에 화면 하단이 잘리면 안 되니까, 이걸 잘 챙겨줘야 합니다. 근데 걱정 마세요, CSS 코드 한 줄이면 해결 끝! 🙌

🎯 안전 영역을 위한 CSS 코드

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

👀 코드 한 줄 설명

env(safe-area-inset-bottom)은 iOS 기기에서 하단의 홈 버튼이나 노치를 감지해서, 그만큼 여백을 자동으로 추가해 줘요. 그래서 중요한 버튼이나 텍스트가 가려지지 않아요!
노치 영역이나 홈 인디케이터 때문에 콘텐츠가 잘리거나 겹칠 수 있죠. 그래서 iOS 11.2부터 제공되는 env() 속성을 사용하면 안전하게 여백을 줄 수 있어요. 예를 들어 아래와 같은 변수를 적용할 수 있습니다.

/* iOS 11.2 이상 */
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)

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

📌 꼭 기억하세요!

풀스크린 웹사이트에서 Safe Area를 무시하면 사용자 경험이 뚝 떨어질 수 있어요.
중요한 UI가 노치나 홈 인디케이터 때문에 가려질 수 있거든요.
env() 함수는 자동으로 안전 영역을 계산해 주니 걱정할 필요 없어요!
특히 iOS Safari처럼 풀스크린을 자주 쑤는 환경에서는 이 코드로 유저들이 더 편하게 사이트를 이용할 수 있답니다. 😊

한 줄 요약 : 작은 디테일 하나로 모바일 UX가 확 달라집니다! 디자인할 때 Safe Area, 잊지 말고 챙겨보세요! 📱✨

👀 참조 문서

저작자표시

'기획자・디자이너를 위한 넓고 얕은 개발 지식' 카테고리의 다른 글

Tailwind CSS : 디자이너가 좋아할 수밖에 없는 이유! (0)	2024.10.02