한줄요약
모바일 앱 내 웹뷰, 그리고 웹뷰 내 아이프레임 간 메시지 포스트 로직 개선 경험 공유
프로젝트 구조
Pixels Guide Assistant(줄여서 "PGA")는 Pixels라는 해외 온라인 게임의 데이터를 제공하는 웹브라우저 익스텐션 및 모바일 앱 형태의 사내 프로젝트이다. 모바일 앱은 현 시점, 구글 플레이 스토어에만 출시가 된 상태이며, 총 사용자 수는 10만 명을 찍었다.
나는 익스텐션 개발을 고도화 단계까지 참여하고 최근에는 모바일 앱 개발을 리드하고 있다. 앱은 React Native로 개발되었으며, 내부에는 두 개의 웹뷰가 띄워져 있다 (회사 프로젝트라서 구체적으로 어떤 웹뷰인지는 함구..🫢). 그 웹뷰 중 하나는 내부에 또 iframe을 포함한다. 요약하면 다음 그림과 같다:
요구 사항
모바일 앱에 애드몹 광고를 적용해달라는 요구 사항을 받았다.
까다로웠던 점은 (예상했겠지만) 사용자가 iframe의 "광고 보기"라는 UI를 누르면 웹뷰로 이 이벤트를 전달하고, 웹뷰에서 다시 모바일앱으로 전달, 그리고 광고를 띄운 후에는 다시 반대로 iframe까지 이벤트를 응답해줘야 했다.
iframe 웹사이트는 다른 동료 개발자분이 작업하고 계셔서 협업을 통해 응답 json값 인터페이스 등 스펙을 맞춰야 했다.
그리고 아래와 같은 형식으로 표준화하기로 하였다.
window.ReactNativeWebView.postMessage(
JSON.stringify({
requestId,
direction,
protocol
func
args
})
);
코드 개선
우선 위 postMessage이 여러 번 반복되어
responseFunc라는 함수로 추출하여 추상화 하였다. 중복이 3번 이상이면 공통 로직으로 빼내는데, 충분히 충족되었기 때문이다.postMessage 인자 객체 중 direction이 있는데, 이는 위 도식에서 방향을 의미한다. 예를들어 "app-to-webview"와 비슷한 형식의 문자열이다. 우리는 이러한 매직스트링을 상수로 관리하기로 하였다:
const DIRECTION = {
APP_TO_WEBVIEW: 'app-to-webview',
...
...
};
성과
약 이틀만에 성공적으로 애드몹을 적용하고 배포까지 완료하였다.
물론 중간에 뜻대로 되지 않던 상황들도 있었다. 예를들어 테스트용 광고 아이디로는 광고 송출이 정상적이었지만, 실제 광고 아이디는 광고가 뜨지 않았던 것이다. 대쉬보드에 들어가서 직접 확인해보니 회사 서류가 아직 제출되지 않았던 모양이다. 담당자에게 이 사실을 알리고, 다행스럽게 바로 다음날 이슈가 해결되었다.
아쉬웠던 점
현재 중간 웹뷰는 단지 proxy로서, iframe과 모바일 앱 사이에서 다리 역할을 할 뿐이다. 중간 매개체없이 곧바로 이 둘 사이를 연결해볼 수는 없었을까? 제품의 아키텍쳐에 대한 이해도를 더 파악하고, 보다 쉬운 기술로 이 문제를 해결할 수 있도록 고민이 필요해보인다.
앞으로
react-native-webview 라이브러리의 도움을 많이 받아서 비교적 빠르게 기능을 구현할 수 있었다. 웹뷰의 내부 구현 로직을 더 탐구해보고 가능하면 코드 기여도 시도해 볼 예정이다.
Top comments (0)