글
모바일 사파리 100vh 스크롤 깨짐 해결! dvh 단위 활용법
"완벽한 모바일 전체 화면을 만들었는데, 사파리 하단 바가 버튼을 가려버려요!" 프론트엔드 개발자들의 뒷목을 잡게 하는 모바일 브라우저의 100vh 스크롤 깨짐 현상. 이제 복잡한 자바스크립트 꼼수 대신 새로운 CSS 단위인 'dvh'로 깔끔하게 해결하는 방법을 알아봅니다! 웹 브라우저 화면에 딱 맞는 풀스크린(Full-screen) UI나 모달 창을 만들 때, 우리는 자연스럽게 CSS에 height: 100vh; 를 적어 넣습니다. PC 브라우저나 크롬 개발자 도구의 모바일 화면(Toggle Device Toolbar)으로 테스트할 때까지만 해도 아주 완벽해 보이죠. "오, 스크롤 없이 화면에 꽉 차게 잘 들어갔군!" 하며 뿌듯한 마음으로 스마트폰을 꺼내 테스트 링크를 열어보는 순간... 절망이 시작됩니다. 아이폰 모바일 사파리(Safari)로 접속했더니, 화면 맨 밑에 있어야 할 '확인' 버튼이 사파리의 주소창(하단 바)에 가려져서 보이지 않는 현상 을 마주하게 됩니다. 스크롤을 위아래로 낑낑대며 움직여봐도 UI가 덜덜거리고 완전히 깨져버리죠. 진짜 별거 아닌 것 같은데 이것 때문에 완전 짜증 났던 경험, 프론트엔드 개발자라면 누구나 한 번쯤 있으실 거예요. 오늘은 이 지긋지긋한 100vh 버그의 원인과, 최신 CSS가 내려준 한 줄기 빛인 dvh(Dynamic Viewport Height) 를 활용한 완벽한 해결법을 낱낱이 파헤쳐 보겠습니다! 😊 1. 기존 100vh의 치명적인 문제점 🤔 문제를 해결하려면 도대체 왜 이런 일이 벌어지는지부터 알아야겠죠? vh(Viewport Height) 는 말 그대로 보여지는 화면 영역의 높이를 100등분 한 단위입니다. 문제는 모바일 브라우저(특히 iOS 사파리나 안드로이드 크롬)...