프론트엔드
모바일 웹뷰에서 iOS·Android 가상 키보드 길들이기
두줄요약
iOS·Android WebView의 가상 키보드가 유발하는 뷰포트·고정 입력창 문제를 분석했습니다.\nVisualViewport 기반 VirtualViewport로 플랫폼별 레이아웃 차이를 완화했습니다.
문제 상황
- iOS·Android WebView에서 가상 키보드 노출 시 헤더 이탈, 입력창 가림, 화면 밀림과 빈 공간 발생
- 채팅형 인터페이스의 고정 헤더·스크롤 본문·키보드 상단 입력 영역 유지 필요
원인 분석
- 레이아웃 뷰포트와 비주얼 뷰포트의 역할 차이 및 OS·브라우저별 키보드 처리 방식 차이
- Android Chrome의 비주얼 뷰포트만 축소하는 기본 동작과 Edge-to-Edge 환경의 WebView 인셋 처리
- iOS WebView의 포커스 요소 노출을 위한 자동 스크롤 및 플랫폼별 focus·resize 이벤트 순서 차이
해결 방법
visualViewport.height와 동기화하는 최상위 Flexbox 컨테이너VirtualViewport구성- 헤더·입력 영역의
position: fixed의존 축소와 본문 독립 스크롤 컨테이너 분리 resize·focus·blur를 단일 높이 재검사 흐름으로 통합하고 throttle·trailing debounce 적용
주의할 점
dvh는 가상 키보드에 따른 높이 변화를 반영하지 않으며, 키보드 높이 사전 파악도 불가overscroll-behavior는 overflow가 있어야 동작하므로 1px 가상 요소로 스크롤 컨테이너 유지- iOS opacity 애니메이션 기반 자동 스크롤 방지와 이벤트 순서는 비표준 동작으로 지속 검증 필요
