인앱 브라우저는 사용자가 앱을 나가지 않고도 완전한 웹 환경을 제공합니다. Android는 인앱 브라우저를 구현하기 위한 두 가지 기본 API인 맞춤 탭과 WebView를 제공합니다. 웹페이지로 연결되는 링크나 광고가 있는 경우 인앱 브라우저를 사용하세요. 그림 1과 같이 앱 내에서 바로 해당 페이지를 열 수 있습니다.
커스텀 탭과 WebView 중에서 선택하는 것은 개발 속도, 사용자 환경, UI에 대한 제어 수준에 영향을 미치는 중요한 아키텍처 결정입니다.
간단 비교
다음 표를 참고하여 필요에 맞는 도구를 선택하세요.
| 기능 | WebView | 맞춤 탭 |
|---|---|---|
| 주된 사용 사례 | 웹을 기본 또는 보조 콘텐츠로 사용하여 하이브리드 앱을 빌드하고 디스플레이 광고, 앱 캠페인 또는 서비스 약관 페이지를 표시합니다. | 외부 웹사이트의 콘텐츠 (예: 뉴스 기사 또는 제품 페이지)를 표시하는 경우 |
| UI 컨트롤 | Full. 어디에나 배치할 수 있는 View 구성요소입니다. 주변 UI를 모두 제어합니다. |
제한적 이용. 툴바 색상에 테마를 적용하고 몇 가지 맞춤 작업을 추가할 수 있습니다. |
| 데이터 및 세션 | 샌드박스 처리됨. 사용자의 기본 브라우저와 쿠키 또는 로그인을 공유하지 않습니다. | 공유됨 쿠키 및 저장된 비밀번호를 포함하여 사용자의 기본 브라우저 세션을 사용합니다. |
| 네이티브 <-> 웹 브리지 | 정답입니다. JavaScript 브리지를 사용하여 웹 콘텐츠와 네이티브 앱 코드 간에 심층적인 양방향 통신을 할 수 있습니다. | 제한적 이용. 기본 문자열 전달에는 window.postMessage() 메서드를 사용할 수 있습니다. |
| 개발자 노력 | 높음 수명 주기, 탐색, 성능을 직접 관리해야 합니다. | 낮음 코드 몇 줄만으로 구현할 수 있습니다. |
WebView
WebView는 웹페이지를 앱 레이아웃의 필수 부분으로 만드는 뷰입니다. 강력하지만 맞춤 탭에 비해 처리하기가 조금 더 복잡합니다.
WebView는 원격 또는 로컬 웹 콘텐츠를 로드하고, JavaScript를 실행하며, 웹 콘텐츠와 네이티브 앱 코드 간의 양방향 통신을 사용 설정할 수 있습니다. WebView의 기능에 대해 자세히 알아보려면 WebView로 할 수 있는 작업을 참고하세요.
WebView를 사용하여 웹 애플리케이션을 전송하거나 온라인 웹페이지를 앱의 일부로 표시할 수도 있습니다. 예를 들어 주기적으로 업데이트해야 하는 최종 사용자 계약이 있습니다. 자세한 내용은 WebView에서 웹 앱 빌드를 참고하세요.
WebView를 선택해야 하는 이유
다음은 WebView가 적합한 몇 가지 시나리오입니다.
- 하이브리드 앱: 웹 콘텐츠와 네이티브 구성요소 (예: 탐색 메뉴 또는 플로팅 작업 버튼)가 나란히 표시되는 앱을 빌드하는 경우
- 퍼스트 파티 콘텐츠: 웹 콘텐츠가 문서 편집기나 디자인 캔버스와 같이 앱 환경의 핵심적인 대화형 부분입니다.
- 전체 UI 컨트롤: 웹페이지 자체의 콘텐츠를 수정하거나 그 위에 네이티브 UI 요소를 오버레이해야 합니다.
- 심층 분석: 웹뷰 내 사용자 참여 및 활동에 관한 자세한 통계가 필요합니다.
주요 장단점
WebView를 사용할 때 고려해야 할 몇 가지 주요 장단점은 다음과 같습니다.
- 성능: WebView는 메모리를 많이 사용할 수 있습니다. 신중하게 관리하지 않으면 성능 문제나 ANR (애플리케이션 응답 없음 오류)이 발생할 수 있습니다.
- 보안 및 유지보수: 보안 강화 및 수명 주기 관리는 사용자의 책임입니다. 여기에는
WebViewCompat.saveState()를 사용하여 프로세스 재생성 전반에 걸쳐 상태 보존을 관리하고 Android의 1MB 저장된 상태 트랜잭션 한도 내에서 유지하는 것이 포함됩니다. 그러나 WebView 업데이트는 Google Play를 통해 전 세계에 출시되므로 기본 엔진이 오래될까 걱정할 필요가 없습니다.
맞춤 탭
맞춤 탭은 앱 위로 슬라이드되는 빠르고 안전하며 사용자 친화적인 브라우저 창을 제공하므로 사용자를 외부 URL로 안내하는 데 적합합니다.
커스텀 탭을 선택해야 하는 이유
다음은 커스텀 탭이 적합한 몇 가지 시나리오입니다.
- 외부 링크: 사용자가 소유하지 않은 웹사이트의 링크를 탭하면 맞춤 탭은 전체 브라우저 환경을 제공하면서 사용자를 앱의 컨텍스트에 유지합니다.
- 간편한 통합: 삽입된 웹 환경을 실행하는 가장 간단한 방법입니다.
- 공유 상태: 사용자의 기본 브라우저와 쿠키를 공유하므로 사용자는 이미 방문한 사이트에 다시 로그인할 필요가 없습니다.
- 서드 파티 로그인: 브라우저가 사용자 인증 정보를 안전하게 처리하므로 서드 파티 로그인 절차('Google 계정으로 로그인' 또는 'Facebook으로 로그인')에 적합합니다.
대부분의 브라우저에서 맞춤 탭을 지원하지만 일부 브라우저는 다른 브라우저보다 더 많은 맞춤설정을 제공합니다. 자세한 내용은 브라우저 지원을 참고하세요.
Jetpack Compose에서 웹 콘텐츠 사용
Jetpack Compose로 빌드할 때 맞춤 탭과 WebView를 모두 사용할 수 있습니다.
- 커스텀 탭: 커스텀 탭은
Intent를 사용하므로 Compose 함수의 모든Context에서 실행할 수 있어 원활한 통합이 가능합니다. - WebView: Compose에는 아직 네이티브 WebView 컴포저블이 없으므로
AndroidView를 사용하여 표준 WebView를 레이아웃에 삽입해야 합니다.
추가 리소스
WebView 또는 Custom Tabs API를 사용하여 Android 지원 기기용 웹페이지를 개발하려면 다음 문서를 참고하세요.