웹뷰 엔지니어를 위한 iOS Webview Input 경험 개선기

문제 상황

• 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 동작 관점에서 재해석