AI Briefing카카오뱅크, 모바일 웹뷰 iOS·Android 가상 키보드 화면 밀림 문제 VirtualViewport로 해결
·2026.10.14 19:51
핵심 내용
카카오뱅크가 비주얼 뷰포트 높이를 동기화하는 VirtualViewport 컴포넌트로 모바일 웹뷰 키보드 UI 문제를 해결했다.
자세히 보기
- 레이아웃 뷰포트와 비주얼 뷰포트의 동작 차이로 인한 iOS 화면 밀림 및 Android 입력창 가려짐 문제를 해결함
- visualViewport.height를 requestAnimationFrame으로 폴링하여 키보드 여닫힘 감지 및 컨테이너 높이 동적 조정
- iOS는 포커스 시 렌더 객체 opacity를 0에서 1로 변경하는 CSS 애니메이션으로 자동 스크롤을 차단함
- Android Chrome 108부터는 키보드 표시 시 레이아웃 뷰포트를 유지하고 비주얼 뷰포트만 축소하도록 기본 동작 변경
- VirtualKeyboard API는 Safari와 iOS WebView에서 미지원되어 키보드 높이 사전 예측이 불가함
- position: fixed 요소는 브라우저별 동작이 상이하여 Flexbox 기반 레이아웃으로 의존도를 낮춤
이 한국어 요약은 AI가 자동으로 만들었습니다. 원문의 주장과 맥락은 원문에서 확인해 주세요. 저작권은 원저작자에게 있습니다.
