[iOS] WKWebView

 

오늘은 iOS 앱 내에서 웹화면을 나타낼 수 있게 도와주는 WKWebView에 대해 알아보겠습니다.

 

WKWebView란?

출처 - 애플 공식문서

WKWebView란 앱 브라우저 같은 즉 사파리, 크롬과 같이 상호작용하는 웹의 컨텐츠들을 보여주는 하나의 객체입니다. UIView를 슈퍼클래스로 삼습니다.

출처 - 애플 공식문서

기존에 UIWebView 클래스로 웹화면을 나타냈었는데 iOS8 이후, macOS 10.10 이후 WKWebView로 대체되었다고 합니다. 정말 쉽게 말한다면 웹화면을 가져와 띄워주는 역할을 해주는 클래스라고 보면 되겠습니다.

 

사용법

일반 뷰컨트롤러를 생성하시고 WebKit View를 화면에 올려줍니다.(Web View는 이전에 삭제되어 사용을 못하는 기능입니다.)

 

그 다음 주소를 입력해줄 공간 Search Bar를 위에 뒤로가기, 새로고침 등의 기능을 넣어 줄 Toolbar을 아래에 넣어줍니다.

 

이 때 툴바(Toolbar)는 네비게이션바 처럼 bar이기 때문에 Barbutton item을 넣어주어야 합니다. 다만, 네비게이션 바와는 달리 툴바의 경우 아이템을 왼쪽부터 순서대로 넣을 수 밖에 없습니다.

 

하지만 분명 아이템간의 너비를 주고 싶을 경우도 분명 존재합니다. 이럴 경우엔 Flexible space bar button item을 넣어주면 됩니다.

Flexible Space Bar Button Item 적용한 툴바의 모습

그러면 버튼간의 최대 간격을 줄 수 있습니다. 위의 Fixed Space Bar Button Item의 경우 버튼 간의 최소한의 간격 즉 한 칸 너비로 간격을 주는 기능을 가지고 있습니다.

 

그리고 아래 그림과 같이 레이아웃과 각각의 아이템들에게 변수를 지정해주었습니다.

여기서 주의할 점은 WKWebView를 사용하기 위해선 반드시 WebKit을 import 해줘야 한다는 점 입니다. UI가 붙은 아이템들은 UIKit을 써줘야하는 것처럼 앞에 WK가 붙은 아이템들을 사용하기 위해선 WebKit을 반드시 써주셔야 합니다.

 

다음은 구조체 URL을 사용해 웹페이지를 띄워보겠습니다. 먼저 최종 코드는 이와 같습니다.

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var cancelButton: UIBarButtonItem!
    @IBOutlet weak var goBackButton: UIBarButtonItem!
    @IBOutlet weak var reloadButton: UIBarButtonItem!
    @IBOutlet weak var goForwardButton: UIBarButtonItem!
    
    @IBOutlet weak var searchBar: UISearchBar!
    
    @IBOutlet weak var webPage: WKWebView!
    
    var startingURL = "https://www.daum.net"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        openWebPage(url: startingURL)
        searchBar.delegate = self
    }
    
    func openWebPage(url: String) {
    	
        // URL을 string 형태 받아와 URL 인스턴스 생성
        guard let url = URL(string: url) else {
            print("Invalid URL")
            return
        }
        
        // URL을 요청
        let request = URLRequest(url: url)
        // 요청한 URL을 보여줌
        webPage.load(request)
    }
    @IBAction func cancelButtonClicked(_ sender: Any) {
        
    }
    @IBAction func goBackButtonClicked(_ sender: Any) {
        webPage.goBack()
    }
    @IBAction func reloadButtonClicked(_ sender: Any) {
        webPage.reload()
    }
    @IBAction func goForwardButtonClicked(_ sender: Any) {
        webPage.goForward()
    }
}

extension ViewController: UISearchBarDelegate {
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        openWebPage(url: searchBar.text!)
    }
}

1.  URL구조체에서 문자열을 받아와 URL로 인스턴스화 시켜줍니다.
2.  URL로 인스턴스화시킨 url 변수를 URLRequest 구조체에서 요청합닌다.
3.  load로 띄워줍니다.

이와 같은 로직을 통해 웹페이지가 띄워집니다. 

로드된 웹페이지

추가적으로 extension 구문을 통해 UISearchBarDelegate를 ViewController가 상속받아 UISearchBarDelegate의 기능을 사용할 수 있도록 해주었습니다. 이를 델리게이트 패턴이라고 하는데 UISearchBarDelegate가 가지고 있는 메소드나 프로퍼티들을 가져와서 우리가 만든 SearchBar에 적용시켜준다 라고 이해하면 되겠습니다.(추후 델리게이트 패턴에 대해 제대로 다뤄보겠습니다...)

 

그리고 델리게이트 상속받은 것을 적용시키려면

searchBar.delegate = self

이 구문을 반드시 적용시켜주어야 합니다. "searchBar의 델리게이트를 자신에게 적용하겠다"라고 일단 이해하시면 되겠습니다. 

 

추가적으로 goBack(), goForward(), reload() 메소드들을 사용해 웹페이지가 움직일 수 있도록 해주었습니다.

 

---

참고

https://developer.apple.com/documentation/webkit/wkwebview

Apple Developer Documentation