똑닥 앱의 병원 상세 화면을 예로 하이브리드 앱에서 웹과 네이티브가 주고받는 통신 방식을 정리하고, OS별 UX와 크로스 브라우징 이슈, 딥링크와 콜백, Broadcast Channel API로 개선할 수 있는 지점을 짚어봅니다. ||
안녕하세요. 비브로스 웹프론트엔드팀 박서영입니다.
똑닥 앱은 네이티브 앱과 웹이 결합한 하이브리드앱으로 구성되어있습니다. 하이브리드 앱이란 빠른 실행 속도와 운영체제 및 디바이스 제어가 가능한 네이티브 앱의 장점, 강제 업데이트와 스토어 심사 없이 최신화면을 제공하는 웹의 장점을 합친 어플리케이션을 의미합니다.
현재 병원 상세와 이벤트/투표, 공지사항과 주소 찾기 등 똑닥 앱 내 다양한 화면이 웹뷰로 제공되고 있습니다. 이 중 병원 상세 화면을
통해 웹과 앱은 어떻게 통신하는지, 웹뷰 개발 시 고려해야 할 부분은 어떤 것들이 있는지, 그리고 기존 구현 방식에서 어떤 부분을 개선할
수 있는지 간략하게 살펴보겠습니다.
웹뷰와 앱은 어떻게 통신하는가?
웹 → 안드로이드
웹은 보안 등의 이유로 디바이스의 자원(주소록, 사진 등)이나 하드웨어(카메라, 마이크 등)에 자유롭게 접근할 수 없습니다. 그래서
네이티브 코드를 통해 해당 자원에 접근해야 하는데 앱의 네이티브 코드와 웹의 자바스크립트 코드 간의 인터페이스를 지원하는 것이 바로 JavaScript Interface 입니다.
public class WebViewInterface {
@JavascriptInterface
public void showSnackBar(String message) {
...
}
}
webView.addJavascriptInterface(new WebAppInterface(), "ddInterface")
앱에서는 웹뷰와 통신할 클래스를 만들고 웹뷰에서 호출할 메서드들을 정의합니다. 이 때, Javascript Interface 어노테이션 붙은 메서드만 자바스크립트의 접근이 허용됩니다. 그리고 addJavascriptInterface 메서드를 사용하여 클래스를 웹뷰에 등록하고 웹뷰에서 호출할 전역 변수명을 전달합니다.
const ToastButton = () => {
function onClickCreateButton () {
window.ddInterface.showSnackBar('등록이 완료되었습니다.');
}
return (
<button onClick={onClickCreateButton}>사용자 등록</button>
);
}
웹의 자바스크립트 코드는 window 객체의 ddInterface 프로퍼티를 통해 앱 메서드를 호출할 수 있습니다. window 객체 란 웹 브라우저 창을 나타내는 객체입니다. 브라우저 안의 요소들이 모두 포함되어있는 최상위 객체이기 때문에 어디서나 window.ddInterface에 접근하여 앱 메서드를 호출할 수 있게 됩니다.
웹 → iOS
override func viewDidLoad() {
let config = WKWebViewConfiguration()
let userContentController = WKUserContentController()
userContentController.add(self, name: "ddInterface")
config.userContentController = userContentController
...
}
extension WebViewController: WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
guard message.name == 'domainUrl',
let command = message.body.command else { return }
switch command {
case .showToast:
r
병원 상세 웹뷰 통신 및 크로스 브라우징
생성 일시
2026/09/16 08:07
최종 편집 일시
2026/09/16 08:07
태그
비브로스
파일과 미디어