모바일 웹 키보드 발생시 화면 상승 대응 불가능 한가요?

모바일 웹에서 키보드 발생 시 화면 상승을 처리하는 것은 크게 두 가지 방법이 있습니다. 1. CSS를 이용하는 방법: 이는 간단하지만 모든 경우를 대응하기 어렵습니다. viewport height (vh) 단위를 사용하여 요소의 높이를 설정하면, 키보드가 활성화될 때 viewport의 높이가 줄어들기 때문에 자연스럽게 요소의 높이도 줄어들게 됩니다. 2. JavaScript를 이용하는 방법: Window 객체의 resize 이벤트를 이용하여 키보드가 활성화되었음을 감지하고, 적절한 스타일 변경 또는 DOM 조작을 수행합니다. 이 방법은 복잡하지만 보다 정확한 컨트롤을 가능하게 합니다. 그럼에도 아이폰과 안드로이드에서 일관된 행동을 기대하기는 어렵습니다. 각 OS와 기기, 그리고 브라우저마다 다르게 동작할 수 있습니다. 따라서 웹 개발에서는 사용자 경험을 최적화하는데 어느 정도 타협이 필요합니다. 아울러, 특히 안드로이드에서는 일부 웹뷰에서 window.innerHeight 등의 값이 제대로 업데이트되지 않는 버그도 존재합니다. 이 경우, 키보드가 활성화 될 때 발생하는 스크롤 이벤트를 감지하여 대응할 수 있습니다. 헤더, 컨텐츠, 풋터 구조의 웹앱에서는 풋터를 절대위치로 고정하고, 키보드 발생 시에는 풋터의 하단 마진을 조절하는 방식으로 대응할 수 있습니다. 이렇게 하면 키보드에 의해 가려지는 문제를 해결할 수 있습니다. 다만 이러한 해결책은 모든 상황을 완벽하게 해결하지 못할 수 있으니 실험과 검증을 거치면서 적용하는 것이 중요합니다.