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

iOS에서 앱 내에서 Web을 보여주어야 하는 경우가 있습니다.

이 때, 크게 3가지 방법이 있는데요.

 

이 방법에 대해 간단히 사용법을 알아보고 공부해보겠습니다.

 

일단 UIWebView를 사용하는 방법도 있는데, 이제는 Deprecated 된 것으로 알고있는데요. (저도 사용해본적은 없습니다..)

그래서 UIWebView를 제외하고 3가지의 방법을 알아보려고 합니다.

 

• Safari 앱을 열어서 보여주기
• SFSafariViewController를 사용하여 보여주기
• WKWebView를 사용하여 보여주기

 

 

Safari 앱

가장 간단한 방법인데요. 

 

그냥 아이폰에 설치된 Safari를 열어서 웹 페이지를 로딩하는 방법입니다.

코드도 정말 간단하고 별도의 설정도 필요없는데요.

 

장점이라하면은 간단함...?! 단점은 커스텀이 전혀 불가능하고 Safari로부터 어떤 이벤트를 받아온다던가 앱 사이의 상호작용은 불가능하다는 것이 있습니다.

 

코드는

@IBAction func openSafariApp(_ sender: Any) {
    guard let appleUrl = URL(string: "https://www.apple.com")   else { return }
    guard UIApplication.shared.canOpenURL(appleUrl)             else { return }

    UIApplication.shared.open(appleUrl, options: [:], completionHandler: nil)
}

이게 전부입니다..!!

 

동작은 다음과 같이하는데요.

그저 웹을 보여주려고 할 때, 이 방법을 사용할 수 있을 것 같습니다.

하지만, 보통 커스텀이 필요한 경우가 많아서 자주 사용하지는 않을 것 같은 느낌이 드네요..

 

 

SFSafariViewController

이제 앱 내에서 웹을 여는 방법인데요.

크게 Safari 앱을 사용하는 것과 비슷하기는 한데요. 다른 점이라하면 앱에서 웹을 열수있다~

 

즉, 앱에서 SFSafariViewController를 불러서 Safari에서 사용하는 기능들을 전부 사용할 수 있습니다.

 

우선, Safari에서 사용하는 기능들은 모두 사용할 수 있습니다. (ex. 뒤로 가기, 앞으로 가기, 공유하기 등)

다만 URL을 입력하는 것은 불가능합니다.

 

그리고 아이폰의 Safari와 쿠키 정보들을 공유할 수 있습니다. 그러나 이 정보들을 앱에서는 사용할 수 없습니다. (단지 보여주고 SFSafariViewController 내에서만 활용이 됩니다. 앱에서 개인적으로 사용은 불가능합니다.)

 

또한 Delegate를 이용해서 SafariViewController에서 어떤 이벤트가 들어왔을 때, 전달하는 것도 가능하게 됩니다.

코드도 간단합니다.

import SafariServices

@IBAction func openSafariViewController(_ sender: Any) {
    guard let appleUrl = URL(string: "https://www.apple.com")   else { return }

    let safariViewController = SFSafariViewController(url: appleUrl)
    safariViewController.delegate = self
    safariViewController.modalPresentationStyle = .automatic
    self.present(safariViewController, animated: true, completion: nil)
}

extension ViewController: SFSafariViewControllerDelegate {}

동작은 조금 차이가 있는데, 다음과 같이 합니다.

간단하게 웹을 보여줘야하는 경우에 사용할 수 있을 것 같습니다.

 

 

WKWebView

이번에는 WKWebView입니다.

보통 WebView에서 커스텀이 필요한 경우나 Web과의 상호작용이 필요한 경우에 WKWebView를 사용합니다.

 

WKWebView를 사용하면 이전에 SFSafariViewController나 Safari 앱처럼 뒤로가기 앞으로가기 검색창 등의 기본적으로 사파리에서 사용하던 기능은 사용할 수 없고 사용하고 싶으면 직접 뷰를 커스텀해서 만들어야 합니다. 

 

보통 WebView를 커스텀해서 사용한다고하면 iOS 9.0이후부터는 전부 WKWebView를 사용하는 것으로 알고 있습니다. Web과의 여러 상호작용이 가능한데, WKUserController를 사용해서 웹으로부터 메세지를 전달받을 수도 있고 웹으로 Java Script 코드를 앱에서 전달할 수도 있다.

 

또한 WKUIDelegate를 활용해서 앱에서 WebView가 Alert 메세지를 호출했을 때, 앱에서 처리도 가능합니다. WKNavigationDelegate를 활용해서는 웹뷰가 호출되는 시점들을 알 수 있습니다. 로딩을 완료했을 때, 로딩을 시작했을 때 등의 처리가 가능합니다. 

 

아직은 자세하게 사용해본 적이 없어서 이정도만 언급해보고 간단하게 어떻게 호출하는지 알아보겠습니다~!

import WebKit

var webView: WKWebView!

func loadWeb() {
    self.webView.uiDelegate = self
    self.webView.navigationDelegate = self

    guard let url = URL(string: "https://apple.com") else { return }
    let request = URLRequest(url: url)
    
    self.webView.load(request)
}

extension ViewController: WKUIDelegate {}
extension ViewController: WKNavigationDelegate {}

이렇게 설정하면 WebView에서 호출하는 것들을 Delegate로 선언해서 받아서 이벤트 핸들링이 가능하다. 

 

동작은 아까와는 비슷하지만 Safari에서 기본적으로 사용하는 뒤로가기, 공유하기, URL을 입력하는 창들이 없는 것을 확인할 수 있다. 즉, 커스텀하여 사용하는 것이 가능하다.

이렇게 앱 안에서 웹 사이트를 호출하는 동작이 가능해지는데, 역시 가장 강한 장점은 웹과 앱 사이의 상호작용을 가능하게 해주는 메소드들이 많고 이를 활용해서 핸들링하기가 쉽다는 점이 있다. 

 

만약, 앱에서 웹과의 콜백 함수를 주고받으면서 핸들링을 해야하는 경우에 WKWebView를 활용하면 효율적으로 이런 동작들이 가능해진다.

 

 

오늘은 자세하게는 아니지만 앱에서 웹뷰를 호출할 수 있는 방법을 3가지만 간단하게 알아보았습니다.

잘못된 점이나 더 궁금한 점은 댓글로 남겨주세요 :)

감사합니다~~!