WKWebView에서 Page Down 구현하기

특정 사이트나 웹 페이지를 브라우징 하는 앱을 개발하고 있자면 WKWebView를 사용하고 있을 것이다. 그런데 이 뷰의 기본 키 입력을 Local Monitor 등으로 가로채고 있다면 스페이스 키 등으로 페이지 스크롤이 동작하지 않을 수 있다. 이 경우 키 입력을 로우 레벨로 처리하게 될 텐데 수동으로 웹 뷰를 한 페이지 아래로 스크롤시킬 수 있을까?

사실 WKWebView는 스크롤뷰를 이용해 구현되어 있기 때문에 스크롤뷰의 기능을 이용해 구현할 수 있다. 하지만 구현할 코드의 양이 많고 계산식이 귀찮고 따라서 버그를 유발할 가능성이 있다.

더 쉬운 방법이 있을까?

자바스크립트를 이용하는 방법

어이없게도(?) Objective-C 코드도 아니고 Swift 코드도 아닌 Javascript 코드를 사용하는 쉬운 방법이 있었다. 웹뷰 인스턴스에 window 객체의 scrollTo 메서드를 호출하는 코드를 실행시키는 방법이다.

webView.evaluateJavaScript(
    "window.scrollTo(0, window.scrollY + window.innerHeight * 0.9);", 
    completionHandler: nil
)

이런 식으로 WKWebView의 evaluateJavaScript 메서드를 이용해 자바스크립트 코드를 사용할 수 있다. 이 코드를 이용해 WKWebView의 페이지를 단순하게 현재 세로축으로 뷰 포트 90% 만큼 하단으로 이동시킬 수 있다. 그리고 macOS는 물론 iOS 등에서도 문제없이 동작한다. 필요하다면 90%를 의미하는 0.9를 원하는 수치로 변경할 수도 있는 유연한 코드다.

반응형

부드러운 스크롤

위의 예제는 상당히 호환성이 좋은 방법이지만 단 하나의 단점으로 부드러운 스크롤이 아니라는 점이 있다. 즉 실행되면 화면을 즉시 한 페이지 하단으로 점프시켜 버린다. 만약 부드러운 스크롤 애니메이션을 원한다면 비록 호환성은 떨어지겠지만 최근 브라우저에서는 지원되는 메서드를 이용할 수 있다. 물론 이 글은 WKWebView에서 돌아가기만 하면 되니까 호환성 문제는 전혀 고려 대상이 아니다.

아래와 같이 동일한 scrollTo 메서드를 사용하지만 다른 인터페이스를 통해 오버라이딩 된 메서드에서는 동작을 지정할 수 있다.

webView.evaluateJavaScript(
    "window.scrollTo({top: window.scrollY + window.innerHeight * 0.9, behavior: 'smooth'});", 
    completionHandler: nil
)

behavior 필드에 핵심이 있다. 이렇게 수정하면 이전과 동일하게 세로축으로 90% 화면을 하단으로 스크롤되는데 동시에 부드럽게 스크롤이 된다. macOS 12 기준에서는 문제없이 동작하였는데 아마도 iOS에서도 무리 없이 동작할 것 같다.

이 외에도 여러 방법이 있을 순 있겠지만 위 방법이 가장 간단하면서도 원하는 바를 쉽게 이룰 수 있어서 괜찮았던 것 같다.