[ThisVsThat Project] 모바일 브라우저에서 100vh 하단이 잘리는 문제

킴카·2025년 12월 13일

CSS JavaScript error

ThisVsThat Project

목록 보기

5/5

1. 문제 상황

PC 환경에서는 로그인 / 회원가입 페이지가 의도한 레이아웃으로 보였지만, 모바일 브라우저로 접속했을 때 화면 하단 일부가 잘려 보이는 문제가 발생했다.

이 프로젝트에는 메인 화면이나 글 상세 페이지처럼 세로 스크롤이 자연스럽게 발생하는 페이지들도 있는데, 이런 페이지들은 뷰포트 높이가 조금 달라지더라도 큰 영향을 받지 않았다.

반면 로그인 / 회원가입 페이지는 다음과 같은 특성이 있었다.

한 화면 안에 모든 입력 요소와 버튼이 보이도록 디자인됨
하단 CTA 버튼이 화면 밖으로 밀리면 UX가 저하됨
스크롤 없이 “한 화면 완결”이 핵심인 페이지

따라서 하단 요소가 반드시 보여야 하는 페이지에서는 이 문제를 우선적으로 해결할 필요가 있었다.

2. 원인 분석

원인은 모바일 브라우저의 100vh 동작 방식이었다.

모바일 환경에서는 주소창, 하단 툴바, 인앱 브라우저 UI 등으로 인해 CSS의 100vh가 실제로 사용자에게 보이는 영역 높이와 일치하지 않는 경우가 많다.

3. 해결 방향

해결을 위해 다음 기준을 잡았다.

원스크린이 필요한 페이지에서만 적용

전체 페이지(body)가 아니라, 로그인/회원가입 전용 컨테이너에만 적용
최신 브라우저에서는 CSS로 해결

100svh를 우선 사용
인앱 등 지원이 불완전한 환경은 JS로 보완

실제 보이는 영역 기준(visualViewport)을 사용
고정 높이 대신 유연한 높이 적용

height가 아닌 min-height 사용
아이폰 안전 영역 고려

safe-area-inset-bottom 적용

4. 최종 코드

CSS

:root {
  --vvh: 1vh;
}

.auth-container {
  min-height: calc(var(--vvh) * 100);
  min-height: 100svh;
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
}

JavaScript (viewport 보정)

function updateVH() {
  const h = window.visualViewport?.height ?? window.innerHeight;
  document.documentElement.style.setProperty('--vvh', `${h * 0.01}px`);
}

updateVH();
(window.visualViewport ?? window).addEventListener('resize', updateVH);

코드 설명

100svh

→ 최신 브라우저에서 주소창/툴바 변화에도 안정적인 뷰포트 높이를 제공
--vvh + visualViewport.height

→ 인앱 브라우저나 일부 환경에서 svh가 완전히 지원되지 않는 경우를 대비한 fallback

→ 실제로 사용자가 보고 있는 영역 기준으로 높이를 계산
min-height

→ 화면이 더 커질 경우 확장되어 레이아웃 잘림 방지
safe-area-inset-bottom

→ iOS 홈 인디케이터 영역으로 하단 버튼이 가려지는 문제 방지