[iOS] WKWebView (1) - 웹 뷰 사용하기

이번에 프로젝트를 진행하면서 이번에 웹 뷰를 사용해서 해야하는 간단한 작업을 받았습니다 :)

그래서 이 참에 WKWebView는 자주 사용하는 컴포넌트이기도 해서 확실하게 공부해놓으면 도움이 되겠다 싶어서 포스팅을 해보려고 합니다.

 

뭔가 혼자서 정리를 하는데 내용이 너무 많은 것 같아서 좀 여러 개로 포스팅을 작성해볼게요..!!

이전에 iOS에서 WebView를 사용하는 방법 3가지에 대해서 간단히 포스팅을 했었는데 연관되진 않지만 보고와도 괜찮을 것 같네요 :)

[iOS] 앱에서 Web 보여주기 (WKWebView, SFSafariViewController, Safari 열기)

 

WKWebView

WKWebView는 원래 UIWebView로 iOS 2.0에서부터 웹을 앱에서 보여주기 위해 사용하고 있었는데요. iOS 8.0이 되면서 컴포넌트로 나오면서 지금은 완전히 대체되어 사용되고 있는 컴포넌트입니다. 심지어 Apple에서는 2020년 12월 이후부터 UIWebView를 포함하면 앱의 업데이트를 더 이상 허용하지 않는다고 발표했어요.. 즉, WKWebView를 공부하는 건 필수겠죠..!!

 

그럼 한 번 간단하게 UIWebView vs WKWebView를 비교해보겠습니다.

	UIWebView	WKWebView
Framework	UIKit	WebKit
렌더링 개체	3500개	8500개
CPU 사용량	90%	25%
로딩 시간	쿠키 사용으로 로딩 시간은 두번쨰부터 빠름	쿠키 사용하지 않아서 항상 동일하다. (각 WKWebView 별로 다른 쿠키 사용)
프로세스	앱과 같은 프로세스에서 실행	앱과 다른 별도의 프로세스에서 실행

이렇게 몇 개의 주제로 비교해보았는데, 성능 면에서도 WKWebView가 더 우세한 것 같죠..?!

그리고 Apple에서도 더 이상 지원을 안한다고 하니깐 당연히 WKWebView를 사용해야겠다는 생각이 듭니다.. 

 

자 그리고 위의 포스팅을 보았을 때, WKWebView를 사용하는 경우는 네이티브 앱에서 웹뷰를 앱의 UI처럼 사용하고 싶을 때 사용할 수 있고 또한 웹의 코드를 네이티브에서 호출할 수 있고 네이트브의 코드를 웹에서도 호출할 수 있는 기능들을 제공하고 있습니다. 그리고 여러 콜백함수들로 웹에서의 상태들에 대한 시점을 알아서 커스텀하기도 쉽습니다. 

 

즉, 쉽게 말해서 웹의 요소를 커스텀해서 사용해야할 때 여러가지의 기능들을 지원하기 때문에 사용해야하는 컴포넌트입니다.

 

위에서 간단하게 WKWebView가 어떤 역할을 하는지 알아보았는데요. 

지금부터는 실제 프로퍼티들을 보면서 어떻게 사용할 수 있는지 보겠습니다 :)

 

 

WKNavigationDelegate - 웹 뷰 호출 시점에 대한 콜백

WKWebView에서 지원하는 기능은 웹에서 한 페이지만 로드하는 것 뿐만 아니라 정말 웹을 사용하는 것처럼 앞으로 가기, 뒤로 가기도 지원됩니다. 그리고 WKNavigationDelegate를 채택해서 WebView의 로드 시점들에 대한 콜백을 받을 수 있습니다.

 

자주 사용하는 메소드의 몇가지만 알아보겠습니다.

 

func webView(_:decidePolicyFor:decisionHandler:) 

: 이 메소드는 WebView에서 어떤 URL을 로드하려고 할 때, 불려집니다. 여기서 로드하려는 URL 값을 확인해서 이동할 지, 안하고 다른 액션을 취할지를 결정할 수 있는 메소드입니다.

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    // 다음으로 이동하려는 URL
    let url = navigationAction.request.url
    
    if url.scheme == "https" || url.scheme == "http" {
    	// 이동해야하는 경우
        decisionHandler(.allow)
        return
    } else {
    	// 이동하지 않아야 하는 경우
        decisionHandler(.cancel)
        return
    }
}

이렇게 설정함으로서 특정 URL Load에 대한 작업을 앱에서 지정하거나 결정할 수 있습니다. 

 

func webView(_:didStartProvisionalNavigation:)

: 이 메소드는 로드하기 위한 요청을 받고 처리를 위해 승인을 받은후에 바로 호출된다고 합니다. 근데 이거 다음에 didCommit이라는 메소드도 볼 것인데요... 뭔가 둘이 비슷하게 호출되는 것 같은데 어떤 차이인지는 정확히 모르겠습니다.. 아시는 분 댓글 달아주세요..!!

이 메소드가 didCommit보다는 먼저 호출됩니다. 정확한 호출 시기의 차이가 어떤 차이인지는 이해가 안되네요..

 

func webView(_:didCommit:)

: 이 메소드는 decidePolicyFor 메소드로 요청에 대한 허용을 받고 웹을 로드하기 시작할 때, 불리는 메소드입니다. 위의 메소드보다는 이후로 불리는데, 둘 다 로드하는 시점에 불리는데 정확히 차이는 모르겠네요...!!

 

func webView(_:didFinish:)

: 웹 뷰의 로드가 끝난 후에 불리는 메소드입니다. 여기서 원하는 로딩화면을 종료한다던가 하는 액션들을 작성해주면 됩니다.

 

이렇게 WKWebView에서 웹 뷰의 로드 시점에 관한 컨트롤이 자유롭게 가능합니다. 그렇기 때문에 네이티브 앱에서 웹을 호출하는 특정 시점에 관한 컨트롤 같은 것들이 쉽게 가능하게 됩니다.

 

 

WKWebViewConfiguration - 웹 뷰 구성에 관한 옵션 지정하기

WKWebView의 요소 중에는 configuration: WKWebViewConfiguration이라는 프로퍼티가 있는데요. 이 프로퍼티를 활용하면 웹 뷰를 구성하는 방법에 대한 정보를 컨트롤할 수 있습니다. 즉, 여러가지 옵션 값들을 주어서 웹에서 제한되는 항목이나 이런 값에 대한 설정이 가능합니다. 또한 WebView에 JavaScript 코드를 주입하거나 JavaScript로부터 메세지를 받아와서 컨트롤하는 것도 가능합니다.

 

단, 이 Congifuation은 WebView를 생성할 때 같이 주입해서 초기화해야합니다. 그 이후로는 할당이 불가능합니다. 

 

일단, JavaScript에서 Swift로 메세지를 보내거나 Swift에서 JavaScript로 메세지를 보내는 방법은 뒤에서 알아보고 여기서는 어떤 옵션값들을 사용해서 컨트롤 할 수 있는지만 알아보겠습니다.

 

• allowsInlineMediaPlayback : default 값은 iPhone에서 false, iPad에서 true이다. true일 때는 네이티브 앱에서 full-screen player를 사용할 수 없고 false면은 사용이 가능하다.
• allowsAirPlayForMediaPlayback : WebView에서 AirPlay를 사용해서 미디어 재생을 허용하는지를 묻는 Bool 값입니다. default 값은 true 입니다.

이러한 설정값들이 여러가지 있고 또한 여기서 Cookie에 관한 설정을 할 수 있습니다. 원래는 WKWebView는 각 객체들마다 각각의 Cookie를 가져서 공유가 되지 않습니다. 이를 공유하기 위해서 하나의 Cookie를 관리하는 WKProcessPool을 만들어서 WKConfiguration마다 주입해주면 된다고 합니다.

(이 부분은 직접해보지는 않았지만 공부하면서 Tip처럼 알게 되어씁니다.. 혹시 틀리다면 알려주세요)

 

즉, WKWebConfiguration을 활용해서는 전반적인 웹뷰에 대한 옵션 값들의 설정이 가능합니다. 더욱 다양한 것들이 있는데, 필요에 따라 Apple 공식문서를 보고 설정해서 사용하면 될 것 같습니다.

 

 

일단 오늘은 간단하게 WKWebView에서 사용할 수 있는 몇가지 기능들에 대해 알아봤습니다..!!

다음 포스팅에서는 WKWebViewConfiguration에서 어떻게 JavaScript 코드를 호출하고 JavaScript에서 어떻게 Swift 코드를 호출하는지부터 다른 Delegate에 대해 알아보겠습니다..!!

 

꼭 오늘 내용이 도움이 되었으면 좋겠네요 :)

틀린 내용이나 잘못된 것이 있으면 알려주세요~~ 감사합니다