안드로이드 인앱 브라우저 적용 방법, Custom Tabs 적용: CustomTabIntent vs CustomTabsService 완벽 비교 및 예제

안드로이드 앱에서 웹 콘텐츠를 자연스럽게 보여주기 위한 강력한 도구인 Custom Tabs. 단순히 WebView를 사용하는 것보다 훨씬 향상된 사용자 경험을 제공하며, Chrome 브라우저의 기능을 앱 내에서 매끄럽게 통합할 수 있도록 해줍니다.

Custom Tabs를 적용하는 방법은 크게 두 가지로 나뉩니다. 간단하게 웹 페이지를 여는 데 사용하는 CustomTabIntent와 더 깊은 수준의 제어 및 최적화를 가능하게 하는 CustomTabsService입니다.

이번 글에서는 이 두 가지 방식의 차이점을 명확히 비교하고, 각각의 사용 예제를 통해 이해를 돕고자 합니다.

1. CustomTabIntent: 간편하고 빠르게 웹 페이지 열기

CustomTabIntent는 가장 기본적인 형태로 Custom Tabs를 사용하는 방법입니다. 별도의 서비스 연결 없이 간단하게 Intent를 생성하여 웹 페이지를 실행할 수 있습니다.

특징:

• 구현 용이성: 몇 줄의 코드로 웹 페이지를 Custom Tabs로 열 수 있습니다.
• 기본적인 브라우저 기능 제공: Chrome의 뒤로 가기, 앞으로 가기, 새로 고침, 메뉴 등의 기본 UI를 그대로 사용할 수 있습니다.
• 제한적인 커스터마이징: 툴바 색상, 애니메이션, 메뉴 항목 추가 등 기본적인 UI 변경만 가능합니다.
• 브라우저 프로세스 관리 불가: 앱에서 브라우저 프로세스의 상태를 알거나 직접 제어할 수 없습니다.
• 사전 준비 불가: 링크 클릭 전에 브라우저를 미리 준비하거나 페이지를 미리 로드하여 로딩 속도를 개선할 수 없습니다.

사용 예제 (Kotlin):

Kotlin

 

import android.net.Uri
import androidx.browser.customtabs.CustomTabsIntent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val openWebButton: Button = findViewById(R.id.openWebButton)
        openWebButton.setOnClickListener {
            val url = "https://www.google.com"
            val builder = CustomTabsIntent.Builder()
            builder.setToolbarColor(getColor(R.color.colorPrimary)) // 툴바 색상 설정 (선택 사항)
            val customTabsIntent = builder.build()
            customTabsIntent.launchUrl(this, Uri.parse(url))
        }
    }
}

위 예제는 버튼 클릭 시 CustomTabsIntent를 생성하여 https://www.google.com을 Chrome Custom Tabs로 여는 간단한 코드입니다. setToolbarColor()를 사용하여 툴바 색상을 앱의 테마에 맞게 변경할 수도 있습니다.

2. CustomTabsService: 고급 기능과 최적화된 경험 제공

CustomTabsService는 앱과 Chrome 브라우저 간의 연결을 설정하여 더 많은 기능과 세밀한 제어를 가능하게 합니다. Service Connection을 통해 CustomTabsSession을 생성하고 이를 통해 다양한 고급 기능을 활용할 수 있습니다.

특징:

• 복잡한 구현: Service Connection 관리 및 세션 생성을 위한 추가적인 코드가 필요합니다.
• 다양한 고급 기능 제공:
  • 브라우저 프로세스 사전 준비 (Warm-up): 사용자가 링크를 클릭하기 전에 Chrome 프로세스를 미리 시작하여 로딩 시간을 단축합니다.
  • 페이지 미리 로드 (Prefetch): 사용자가 방문할 가능성이 높은 URL을 미리 다운로드하여 즉시 보여줄 수 있습니다.
  • 세션 관리: 여러 Custom Tabs를 하나의 세션으로 묶어 상태를 공유하고 관리할 수 있습니다.
  • 더욱 세밀한 UI/UX 제어: 사용자 정의 버튼 추가, 탭 높이 조절 등 더욱 풍부한 UI/UX 커스터마이징이 가능합니다.
  • 외부 앱과의 상호작용: 다른 앱과의 연동을 통해 특정 동작을 처리하거나 데이터를 공유할 수 있습니다.

사용 예제 (Kotlin):

Kotlin

 

import android.content.ComponentName
import android.content.Context
import android.content.Intent
import android.content.ServiceConnection
import android.net.Uri
import android.os.Bundle
import android.os.IBinder
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import androidx.browser.customtabs.CustomTabsClient
import androidx.browser.customtabs.CustomTabsIntent
import androidx.browser.customtabs.CustomTabsServiceConnection
import androidx.browser.customtabs.CustomTabsSession

class AdvancedMainActivity : AppCompatActivity() {
    private var customTabsClient: CustomTabsClient? = null
    private var customTabsSession: CustomTabsSession? = null
    private var customTabsServiceConnection: CustomTabsServiceConnection? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_advanced_main)

        val openPrefetchedButton: Button = findViewById(R.id.openPrefetchedButton)

        val serviceConnection = object : CustomTabsServiceConnection() {
            override fun onCustomTabsServiceConnected(name: ComponentName, client: CustomTabsClient) {
                customTabsClient = client
                customTabsClient?.warmup(0) // 브라우저 미리 준비

                customTabsSession = customTabsClient?.newSession(null)
                val prefetchUrl = Uri.parse("https://www.example.com")
                customTabsSession?.prefetch(prefetchUrl, null) // 페이지 미리 로드

                openPrefetchedButton.setOnClickListener {
                    customTabsSession?.launchUrl(this@AdvancedMainActivity, prefetchUrl)
                }
            }

            override fun onServiceDisconnected(name: ComponentName) {
                customTabsClient = null
                customTabsSession = null
            }
        }

        customTabsServiceConnection = serviceConnection
        CustomTabsClient.bindCustomTabsService(this, "com.android.chrome", serviceConnection)
    }

    override fun onDestroy() {
        super.onDestroy()
        customTabsServiceConnection?.let { unbindService(it) }
    }
}

위 예제는 CustomTabsService에 연결하여 브라우저를 미리 준비(warmup)하고 특정 URL을 미리 로드(prefetch)하는 방법을 보여줍니다. 버튼 클릭 시 미리 로드된 페이지를 launchUrl()을 통해 빠르게 열 수 있습니다. Service Connection 관리를 위해 CustomTabsServiceConnection을 구현하고, 액티비티 생명주기에 따라 서비스를 바인딩 및 언바인딩하는 것을 잊지 않아야 합니다.

CustomTabIntent vs CustomTabsService: 언제 어떤 것을 선택해야 할까?

기능CustomTabIntent 호출CustomTabsService 이용

구현 난이도	매우 쉬움	비교적 복잡
기본 기능	Chrome 기본 기능 제공	Chrome 기본 기능 제공
UI 커스터마이징	기본적인 수준	더 다양하고 세밀하게 가능
브라우저 프로세스 제어	불가능	가능
사전 준비 (Warm-up)	불가능	가능
페이지 미리 로드	불가능	가능
세션 관리	제한적	가능
성능 최적화	제한적	가능
사용 시나리오	간단한 웹 링크 연결	로딩 속도 개선, 고급 기능 활용, 앱 UI/UX 통합

Sheets로 내보내기

결론적으로,

• 간단하게 웹 페이지를 보여주는 것으로 충분하고 빠른 개발이 중요하다면 CustomTabIntent를 사용하는 것이 효율적입니다.
• 앱 내에서 웹 콘텐츠를 자주 보여주거나, 더 나은 사용자 경험을 위해 로딩 속도를 최적화하고 싶거나, 고급 기능을 활용하여 앱의 UI/UX와 더욱 통합된 경험을 제공하고 싶다면 CustomTabsService를 사용하는 것을 고려해야 합니다.

두 가지 방법을 적절히 활용하여 앱의 목적과 사용자 경험을 최적화하는 것이 중요합니다.