안드로이드 브릿지 인터페이스 JavaScriptInterface 완벽 가이드 – 앱과 웹 간 통신 방법 총정리

02 September 2025 - 2 mins read time
Tags: Android

✨ 개요

앱에서 WebView를 사용할 때, 웹 페이지와 앱(Java/Kotlin 코드) 간의 데이터를 주고받아야 하는 상황이 자주 발생합니다. 이때 사용하는 것이 바로 Android의 @JavascriptInterface 브릿지 인터페이스입니다.

이번 포스팅에서는 JavaScriptInterface의 개념부터 활용 예시, 보안 팁, 주의사항까지 모두 정리해 드립니다.

1. JavaScriptInterface란?

• Android의 WebView에서 웹(JavaScript) → 앱(Java/Kotlin 코드)으로 호출할 수 있게 해주는 인터페이스
• @JavascriptInterface 어노테이션이 붙은 메서드만 호출 가능
• 앱과 웹 간 양방향 브릿지를 구성할 때 필수 기능

2. 기본 사용 흐름

• WebView에 JavaScript 사용 설정
• 앱에서 addJavascriptInterface()로 객체 등록
• 객체 내 @JavascriptInterface 메서드를 JS에서 호출

3. 사용 예제

코틀린 코드

class WebAppBridge(val context: Context) {

    @JavascriptInterface
    fun showToast(message: String) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
    }
}

val webView: WebView = findViewById(R.id.webView)
webView.settings.javaScriptEnabled = true
webView.addJavascriptInterface(WebAppBridge(this), "AndroidBridge")
webView.loadUrl("file:///android_asset/sample.html")

HTML/JavaScript (웹)

<button onclick="AndroidBridge.showToast('Hello from Web!')">Click Me</button>

• assets/test_html 파일 생성 후 webview에서 해당 경로 로드해서 테스트 가능

4. 양방향 통신 예시

• 앱 → 웹 호출 (JavaScript 실행)

  webView.evaluateJavascript("javascript:showMessage('Hi from Android')", null)
  

• 웹 → 앱 호출 (위와 동일하게 @JavascriptInterface 메서드)

5. 보안 이슈 및 주의사항

• 보안 팁
  • 신뢰할 수 있는 웹만 로드
  • WebViewClient.shouldOverrideUrlLoading() 활용하여 URL 필터링
  • 가능하면 https + CSP(Content Security Policy) 적용
  • Android 4.2 이상에서만 사용 권장

6. 자주 발생하는 문제와 해결법

7. 결론

Related Posts