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

커뮤니티 서비스에서 input은 단순한 폼 요소가 아니라 게시글, 댓글, 채팅 경험을 좌우하는 핵심 인터랙션이었다. 그런데 iOS Webview에서는 키보드가 올라올 때 화면이 위로 밀리는 기본 동작 때문에 입력 흐름이 자주 끊겼고, 이를 해결하는 과정이 이어졌다.

가장 먼저 시도한 방법은 visualViewport의 resize 이벤트를 감지해 레이아웃을 다시 맞추는 방식이었다. 키보드 높이만큼 wrapper를 줄이고 window.scrollTo(0, 0)로 원위치시키려 했지만, iOS가 먼저 화면을 밀어 올린 뒤에야 복구가 일어나서 깜빡임과 떨림이 생겼다.

두 번째로는 visualViewport.offsetTop을 따라가며 밀린 만큼 wrapper를 함께 이동시키는 방식으로 바꿨다. 이 방법은 첫 시도보다 나았지만, 키보드가 뜨는 동안 위치가 계속 보정되면서 미세한 흔들림이 남았고, 빠르게 input을 전환할 때도 안정적이지 않았다.

세 번째 시도는 Fake Input과 Real Input을 분리하는 방식이었다. 화면에 보이는 readOnly input을 터치하면 화면 밖의 input에 focus를 주고, iOS가 스크롤할 대상이 없도록 만들어 밀림 자체를 피했다. 다만 value, selection, placeholder를 계속 동기화해야 해서 textarea 자동 높이, 멘션, 이모지 같은 기능이 붙을수록 유지보수 비용이 커졌다.

마지막으로 선택한 해법은 opacity 트릭이었다. 터치 순간 input의 opacity를 0으로 만들어 iOS의 자동 scroll-into-view를 막고, 키보드가 완전히 올라온 뒤 opacity를 1로 복원하는 방식이다.

• input은 하나만 유지해서 상태 동기화 복잡도를 없앴다.
• focus 전에 선제적으로 숨겨 iOS가 페이지를 밀지 못하게 했다.
• 키보드가 열린 뒤 다시 보여 주어 자연스러운 입력 경험을 만들었다.

이 방식은 공식 API도 아니고 꽤 hacky하지만, 글쓰기가 핵심인 페이지에서는 가장 실용적인 해답이었다. 결국 중요한 건 정석 여부보다 유저가 불편함 없이 서비스를 쓸 수 있는지였고, 더 나은 방법이 나오면 다시 개선하면 된다는 결론에 도달했다.