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