하이브리드 앱에서 웹뷰와 앱이 소통하는 방법은 무엇인가요?

하이브리드 앱은 네이티브 앱 안에 웹뷰(WebView) 라는 내장 브라우저를 띄워 웹 페이지를 보여 줍니다. 카메라·푸시·결제 같은 네이티브 기능을 쓰려면 웹뷰(웹)와 네이티브(앱) 사이에 메시지 브리지(bridge) 가 필요합니다.

통신 방향과 방법

웹 → 네이티브

웹에서 네이티브 기능을 호출할 때 사용합니다.

• JavaScript 인터페이스 주입 — 네이티브가 웹뷰에 객체를 주입하면 웹에서 함수처럼 호출.
  • Android: addJavascriptInterface로 등록한 객체 호출.
  • iOS(WKWebView): window.webkit.messageHandlers.<name>.postMessage(data).
• React Native WebView 등에서는 window.ReactNativeWebView.postMessage(...).

네이티브 → 웹

네이티브가 결과·이벤트를 웹으로 전달할 때 사용합니다.

• 웹뷰에서 JS 코드 실행: Android evaluateJavascript(...), iOS evaluateJavaScript(...).
• 보통 웹이 전역 콜백 함수(window.onNativeMessage 등)나 이벤트 리스너를 등록해 두고, 네이티브가 그것을 호출.

// 웹 → 네이티브 (예: iOS WKWebView)
window.webkit?.messageHandlers?.share?.postMessage({ url: location.href });
 
// 네이티브 → 웹: 네이티브가 아래를 evaluateJavaScript로 실행
// window.onNativeMessage(JSON.stringify({ type: 'SHARE_DONE' }))
window.onNativeMessage = (raw) => {
  const msg = JSON.parse(raw);
  // 결과 처리
};

실무 고려사항

• 공통 메시지 규약 — { type, payload } 형태의 JSON과 직렬화 약속을 정해 양쪽이 공유.
• 플랫폼 분기 — Android/iOS 인터페이스가 다르므로 추상화 레이어로 감싸기.
• 비동기 응답 — 요청에 id를 부여해 응답을 매칭(콜백/프로미스 매핑).
• 보안 — 신뢰할 수 있는 출처만 허용, 임의 JS 실행·민감 기능 노출 주의.