[Android] Overlay 라이브러리 만들기

개요

 가끔 화면 젠처를 덮는 오버 레이 화면이 필요할 때가 있었다. 예를 들면 게임 결과 패널, 튜토리얼, 긴급 공지처럼 “현재 화면과 무관하게 최상단에서 노출되어야 하는 UI”다.

나는 이를 RootView에서 Bottom Tab UI를 그린 뒤, 동일한 루트 레이어에 OverlayView를 한 번 더 배치하는 방식으로 해결했다.

@Composalbe
fun RootView() {
	// 무언가
	...
    
	Scaffold(
        modifier = Modifier.fillMaxSize(),
        bottomBar = { bottomBar.CreateNavComponent() }
    ) {
        HorizontalPager(
            modifier = Modifier.padding(it),
            state = bottomBar.pagerState,
            userScrollEnabled = false
        ) { ...}
    }
    
    Box(
	modifier = Modifier.fillMaxSize(),
	contentAlignment = Alignment.Center
	) {
    	AnimatedVisibility(
        	visible = overlayState != OverlayState.None,
        	enter = slideInHorizontally { fullWidth -> fullWidth },
        	exit = slideOutHorizontally { fullWidth -> -fullWidth }
    	) {
        	OverlayView(
            	overlayState = overlayState,
            	screenOverlayViewModel = screenOverlayViewModel
        	)
    	}
	}
}

OverlayView는 OverlayViewModel의 상태를 구독하고, 상태 변경에 따라 AnimatedVisibility로 오버레이를 표시한다. 구현 자체는 단순하지만, 프로젝트가 커지면서 다음 문제가 생겼다.

• 오버레이 종류가 늘면서 OverlayState 분기 로직이 비대해짐
• 입력 차단, Back 우선순위 같은 정책이 화면마다 달라져 일관성이 깨짐
• 오버레이 호출이 분산되면서 중복 표시/연타 같은 버그가 생김

그래서 “오버레이를 띄우는 방식”을 화면에서 분리해, Controller + Host 패턴으로 모듈화해보기로 했다. 목표는 (1) Root에는 OverlayHost()만 두고, (2) 앱 어디서든 show()/dismiss()로 일관되게 제어하며, (3) 정책(단일/스택/큐, 애니메이션, 입력 차단)을 확장 가능하게 만드는 것이다.

Maven 설정하기

1. Maven Central Repository 로그인

2. 우측 상단 프로필 - view namespace - register new namespace

3. 그럼 키 값을 준다. 그 키 값으로 깃허브에 레포지토리를 만들고 기다리면, 승인이 된다.