iOS 앱에서 웹 콘텐츠를 띄우는 방법

shintwl·2024년 5월 14일
0

앱에서 웹 콘텐츠를 보여주는 경우가 있습니다.
커머스 앱을 운영하는 기업은 프로모션을 진행할 때마다 앱을 수정하고 사용자가 앱을 업데이트 하도록 하는 것은 효율적이지 않다고 판단할 가능성이 높습니다.
그래서 수정이 용이한 웹 콘텐츠를 통해 프로모션을 진행하곤 합니다.
iOS 앱에서 웹 콘텐츠를 보여주는 방법을 알아보고 비교해보겠습니다.
(UIWebView는 deprecated된 관계로 다루지 않겠습니다.)

Safari Browser

앱에서 Safari 브라우저를 열어서 웹페이지로 이동시키는 방식입니다.
Safari 브라우저의 모든 기능을 쓸 수 있습니다.
하지만 사용자가 앱을 빠져나가서 다른 앱을 사용하기 때문에 사용자가 앱으로 돌아오지 않는 (사용자 이탈) 현상이 발생하기 쉽습니다.

private lazy var openSafariButton: UIButton = {
    let button = UIButton(type: .system)
    button.setTitle("Safari Browser", for: .normal)
    button.addAction(UIAction(handler: { _ in
        guard let url = URL(string: "http://www.naver.com"),
              UIApplication.shared.canOpenURL(url) else { return }
       UIApplication.shared.open(url, options: [:], completionHandler: nil)
    }), for: .touchUpInside)
    return button
}()

WKWebView

웹 콘텐츠를 UIView를 상속하는 WKWebView를 사용하여 보여주는 방식입니다.
UIView를 상속했기 때문에 다른 UI를 그려주는 방식과 동일하게 구성할 수 있습니다.
그리고 웹 콘텐츠와 네이티브 코드간 상호작용이 용이합니다.
이 말은 화면을 다양하게 커스텀할 수 있다는 장점이 있다는 것과 동시에 구현이 복잡해질 수 있다는 단점을 뜻하기도 합니다.

private lazy var openWebViewButton: UIButton = {
   let button = UIButton(type: .system)
   button.setTitle("WebView", for: .normal)
   button.addAction(UIAction(handler: { _ in
        guard let url = URL(string: "http://www.naver.com"),
             UIApplication.shared.canOpenURL(url) else { return }
        self.vStackView.isHidden = true
        let webview = WKWebView()
        webview.translatesAutoresizingMaskIntoConstraints = false
        webview.load(URLRequest(url: url))
        self.view.addSubview(webview)
        NSLayoutConstraint.activate([
            webview.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor),
            webview.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor),
            webview.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor),
            webview.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
        ])
    }), for: .touchUpInside)
    return button
}()

SFSafariViewController

UIViewController를 상속한 클래스를 사용하는 방식입니다.
present 메서드 (혹은 그에 준하는 메서드)를 통해 웹 콘텐츠를 보여줍니다.
Safari 브라우저보다 커스텀 할 수 있는 부분이 많지만 WKWebView만큼은 아닙니다.
애플은 상호작용이나 커스터마이징이 필요하지 않은 콘텐츠를 보여줄 때 사용하라고 안내합니다.

Present an SFSafariViewController when you don’t need to customize or interact with the web content.

private lazy var openSFSafariVCButton: UIButton = {
   let button = UIButton(type: .system)
   button.setTitle("Safari VC", for: .normal)
   button.addAction(UIAction(handler: { _ in
       guard let url = URL(string: "http://www.naver.com"),
             UIApplication.shared.canOpenURL(url) else { return }
        let vc = SFSafariViewController(url: url)
       self.present(vc, animated: true)
    }), for: .touchUpInside)
   return button
}()

참고

https://developer.apple.com/documentation/webkit/wkwebview
https://dongminyoon.tistory.com/57
https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller

0개의 댓글