하이브리드 앱과 웹뷰(WebView)

foresec·2024년 4월 12일

Project

목록 보기

1/11

고객이 가장 많이 사용하며 상대적으로 안정성을 요구하는 기능들은 Native로 개발하고, 보다 빠른 변화를 요구하며 확장성을 고려하는 기능들은 Hybrid로 개발한다

그리고 Hybrid가 React를 사용한다는 문구를 보고 하이브리드 앱과 웹뷰에 대해서 알아보기로 했다
Android 네이티브 개발 경험/React 개발경험 둘다 있다보니.. 이참에 정확히 어떤 건지 알아보려고 하는 중에 괜찮은 영상을 찾았다
Unity를 sdk로 Android에 얹는 프로젝트는 해봤지만 React를 왜 얹어야할까 했는데 확장성에서는 확실히 웹뷰로 관리하는게 유리해보인다.

https://youtu.be/hsh8BS7gyrY?si=vXnqRf3BQoYcBuSW
리액트 네이티브 + nextjs 영상이지만...

웹뷰

웹앱이 웹 컨텐츠를 표시하는데 사용할 수 있는 내장형 브라우저

웹뷰 내에서 실행되는 JS는 기본 시스템 api를 호출할 수 있다
이 통신방법을 브릿지라고 함

브릿지

네이티브와 웹뷰 통신을 위해 제공되는 js 인터페이스
웹뷰가 직접 네이티브 api호출을 할 수 없으므로 브릿지를 통해 호출
즉, 브릿지는 웹뷰 인터페이스의 구현체

웹뷰의 장점

웹/앱을 한번에 개발하며 개발속도 향상, 일관된 경험을 제공
웹뷰로 바로 수정한다면, 앱스토어 심사 횟수를 줄일수 있음

웹뷰의 기술적 장점

런타임 시 발생하는 웹 코드를 격리하며 개발자가 로드되는 컨텐츠를 추가적으로 제어 가능함
- 런타임에러로 인해 서버가 꺼져도 앱이 종료가 안됨 -> 독립적임(오?)
웹에 종속적이나 앱에 종속적이지 않음-> 웹뷰의 보안/부수적 기능에 대해 재정의가 가능함
웹과 앱의 통신 방법을 다양하게 적용 가능 -> 특정 플랫폼에 종속되지 않고 통신이 가능함

(...벌써부터 토큰관리를 어느 딴에서 관리하는게 맞을지 궁금해졌다)

또한, 웹뷰가 네이티브 시스템과 소통하며 네이티브의 센서, 카메라, 알림기능을 사용할 수 있다 -> 확장성이 좋음

앱 구현과 기본적인 설계?

모바일 웹과 앱에서의 컴포넌트를 어떻게 구분해서 제어할까?
-> 앱(웹뷰) 여부를 판단해서 조건문으로 컴포넌트를 렌더링
페이지 라우팅은 어떻게 제어할까?
-> router이벤트를 발생시키지 않고, postMessage(ReactNative)로 웹뷰에 보내자
로그인 여부에 따라 다른 화면을 보여줄 수 있을까?
-> 쿠키, 로컬 스토리지에 저장된 유저 정보를 전송하고, 네비게이션을 중첩해보자
유저 정보를 어떻게 저장해둘까?
-> 리액트 네이티브 저장소 라이브러리를 적용해보자

그럼 앱/웹뷰/모바일웹 여부 판단은 어떻게?

윈도우 객체정보로 판단하기 : window.navigator.userAgent를 사용한다/웹뷰 객체의 inject(ReactNative)
스크린 넓이로 판단하기

라우트 이벤트 제어는?

웹뷰에게 메시지를 전달하기 위한 함수 작성(브릿지 이용)

웹뷰 여부 체크는?

웹뷰 여부를 판단해서 별도 핸들링 : 웹뷰면 메시지를 보내고/아니라면 router.push

그럼, 로그인 정보 저장은

중첩 네비게이션 : 다른 네비게이션에 중첩 렌더링, 상위 네비게이터에서 하위 네비게이터로 디스패치 가능
정보 저장 : react-native-async-storage (React Native)사용, 키-값 저장소로 비동기 동작
(키-값 저장소라고 하니 이거 android sharedpreference일까?)