WebKit 사용해보기

iOS에서 WebPage를 띄워줄 수 있는 방법은

크게 3가지가 있어요.

• WebKit을 사용하기

• open safari 사용하기

• SFSafariViewController 사용하기

출처 : http://developer.outbrain.com/ios-best-practices-for-opening-a-web-page-within-an-app/

이 중에서 오늘은 WebKit을 사용하는 방법에 대해 알아볼거에요.

WebKit이란?

WebKit은 safari 처럼 인터넷 창을 띄워줄 수 있는 WebView 기능을 제공해주는 라이브러리 입니다. iOS 13 이상버전 부터는 WebKit 사용을 권장하고 있다고 해요. SFSafari와의 큰 차이점은 커스텀이 가능하단 점이 아닐까 싶어요.

WebKit을 사용해서 어떤걸 만들 수 있을까?

저는 처음에 iOS 앱 개발을 시작했을때 커뮤니티 앱을 만들고 싶었어요. 그런데 너무 어려워서 중간에 하이브리드, 웹앱을 시도해봤었는데, 이미 구축된 사이트가 있다면, WebKit과 푸쉬 알람을 사용해서 웹앱을 만들 수 있을 것 같아요.

저는 최근에 설정 - 자주묻는 질문 뷰를 WebKit을 사용해서 Notion 페이지를 띄우주는 식으로 만들었었어요.

WebKit 사용방법

1. WKWebView 프레임워크 추가
2. 사용하려는 ViewController에 WebKit 작성
3. 필요에 따라 plist 수정

혹시 스토리보드 없이 개발하는 방법을 모르신다면 이 포스팅을 참고해주세용. 링크

1. WKWebView 프레임워크를 추가해줍니다.

이부분에서 + 버튼을 눌러줘서 추가해줍시다.

Webkit 클릭!

2. ViewConotroller를 작성해줍시다.

//  ViewController.swift

import UIKit
import WebKit

class ViewController: UIViewController {
    // MARK: - Property
    weak var webKitView: WKWebView?

    // MARK: - View Life Cycle
    override func loadView() {
        // rootView
        let view = UIView()
        self.view = view

        // WebKitView
        let webConfiguration = WKWebViewConfiguration()
        let webKitView: WKWebView = WKWebView(frame: .zero, configuration: webConfiguration)
        self.webKitView = webKitView
        webKitView.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(webKitView)

        // WebKitView 제약사항
        NSLayoutConstraint.activate([
            webKitView.widthAnchor.constraint(equalTo: self.view.widthAnchor),
            webKitView.heightAnchor.constraint(equalTo: self.view.heightAnchor),
            webKitView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            webKitView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ])
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        loadUrl()
        // 스와이프를 통해서 뒤로가기 앞으로가기를 할수 있게 해주는 설정값 입니다.
        self.webKitView?.allowsBackForwardNavigationGestures = true
    }

    // MARK: - Func
    func loadUrl() {
        if let url = URL(string: "https://www.apple.com") {
            let urlRequest = URLRequest(url: url)
            webKitView?.load(urlRequest)
        } else {
            // 에러처리문.. 예를들어서 alert를 띄워주거나..
            print("에러")
        }
    }
}

기본적인 View를 loadView 해주고, ViewDidLoad에서 loadUrl을 해주는 코드 입니다. url를 apple 사이트로 뒀기 때문에 잘 나오죠..?

그런데 여기서 url를 네이버로 변경해보면 이상한 일이 일어납니다..

...
if let url = URL(string: "https://www.naver.com") {
  ...
}
...

화면이 안나오죠..? ㅠㅠ 왜 그럴까요.. 네이버도 https인데.. 이부분은 제가 알게되면 추가로 작성해보도록 할게요. 혹시 아시는분은 댓글 달아주시면 감사하겠습니다.. 아무튼 구글같이 https면 상관이 없는데, http인 url로 load하고 싶으면 추가적으로 ATS(App Transport Security)를 작성해줘야 해요. iOS 9 이후부턴 모든 http는 막아놔서 http도 통신을 하고 싶으면 추가로 ATS를 작성해줘야 해요.(http url을 못찾아서 로드가 안되던 네이버 사이트를 예로 들어봤습니다..ㅠㅠ)

3. Plist 수정하기(ATS 작성)

Plist 파일에서 오른쪽을 클릭해서 Add Row를 클릭해줍니다.

App Transport Security Settings - Allow Arbitrary Loads - YES를 추가해줍니다.

Allow Arbitrary Loads 는 모든 url에 한에서 http, https 상관없이 Bool값을로 하겠다 라는 뜻이에요. YES 이면 http라도 통신을 하겠다는 얘기죠. 그런데 애플이 http를 막아놓은 이유가 보안적인 문제가 있기 때문일텐데, 이렇게 모두 통과해버리면 보안적으로 안좋겠죠..? 그래서 추가적으로 예외 url만 통신할 수 있도록 하는 ATS 설정값이 있는데, 이는 나중에 포스팅을 해보도록 할게요.

이렇게 ATS값을 추가해주면..

이렇게 잘 나옵니다..

그런데 이렇게 웹뷰만 띄우면 심심하죠..? 물론 스와이프를 통해서 앞으로가기 뒤로가기가 되지만, 사파리처럼 뒤로가기, 앞으로가기 버튼을 만들어 줄 수가 있어요. 이부분은 추후 포스팅을 해보도록 할게요.

예제 프로젝트

링크

참고

• 애플 개발자 문서 - WebKitView

• Zedd님 블로그..