[iOS/Swift] 웹뷰 WKWebView 로드하기 & 사파리 Safari 에서 웹뷰 디버깅하기

 

안녕하세요!

xcode 에서 swift 로 단순 웹뷰 로드하는 방법과 Safari 에서 웹뷰를 디버깅하는 방법 입니다~

 

 

🚨 iOS 웹뷰 WKWebView 로드하기

 

1. project.pbxproj

Webkit 사용을 위해 WebKit Framework 라이브러리를 추가해야 합니다.

Target > Build Phases > Link Binary With Libraries > + 버튼 을 눌러 WebKit.framework 를 추가합니다.

(이걸 추가하면 MyAppSwift.xcodeproj > project.pbxproj 파일이 수정이 됩니다.)

 

 

2. Webview.storyboard

스토리보드 라이브러리 (⌘ + ⇧ + L) 를 통해 스토리보드에 WebKit View 를 추가해줍니다.

 

그리고 webview.storyboard 는 WebViewController 와 연결해줘야 하기 때문에

identity Inspector 의 Class 에 WebViewController 로 연결해 줍니다.

 

 

3. WebViewController.swift

loadView 메소드에서 WKWebViewConfiguration 을 통한 Config 설정을 통해

WebView 의 기능과 동작을 네이티브 단에서  통제할 수 있게 해주도록 합니다.

 

loadUrl 메소드를 만들어서 webView.load() 를 통해 웹 페이지 URL 을 웹뷰로 로드하도록 합니다.

import UIKit
import WebKit

class WebViewController: UIViewController {
    
    var webView = WKWebView()
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        view = webView
        
        // ios 16.4 에서 DEBUG 모드인 경우에만
        // webview inspector 가능하도록 설정
        if #available(iOS 16.4, *) {
            #if DEBUG
            webView.isInspectable = true  // webview inspector 가능하도록 설정
            #endif
        }
        
    }
    
    
    override func viewDidLoad() {
        print("WebViewController >> viewDidLoad ")
        loadUrl("https://eunoia3jy.tistory.com/")
    }
    
    
    func loadUrl(_ url: String) {
        let myURL = URL(string: url)
         let myRequest = URLRequest(url: myURL!)
         webView.load(myRequest) // 웹뷰 load
    }
    
}

 

 

결과 화면

 

 

 

🚨 Safari 에서 웹뷰 디버깅 하기 (WebView Inspector)

웹뷰 앱을 만들었다면 이 웹뷰를 사파리 Safari 에서 디버깅하는 방법도 알아두면 유용할 거예요 😉

 

 

1️⃣ 웹뷰 소스 내 WebView Inspector 가 가능하도록 설정하는 코드를 추가해줍니다.

// ios 16.4 에서 DEBUG 모드인 경우에만
// webview inspector 가능하도록 설정
if #available(iOS 16.4, *) {
    #if DEBUG
    webView.isInspectable = true  // webview inspector 가능하도록 설정
    #endif
}

 

 

2️⃣ 사파리 Safari 메뉴 막대에서 개발자용 메뉴를 추가해야 합니다.

Safari > 설정 > 고급 > 메뉴 막대에서 개발자용 메뉴 보기 체크

 

 

3️⃣ 휴대폰을 PC 와 연결하고 웹뷰가 띄워져있는 앱을 실행하면

개발자용 > ~의 iPhone > 에서 앱의 웹뷰 url 이 표시됩니다. 웹뷰 url 클릭하면 

개발자도구 화면을 확인할 수 있습니다 👍🏻

 

 

 

감사합니당 :)