목차
1. 웹뷰 이해하기
2. 네이티브 <-> 웹뷰 인터렉션
3. 웹뷰 장단점
1. 웹뷰 이해하기
1.1. 웹뷰란?
웹뷰는 모바일 앱 내에서 웹 콘텐츠를 렌더링할 수 있는 임베디드 브라우저로, 부분적인 UI를 그리는 데에 사용할 수 있는 기술이다. 각 웹뷰는 독립적인 실행 환경을 가지며, 세션, 쿠키, 로컬 스토리지가 웹뷰별로 분리되어 관리된다. 이를 활용하면 하나의 모바일 앱을 여러 작은 앱들로 나누어 개발할 수 있고, 각 웹뷰마다 별도의 Git 레포지토리를 운영하여 각 팀이 원하는 시점에 독립적으로 배포할 수 있다.
예를 들어, 앱 내 광고는 대부분 웹뷰로 구현되고, 하이브리드 앱에서는 웹뷰와 네이티브 컴포넌트가 밀접하게 통합되어 어떤 부분이 웹뷰이고 어떤 부분이 네이티브인지 구분하기 어려운 경우도 많다.
1.2. 배경 지식
웹뷰를 이해하기 위해서는 꼭 알아야 할 개념들이 몇 가지 있다. 따라서 웹뷰에 대해 본격적으로 알아보기 전에, 알아두면 좋을 개념들을 하나씩 살펴본 후 시작하면 좋을 것 같다.
1.2.1. Bridge
React Native를 처음 했을 때 공부했던 개념들이 있다. 옛날 노션 기록을 뒤져서 가져와봤다.
이때 "Bridge"라는 단어가 등장하는데, 여기서의 bridge는 RN의 JavaScript와 네이티브 모듈 간의 통신을 가능하게 하는 역할이다.
웹뷰에서의 브릿지도 비슷한 개념이다. 웹뷰에서의 브릿지는 웹 콘텐츠에서 네이티브 기능 호출 및 데이터 교환을 위한 역할을 한다.
웹뷰는 웹 기술(HTML, CSS, JavaScript)을 기반으로 동작하는 UI를 보여주기 때문에, 네이티브 기능(카메라, 위치 서비스 등)을 직접 사용할 수 없다. 따라서 브릿지가 이 둘 사이의 인터페이스 역할을 해서, 네이티브 기능을 웹 콘텐츠에서도 사용할 수 있게 만들어 주는 것이다.
정리해보면,
- 네이티브와 웹뷰의 통신을 위해 제공되는 js의 인터페이스 / 웹뷰와 네이티브 사이의 통신을 담당하는 모듈
- 웹뷰가 직접 네이티브 API를 호출할 수 없으므로 반드시 브릿지를 통해 호출
- 웹뷰에서 필요한 OS 기능이 있거나 앱에 보관된 맥락 정보를 가져올 때 주로 사용한다.
- 즉, 브릿지는 웹뷰 인터페이스의 구현체
- web -> native 데이터 전달
- Js가 native API를 호출하거나 데이터를 전달.
- ex) 웹뷰 안에서 파일 업로드 버튼을 클릭하면 네이티브 카메라 기능 호출.
- native -> web 데이터 전달
- 네이티브 코드에서 웹 콘텐츠로 데이터를 전달하거나 js 코드를 실행.
- ex) 네이티브 GPS에서 현재 위치를 가져와 웹뷰 안의 지도에 표시.
1.2.2. 웹엔진
① Webkit
Webkit은 Apple에서 개발한 웹 엔진이다. Safari 브라우저가 대표적이며, iOS의 웹뷰가 Webkit으로 동작한다.
② Chromium
Chromium은 Google에서 개발한 웹 엔진이다. Chrome 브라우저가 대표적이고, Android의 웹뷰가 Chromium으로 동작한다.
- Chromium은 초기에는 Webkit을 렌더링 엔진으로 사용했으나, 2013년에 Blink라는 새로운 렌더링 엔진으로 전환했다.
- V8이라는 강력한 JS 엔진을 사용한다.
- VSCode, GitKraken 등 데스크톱 앱도 여기에 해당된다.
2. 네이티브 <-> 웹뷰 인터렉션
2.1. JavaScript -> Native
네이티브 코드에서 브릿지를 먼저 구현하고 이를 JavaScript에서 사용하는 방식이다.
[Android]
webView.addJavascriptInterface(new Object() {
@JavascriptInterface
public void showToast(String message) {
Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
}
}, "MyBridge");// JavaScript에서 네이티브 함수 호출
MyBridge.showToast("Hello from JavaScript!");
[iOS]
class ViewController: UIViewController, WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if message.name == "myBridge", let body = message.body as? String {
print("Message from JavaScript: \(body)")
}
}
}// JavaScript에서 메시지 전달
window.webkit.messageHandlers.myBridge.postMessage("Hello from JavaScript!");
흠.. 구조적으로 웹팀과 앱팀의 커뮤니케이션 비용이 엄청날 것으로 예상된다. 그리고 React Native로 개발할 당시 네이티브 코드를 만져야 했던 상황들이 종종 있었는데, 그때 java나 swift를 다뤄본 적이 없어서 코드를 읽는 것조차 고생했던 기억이 있다.
특히 새로운 브릿지가 필요한 경우에 작업 속도가 엄청 느려질 것 같은데, 마침 당근마켓 테크밋업에서 이러한 내용을 다뤄주셨다.
당근마켓은 SDK와 테스트 용 웹뷰를 자동으로 생성하는 것을 통해 이 문제를 해결했다.
2.2. Native -> JavaScript
// Android
webView.evaluateJavascript("alert('Hello from Native!')", null);// iOS
webView.evaluateJavaScript("alert('Hello from Native!')", completionHandler: nil)
3. 웹뷰 장단점
3.1. 장점
① 멀티 플랫폼 지원이 가능하므로 개발 비용이 줄어든다.
한 번의 개발로 iOS, android, 모바일 브라우저, desktop 브라우저까지 대응할 수 있다.
② 빠른 업데이트 및 배포가 가능하다.
각 웹뷰는 독립적인 실행 환경을 가지므로, 애플리케이션 전체를 업데이트하지 않고도 특정 기능이나 콘텐츠를 개별적으로 수정하고 배포할 수 있다. 네이티브 앱에서는 작은 수정 사항이 생기면 그걸 반영하기까지 여러 단계를 거쳐야 했는데, 웹뷰를 통해 제공되는 컨텐츠는 앱스토어 심사 과정을 거치지 않고도 업데이트할 수 있기 때문에 빠르게 수정 및 배포가 가능하다.
③ 네이티브 기능
브릿지를 통해 native API를 호출할 수 있기 때문에, 카메라, 위치 정보 등 디바이스의 다양한 기능을 활용할 수 있다.
④ 보안 및 콘텐츠 제어
웹뷰는 웹에 종속적이지만 앱에 종속적이지는 않다. 따라서 웹뷰의 보안 설정이나 부수적인 기능을 재정의해서 제어할 수 있다는 장점이 있다. 또, 웹뷰는 런타임 시 발생하는 웹 코드를 격리해서, 개발자가 로드되는 콘텐츠를 추가적으로 제어하고 보안을 강화할 수 있다.
⑤ 써드파티
웹뷰를 사용하면 네이티브 코드와 직접 통합할 때 발생할 수 있는 보안 및 안정성 문제를 줄일 수 있다.
네이티브 코드에서 써드파티 코드를 직접 통합할 경우:
- 디컴파일링을 통해 소스 코드가 노출될 가능성이 높아진다. (android의 .apk 파일은 디컴파일링이 비교적 쉬워서 내부에 포함된 써드파티 코드를 추출할 수 있다)
- 해당 코드가 버그를 포함할 경우 앱 전체의 안정성을 해칠 수 있다.
- 데이터 유출 위험이 있다. (ex. 네이티브 앱에 통합된 써드파티 코드가 사용자 데이터에 접근해 외부로 전송할수도)
그런데 웹뷰를 사용하면:
- 써드파티 코드를 네이티브 앱 내부가 아니라 웹뷰에서 로드되는 웹 컨텐츠로 실행하기 때문에 써드파티 코드에서 앱 내부의 민감한 데이터에 접근할 수 없다.
- 웹뷰의 보안 설정(CORS) 등을 통해 써드파티 코드가 접근 가능한 리소스를 제한할 수 있다.
- 네이티브 앱 디컴파일링을 통해 코드가 유출될 가능성이 크게 줄어든다.
3.2. 단점
① 성능: 네이티브보다 느리다
네이티브 앱에 비해 웹뷰는 렌더링 속도, 애니메이션 처리 등이 느리게 동작할 수 있다. 왜냐하면 웹뷰는 native UI를 직접 사용하는게 아니라, 웹 기술로 렌더링된 UI를 브라우저 환경에서 구현하기 때문인데, 이때 추가적인 브라우저 렌더링 레이어로 인해 네이티브보다 효율성이 떨어지게 된다. 따라서 고성능 애니메이션이 필요한 앱이거나 게임같은 경우에는 웹뷰가 적합하지 않을 수 있다.
② 보안
웹뷰는 웹 컨텐츠를 로드하기 때문에 웹 기반 보안 취약점에 노출될 가능성이 있다. (ex. XSS, CSRF) 그래서 써드파티 컨텐츠를 웹뷰에서 로드할 경우, 악성 스크립트가 삽입될 위험이 있다. 따라서 네이티브 코드와 연결된 브릿지가 적절히 보호되어야 한다.
③ 사용자 경험
새로운 네이티브 기능이 추가됐을 때, 웹뷰를 사용하는 앱에서는 해당 기능을 바로 활용하지 못할 수 있다.
하지만 장점이 단점보다 훨씬 크기 때문에 요즘 거의 많은 기업에서 웹뷰를 도입하고 있는 것 같다.
'Frontend' 카테고리의 다른 글
| JPEG 손실 압축 (0) | 2025.01.27 |
|---|
