[iOS] WKWebView

iOS 앱에서 웹뷰를 통해 웹과 앱 간 연동을 구현하려면 WKWebView를 주로 사용합니다. 웹뷰는 HTML, CSS, JavaScript로 작성된 콘텐츠를 앱 내부에서 표시할 수 있으며, 앱과 웹 간 데이터 교환이 가능하도록 설계됩니다. 아래는 주요 개념과 방법을 설명합니다.

---

1. 웹뷰 종류

• UIWebView: iOS 12 이전에 사용되던 웹뷰. 현재는 Deprecated로 사용하지 않음.
• WKWebView: iOS 8 이상에서 사용할 수 있는 최신 웹뷰. 성능이 우수하고, 보안 및 기능 지원이 강력함.

---

2. WKWebView 주요 기능

1. 웹 페이지 로드:
   • 로컬 HTML 파일 또는 URL로 웹 페이지를 로드합니다.
   • load(URLRequest) 또는 loadHTMLString(_:baseURL:)을 사용.
2. JavaScript 실행:
   • 앱에서 JavaScript 코드를 실행하거나, 웹에서 앱과 통신할 때 활용.
   • evaluateJavaScript(_:completionHandler:) 메서드를 통해 실행.
3. 앱-웹 간 통신:
   • WKScriptMessageHandler를 사용하여 웹에서 앱으로 데이터를 전달.
   • JavaScript 함수 호출로 앱에서 웹으로 데이터를 전달.
4. 탐색 컨트롤:
   • goBack(), goForward(), reload() 등 탐색 기능을 지원.
5. 네비게이션 Delegate:
   • WKNavigationDelegate: 페이지 로딩 상태나 특정 URL 탐색을 제어.
   • WKUIDelegate: 팝업 처리나 웹 뷰의 UI 요소를 관리.

---

3. 앱과 웹 간 연동 방법

(1) 웹 → 앱: 데이터 전달

• JavaScriptInterface:
  1. 웹에서 JavaScript 함수로 앱에 데이터를 전달.
  2. WKUserContentController에 스크립트 메시지 핸들러를 추가.

class ViewController: UIViewController, WKScriptMessageHandler { 
	let webView = WKWebView()
    
    override func viewDidLoad() { 
    	super.viewDidLoad() 
        let config = WKWebViewConfiguration() 
        config.userContentController.add(self, name: "appBridge")
        webView = WKWebView(frame: self.view.frame, configuration: config) 
        self.view.addSubview(webView) 
    }
    
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { 
    	if message.name == "appBridge" { 
        	print("Received data from web: \(message.body)")
        } 
    }
}

• JavaScript 호출 예제:

window.webkit.messageHandlers.appBridge.postMessage({ key: 'value' });

---

(2) 앱 → 웹: 데이터 전달

JavaScript 실행:

webView.evaluateJavaScript("yourJavaScriptFunction('data')") { (result, error) in
    if let error = error {
        print("Error: \(error.localizedDescription)")
    } else {
        print("Result: \(result ?? "No result")")
    }
}

---

(3) 공유 데이터 관리

• Cookies 및 LocalStorage:
  • WKHTTPCookieStore를 활용해 웹 세션이나 로그인 데이터를 공유.
  • localStorage를 사용할 수도 있으나 앱에서 직접 접근은 불가.

---

4. 보안과 최적화

1. WKWebView 보안 설정:
   • ATS(App Transport Security): HTTPS만 허용하도록 권장.
   • WKWebView 기본 설정은 보안에 최적화되어 있음.
2. CSP(Content Security Policy):
   • 웹에서 실행되는 스크립트를 제한하여 악성 코드 실행 방지.
3. 캐시 및 메모리 관리:
   • 메모리 사용량을 줄이기 위해 불필요한 리소스 로드 최소화.

---

5. 기타 고려 사항

1. 웹 페이지 디자인:
   • 모바일 친화적인 UI/UX 설계.
   • 반응형 웹을 적용하여 다양한 디바이스 해상도 지원.
2. 로딩 인디케이터:
   • 웹뷰 로드가 완료될 때까지 사용자에게 인디케이터 표시.
3. 오프라인 동작:
   • 네트워크가 없는 경우 로컬 HTML 파일을 로드하거나, 에러 페이지 표시.

---

6. WKWebView 주요 Delegate

1. WKNavigationDelegate:

• 특정 URL의 로딩 시작, 완료, 실패를 처리.

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
	print("Page loaded") 
} 

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) { 
	if navigationAction.request.url?.absoluteString.contains("restricted") == true { 
    	decisionHandler(.cancel) 
    } else { 
    	decisionHandler(.allow) 
	}
}

1. WKUIDelegate:

• 사용자 상호작용을 처리(예: 팝업).

func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) { 
	let alert = UIAlertController(title: "Alert", message: message, preferredStyle: .alert) 
    
    alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in 
    	completionHandler() 
    }) 
    
    present(alert, animated: true) 
}

---

7. 결론

WKWebView를 사용하면 iOS 앱에서 웹 콘텐츠를 렌더링하고, 앱과 웹 간 연동을 효과적으로 구현할 수 있습니다. 위의 기능들을 조합하여 데이터 전송, UI/UX 최적화, 보안을 강화하는 구조로 개발할 수 있습니다.