웹뷰 엔지니어를 위한 iOS Webview Input 경험 개선기
Summary
"왜 iOS 웹뷰에서만 화면이 밀릴까?" 당근 엔지니어가 찾아낸 완벽한 입력 UX의 비밀
키보드가 올라올 때마다 덜덜 떨리는 화면, 단 한 줄의 Opacity 트릭으로 해결하기
당근 커뮤니티실에서 4년간 웹뷰 기반 서비스를 고도화하며 겪은 iOS 입력 폼의 고질적인 버그 해결 과정을 담았습니다. 단순한 보정을 넘어 OS의 기본 동작을 선제적으로 제어하는 실험적인 접근법과 그 과정에서의 기술적 통찰을 상세히 공유합니다.
- 01Layout Viewport와 Visual Viewport의 개념 차이를 통해 분석한 iOS 화면 밀림의 근본 원인
- 02scrollTo와 offsetTop을 활용한 초기 시도의 한계와 시각적 깜빡임 문제 분석
- 03입력 상태 동기화 문제를 해결한 'Fake Input Swap' 아이디어의 진화 과정
- 04OS의 자동 스크롤 로직을 무력화하는 혁신적인 'Opacity Trick' 구현 방법
- 05정석적인 API가 없는 상황에서도 유저 경험을 위해 최적의 해법을 찾아가는 엔지니어링 여정
RECOMMENDATION
iOS 웹뷰 환경에서 댓글이나 게시글 작성 등 복잡한 입력 폼을 개발 중인 프론트엔드 개발자에게 필독을 권장합니다. 네이티브에 가까운 웹뷰 경험을 구현하고자 하는 하이브리드 앱 엔지니어들에게 실무적인 영감을 줄 것입니다.
The Problem
iOS 웹뷰에서 input 요소에 포커스될 때, 시스템이 해당 요소를 키보드 위로 노출시키기 위해 전체 화면을 위로 밀어 올리는 현상이 발생합니다. 이로 인해 상단 헤더 등 주요 콘텐츠가 화면 밖으로 사라지고, 레이아웃과 비주얼 뷰포트의 불일치로 유저 경험이 저해되는 고질적인 문제가 있었습니다.
The Solution
리사이즈 감지나 오프셋 보정 같은 사후 대응 방식의 한계를 극복하기 위해, 터치 순간에 input의 opacity를 0으로 설정하여 iOS의 자동 스크롤(scroll-into-view) 동작을 선제적으로 차단하고 키보드가 활성화된 후 다시 1로 복원하는 'Opacity Trick'을 도입했습니다.
The Result
화면이 밀리거나 떨리는 현상을 완전히 제거하여 네이티브 앱과 유사한 부드러운 입력 환경을 구현했습니다. 특히 단일 input 요소만 사용하여 기존의 가상 input 방식에서 발생하던 복잡한 상태 동기화 및 유지보수 문제를 효율적으로 해결했습니다.
Trade-off
해당 기법은 브라우저의 내부 동작을 활용한 트릭에 해당하므로 공식적인 표준 API가 아니며, 향후 iOS 버전 업데이트에 따라 동작이 달라질 가능성이 존재합니다. 따라서 서비스 전체보다는 글쓰기 등 입력 경험이 핵심인 페이지에 한정하여 선별적으로 적용하고 있습니다.
Key Concepts
More from 당근
View all posts from 당근
혼자 시작해 전국 오픈까지, 당근 레슨/과외 빌딩 로그
MarketplaceProduct Market FitFunnel Optimization2주 전
디자인시스템 팀은 디자인시스템만 잘 만들면 될까
Design SystemAI in DesignUX Patterns1개월 전당근 200+개 DB 를 옮기는 ELT 플랫폼, DT Platform 을 만든 이야기
ELTApache SparkApache Airflow1개월 전
누구나 찾아볼 수 있는 중고거래 서버 LLM 릴리즈 노트 도입기
LLMGitHub ActionsNotion2개월 전How We Protect Karrot’s Internal PyPI Proxy from Supply Chain Attacks
PyPIAWS CodeArtifactSecurity Cooldown2개월 전