📦 Service × Overlay × Compose × MVVM: 어떻게 붙였을까?

👀 Service, 어디까지 써보셨나요?

여러분은 Service를 통해 어디까지 사용해보셨나요? 🤔

저는 보통 Service를 이용해서
백그라운드에서 파일 다운로드 📥, 업로드 📤, 음악 재생 🎵 같은
UI 없이 조용히 동작하는 작업들에 활용해왔습니다.

---

🔔 ForegroundService도 써봤다면?

물론 ForegroundService를 활용해서
알림(Notification)을 통해 사용자에게 상태를 보여주거나,
버튼 제어 등 간단한 UI 인터랙션을 다뤄본 경험도 있었습니다. 🧭

예를 들어,

• 실시간 진행 상황을 알림에 표시하거나
• 백그라운드 재생 컨트롤을 제공하거나
  할 때 유용하게 사용했었죠.

---

🤹‍♀️ UI, ViewModel, Hilt까지… Service가 바빠졌어요

그런데 이번엔 좀 달랐습니다.
이번 프로젝트에서는 Service를 통해 Overlay를 띄우고,
그 위에서 사용자와 실시간으로 상호작용할 수 있는 UI를 만들어야 했거든요. 😶‍🌫️

게다가 그 UI는 단순한 View가 아니라

• Jetpack Compose로 구성되고
• ViewModel, Hilt까지 연동되는
  꽤 복잡한 구조였습니다. 🔧

---

📌 그래서 이 글에서는...

제가 직접 구현하면서 자료가 부족해 꽤 많은 시행착오를 겪었고,
여러 가지 방법을 시도해보며 하나씩 정답을 찾아갔습니다. 🔍

그 과정을 정리해두면
비슷한 구조를 고민하는 분들께 도움이 될 것 같아,
아래와 같은 내용을 중심으로 풀어보려 합니다. 👇

• 🛠️ Service에서 Overlay를 안전하게 띄우는 방법
• 🪟 WindowManager + ComposeView 연결 실전 코드
• 🧠 Overlay 안에서도 ViewModel을 사용하는 방법
• 🧩 MVVM + Hilt까지 자연스럽게 연계하는 구조 설계 팁

---

🪟 ComposeView를 Window 위에 띄우려면?

Android의 일반적인 UI 구성은 Activity나 Fragment를 기반으로 하지만,
Service에서 Overlay를 띄우기 위해선 WindowManager를 직접 다뤄야 합니다.
여기에 Jetpack Compose를 얹기 위해선 ComposeView를 활용하게 되죠.

그럼 본격적으로 Service 위에 Compose 기반 UI를 띄우는 구조를 살펴볼게요. 🧱

---

🚧 Service + ComposeView 구조

@AndroidEntryPoint
class ComposeOverlayService : Service() {

    @Inject
    lateinit var composeWindow: ComposeWindow

    override fun onCreate() {
        super.onCreate()
        composeWindow.create()
    }

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
        composeWindow.reconfigureContent()
    }

    override fun onStartCommand(intent: Intent?, flags: Int, startId: Int): Int {
        super.onStartCommand(intent, flags, startId)
        return START_STICKY
    }

    override fun onDestroy() {
        super.onDestroy()
        composeWindow.destroy()
    }

    override fun onBind(intent: Intent?): IBinder? = null
}

🧾 ComposeOverlayService 간단 구조 정리

ComposeOverlayService는 Jetpack Compose로 만든 UI를
Overlay 형태로 Window에 띄우기 위한 Android Service입니다.

이 클래스에는 @AndroidEntryPoint를 붙여
Hilt를 통해 의존성을 주입받을 수 있는 진입점임을 명시하고,
ComposeWindow라는 별도 클래스를 주입받아
Overlay UI 생성 및 WindowManager 관련 처리를 위임합니다.

---

Service는 전체 구조에서 생명주기만 관리합니다.

Overlay가 항상 떠 있어야 하는 특성상,
onStartCommand()에서는 START_STICKY를 반환해
서비스가 강제 종료돼도 자동으로 복구되도록 설정합니다.

---

즉, 이 구조는
👉 UI 로직은 ComposeWindow에 위임하고
👉 Service는 컨트롤러 역할만 수행하는
깔끔한 책임 분리 구조입니다.

---

🧱 ComposeWindow 코드 구조

아래는 실제 Overlay UI를 Window에 띄우기 위해 사용한
ComposeWindow 추상 클래스와 그 구현체 코드입니다.

---

📄 ComposeWindow.kt

abstract class ComposeWindow(
    private val context: Context,
    private val lifecycleOwner: MyLifecycleOwner,
) {
    protected val windowManager: WindowManager =
        context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
    protected val params by lazy { createLayoutParams() }
    protected val composeView by lazy { createComposeView() }
    protected val handler = Handler(Looper.getMainLooper())

    private val scope = CoroutineScope(Dispatchers.Default + SupervisorJob())

    fun create() {
        lifecycleOwner.run {
            onCreate()
            configureComposeView()
            onStart()
            showOverlay()
            onResume()
        }
    }

    fun destroy() {
        if (composeView.isAttachedToWindow) {
            windowManager.removeView(composeView)
        }
        scope.cancel()
        lifecycleOwner.run {
            onPause()
            onStop()
            onDestroy()
        }
    }

    fun reconfigureContent() {
        handler.post {
            configureComposeView()
        }
    }

    protected fun setVisibility(visible: Boolean) {
        if (composeView.isVisible == visible) return
        composeView.isVisible = visible
    }

    private fun createComposeView(): ComposeView = ComposeView(context).apply {
        pivotX = 0f
        pivotY = 0f
        setViewTreeLifecycleOwner(lifecycleOwner)
        setViewTreeViewModelStoreOwner(lifecycleOwner)
        setViewTreeSavedStateRegistryOwner(lifecycleOwner)
        setViewTreeOnBackPressedDispatcherOwner(lifecycleOwner)
    }

    protected abstract fun configureComposeView()
    protected abstract fun showOverlay()
    protected abstract fun createLayoutParams(): WindowManager.LayoutParams

    protected fun defaultOverlayFlags() = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE or
        WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL
}

🧩 ComposeWindowImpl.kt

class ComposeWindowImpl @Inject constructor(
    val context: Context,
    lifecycleOwner: MyLifecycleOwner,
) : ComposeWindow(context, lifecycleOwner) {

    override fun configureComposeView() {
        composeView.setContent {
            SampleTheme {
                SampleScreen(
                    composeView,
                    windowManager,
                    params,
                    onShowWindow = ::setVisibility,
                )
            }
        }
    }

    override fun showOverlay() {
        if (!composeView.isAttachedToWindow) {
            windowManager.addView(composeView, params)
        }
    }

    override fun createLayoutParams() = WindowManager.LayoutParams(
        200,
        100,
        WindowManager.LayoutParams.TYPE_CAMERA_OVERLAY,
        defaultOverlayFlags(),
        PixelFormat.TRANSLUCENT,
    ).apply {
        gravity = Gravity.TOP or Gravity.LEFT
        x = 0
        y = 0
    }
}

🔧 WindowModule.kt (DI 제공)

@Module
@InstallIn(SingletonComponent::class)
object WindowModule {

    @Provides
    @Singleton
    fun provideComposeWindow(
        @ApplicationContext context: Context,
        lifecycleOwner: MyLifecycleOwner,
    ): ComposeWindow {
        return ComposeWindowImpl(
            context,
            lifecycleOwner,
        )
    }
}

---

📘 구조 설명

위 코드는 Service에서 띄우는 Overlay UI를 Compose 기반으로 구성하기 위한
핵심적인 컴포넌트 구조입니다.

---

✅ ComposeWindow (추상 클래스)

• Overlay UI 구성을 위한 기본 틀을 정의합니다.
• 생명주기 흐름(create(), destroy())을 중심으로
  ComposeView 생성, WindowManager 등록/제거, 재구성 등의 기능을 제공합니다.
• 내부에서 직접 ComposeView를 생성하며, 이때 다음과 같은 설정을 수동으로 해줍니다:

setViewTreeLifecycleOwner(lifecycleOwner)
setViewTreeViewModelStoreOwner(lifecycleOwner)
setViewTreeSavedStateRegistryOwner(lifecycleOwner)
setViewTreeOnBackPressedDispatcherOwner(lifecycleOwner)

---

✅ ComposeWindowImpl (구현 클래스)

• ComposeWindow의 실제 구현체로, Overlay UI를 구체적으로 구성하고 표시하는 역할을 합니다.
• SampleScreen을 ComposeView에 연결하고, Window에 추가하거나 제거하는 과정을 담당합니다.
• Overlay의 크기, 위치, 타입 등의 LayoutParams도 이 클래스에서 정의합니다.

---

✅ ViewTree 설정 함수 요약

Jetpack Compose를 Activity나 Fragment가 아닌 환경 (예: Service, WindowManager Overlay 등)에서 사용하려면
다음 네 가지 설정을 반드시 수동으로 해주어야 합니다.

이 설정들은 Android View Hierarchy에서 Compose, ViewModel, Navigation, 상태 저장 등의 기능이
정상적으로 작동하도록 보장해줍니다.

---

✅ 공통된 목적

ComposeView가 Fragment나 Activity가 아닌 환경(예: Service의 Overlay)에서 사용될 경우,
Compose 관련 기능들이 기본적으로 제공되지 않기 때문에 다음 네 가지를 수동으로 설정해야 합니다:

• LifecycleOwner
• ViewModelStoreOwner
• SavedStateRegistryOwner
• OnBackPressedDispatcherOwner

---

🔍 중요함수별 자세한 설명

Jetpack Compose를 Activity/Fragment 외부 환경(예: Service, Overlay)에서 사용할 때
반드시 수동으로 설정해야 하는 ViewTree 관련 함수들을 아래에서 자세히 다룹니다.

🧩 setViewTreeLifecycleOwner(lifecycleOwner: LifecycleOwner)

📌 역할

• View와 그 하위 트리들이 수명 주기(Lifecycle) 를 인식할 수 있게 함
• Compose 내부에서 Lifecycle.current 등을 통해 현재 Lifecycle에 접근 가능

🛠️ 중요 이유

• LaunchedEffect, DisposableEffect, rememberUpdatedState 등은 Lifecycle에 의존
• 예: Overlay가 종료되면 Coroutine도 자동 정리돼야 함 → Lifecycle 정보 필요

---

🧩 setViewTreeViewModelStoreOwner(storeOwner: ViewModelStoreOwner)

📌 역할

• View 트리 하위에서 ViewModel을 저장/공유할 수 있게 하는 Store 제공

🛠️ 중요 이유

• viewModel() 또는 hiltViewModel() 사용 시 필요한 설정
• Service나 Overlay에는 기본적으로 ViewModelStore가 없기 때문에 수동 설정 필수

---

🧩 setViewTreeSavedStateRegistryOwner(owner: SavedStateRegistryOwner)

📌 역할

• View 트리에서 상태 저장/복원 기능 제공

🛠️ 중요 이유

• rememberSaveable()이 내부적으로 이 Registry를 통해 상태를 저장/복원
• Activity나 Fragment가 아니라면 직접 설정하지 않으면 상태 복원이 동작하지 않음

---

🧩 setViewTreeOnBackPressedDispatcherOwner(owner: OnBackPressedDispatcherOwner)

📌 역할

• 뒤로 가기(back) 이벤트 처리를 위한 Dispatcher를 View에 연결

🛠️ 중요 이유

• BackHandler { ... } 를 Compose에서 사용하려면 이 설정이 필수
• 설정하지 않으면 뒤로가기 콜백이 무시됨

---

✅ 요약 정리

Jetpack Compose를 Activity나 Fragment 외부 환경(예: Service, Overlay 등)에서 사용할 때는
다음 네 가지 설정을 반드시 수동으로 적용해야 Compose 기능이 정상적으로 작동합니다:

1. setViewTreeLifecycleOwner(view, lifecycleOwner)
   → LaunchedEffect, DisposableEffect 등 생명주기 기반 컴포저블 작동을 위해 필요

2. setViewTreeViewModelStoreOwner(view, storeOwner)
   → viewModel(), hiltViewModel() 사용 시 ViewModel 탐색 기반 제공

3. setViewTreeSavedStateRegistryOwner(view, owner)
   → rememberSaveable() 등 상태 저장 기능을 가능하게 함

4. setViewTreeOnBackPressedDispatcherOwner(view, owner)
   → BackHandler 사용을 위한 뒤로 가기 이벤트 처리 지원

---

💡 이 네 가지를 빠짐없이 설정해야 Compose의 주요 기능들이 Activity 없이도 제대로 작동한다.
특히 Service 기반 Overlay UI 구성 시에는 필수 체크 항목입니다.

---

✅ SampleScreen.kt

@Composable
fun SampleScreen(
    composeView: ComposeView,
    windowManager: WindowManager,
    layoutParams: LayoutParams,
    onShowWindow: (Boolean) -> Unit,
) {
    val entryPoint = getEntryPoint(LocalContext.current)
    val sampleViewModel: SampleViewModel = entryPoint.sampleViewModel()

    SampleContent()
}

• SampleScreen은 Overlay에 띄워질 Compose UI의 진입점입니다.

• ⚠️ 일반적인 Activity 환경이 아니기 때문에 hiltViewModel()을 사용할 수 없습니다.
  👉 대신, EntryPoint를 통해 Hilt에서 ViewModel을 수동으로 주입받아야 합니다.
  이는 Service, Dialog, WindowManager와 같이 ComposeView만 존재하는 환경에서 ViewModel을 안전하게 사용하는 필수 방식입니다.

• 이 ViewModel을 활용하여 UI 상태를 관리하거나 데이터를 불러올 수 있습니다.

• 실제 UI는 SampleContent()에서 그리며, 이 함수는 ViewModel 또는 외부 상태를 기반으로 구성됩니다.

• composeView, windowManager, layoutParams, onShowWindow는
  Overlay 제어를 위한 파라미터로, 추후 기능 확장에 사용됩니다.

---

✅ ViewModelModule.kt / ViewModelEntryPoint.kt

@Module
@InstallIn(SingletonComponent::class)
object ViewModelModule {

    @Provides
    @Singleton
    fun provideSampleViewModel(
        sampleRepository: SampleRepository,
    ): SampleViewModel {
        return SampleViewModel(
            sampleRepository,
        )
    }
}

@InstallIn(SingletonComponent::class)
@EntryPoint
interface ViewModelEntryPoint {
    fun sampleViewModel(): SampleViewModel
}

fun getEntryPoint(context: Context): ViewModelEntryPoint {
    return EntryPointAccessors.fromApplication(
        context,
        ViewModelEntryPoint::class.java,
    )
}

• Activity, Fragment 없이 ViewModel을 사용해야 하는 상황
  (예: Service, WindowManager, Overlay)에서는
  hiltViewModel()을 사용할 수 없기 때문에,
  EntryPoint를 통해 ViewModel을 수동으로 주입받는 구조를 사용합니다.

• ViewModelModule은 Hilt가 SampleViewModel을 생성할 수 있도록
  명시적으로 @Provides 함수를 정의한 모듈입니다.
  이를 통해 @Inject 생성자를 가진 ViewModel도 Hilt가 관리할 수 있게 됩니다.

• ViewModelEntryPoint는 외부에서 Hilt 컴포넌트 내부에 접근할 수 있도록 열어주는 인터페이스입니다.
  @EntryPoint와 @InstallIn(SingletonComponent::class)로 등록된 이 인터페이스를 통해
  ViewModel을 안전하게 가져올 수 있습니다.

• getEntryPoint(context) 함수는 EntryPointAccessors를 이용해
  ApplicationContext로부터 Hilt EntryPoint 인스턴스를 획득합니다.

• 📌 이 구조 덕분에 hiltViewModel() 없이도
  ComposeView + Service 기반 환경에서도 ViewModel을 안전하게 주입받아 사용할 수 있습니다.

---

✅ SampleViewModel.kt

class SampleViewModel @Inject constructor(
    private val sampleRepository: SampleRepository,
) : ViewModel() {

}

• 생성자에 @Inject를 붙여 sampleRepository를 주입받으며,
  Hilt가 이 ViewModel의 의존성을 자동으로 해결할 수 있도록 구성되어 있습니다.

• 일반적으로는 @HiltViewModel을 선언하고 hiltViewModel()로 주입받지만,
  이 프로젝트는 Activity나 Fragment가 아닌 환경(예: Service, Overlay) 이므로
  이러한 방식은 사용할 수 없습니다.

• ❗ 따라서 이 ViewModel에는 @HiltViewModel을 붙이면 안 됩니다.
  @HiltViewModel은 내부적으로 ViewModelProvider.Factory와 Android의 LifecycleScope에 의존하는데,
  ComposeView만 존재하는 환경에서는 이들이 존재하지 않기 때문입니다.

• 대신 EntryPoint를 통해 ViewModel을 수동으로 가져와 사용하는 방식이 필요합니다.

---

🧶 마무리 정리

위와 같은 구조로 개발을 한다면 기존 Compose 개발과 큰 차이점 없이 자연스럽게 개발이 가능할 것입니다.

Service + Compose + ViewModel + Hilt를 함께 사용하는 과정에서
겪었던 시행착오들을 가장 간단하고 명확한 예제로 풀어내려 했습니다.

저는 실제로 ComposeOverlayService를 사용한 구조를 기반으로
Camera, Stream 제어, 서버 통신 등 다양한 기능을 안정적으로 구현할 수 있었습니다.

---

이 글이 Service 위에 Compose UI를 구현하려는 분들께
구조적인 이해와 실전 적용에 도움이 되었기를 바랍니다.

저 역시 자료가 많지 않아 여러 번 시행착오를 겪었지만,
이 구조 덕분에 유연하고 확장 가능한 UI를 안정적으로 운용할 수 있었습니다.

여러분의 프로젝트에서도 이 방식이 좋은 출발점이 되길 바랍니다. 🙌