Android 앱 내에서 웹 콘텐츠 사용

Android를 사용하면 앱 내에서 웹의 기능을 활용할 수 있습니다. 따라서 특정 유형의 콘텐츠를 표시할 수 있는 유연성과 효율성을 활용할 수 있습니다.

이를 통해 뉴스 피드 표시, 대화형 튜토리얼 표시, 디스플레이 광고 표시, 미니 게임 호스팅과 같은 기존 웹 콘텐츠를 처음부터 다시 빌드하지 않고도 Android 앱에 원활하게 통합할 수 있습니다. 앱 내에서 인터넷을 볼 수 있는 창이라고 생각하면 됩니다. 앱에 웹 콘텐츠를 삽입하는 방법에는 두 가지가 있습니다.

  • WebView: UI를 맞춤설정하거나 업데이트할 때 높은 수준의 유연성이 필요한 경우 인라인으로 제어하는 웹 콘텐츠를 표시합니다.
  • Custom Tabs: 사용자가 링크를 클릭할 때 외부 브라우저로 나가지 않고 앱에 머물도록 하려는 경우 사용자의 기본 브라우저 (브라우저 지원 참고)를 기반으로 하는 완전한 인앱 브라우징 환경을 제공합니다. 대부분의 브라우징 환경은 기본적으로 제공됩니다.
Google Play에서 열린 Android 앱, 기본 웹 뷰가 강조표시되어 있음 Android 개발자 웹페이지에 열린 맞춤 탭이 강조 표시되어 있습니다.
그림 1. `WebView` (왼쪽)와 `Custom Tab` (오른쪽)의 윤곽선이 표시되어 있습니다.

웹 콘텐츠를 삽입하는 이유

앱에 웹 콘텐츠를 삽입하면 다음과 같은 이점이 있습니다.

  • 효율성: 웹사이트의 기존 코드를 재사용합니다. 기존 웹 기술과 콘텐츠를 기반으로 빌드합니다.
  • 통합: 앱 내에서 미디어 및 광고와 같은 서드 파티 제공업체의 외부 콘텐츠를 사용합니다.
  • 유연성: 사전 정의된 UI에 제약받지 않고, 앱 업데이트를 출시하지 않고도 콘텐츠를 동적으로 업데이트할 수 있습니다.

웹 콘텐츠는 언제 사용하나요?

Android 앱에서 웹을 사용하는 세 가지 주요 사용 사례는 다음과 같습니다.

1. 웹 콘텐츠를 앱에 기본 또는 지원 콘텐츠로 삽입: WebView 사용

  • UI를 맞춤설정하거나 업데이트할 때 높은 수준의 유연성이 필요한 경우 자체 웹 콘텐츠를 기본 환경으로 인라인 표시합니다.
  • 광고, 법률 약관 및 규정, 기타 서드 파티 콘텐츠와 같은 다른 콘텐츠를 인라인으로 표시하거나 앱 환경 내의 창으로 표시합니다.
Google Play에 열려 있는 Android 앱, 기본 웹 뷰가 빨간색 상자로 강조표시됨 Android 앱이 열려 있고 빨간색 상자 안에 지원 텍스트가 있습니다.
그림 2. `WebView`를 사용하여 앱 내에 삽입된 웹 콘텐츠가 기본 (왼쪽) 및 지원 콘텐츠 (오른쪽)로 표시됨

2. Custom Tabs를 사용한 인앱 탐색 또는 고급 사용 사례를 위한 WebView

  • 사용자가 링크를 클릭할 때 외부 브라우저로 나가지 않고 앱에 머물도록 하려면 전체 인앱 브라우징 환경을 제공하세요.
    • 참고: 태블릿 및 폴더블과 같은 대형 화면 기기의 경우 앱이 추가 공간을 활용하는 데 도움이 되는 추가 옵션이 있습니다.
    • 앱은 인접한 멀티 윈도우 환경 실행을 사용하여 스크린 분할에서 웹 링크를 열 수 있습니다. 이를 통해 사용자는 앱과 브라우저 간에 동시에 멀티태스킹할 수 있습니다. 또는
    • Custom Tabs에는 동일한 작업에서 열 수 있지만 기존 앱 콘텐츠 옆에 있는 측면 패널 옵션이 있습니다.
  • Custom Tab는 Custom Tabs를 지원하는 브라우저의 경우 사용자의 기본 브라우저를 기반으로 합니다.
    • WebView를 사용하여 고도로 맞춤설정 가능한 인앱 브라우저 환경을 제공할 수 있지만, 즉시 사용 가능한 브라우저 환경과 사용자가 브라우저에서 웹 링크를 열고자 할 때 원활한 전환을 위해서는 Custom Tabs를 사용하는 것이 좋습니다.
왼쪽의 빨간색 상자에 인앱 링크가 있는 웹페이지와 오른쪽에 표시된 인앱 브라우저
그림 3. 인앱 링크 클릭 (왼쪽) 및 인앱 브라우저 열기 (오른쪽)

3. 앱 내 로그인 또는 인증 흐름

Android에서 권장하는 접근 방식은 인증 관리자를 사용하여 로그인 또는 인증 흐름을 빌드하는 것입니다. 이러한 환경에 여전히 삽입된 웹을 사용해야 하는 경우 다음 안내를 따르세요.

  • 일부 앱은 WebView를 사용하여 앱에 고유한 사용자 이름과 패스키 (또는 비밀번호)를 사용하는 등 사용자에게 로그인 흐름을 제공합니다. 이를 통해 개발자는 여러 플랫폼에서 인증 흐름을 통합할 수 있습니다.
  • '로그인…'과 같은 서드 파티 ID 공급업체 또는 로그인 환경에 연결할 때는 Custom Tabs를 사용하는 것이 좋습니다. Custom Tab를 실행하면 사용자의 사용자 인증 정보를 서드 파티 사이트에 격리하여 보호할 수 있습니다.

인증에 WebView를 사용하는 방법에 관한 자세한 내용은 WebView로 사용자 인증을 참고하세요. Custom Tab를 실행하려면 Android 맞춤 탭 개요를 참고하세요.

왼쪽에 WebView가 있는 인앱 로그인 입력란 오른쪽의 커스텀 탭을 사용한 서드 파티 로그인
그림 4. 인앱 로그인 필드 (왼쪽) 및 `Custom Tab`에서 열린 서드 파티 로그인 (오른쪽)