iOS - WebView

WebView

웹 콘텐츠를 표시하고 상호작용할 수 있는 뷰를 의미한다.
WebView를 사용하면 앱 내에서 웹 페이지를 로드하고 표시할 수 있고, 웹과 네이티브 앱 간의 상호작용이 가능하다.

---

WebView 종류 및 구현방법

외부 사파리 뷰

단순히 앱에서 Safari를 열어 웹 페이지를 표시하는 방식으로 매우 간단하다. 이 방법은 사용자에게 익숙한 Safari 브라우저를 제공하고, 모든 Safari 기능을 사용할 수 있다. 또한, 외부 Safari 뷰를 통해 URL 스킴을 사용하여 핸드폰 번호, 이메일 등 다른 기능들을 처리할 수도 있다. 하지만 이 방법은 앱을 벗어나게 된다는 단점이 있다.

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let button = UIButton(type: .system)
        button.setTitle("Open in Safari", for: .normal)
        button.addTarget(self, action: #selector(openInSafari), for: .touchUpInside)
        button.center = self.view.center
        self.view.addSubview(button)
    }
    
    @objc func openInSafari() {
        if let url = URL(string: "https://www.example.com") {
            UIApplication.shared.open(url, options: [:], completionHandler: nil)
        }
    }
}

---

SFSafariView

SFSafariViewController는 iOS 9 이상에서 사용할 수 있고, 사용자에게 Safari와 유사한 브라우징 경험을 제공한다. 내장 브라우저로, 앱 내부에서 웹 페이지를 표시할 수 있으므로 앱을 벗어나지 않는다. 주로 외부 링크를 열 때 사용된다.

import UIKit
import SafariServices

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 버튼 생성
        let openWebPageButton = UIButton(type: .system)
        openWebPageButton.setTitle("Open Web Page", for: .normal)
        openWebPageButton.addTarget(self, action: #selector(openWebPage), for: .touchUpInside)
        openWebPageButton.frame = CGRect(x: 100, y: 100, width: 200, height: 50)
        
        view.addSubview(openWebPageButton)
    }

    @objc func openWebPage() {
        // 열고 싶은 URL 설정
        if let url = URL(string: "https://www.apple.com") {
            // SFSafariViewController 인스턴스 생성
            let safariViewController = SFSafariViewController(url: url)
            safariViewController.delegate = self
            
            // SFSafariViewController 표시
            present(safariViewController, animated: true, completion: nil)
        }
    }
}

---

Custom WebView

1. UIWebView
   UIWebView는 iOS 초기 버전부터 사용된 웹 뷰 컴포넌트로 성능 문제와 기능 제한으로 인해 iOS 8 부터는 WKWebView로 대체되었다.

2. WKWebView
   WKWebView는 UIWebView의 대체재로 iOS 8부터 도입되어 더 나은 성능과 기능을 제공한다.다양한 설정을 통해 웹뷰의 동작을 커스터마이즈할 수 있고, JavaScript 실행이나 메시지 핸들링, 보안 설정 등 다양한 기능을 지원한다. 현재 iOS에서 웹 콘텐츠를 표시할 때 가장 권장되는 방법이다.

   WKWebView의 JavaScript 실행이나 상호작용 방법은 다음 글에서 알아보자❗️

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!

    override func loadView() {
        // 웹뷰의 설정 구성
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.navigationDelegate = self
        view = webView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 웹 페이지 로드
        let myURL = URL(string: "https://www.example.com")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }
    
    // WKNavigationDelegate 메서드 구현
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("WebView navigation finished")
    }
}

---

💡 정리하면,
외부 사파리 뷰는 간단히 Safari를 열어 웹 페이지를 표시하는 방식으로, 사용자가 익숙한 Safari 브라우저의 기능을 모두 활용할 수 있지만 앱을 벗어나게 된다는 단점이 있고

SFSafariViewController는 앱 내부에서 웹 페이지를 표시하면서 Safari와 유사한 사용자 경험을 제공하는 방법으로 앱을 벗어나지 않으면서 안전하고 일관된 웹 브라우징 경험을 제공할 수 있다.

WKWebView는 다양한 설정과 기능을 통해 웹 콘텐츠를 앱 내부에서 유연하게 표시하고 상호작용할 수 있는 방법으로 iOS에서 웹 콘텐츠를 표시할 때 가장 권장되는 방법이다.