하단 고정 버튼이 아이폰 '검은 줄'에 겹친다면? (Safe Area 대응법)
모바일 쇼핑몰 화면 맨 아래에 항상 따라다니는 [구매하기] 버튼이나 하단 탭 메뉴를 만들었는데, 아이폰으로 볼 때 화면 맨 밑에 있는 가로로 긴 '검은색 선(홈 바)'과 겹쳐서 글씨가 안 보이거나 터치가 안 되는 현상을 겪어보셨나요?
결제를 누르려다 아이폰 앱이 꺼져버리는 치명적인 이탈을 막기 위해, 최신 스마트폰의 '안전 영역(Safe Area)'을 계산하는 코딩이 반드시 필요합니다.
💡 그냥 여백(Padding)을 넉넉하게 주면 안 되나요?
CSS에 무작정 아래쪽 여백을 30px씩 주면, 홈 바가 없는 안드로이드폰(갤럭시)이나 구형 스마트폰에서는 버튼 아래에 의미 없는 텅 빈 공간이 생겨 디자인이 무척 엉성해집니다. 스마트폰 기종이 스스로 판단하여 "홈 바가 있을 때만 여백을 밀어내라!"고 지시해야 합니다.
1. 1단계: HTML에 '화면 꽉 채우기' 권한 주기
가장 먼저 HTML 문서의 최상단 <head> 안에 있는 viewport 메타 태그에 viewport-fit=cover라는 속성을 추가해야 합니다. 브라우저에게 "노치나 홈 바 영역까지 웹 화면을 꽉 채워서 써도 돼"라고 허락해 주는 과정입니다.
<!-- HTML head 영역의 메타 태그를 이렇게 수정하세요 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">2. 2단계: CSS 동적 환경 변수 (env) 사용하기
이제 하단 고정 버튼의 CSS에 env(safe-area-inset-bottom)이라는 마법의 코드를 입력합니다. 이 코드는 기기 스스로 자신의 홈 바 두께를 계산하여 그만큼만 정확히 패딩(여백)을 추가해 줍니다. 홈 바가 없는 갤럭시는 이 값을 0으로 인식하여 완벽한 호환성을 자랑합니다.
/* 화면 맨 아래 고정되는 구매하기 버튼 CSS */
.fixed-bottom-btn {
position: fixed;
bottom: 0;
width: 100%;
/* 기본 패딩 16px에, 기기의 하단 홈 바 두께만큼을 자동으로 더해줍니다! */
padding-bottom: calc(16px + env(safe-area-inset-bottom));
}"물리적인 기기의 한계마저 코드로 극복합니다."
나눔웹은 아이폰, 갤럭시, 폴더블폰 등 다변화하는 디바이스의 하드웨어 특성까지 계산하여,
어떤 환경에서도 고객의 전환(결제/문의) 동선이 방해받지 않도록 견고하게 설계합니다.