iOS 가상키보드 대응

Question

iOS 디바이스에서 input 요소에 포커스가 되면 가상키보드가 나타나면서 다음과 같은 문제가 발생합니다: 문제 상황 : 가상키보드가 올라오면서 웹뷰의 전체 document가 위로 이동 position: fixed 로 설정한 헤더, 바텀 버튼 등의 엘리먼트들이 함께 올라가면서 고정 위치를 유지하지 못함 시도해본 해결방법 : 가상 인풋(virtual input) 방식 적용 → 효과 없음 Visual Viewport API 활용 → 해결되지 않음 질문 : 이 문제를 해결할 수 있는 효과적인 방법이 있을까요? 특히 iOS Safari 웹뷰 환경에서 position: fixed 엘리먼트가 가상키보드의 영향을 받지 않고 제자리를 유지할 수 있는 방법을 찾고 있습니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 김호균님. iOS 디바이스에서 가상키보드가 나타날 때 발생하는 문제는 꽤나 일반적인 이슈이며 여러 개발자들이 겪고 있는 상황입니다. 특히 position: fixed 요소들이 이동하는 문제는 iOS의 기본 동작 때문에 생깁니다. 이 문제를 해결하기 위해 몇 가지 방법을 시도해 볼 수 있습니다. 해결 방법: CSS를 통한 해결 : iOS에서는 position: fixed 요소를 다르게 처리할 수 있습니다. position: absolute 를 사용하여 원하는 위치에 배치하고, JavaScript를 사용하여 스크롤 이벤트를 통해 업데이트하는 방법을 고려할 수 있습니다. JavaScript 이용 : JavaScript로 키보드의 표시 상태를 감지하고, 위치를 조정하는 방법입니다. window.visualViewport 를 이용하여 뷰포트의 이동을 탐지하고, 요소 위치를 조정합니다. 아래와 같은 스크립트가 도움이 될 수 있습니다: window.visualViewport.addEventListener('resize', () => { const fixedElement = document.querySelector('#fixed-element'); if (window.visualViewport.height < window.innerHeight) { fixedElement.style.bottom = `${window.innerHeight - window.visualViewport.height}px`; } else { fixedElement.style.bottom = '0px'; } }); 웹뷰 환경에 대한 대응 : Cordova나 Capacitor와 같은 플러그인이나 네이티브 브리지를 통해 가상키보드 이벤트를 감지하고, 이에 따른 레이아웃 변경을 수행하는 방법입니다. 특히, 웹뷰의 경우 네이티브 코드 수정이 가능할 때 이는 강력한 옵션이 될 수 있습니다. 관련 질문 URL: iOS Web Apps: Prevent Fixed Position Elements from Moving 이와 같은 방법을 시도해 보시고, 특정 코드에 대한 추가적인 도움이 필요하시다면 말씀해 주세요. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.