웹뷰 엔지니어를 위한 iOS Webview Input 경험 개선기
프론트엔드
웹뷰 엔지니어를 위한 iOS Webview Input 경험 개선기
두줄요약
iOS 웹뷰에서 input focus 시 화면이 밀리는 문제를 여러 방식으로 개선한 과정을 정리했습니다. 최종적으로는 opacity 트릭으로 자동 스크롤을 막아 입력 경험을 안정화했습니다.
문제 상황
- iOS 웹뷰에서 input focus 시 화면이 위로 밀리며 상단 콘텐츠가 사라지는 입력 경험 문제
- 커뮤니티 글쓰기·댓글·채팅 등 핵심 인터랙션에서 키보드 노출이 흐름을 끊는 UX 이슈
원인 분석
- iOS의 Layout Viewport와 Visual Viewport 동작 차이
- 웹 개발자가 키보드·focus·viewport 이동을 완전히 제어하기 어려운 구조
- focus된 input을 보이게 하려는 OS 레벨 자동 스크롤
해결 방법
- visualViewport resize와 scroll을 이용해 scrollTo로 복구하는 방식 시도
- offsetTop을 따라가며 wrapper 위치를 보정하는 방식 시도
- 화면 밖 Real Input과 보이는 Fake Input을 교체하는 방식 시도
- opacity 0으로 자동 스크롤을 차단한 뒤 focus를 유지하는 단일 input 방식 적용
주의할 점
- 반응형 보정 방식은 깜빡임·떨림·미세한 흔들림 유발 가능성
- input 두 개를 동기화하는 swap 방식은 상태 관리와 유지보수 부담 증가
- opacity 트릭은 hacky한 우회책으로 iOS 버전 변화에 취약할 수 있음
적용해볼 점
- 글쓰기처럼 핵심 UX인 영역에만 선택적으로 적용
- 정석 API가 없을 때 사용자 흐름을 우선하는 우회 전략 검토
- 웹뷰 입력 문제를 viewport 동작 관점에서 재해석
