[iOS] SwiftUI에서 웹뷰를 띄우는 방법

Sehee·2024년 6월 30일

iOS swiftui webview

iOS 개발하기

목록 보기

7/16

시작하며,

토이 프로젝트 두개 다 웹과 관련된 것들이라 웹뷰를 띄우고자 한다
SwiftUI에서 WebView를 띄우는 방법을 알아보자

웹으로 연결하는 방법

iOS 앱에서 웹사이트로 연결하는 방법은 여러 가지가 있다

사파리 앱으로 연결하기
WKWebView로 보여주기
SFSafariViewController로 보여주기

사파리 앱으로 연결하기

App 자체에서 보여주는 게 아닌, 사파리 앱으로 이동시켜서 Web을 보여주는 방식이다
앱과 웹 사이에서 별도의 상호작용이 필요없고, 단지 웹사이트를 보여주기만 하면 되는 경우 적합하다

여러 개의 링크를 계속 열었다 닫았다 하는 경우(탐색하는 경우)에는 해당 앱과 사파리 앱을 계속 왔다갔다 해야한다는 불편함이 있다

Link(destination: URL(string: "url 입력" )!) {
    Text("링크 클릭")
}

WKWebView로 보여주기

App 내부에서 WKWebView로 Web을 보여주는 방식이다
사파리 앱으로 연결하는 것보다 조금더 자유롭다 (커스텀 및 상호작용 가능)
그러나 사파리가 기본적으로 제공하는 기능은 사용할 수 없다
(뒤로 가기, 앞으로 가기, 검색 등)

커스텀뷰

import SwiftUI
import WebKit

struct CustomWKWebView: UIViewRepresentable {
    var url: String
    
    func makeUIView(context: Context) -> WKWebView {
        guard let url = URL(string: url) else {
            return WKWebView()
        }
        let webView = WKWebView()

        webView.load(URLRequest(url: url))
        
        return webView
    }
    
    func updateUIView(_ webView: WKWebView, context: UIViewRepresentableContext<CustomWKWebView>) {
        guard let url = URL(string: url) else { return }
        
        webView.load(URLRequest(url: url))
    }
}

사용

NavigationLink(destination: CustomWKWebView(url: "url 입력")) {
    Text("링크 클릭")
}

애플 공식 문서
WebKit
WKWebView

SFSafariViewController로 보여주기

App 내부에서 SFSafariViewController로 Web을 보여주는 방식이다
사파리 인터페이스를 제공하고, 자동 완성 및 쿠키를 사용할 수 있다
별도의 상호작용은 불가하고, SFSafariViewController로부터 발생한 이벤트만 수신 가능하다

App 내부에서 사용자에게 안전하게 사파리 기능 제공 및 사파리와 쿠키 공유를 허용할 경우 적합하다고 한다

애플 공식 문서
Safari Services
SFSafariViewController

내가 선택한 방법

진행중인 토이 프로젝트 하나는 딱히 앱과 웹이 상호작용할 일도 없고, 단지 웹사이트만 연결할 수 있으면 된다
그러나 아래 구조처럼 여러 번 웹뷰를 띄웠다가 닫았다가 해야하는 상황이라, 외부 사파리 앱으로 연결되는 경우 계속 앱을 이동해야한다는 불편함을 초래할 수 있었다