안드로이드 Java 앱<->웹간 통신 (WebView Bridge, JavaScript Bridge)

안드로이드 WebView Bridge란?

안드로이드 WebView Bridge는 네이티브 앱(Java) 과 웹 페이지(JavaScript) 가 서로 데이터를 주고받거나 기능을 호출할 수 있도록 연결해 주는 구조입니다.

 

웹으로 화면을 구성하되,

카메라 실행, 토큰 조회, 파일 접근처럼 단말 기능이 필요할 때 네이티브와 통신하기 위해 사용합니다.

 

안드로이드에서는 WebView 와 addJavascriptInterface() 방식이 가장 기본적인 구현 방법입니다.

 

---

 

WebView Bridge의 기본 구조

안드로이드 WebView Bridge 역시 양방향 통신을 지원합니다.

 

• Native(Java) → Web(JavaScript)
• Web(JavaScript) → Native(Java)

 

각 방향별로 하나씩 살펴보겠습니다.

 

---

1. Native(Java) → Web(JavaScript)

네이티브에서 웹의 JavaScript 함수를 실행할 때는

evaluateJavascript() 또는 loadUrl("javascript:...") 를 사용합니다.

 

 

사용 메서드

webView.evaluateJavascript(String script, ValueCallback<String> resultCallback);

 

---

 

예시 코드

웹 페이지에 아래와 같은 JS 함수가 있다고 가정합니다.

function changeColor(color) {
    document.body.style.backgroundColor = color;
    return "OK";
}

 

Java 코드에서 이 함수를 호출하면 다음과 같습니다.

String jsCode = "changeColor('red')";

webView.evaluateJavascript(jsCode, value -> {
    // value: JS 함수의 반환값 (문자열 형태)
    Log.d("WebViewBridge", "JS 실행 결과: " + value);
});

이 방식은 비동기로 동작하며, 실행 결과를 콜백으로 받을 수 있습니다.

 

---

 

2. Web(JavaScript) → Native(Java)

웹에서 네이티브 기능을 호출할 때는

addJavascriptInterface() 를 사용합니다.

 

---

2-1. 인터페이스 클래스 생성 (Java)

먼저, JS에서 호출할 메서드를 가진 클래스를 하나 만듭니다.

public class WebAppBridge {

    private final Context context;

    public WebAppBridge(Context context) {
        this.context = context;
    }

    @JavascriptInterface
    public void openCamera(String type) {
        Log.d("WebViewBridge", "카메라 실행 요청: " + type);
        // 카메라 실행 로직
    }
}

중요한 포인트는

JS에서 호출할 메서드에는 반드시 @JavascriptInterface 어노테이션을 붙여야 한다는 점입니다.

 

---

 

2-2. WebView에 브리지 등록

WebView webView = findViewById(R.id.webView);

webView.getSettings().setJavaScriptEnabled(true);

// "appBridge" 라는 이름으로 JS 인터페이스 등록
webView.addJavascriptInterface(
        new WebAppBridge(this),
        "appBridge"
);

webView.loadUrl("https://your-web-server.com");

 

---

 

2-3. JavaScript에서 호출

웹에서는 아래와 같이 네이티브 기능을 호출합니다.

function callNativeCamera() {
    if (window.appBridge) {
        window.appBridge.openCamera("front");
    } else {
        console.log("안드로이드 네이티브 환경이 아닙니다.");
    }
}

JS에서 사용하는 이름(appBridge)은

Java 코드에서 등록한 이름과 반드시 동일해야 합니다.

 

---

3. Web → Native 데이터 전달 방식

JS에서 네이티브로 전달할 수 있는 값은 보통 다음 형태입니다.

 

• 문자열
• 숫자
• JSON 문자열

 

예를 들어:

var data = {
    action: "camera",
    type: "front"
};

window.appBridge.openCamera(JSON.stringify(data));

 

Java 쪽에서는 JSON 파싱해서 사용하면 됩니다.

 

---

 

5. 보안 및 주의사항

 

안드로이드 WebView Bridge에서 반드시 알고 있어야 할 점입니다.

 

1. addJavascriptInterface() 는 신뢰된 웹 페이지만 로드해야 합니다.
2. 외부 URL이나 임의 HTML을 로드하는 경우 보안 이슈가 발생할 수 있습니다.
3. 가능하면 내부 도메인, 내부 서버와만 브리지를 사용하도록 제한합니다.
4. Android 4.2(API 17) 이상에서만 안전하게 사용 가능합니다.