SwiftUI WKWebView 완전 정리 (쿠키, 로그인 유지, JS 통신까지)

SwiftUI WKWebView 완전 정리 (쿠키, 로그인 유지, JS 통신까지)

SwiftUI에서 WebView를 붙이는 순간 난이도가 급격히 올라갑니다.

특히 아래 문제는 거의 반드시 겪게 됩니다.

• 쿠키가 안 붙음
• 로그인이 유지되지 않음
• 웹 ↔ 앱 통신이 안됨

이 글에서는 WKWebView를 SwiftUI에서 제대로 사용하는 방법을 실무 기준으로 정리합니다.

---

1. SwiftUI에서 WKWebView 사용하는 기본 구조

SwiftUI는 UIKit을 직접 사용할 수 없기 때문에 UIViewRepresentable을 사용해야 합니다.

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {

    let url: URL

    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }

    func updateUIView(_ webView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

👉 기본 구조는 간단하지만 실무에서는 이것만으로 부족합니다.

---

2. 쿠키가 안 붙는 이유

WKWebView는 앱의 쿠키 저장소와 분리되어 있습니다.

• URLSession → HTTPCookieStorage
• WKWebView → WKHTTPCookieStore

👉 서로 다른 공간을 사용합니다.

---

3. 쿠키 동기화 방법

func setCookie() {
    let cookie = HTTPCookie(properties: [
        .domain: ".example.com",
        .path: "/",
        .name: "token",
        .value: "1234",
        .secure: "TRUE"
    ])!

    let store = WKWebsiteDataStore.default().httpCookieStore
    store.setCookie(cookie)
}

👉 반드시 WebView 로드 전에 설정해야 합니다.

---

4. 로그인 유지 전략

실무에서는 다음 방식으로 처리합니다.

• 앱 로그인 → 토큰 저장
• WebView 진입 시 쿠키 주입
• 웹에서 세션 유지

👉 핵심은 WebView 생성 전에 쿠키 세팅

---

5. WKWebView 설정 (중요)

let config = WKWebViewConfiguration()
config.websiteDataStore = .default()
let webView = WKWebView(frame: .zero, configuration: config)

👉 데이터 저장소 설정이 중요합니다.

---

6. JavaScript ↔ Native 통신

JS → Native

config.userContentController.add(context.coordinator, name: "callback")

func userContentController(_ userContentController: WKUserContentController,
                           didReceive message: WKScriptMessage) {
    print(message.body)
}

Native → JS

webView.evaluateJavaScript("alert('Hello')")

👉 Web ↔ App 연동의 핵심

---

7. Coordinator 활용

class Coordinator: NSObject, WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController,
                               didReceive message: WKScriptMessage) {
        print(message.body)
    }
}

func makeCoordinator() -> Coordinator {
    Coordinator()
}

👉 delegate 처리를 위해 필요합니다.

---

8. WKUserScript (초기 스크립트 주입)

let script = WKUserScript(
    source: "document.body.style.background = 'red';",
    injectionTime: .atDocumentStart,
    forMainFrameOnly: true
)

옵션:

• .atDocumentStart
• .atDocumentEnd

👉 로그인, 쿠키, JS 초기화에 활용

---

9. 실무에서 자주 하는 실수

• 쿠키 설정 후 WebView 생성
• updateUIView에서 계속 load 호출
• JS handler 중복 등록

---

10. 실무 추천 구조

• WebView 생성 전에 쿠키 세팅
• Coordinator로 이벤트 처리
• Router와 연결해서 네비게이션 관리

---

11. 결론

SwiftUI에서 WebView의 핵심은 다음입니다.

• 쿠키는 별도 저장소
• 생성 전에 설정해야 함
• JS 브릿지로 연동

이 구조를 이해하면 대부분의 WebView 문제를 해결할 수 있습니다.

---

다음 글에서는 SwiftUI Navigation + WebView 연동 (딥링크, 푸시 포함)을 다루면 실무 구조가 완성됩니다.