[React] 웹뷰로 연결된 Android Stuiod / IOS 에 데이터 주고받기 ( 브릿지 통신 )

TLDR

웹뷰형태의 앱을 서비스하게 되니, React에서 앱으로 데이터를 주고받을 수 없을까? 하는 생각이 들었습니다. 저희 서비스에서는 웹뷰로 표시될 앱을 외주를 맡기고 앱동작이 아닌 거의 모든 UI와 상태들이 웹에서 관리되고 있었기 때문에, 데이터를 전달해서 기능과 UI를 다르게 서비스하는 기능이 필요했습니다.

이번 포스팅에서는 저희 서비스에서 웹과 앱간에 데이터를 주고받기 위해 사용한 두 가지 방식에 대해 소개해드리려고 합니다.

 

URL params

웹뷰로 연결된 앱에서는, URL 을 통해 앱에 웹을 표시합니다. URL 뒤에 약속된 params에 데이터를 남긴다면 데이터를 전달하거나 그에 맞춰서 UI를 변경할 수 있습니다.

저희 서비스에서 앱에서 사용자의 몇몇 액션에 따라 페이지에 팝업이 떠야 하는 경우가 있었습니다. 저장되어야 하거나 유지되는 데이터가 아닌 일회성으로 정보를 전달하는 팝업에 대해서 URL뒤에 약속된 params를 붙임으로써 팝업 표시 유무를 웹으로 전달할 수 있게끔 구현했습니다.

 

// React-Router-Dom 을 활용하여, params data를 가져왔습니다
import { useSearchParams } from 'react-router-dom';

function Page() {
  	const [searchParams, setSearchParams] = useSearchParams();

	useEffect(() => {
    	if (searchParams.get('popup') === popupData) {
        	//관련 팝업 UI 표시 로직
        }
    }, []}

	...
}

 

브릿지 통신

저희 웹뷰 서비스앱에서 처음으로 브릿지 통신을 해야겠다고 결심하게 된 기능은 앱의 Push 알림 기능이 시작이었습니다. 웹에서 로그인 및 회원가입이 진행되는 저희 앱에서 Push 알림 기능을 위해서는 앱에서도 해당 사용자가 로그인을 했는지? 어떤 사용자가 어떤 기기에서 로그인을 해서 Push 알림을 위한 FCM 토큰을 백엔드와 주고받는 과정이 필요했습니다.

하지만 웹에서 Authentication 이 이뤄지는 저희 앱 특성상, 앱에서는 해당사용자가 로그인을 하였는지? 어떤 사용자인지? 알 방법이 없었고, 브릿지 통신을 통해 전달 및 적용하기로 했습니다.

 

브릿지 객체명 맞추기

우선 웹뷰앱을 개발하는 앱 개발자( 저희의 경우 외주 개발자 분)와 브릿지 객체명을 맞춰야 합니다. 각각의 앱에서 사용되는 객체명과 웹에서 사용하는 객체명을 맞춰서 Javascript 에 접근할 수 있게 끔 합니다.

객체명을 맞추셨다면 각각의 기능에 맞게끔 함수를 작성하시고, 일반적인 함수를 사용할 때처럼 parmeter에 값을 넣는 방식을 통해 함수를 실행시키면, 약속한 데로 앱에서도 실행이 됩니다.

 

코드

...
try {
	//android
    if (window.객체명) {
      window.객체명.약속된함수(data);
    }
    
    //ios
    if (window.webkit.messageHandlers.객체명) {
      window.webkit.messageHandlers.객체명.약속된함수(data);
    }
 }
...

 

마무리

웹뷰형태의 앱과 웹 사이 통신을 주고받기 위해, 저희 서비스에서 사용한 2가지 방법에 대해 소개해 드렸습니다. 서비스가 만들어지다 보니 웹 쪽에 그 기능과 UI가 모여있지만 앱에서도 필요한 데이터를 전달하거나, 반대로 앱에서 웹의 UI를 바꾸거나 데이터를 수정하기 위해 위 두 가지 방법을 사용하게 되었습니다.

외주 측과 함께 브릿지를 개발하는 과정이 아티클에 작성된 것처럼 순탄하지 만은 않았습니다. ios와 통신하는 데이터는 JSON 타입과 함께 규약을 좀 더 정해야 동작했다거나? 객체명이 정확한지와 같은 부분에 확인도 있었고, 무엇보다 내가 작성한 코드가 제대로 작성되었는지 서로 상대 결과를 기다리거나 확인하기 복잡했기 때문에 소통에 시간이 더 많이 걸렸던 기능이었습니다.