고객사 iOS 애플리케이션의 네이티브 WKWebView를 활용하여 Sauce Showroom(쇼룸) 을 연동하는 방법을 안내합니다.

1. 연동 방식

쇼룸은 커스텀 도메인 웹페이지 연동 방식으로만 구현할 수 있습니다.

라이브나 숏폼 플레이어와 달리, 쇼룸은 자체적으로 완성된 단일 URL을 제공하지 않으므로 고객사 환경에 맞도록 자사 도메인의 웹페이지에 Sauce Showroom JS 라이브러리를 설치해 쇼룸 화면을 직접 구축한 후, 해당 웹페이지의 URL을 네이티브 WKWebView에서 로드하는 방식으로 구현해야 합니다.

👉 쇼룸 웹페이지 구축하기: 🔗 Sauce Showroom 라이브러리 안내 문서

2. 사전 준비 (Prerequisites) - 공통

원활한 쇼룸 표시를 위해 아래 사항을 확인합니다.

2.1 HTTPS 환경 사용 권장

WKWebView는 App Transport Security(ATS) 정책의 영향을 받으므로, 쇼룸 페이지는 HTTPS 환경 사용을 권장합니다.

3. WebView 필수 설정 (Settings) - 공통

쇼룸 내 리스트 스크롤과 자바스크립트 브릿지가 정상적으로 동작하기 위해서는 아래의 최소 필수 웹 설정이 선행되어야 합니다.

import UIKit
import WebKit

final class ShowroomWebViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {

    private lazy var webView: WKWebView = {
        let userContentController = WKUserContentController()
        let configuration = WKWebViewConfiguration()
        configuration.userContentController = userContentController

        let webView = WKWebView(frame: .zero, configuration: configuration)
        webView.navigationDelegate = self
        webView.uiDelegate = self
        webView.scrollView.contentInsetAdjustmentBehavior = .never
        return webView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(webView)
        webView.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            webView.topAnchor.constraint(equalTo: view.topAnchor),
            webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            webView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }
}

4. 커스텀 웹페이지 로드 구현

고객사 웹 개발팀에서 쇼룸 라이브러리를 연동하여 구축을 완료한 웹페이지 URL을 앱의 WebView에 로드합니다.

let clientShowroomUrl = URL(string: "https://www.your-domain.com/showroom")!
webView.load(URLRequest(url: clientShowroomUrl))

5. JavaScript 브릿지 연동 (Bridge Integration)

쇼룸 내부에서 발생하는 액션(특정 라이브 방송 클릭, 상품 클릭 등)을 네이티브 앱에서 처리하기 위해 WKScriptMessageHandler를 등록합니다.

5.1 브릿지 객체 생성

import UIKit
import WebKit

final class SauceShowroomBridge: NSObject, WKScriptMessageHandler {
    weak var viewController: UIViewController?

    init(viewController: UIViewController) {
        self.viewController = viewController
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        switch message.name {
        case "sauceflexMoveProduct":
            if let payload = message.body as? String {
                // 전달받은 JSON(payload)을 파싱하여
                // 네이티브 상품 상세 화면으로 이동 처리
            }

        case "sauceflexMoveLive":
            if let payload = message.body as? String {
                // 전달받은 JSON(payload)을 파싱하여
                // 네이티브 라이브 플레이어 화면으로 이동 처리
            }

        default:
            break
        }
    }
}

👉 쇼룸 전체 Payload 규격 및 메서드 확인하기: 🔗 Sauce Showroom Payload 스펙 가이드 문서

5.2 WebView에 브릿지 연결

private var bridge: SauceShowroomBridge!

override func viewDidLoad() {
    super.viewDidLoad()

    bridge = SauceShowroomBridge(viewController: self)

    let controller = webView.configuration.userContentController
    controller.add(bridge, name: "sauceflexMoveProduct")
    controller.add(bridge, name: "sauceflexMoveLive")
}