WebView 사용하기 (1) - SFSafariViewController

앱에서 웹 페이지를 보여줘야 할 때 WebView를 사용하죠.

iOS에서 사용할 수 있는 방법이 크게 3가지 있는데요, 그 중 첫 번째로 SFSafariViewController를 사용하는 방법을 소개하겠습니다.

 

 

SFSafariViewController는 앱 내에서 웹 콘텐츠를 표시할 때 사용하는 기본 웹 브라우저 컨트롤러입니다. 사용자는 앱을 종료하지 않고도 웹 페이지를 볼 수 있으며, Safari의 자동 로그인, 콘텐츠 차단, 키체인, 공유 확장 기능 등의 기능을 활용할 수 있습니다.

 

 

📌 SFSafariViewController의 주요 특징

1. Safari의 기능 제공
   • Safari에서 제공하는 보안, 쿠키 공유, 자동 로그인, 키체인 등의 기능을 그대로 사용할 수 있음.
2. 앱 내 웹 브라우징 지원
   • 웹뷰를 별도로 구현할 필요 없이 앱 내에서 Safari 환경을 제공.
3. 앱 외부로 이동하지 않음
   • UIApplication.shared.open(URL)을 사용하면 사용자가 앱을 벗어나 Safari로 이동하지만,
     SFSafariViewController는 앱 내에서 웹 페이지를 띄워줌.
4. 사용자 경험 개선
   • Safari와 동일한 인터페이스를 제공하여 사용자에게 익숙한 환경을 제공.
5. 보안 강화
   • 앱이 웹 페이지의 내용을 직접 수정할 수 없고, 세션이 격리됨.

---

📌 Swift에서 SFSafariViewController 사용 방법

이하 편의상 'WebView를 띄운다 혹은 호출한다.'등으로 적겠습니다.

1️⃣ UIKit에서의 사용법

WebView를 띄우려는 뷰 컨트롤러에서 SFSafariViewController를 다음과 같이 열 수 있습니다.

import SafariServices

func openSafariViewController(urlString: String, from viewController: UIViewController) {
    guard let url = URL(string: urlString) else { return }
    
    let safariVC = SFSafariViewController(url: url)
    viewController.present(safariVC, animated: true, completion: nil)
}

이 함수는 특정 URL을 받아 SFSafariViewController를 띄우고, present()를 사용하여 표시합니다.

---

📌 SwiftUI에서 SFSafariViewController 사용 방법

SFSafariViewController는 내부적으로 UIViewController를 상속하여 만들어졌기 때문에 SwiftUI에서는 UIViewControllerRepresentable을 사용하여 SFSafariViewController를 래핑하여야 합니다.

2️⃣ SwiftUI에서 SFSafariViewController 연동하기

✅ SafariView 구현

import SwiftUI
import SafariServices

struct SafariView: UIViewControllerRepresentable {
    let url: URL
    
    func makeUIViewController(context: Context) -> SFSafariViewController {
        return SFSafariViewController(url: url)
    }

    func updateUIViewController(_ uiViewController: SFSafariViewController, context: Context) {
        // 업데이트 로직 없음
    }
}

UIViewControllerRepresentable을 사용하여 SFSafariViewController를 SwiftUI에서 사용할 수 있도록 변환.

✅ SwiftUI에서 사용하기

struct ContentView: View {
    @State private var showSafari = false
    private let url = URL(string: "https://apple.com")!

    var body: some View {
        VStack {
            Button("Open SafariView") {
                showSafari.toggle()
            }
        }
        .sheet(isPresented: $showSafari) {
            SafariView(url: url)
        }
    }
}

sheet()를 사용하여 SFSafariViewController를 띄우는 방식.

---

📌 추가 기능 및 커스텀

✅ SFSafariViewController에 옵션 추가하기

func makeUIViewController(context: Context) -> SFSafariViewController {
    let safariVC = SFSafariViewController(url: url)
    safariVC.preferredControlTintColor = .purple // 네비게이션 바 버튼 색상 변경
    return safariVC
}

preferredControlTintColor를 설정하면 Safari의 버튼 색상을 변경할 수 있음.

---

📌 Wrap up

SFSafariViewController는 

1. 사용 목적: 웹 페이지를 단순히 표시할 때 사용합니다.
2. 동작 방식: 앱 내에서 Safari와 동일한 인터페이스 환경을 제공합니다.
3. 사용자 데이터 관리: 쿠키, 세션을 유지합니다.
4. 확장성: 스크립트 실행이 불가합니다.
5. 보안성: Safari의 설정과 동일한 보안 수준을 제공합니다.

✅ SFSafariViewController는 이용 약관이나 단순 정보 등 간단한 웹 페이지를 사용자에게 제공할 때 사용할 것 같네요.

---

📌 정리

• SFSafariViewController는 앱 내에서 Safari 브라우징 경험을 제공하는 컨트롤러.
• SwiftUI에서는 UIViewControllerRepresentable을 활용하여 SafariView를 만들 수 있음.
• sheet()을 사용하여 SwiftUI에서 간편하게 웹 페이지를 열 수 있음.

References

📌  SFSafariViewController - Apple Developer