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

1. 연동 방식

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

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

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

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

인터넷 접속을 위해 AndroidManifest.xml에 권한과 하드웨어 가속 설정을 추가합니다.

<uses-permission android:name="android.permission.INTERNET" />

<application
    android:hardwareAccelerated="true"
    ...>

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

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

import android.annotation.SuppressLint
import android.webkit.WebView
import android.webkit.WebViewClient

@SuppressLint("SetJavaScriptEnabled")
fun setupWebView(webView: WebView) {
    val settings = webView.settings
    
    // 필수 설정
    settings.javaScriptEnabled = true // JS 브릿지 및 쇼룸 동작에 필수
    settings.domStorageEnabled = true // 로컬 스토리지 사용 허용
    settings.useWideViewPort = true
    settings.loadWithOverviewMode = true

    webView.webViewClient = object : WebViewClient() {
        // 필요에 따라 페이지 로딩 완료 체크, 외부 링크(intent://) 처리 등 구현
    }
}

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

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

// 고객사 도메인으로 구축된 쇼룸 웹페이지 URL 로드
val clientShowroomUrl = "[https://www.your-domain.com/showroom](https://www.your-domain.com/showroom)" // 구축된 실제 웹페이지 주소를 입력하세요.

webView.loadUrl(clientShowroomUrl)

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

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

5.1 브릿지 객체 생성

import android.content.Context
import android.webkit.JavascriptInterface

class SauceShowroomBridge(private val context: Context) {

    // 예시: 쇼룸 내 상품 클릭 시
    @JavascriptInterface
    fun sauceflexMoveProduct(payload: String) {
        // 전달받은 JSON(payload)을 파싱하여 네이티브 상품 상세 화면으로 이동 처리
    }

    // 예시: 쇼룸 내 라이브 방송 클릭 시
    @JavascriptInterface
    fun sauceflexMoveLive(payload: String) {
        // 전달받은 JSON(payload)을 파싱하여 네이티브 라이브 플레이어 화면으로 이동 처리
    }
    
    // 그 외 Payload 문서에 정의된 메서드들을 필요에 따라 추가 구현합니다.
}

// 웹(쇼룸)에서 'AndroidBridge'라는 인터페이스 명칭으로 호출할 수 있도록 연결합니다.
// webView.addJavascriptInterface(SauceShowroomBridge(context), "AndroidBridge")

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

5.2 WebView에 브릿지 연결

// Bridge 클래스 초기화 시 context와 webView 인스턴스를 함께 넘겨줍니다.
webView.addJavascriptInterface(SauceShowroomBridge(this, webView), "AndroidBridge")