[iOS] WKWebView로 웹뷰(WebView) 구현하기

WebView

WebView란 프레임워크에 내장된 웹 브라우저 컴포넌트로 View의 형태로 앱에 임베딩하는 것을 말합니다. 예를 들어, API를 통해서 받은 URL을 호출을 해보면 응답 값으로 JSON, XML 같은 데이터 포맷이 아니라 HTML로 들어옵니다. 만약 이렇게 데이터가 들어오게 되면 파싱을 해줄 수 없습니다.

그래서 이러한 HTML 데이터를 처리해서 웹페이지로 보여주는 프레임워크가 WebView입니다.

즉, WebView는 앱 내에 웹 페이지를 넣는 것을 의미합니다.

WebView를 구현하는 방법은 여러가지가 있습니다.

UIWebView

UIWebView는 ios 2.0에 출시되었으며 웹 콘텐츠를 앱 내부에서 렌더링을 할 수 있습니다.

성능과 보안 문제로 인해 iOS 12에서 Deprecated되어 iOS 13부터 WKWebView로 대체되었습니다.

WKWebView

ios 8.0이상의 WebKit 기반 웹뷰입니다. 기존의 UIWebView보다 훨씬 빠르고 메모리 사용이 최적화되었습니다.

또한, 웹 콘텐츠를 별도의 프로세스에서 실행하기 때문에 안정적입니다. 이 말은 즉슨, 웹 페이지는와 앱의 메모리가 별도로 동작하기 때문에 웹 페이지의 메모리가 아무리 크더라도 앱이 죽지 않는 것을 의미합니다.

이외에도 JavaScript 실행 속도가 빠르며 쿠키나 캐시, 세션 등 웹 브라우징 기능을 다룰 수 있어 앱 내부에서 웹을 완전히 컨트롤해야 할 때 적합합니다.

SFSafariView

SFSafariView 는 ios 9.0부터 사용되었으며, Safari 기반의 웹뷰입니다. 즉, 앱 내에서 사파리 브라우저를 띄우는 방식입니다. 하지만 사파리 브라우저를 띄우기 때문에 개발자가 웹 콘텐츠를 직접 컨트롤할 수는 없습니다.

SFSafariView는 로그인 유지, Safari 쿠키 및 데이터 등 공유 등 다양한 이점이 있습니다.

WKWebView가 단순히 웹 페이지 하나만을 보여준다면, SFSafariView는 사파리의 기능을 이용할 수가 있어 다양한 동작이 가능해집니다.

ASWebAuthenticationSession

iOS 12 이상에서 사용 가능하며 OAuth 인증(로그인)에 특화된 WebView 입니다.

사용자의 기존 사파리 로그인 세션을 활용할 수 있어 앱과 사파리 간 원활한 로그인 경험을 제공합니다. 보안 측면에서 SFSafariViewController보다 더 개선되었으며 백그라운드에서 실행되는 앱과 쿠기 등 데이터 공유가 가능합니다.

이 중에서도 자주 사용되는 WKWebView를 사용해 간단한 웹뷰를 구현해보도록 하겠습니다.

WKWebView는 WebKit 기반의 웹뷰이기 때문에

이를 사용하기 위해서는 먼저 WebKit을 프로젝트에 추가해야 합니다.

프로젝트 설정 파일에서 Build Phases > Link Binary With Libraries로 이동해 +를 눌러 WebKit.framework를 추가합니다.

먼저 스토리보드는 아래와 같이 구성했습니다.

ViewController는 Navigation Controller와 연결되어 있고,

검색어 입력을 위해 스택뷰로 감싼 TextField, Button을 배치했습니다.

ViewController와 WebViewController 모두 스토리보드와 컴포넌트 연결만 해둔 상태입니다.

ViewController.swift

tappedSearch Action 함수에는 입력한 검색어와 함께 WebViewController로 이동하는 동작을 구현할 예정입니다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tvSearch: UITextField!/** 검색어 텍스트필드 */
    
    /** life cycle */
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }

    @IBAction func tappedSearch(_ sender: Any) {

    }
}

먼저 검색어를 입력한 뒤 검색 버튼을 누르면 웹뷰로 이동하는 기능을 구현하겠습니다.
ViewController의 tappedSearch 함수에 다음 코드를 추가합니다.

let text: String = tvSearch.text!

text 변수에 입력받은 검색어를 넣어, WebViewController로 전달할 예정입니다.

이어서 NavigationController을 사용하여 WebViewController로 이동하는 코드를 추가합니다.

if let navigationController = self.navigationController {
            
     if !(navigationController.topViewController?.description.contains("WebViewController"))! {
          let storyBoard: UIStoryboard = UIStoryboard(name: "Main", bundle: nil)
          let viewController = storyBoard.instantiateViewController(withIdentifier: "WebViewController") as! WebViewController
                
          viewController.search = text
          viewController.url = "https://m.search.naver.com/search.naver?sm=mtp_hty.top&where=m&"
                
          navigationController.pushViewController(viewController, animated: true)
     }
}

검색어와 url은 WebViewController의 프로퍼티를 통해 전달합니다.

viewController.search = text
viewController.url = "https://m.search.naver.com/search.naver?sm=mtp_hty.top&where=m&"

네이버에 특정 키워드를 입력해 검색하면 url이 `https://m.search.naver.com/search.naver?sm=mtp_hty.top&where=m&query=검색어` 와 같습니다.
위와 같이 query를 사용하여, 검색어를 입력하면 네이버의 결과 화면을 띄워줄 예정입니다.

WebViewController.swift

먼저 WebKit를 import 하고, 웹뷰를 담을 프로퍼티를 선언합니다.

import UIKit
import WebKit

class WebViewController: UIViewController {

    @IBOutlet weak var webViewGroup: UIView!/** 배경 뷰 */
    
    private var webView: WKWebView!/** 웹뷰 */
    
    var search: String!/** 검색어 */
    var url: String!/** url */
    
    
    /** life cycle */
    override func viewDidLoad() {
        super.viewDidLoad()
        
        /** 네비게이션 바 타이틀 */
        self.navigationItem.title = search
    }
}

이 webView를 통해 웹뷰를 그리고, 미리 그려둔 뷰인 webViewGroup에 추가할 예정입니다.

search, url 프로퍼티에는 ViewController로 부터 값을 전달받은 저장합니다.

먼저 Delegate를 추가합니다.

webView.uiDelegate = self
webView.navigationDelegate = self

extension WebViewController: WKNavigationDelegate {
    
    public func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    
print("\(navigationAction.request.url?.absoluteString ?? "")" )
        
        decisionHandler(.allow)
    }
}

extension WebViewController: WKUIDelegate {

    public func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        
    }
}

extension WebViewController: WKScriptMessageHandler {
    
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        
        print(message.name)
    }
}

decidePolicyFor 함수는 유효한 도메인인지 체크합니다.

앞서 add()함수를 사용해 메시지를 등록했다면, WKScriptMessageHandler 클래스를 통해 javaScript(즉, 웹 페이지)로 부터 메시지를 수신할 수 있습니다.

이어서 WebView 객체를 생성합니다.

viewDidLoad()에 다음 코드를 추가합니다.

WKPreferences는 웹 뷰에 대한 기본 속성을 캡슐화한 클래스로, java나 javaScript 설정이 가능합니다.

let preferences = WKPreferences()
/** javaScript 사용 설정 */
preferences.javaScriptEnabled = true
/** 자동으로 javaScript를 통해 새 창 열기 설정 */
preferences.javaScriptCanOpenWindowsAutomatically = true

WKUserContentController는 웹뷰와 javaScript 간의 상호작용을 관리하는 클래스입니다.
javaScript에서 앱으로 메시지를 전달할 때는 add() 함수를 사용해 메시지의 이름을 설정합니다.

let contentController = WKUserContentController()
/** 사용할 메시지 등록 */
contentController.add(self, name: "bridge")

WKWebViewConfiguration는 웹뷰가 맨 처음 초기화될 때 호출되며, 웹뷰가 생성된 이후에는 이 클래스를 통해 속성을 변경할 수 없습니다. 이 속성을 사용해 WebView 객체를 생성합니다.

let configuration = WKWebViewConfiguration()
/** preference, contentController 설정 */
configuration.preferences = preferences
configuration.userContentController = contentController

webView = WKWebView(frame: self.view.bounds, configuration: configuration)

다음과 같이 URLQueryItem() 클래스를 사용하여 웹뷰에 나타낼 url을 설정합니다.

var components = URLComponents(string: url)!
components.queryItems = [ URLQueryItem(name: "query", value: search) ]

마지막으로 생성한 webView를 적용한 후, requset 객체를 통해 웹 페이지를 로드합니다.

webViewGroup.addSubview(webView)
setAutoLayout(from: webView, to: webViewGroup)

let request = URLRequest(url: components.url!)
webView.load(request)

AutoLayout은 따로 함수를 구현해 설정했습니다.

/** auto leyout 설정 */
public func setAutoLayout(from: UIView, to: UIView) {
        
from.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.init(item: from, attribute: .leading, relatedBy: .equal, toItem: to, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
    NSLayoutConstraint.init(item: from, attribute: .trailing, relatedBy: .equal, toItem: to, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
    NSLayoutConstraint.init(item: from, attribute: .top, relatedBy: .equal, toItem: to, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
    NSLayoutConstraint.init(item: from, attribute: .bottom, relatedBy: .equal, toItem: to, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
    view.layoutIfNeeded()
}

아래는 결과 화면입니다.

전체 코드입니다.

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tvSearch: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.view.endEditing(true)
    }

    /** 웹 뷰로 이동 */
    @IBAction func tappedSearch(_ sender: Any) {
        let text: String = tvSearch.text!
        
        if let navigationController = self.navigationController {
            
            if !(navigationController.topViewController?.description.contains("WebViewController"))! {
                let storyBoard: UIStoryboard = UIStoryboard(name: "Main", bundle: nil)
                let viewController = storyBoard.instantiateViewController(withIdentifier: "WebViewController") as! WebViewController
                
                viewController.search = text
                viewController.url = "https://m.search.naver.com/search.naver?sm=mtp_hty.top&where=m&"
                
                navigationController.pushViewController(viewController, animated: true)
            }
        }
    }
}

WebViewController.swift

import UIKit
import WebKit

class WebViewController: UIViewController {

    @IBOutlet weak var webViewGroup: UIView!/** 배경 뷰 */
    
    private var webView: WKWebView!/** 웹 뷰 */
    
    var search: String!/** 검색어 */
    var url: String!/** url */
    
    
    /** life cycle */
    override func viewDidLoad() {
        super.viewDidLoad()
        
        /** 네비게이션 바 타이틀 */
        self.navigationItem.title = search
        
        let preferences = WKPreferences()
        preferences.javaScriptEnabled = true
        preferences.javaScriptCanOpenWindowsAutomatically = true
        
        let contentController = WKUserContentController()
        contentController.add(self, name: "bridge")
        
        let configuration = WKWebViewConfiguration()
        configuration.preferences = preferences
        configuration.userContentController = contentController
        
        webView = WKWebView(frame: self.view.bounds, configuration: configuration)
        
        var components = URLComponents(string: url)!
        components.queryItems = [ URLQueryItem(name: "query", value: search) ]
        
        let request = URLRequest(url: components.url!)
        
        webView.uiDelegate = self
        webView.navigationDelegate = self
        webViewGroup.addSubview(webView)
        setAutoLayout(from: webView, to: webViewGroup)
        webView.load(request)
        
        webView.alpha = 0
        UIView.animate(withDuration: 0.5, delay: 0, options: .curveEaseIn, animations: {
            self.webView.alpha = 1
        }) { _ in
            
        }
    }
    
    /** auto leyout 설정 */
    public func setAutoLayout(from: UIView, to: UIView) {
        
        from.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.init(item: from, attribute: .leading, relatedBy: .equal, toItem: to, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint.init(item: from, attribute: .trailing, relatedBy: .equal, toItem: to, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint.init(item: from, attribute: .top, relatedBy: .equal, toItem: to, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint.init(item: from, attribute: .bottom, relatedBy: .equal, toItem: to, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
        view.layoutIfNeeded()
    }

}

extension WebViewController: WKNavigationDelegate {
    
    public func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        
        print("\(navigationAction.request.url?.absoluteString ?? "")" )
        
        decisionHandler(.allow)
    }
}

extension WebViewController: WKUIDelegate {
    
    public func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        
    }
}

extension WebViewController: WKScriptMessageHandler {
    
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        
        print(message.name)
    }
}

아래 링크에서도 전체 코드를 확인할 수 있습니다.

https://github.com/hoojeong-dev/Toy-Project-iOS/tree/main/WebView

Toy-Project-iOS/WebView at main · hoojeong-dev/Toy-Project-iOS

Contribute to hoojeong-dev/Toy-Project-iOS development by creating an account on GitHub.

github.com

'💻 Programming > iOS' 카테고리의 다른 글

[iOS] Request Methods를 곁들인 Alamofire 간단 사용법 (0)	2025.02.27

Hoojeong.log

[iOS] WKWebView로 웹뷰(WebView) 구현하기

WebView

ViewController.swift

WebViewController.swift

'💻 Programming > iOS' 카테고리의 다른 글

티스토리툴바