WebView 사용하기 (2) - WKWebView

SFSafariWebViewController를 사용하는 방법을 알아보았는데, 이어서 App 내에서 직접 웹 페이지를 로드하고, JavaScript 실행 및 커스텀 웹 컨트롤을 구현할 수 있는 웹 뷰인 WKWebView에 대해 정리하겠습니다.

Apple의 WebKit 프레임워크에서 제공하며, UIWebView의 후속 버전으로 성능과 보안이 크게 개선되었습니다.

 

📌 WKWebView의 주요 특징

1. 앱 내에서 완전한 웹 브라우징 가능
   • WKWebView는 웹 페이지를 로드하고, JavaScript 실행 및 CSS 적용이 가능하여 맞춤형 브라우저를 만들 수 있음.
2. JavaScript 실행 및 DOM 조작 가능
   • evaluateJavaScript(_:completionHandler:)를 사용하여 JavaScript 코드를 실행할 수 있음.
3. 쿠키 및 세션 관리 가능
   • WKWebsiteDataStore를 활용하여 쿠키, 캐시, 세션을 관리 가능.
4. 파일 다운로드 및 업로드 지원
   • HTML 폼을 통한 파일 업로드 및 다운로드 기능을 구현할 수 있음.
5. 커스텀 네비게이션 구현 가능
   • 뒤로 가기, 앞으로 가기, 새로고침 등의 네비게이션 기능을 직접 제어 가능.

---

📌 UIKit에서 WKWebView 사용법

UIKit에서는 WKWebView를 UIViewController에 추가하여 사용할 수 있습니다.

✅ 간단한 WKWebView 예제 (UIKit)

import UIKit
import WebKit

class WebViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!
    
    override func loadView() {
        webView = WKWebView()
        webView.navigationDelegate = self
        view = webView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let url = URL(string: "https://apple.com")!
        webView.load(URLRequest(url: url))
    }
}

WKWebView를 UIViewController의 view로 설정하여 웹 페이지를 로드하는 예제입니다.

 

---

📌 SwiftUI에서 WKWebView 사용 방법

SFSafariViewController와 마찬가지로 SwiftUI에서는 UIViewRepresentable을 사용하여 WKWebView를 래핑해야 합니다.

 

✅ WKWebView를 SwiftUI에서 사용하기

1️⃣ WebView 래퍼 만들기

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    let url: URL

    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        let request = URLRequest(url: url)
        webView.load(request)
        return webView
    }

    func updateUIView(_ webView: WKWebView, context: Context) {}
}

UIViewRepresentable을 사용하여 WKWebView를 SwiftUI에서 사용할 수 있도록 변환.

2️⃣ SwiftUI에서 사용하기

struct ContentView: View {
    let url = URL(string: "https://apple.com")!

    var body: some View {
        WebView(url: url)
            .edgesIgnoringSafeArea(.all)
    }
}

WebView를 SwiftUI에서 사용하여 특정 URL을 로드할 수 있음.

---

📌 WKWebView의 주요 기능 추가

✅ JavaScript 실행하기

webView.evaluateJavaScript("document.body.style.backgroundColor = 'lightgray'") { (result, error) in
    if let error = error {
        print("JavaScript 실행 오류:", error)
    }
}

evaluateJavaScript(_:completionHandler:)를 사용하여 JavaScript 실행 가능.

✅ 쿠키 관리 (WKWebsiteDataStore)

let dataStore = WKWebsiteDataStore.default()
dataStore.httpCookieStore.getAllCookies { cookies in
    for cookie in cookies {
        print("쿠키 이름: \(cookie.name), 값: \(cookie.value)")
    }
}

WKWebsiteDataStore를 활용하면 쿠키 관리 가능.

---

📌 SFSafariViewController vs WKWebView 비교

항목 SFSafariViewController WKWebView

사용 목적	간단한 웹 페이지 표시	맞춤형 웹 뷰 (로그인, 데이터 저장, JS 실행 등)
JavaScript 실행	❌ 불가능	✅ 가능 (evaluateJavaScript)
쿠키 공유	✅ Safari와 공유	❌ 기본적으로 공유되지 않음
파일 업로드/다운로드	❌ 지원 안 됨	✅ 가능
세션 관리	✅ Safari와 동일	✅ WKWebsiteDataStore 활용 가능
커스텀 UI	❌ 변경 불가	✅ 가능 (탭, 버튼 추가 등)
보안	✅ Safari 수준 보안	✅ 앱에서 직접 관리해야 함
iOS 기본 지원	✅ Safari 환경 그대로 사용	✅ 앱 내에서 직접 관리해야 함

✅ SFSafariViewController는 빠르게 웹 페이지를 표시할 때 적합하고,
✅ WKWebView는 맞춤형 브라우저, JavaScript 실행, 데이터 저장이 필요할 때 적합함.

---

📌 정리

✅ SFSafariViewController를 사용할 때

• 간단한 웹 페이지를 띄울 때
• Safari의 기능 (자동 로그인, 쿠키 공유, 보안 등)을 그대로 사용하고 싶을 때
• 앱 외부로 이동하지 않고 웹을 보여주고 싶을 때

✅ WKWebView를 사용할 때

• JavaScript 실행 및 DOM 조작이 필요할 때
• 쿠키, 세션, 로컬 데이터 저장이 필요할 때
• 파일 업로드/다운로드 기능이 필요할 때
• 커스텀 네비게이션(뒤로 가기, 앞으로 가기 등)이 필요할 때

✅ 간단한 웹 페이지를 띄울 거라면 SFSafariViewController,
✅ 고급 기능(로그인, JavaScript 실행, 데이터 저장)이 필요하면 WKWebView 를 선택하세요! 🚀

---

References

📌  SFSafariViewController - Apple Developer