나눔웹 실무 꿀팁
모바일 꽉 찬 화면 하단 짤림 현상! '100vh'의 함정과 완벽 해결법
스마트폰 화면에 꽉 차는 근사한 랜딩 페이지를 만들 때, CSS에서 height: 100vh; 속성을 자주 사용하곤 합니다.
그런데 PC에서는 완벽했던 화면이, 막상 모바일(아이폰 사파리, 갤럭시 크롬)로 보면 맨 아래쪽 콘텐츠나 버튼이 주소창에 가려져 짤리는 현상을 겪어보신 적 있으신가요?
💡 왜 화면이 짤릴까요? (100vh의 함정)
모바일 브라우저의 상단 주소창이나 하단 네비게이션 바(UI Chrome)의 높이를 100vh가 계산하지 못하기 때문입니다. 브라우저는 전체 화면 길이를 100vh로 잡지만, 실제 우리 눈에 보이는 영역은 주소창만큼 줄어들어 있어 하단이 가려지게 됩니다.
1. 완벽한 해결책: 새로운 단위 'dvh' 사용하기
이 고질적인 문제를 해결하기 위해 동적 뷰포트 단위(Dynamic Viewport Height, dvh)가 새롭게 등장했습니다.
100dvh를 사용하면 사용자가 스크롤을 올려서 주소창이 나타나든 사라지든, 실제 눈에 보이는 화면 영역에 맞춰 높이를 실시간으로 유연하게 조절해 줍니다.
/* 나눔웹이 추천하는 모바일 풀스크린 반응형 CSS */
.fullscreen-section {
/* 1. 구형 기기를 위한 1차 방어막 (기본 vh 적용) */
height: 100vh;
/* 2. 최신 기기를 위한 동적 높이 적용 (dvh가 지원되면 덮어씀) */
height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
2. 구버전 iOS를 위한 완벽한 보험 (안전장치)
dvh는 비교적 최신 기술이므로, 업데이트를 하지 않은 아주 오래된 아이폰 등에서는 작동하지 않을 수 있습니다.
위 코드처럼 height: 100vh;를 먼저 적어주고 그 바로 밑에 height: 100dvh;를 적어두면, 모든 브라우저 환경에서 에러 없이 가장 최적화된 화면을 보여줄 수 있습니다. (Fallback 기법)
"모바일에서 버튼이 안 눌려요!" 라는 고객의 불만을 원천 차단하세요.
나눔웹은 1px의 오차, 기기별 브라우저의 미세한 렌더링 차이까지 계산하여 타협 없는 결과물을 완성합니다.