⌨️ 키보드가 올라와도 버튼이 가려지지 않게 하려면?
모바일 폼 화면에서 자주 발생하는 문제 중 하나는 키보드가 올라오면 제출 버튼이나 입력창이 화면 밖으로 밀려 사라지는 것입니다. 키보드는 화면 전체 높이의 35~45% 정도를 차지하는데, 이 영역을 고려하지 않고 UI를 배치하면 사용자가 버튼을 누르기 위해 매번 화면을 스크롤해야 하는 불편함이 생깁니다.
이 도구는 화면 높이와 키보드 유형(텍스트·숫자·이메일)을 입력하면 예상 키보드 높이와 그 위에 남는 안전 영역을 계산합니다. 숫자 키패드는 텍스트 키보드보다 낮아 약 35%, 일반 텍스트 키보드는 약 42% 정도를 차지하는 것을 기준값으로 사용했습니다.
계산된 안전 영역이 100px 미만이라면 버튼이 매우 좁은 공간에 놓이게 되므로, 입력창을 포커스할 때 화면을 자동으로 스크롤하거나 버튼을 화면 상단으로 옮기는 것을 고려하세요. iOS는 예측 입력 바가 추가로 공간을 차지할 수 있으니 실제 기기 테스트로 한 번 더 확인하는 것이 안전합니다.
자주 묻는 질문
네, 실제 높이는 기기와 OS 버전마다 조금씩 다릅니다. 이 계산기는 화면 높이 대비 일반적인 비율을 기준으로 안전하게 여유를 두기 위한 대략적인 값을 제공합니다.
iOS에서는 예측 자동완성 바가 추가로 40px 정도 차지할 수 있습니다. 여유값을 조금 더 크게 잡거나 실제 기기에서 직접 테스트하는 것이 안전합니다.
최신 브라우저는 VisualViewport API로 실제 키보드 높이를 감지할 수 있습니다. 다만 구형 브라우저 지원이 필요하다면 이 계산기의 추정값을 기준으로 여유 있게 설계하는 것이 안전합니다.