iOS 웹뷰(Webview) 키보드 밀림, 이제 안녕!
iOS 웹뷰(Webview) 환경에서 input focus 시 화면 밀림 현상 발생, 사용자 경험 저해
resize, offsetTop, Fake Input, Opacity 등 4가지 해결 방법 시도
Opacity 트릭(Trick)을 통해 input focus 시 화면 밀림 문제를 해결, 유저 경험(User Experience) 개선
코드 복잡도(Code Complexity) 증가, iOS 버전 업데이트에 따른 동작 변화 등 유지보수(Maintenance) 어려움 존재
iOS 웹뷰(Webview) Input 동작 원리
본문에서 언급된 iOS 웹뷰(Webview)의 화면 밀림 현상은 Layout Viewport와 Visual Viewport의 차이에서 기인한다.
Layout Viewport: CSS 레이아웃(CSS Layout) 기준 영역으로, 키보드(Keyboard)가 올라와도 크기 불변
Visual Viewport: 실제 사용자에게 보이는 영역으로, 키보드(Keyboard)가 올라오면 크기 감소
iOS는 focus된 input을 화면에 보이게 하기 위해 페이지 전체를 밀어 올리는 동작 수행
이러한 동작은 웹 개발자가 직접 제어할 수 없으며, 웹뷰(Webview) 환경에서 사용자 경험(User Experience) 저해의 주요 원인으로 작용한다.
다양한 해결 방법과 트레이드오프(Trade-offs)
저자는 iOS 웹뷰(Webview) 환경에서 화면 밀림 문제를 해결하기 위해 4가지 접근 방식을 시도했다.
첫 번째 시도: resize 이벤트(Event) 감지 후 `scrollTo`로 복구, 깜빡임 발생
두 번째 시도: `offsetTop`을 활용하여 화면 밀림을 따라가는 방식, 미세한 떨림 발생
세 번째 시도: Fake Input Swap을 통해 iOS의 스크롤(Scroll) 자체를 방지, 코드 복잡도 증가
네 번째 시도: Opacity 트릭(Trick)을 사용하여 input focus 시 iOS의 스크롤(Scroll) 동작을 우회, 유지보수성(Maintainability) 확보
각 방법은 장단점을 가지며, 최종적으로 Opacity 트릭(Trick)을 선택하여 문제를 해결했다.
Opacity 트릭(Trick)의 기술적 구현
저자는 input focus 시 opacity를 0으로 설정하고, 키보드(Keyboard)가 올라온 후 1로 복원하는 Opacity 트릭(Trick)을 사용했다.
`onTouchStart` 이벤트(Event)에서 `opacity: 0`으로 설정하여 iOS의 스크롤(Scroll) 동작을 차단
`resize` 이벤트(Event)를 감지하여 키보드(Keyboard) 높이를 계산하고, 일정 높이 이상일 때 `opacity: 1`로 복원
상태 동기화(State Synchronization) 없이 input 하나로 구현하여 코드 복잡도(Code Complexity) 감소
이 방법은 iOS의 특정 동작을 활용한 해킹(Hacking)에 가까우며, iOS 버전 업데이트에 따라 동작이 변경될 수 있다는 단점이 존재한다.
유저 경험(User Experience) 개선의 중요성
저자는 웹뷰(Webview) 환경에서의 글쓰기 경험 개선을 위해 기술적 해법을 모색했다.
키보드(Keyboard)가 올라올 때마다 발생하는 화면 밀림 현상은 유저 경험(User Experience)에 치명적인 영향을 미침
정석적인 방법이 없더라도, 사용자 불편함을 해소하기 위해 끊임없이 노력
완벽한 코드보다 유저가 불편함 없이 서비스를 사용하는 것이 더 중요
결과적으로, Opacity 트릭(Trick)은 hacky한 해결책이지만, 유저 경험(User Experience) 개선이라는 목표를 달성하는 데 기여했다.
