🍫 Custom Snack Bar 를 만들어보자 ~

1. [기획 의도] 내가 어떤 기능을 어떻게 동작하도록 구현하고자 했었는데,

저는 최근에 스낵바를 구현하면서 각각의 화면에서 특정 버튼 클릭 시 스낵바가 3초 동안 노출되고, "이동" 버튼을 누르면 특정 화면으로 이동하는 기능이 필요했습니다.

하지만 실제로 구현을 시작하자마자 생각보다 많은 문제가 등장했습니다.

이 글에서는

"Compose의 Snackbar가 왜 3초 고정 시간이 안 되는지?"
"왜 연속 클릭 시 스낵바가 반복 호출되는지?"
"어떻게 커스텀 스낵바를 안정적으로 구현했는지?"

위에 대한 해결 과정을 기록해보려고 합니다.

명세는 다음과 같이 되어 있었어요.

기능을 정리해 보자면

• 고정 텍스트
• “이동” 텍스트 클릭시 페이지 이동
• 3초간 스낵바가 띄워져 있어야함

2. [문제 파악] 어떤 문제가 발생했고,

먼저 스낵바를 구현하기 위해서 공식문서를 확인해 보았습니다.

밑에서 하나하나씩 뜯어 볼게요..!

SnackBar 를 구현하기 위해서는 크게 3가지 재료가 필요했습니다.

1. SnackBar UI(스낵바 컴포저블 함수 UI)

   

   실제로 androidx.compose.material3 에서 Snackbar 컴포넌트를 제공하고 있습니다.
   

• 코드

  @Composable
  fun Snackbar(
      modifier: Modifier = Modifier,
      action: @Composable (() -> Unit)? = null,
      dismissAction: @Composable (() -> Unit)? = null,
      actionOnNewLine: Boolean = false,
      shape: Shape = SnackbarDefaults.shape,
      containerColor: Color = SnackbarDefaults.color,
      contentColor: Color = SnackbarDefaults.contentColor,
      actionContentColor: Color = SnackbarDefaults.actionContentColor,
      dismissActionContentColor: Color = SnackbarDefaults.dismissActionContentColor,
      content: @Composable () -> Unit,
  ) {
      Surface(
          modifier = modifier,
          shape = shape,
          color = containerColor,
          contentColor = contentColor,
          shadowElevation = SnackbarTokens.ContainerElevation,
      ) {
          val textStyle = SnackbarTokens.SupportingTextFont.value
          val actionTextStyle = SnackbarTokens.ActionLabelTextFont.value
          CompositionLocalProvider(LocalTextStyle provides textStyle) {
              when {
                  actionOnNewLine && action != null ->
                      NewLineButtonSnackbar(
                          text = content,
                          action = action,
                          dismissAction = dismissAction,
                          actionTextStyle = actionTextStyle,
                          actionContentColor = actionContentColor,
                          dismissActionContentColor = dismissActionContentColor,
                      )
                  else ->
                      OneRowSnackbar(
                          text = content,
                          action = action,
                          dismissAction = dismissAction,
                          actionTextStyle = actionTextStyle,
                          actionTextColor = actionContentColor,
                          dismissActionColor = dismissActionContentColor,
                      )
              }
          }
      }
  }

  하지만, 이는 shadowElevation 을 고정값으로 사용하고 있기에 커스텀한 SnackBar 를 만들기에는 부적합하다고 생각해 직접 컴포저블을 구성했습니다.

• MelonActionSnackbar 코드

  @Composable
  fun Snackbar(
      modifier: Modifier = Modifier,
      action: @Composable (() -> Unit)? = null,
      dismissAction: @Composable (() -> Unit)? = null,
      actionOnNewLine: Boolean = false,
      shape: Shape = SnackbarDefaults.shape,
      containerColor: Color = SnackbarDefaults.color,
      contentColor: Color = SnackbarDefaults.contentColor,
      actionContentColor: Color = SnackbarDefaults.actionContentColor,
      dismissActionContentColor: Color = SnackbarDefaults.dismissActionContentColor,
      content: @Composable () -> Unit,
  ) {
      Surface(
          modifier = modifier,
          shape = shape,
          color = containerColor,
          contentColor = contentColor,
          shadowElevation = SnackbarTokens.ContainerElevation,
      ) {
          val textStyle = SnackbarTokens.SupportingTextFont.value
          val actionTextStyle = SnackbarTokens.ActionLabelTextFont.value
          CompositionLocalProvider(LocalTextStyle provides textStyle) {
              when {
                  actionOnNewLine && action != null ->
                      NewLineButtonSnackbar(
                          text = content,
                          action = action,
                          dismissAction = dismissAction,
                          actionTextStyle = actionTextStyle,
                          actionContentColor = actionContentColor,
                          dismissActionContentColor = dismissActionContentColor,
                      )
                  else ->
                      OneRowSnackbar(
                          text = content,
                          action = action,
                          dismissAction = dismissAction,
                          actionTextStyle = actionTextStyle,
                          actionTextColor = actionContentColor,
                          dismissActionColor = dismissActionContentColor,
                      )
              }
          }
      }
  }

  Snackbar 에 들어갈 message, 액션 버튼의 텍스트인 actionLabel, 실제 어떤 동작을 할지 action 함수를 받을수 있도록 구성해보았어요.

2. SnackBarHost
   Scaffold에서 사용되는 Snackbar들을 표시하기 위한 Host로,
   Material 스펙과 hostState에 따라 Snackbar를 적절한 시점에 보여주고 숨기고 닫는 역할을 합니다.
   

• 코드

  @Composable
  fun SnackbarHost(
      hostState: SnackbarHostState,
      modifier: Modifier = Modifier,
      snackbar: @Composable (SnackbarData) -> Unit = { Snackbar(it) },
  ) {
      val currentSnackbarData = hostState.currentSnackbarData
      val accessibilityManager = LocalAccessibilityManager.current
      LaunchedEffect(currentSnackbarData) {
          if (currentSnackbarData != null) {
              val duration =
                  currentSnackbarData.visuals.duration.toMillis(
                      currentSnackbarData.visuals.actionLabel != null,
                      accessibilityManager,
                  )
              delay(duration)
              currentSnackbarData.dismiss()
          }
      }
      FadeInFadeOutWithScale(
          current = hostState.currentSnackbarData,
          modifier = modifier,
          content = snackbar,
      )
  }

  SnackBarHostState 와 snackbar 컴포저블 함수를 받아서 이를 띄워주는 역할을 합니다 !
  

3. SnackBarHostState
   스낵바의 상태를 관리하고, showSnackbar()를 통해 스낵바를 띄웁니다.

   보통 remember 를 이용해서 저장 한 후, Scaffold 에 SnackBarHost 를 구성할 때 사용해요.

   스낵바를 조작하는 데 핵심인 상태로, 주로 살펴볼 곳은 Mutex() 를 이용한 방식과 SnackbarData, showSnackbar() 입니다.

• Mutex() 와 showSnackBar()
  Snackbar 요청 즉, 띄우는 함수는 SnackBarHostState 인스턴스가 가지고 있는
  showSnackBar() 를 호출해서 띄우게 되는데요 ..!

  만약, 사용자가 여러번 스낵바 요청을 하게 되면 어떻게 될까요??
  스낵바가 동시에 두개가 뜰 가능성은 존재 하지 않을까요..??

  스낵바를 띄우는 함수인 showSnackBar() 내부 코드를 간단히 보자면 …

  suspend fun showSnackbar(visuals: SnackbarVisuals): SnackbarResult =
  		mutex.withLock {
  		    try {
  		        return suspendCancellableCoroutine { continuation ->
  		            currentSnackbarData = SnackbarDataImpl(visuals, continuation)
  		        }
  		    } finally {
  		        currentSnackbarData = null
  		    }
  }      

  주의 깊게 봐야할 점은 mutex.withLock 부분입니다.

  mutex 는 보통 여러 코루틴이 공유 자원에 대해 데이터 무결성 혹은 하나의 작업을 완료하도록 보장할때 사용합니다
  withLock 블록 안에 있는 작업을 완전히 수행하게 합니다. 이후 작업요청이 들어오면 이전 작업이 완료될때까지 대기한후 실행합니다.

  즉, 사용자가 연속적으로 클릭을 하게 되면 두개가 동시에 뜨는 것이 아닌, 작업을 큐처럼 쌓아두고 스낵바가 사라지면 다음 스낵바를 띄워주게 됩니다 !!

• showSnackbar()

  앞서 본 showSnackbar() 를 사용하기 위해서는 실제로 외부에서 사용할때는 아래 코드를 호출해서 사용합니다.

  suspend fun showSnackbar(
      message: String,
      actionLabel: String? = null,
      withDismissAction: Boolean = false,
      duration: SnackbarDuration =              // duration 고정
          if (actionLabel == null) SnackbarDuration.Short else SnackbarDuration.Indefinite,
  ): SnackbarResult =
          showSnackbar(SnackbarVisualsImpl(message, actionLabel, withDismissAction, duration))

  SnackbarDuration 은 Short, Long, Indefinite 3가지 duration 만을 지정 할수 있게 되어 있습니다.
  각각의 시간은 4초, 10초, 무한 으로되어 있어서 저희가 구현하고자 하는 3초는 해당 방식으로 구현 할 수 없었습니다 😭😭
  

문제점 정리

이제 정리를 해보자면 ..!

• elevation 고정값이기에, 직접 커스텀 컴포넌트를 구현(해결)
• 스낵바 여러번 클릭시마다 이전 스낵바는 취소하고 새로운 스낵바만 동작하도록 구성해야한다.
  but, 기존 구조는 스낵바 대기가 쌓이는 구조
• snackbar duration 값을 3초로 지정
  but, 기존 구조는 시간이 4초, 10초, 무한으로 지정되어 있음.
  

3. [해결 과정] 그 문제를 해결하기 위해 어떻게 접근했으며,

이제 ..! 앞서 2가지 문제를 해결한 방법에 대해 이야기 해볼게요 ㅎㅎ
우선 저는 snackbar 에 대한 로직을 따로 분리하고 싶었기에 SnackbarController 라는 클래스를 만들어주었습니다 !

• MelonSnackbarController

  class MelonSnackbarController(
      private val coroutineScope: CoroutineScope,
  ) {
      val snackbarHostState = SnackbarHostState()
  
      var currentRequest by mutableStateOf<MelonSnackbarActionRequest?>(null)
          private set
          
      fun show(request: MelonSnackbarActionRequest) {
          currentRequest = request
  
          coroutineScope.launch {
              launch {
                  snackbarHostState.showSnackbar(
                      message = request.message,
                      actionLabel = request.actionLabel,
                      withDismissAction = true,
                      duration = SnackbarDuration.Short,
                  )
              }
          }
      }
  
      fun performAction() {
          currentRequest?.onClick?.invoke()
          currentRequest = null
  
          coroutineScope.launch {
              snackbarHostState.currentSnackbarData?.dismiss()
          }
      }
  }
  
  @Composable
  fun rememberMelonSnackbarController(
      scope: CoroutineScope = rememberCoroutineScope(),
  ): MelonSnackbarController =
      remember {
          MelonSnackbarController(scope)
      }
  

  showSnackbar 는 suspend 함수이기 때문에 rememberCoroutineScope 를 사용해서 동작하도록 하였습니다. controller 자체도 생성 후 초기화 되지 않게 하기 위해 remember 로 감싸 주었어요.
  

다음으로는 Snackbar 요청을 위한 모델과 외부에서 트리거 하는 방식으로 사용하기 위해 CompositonLoacal 을 사용했습니다.

• MelonSnackbarModel

  @Immutable
  data class MelonSnackbarActionRequest(
      val message: String,
      val actionLabel: String,
      val onClick: () -> Unit,
  )
  
  val LocalMelonSnackbarTrigger =
      staticCompositionLocalOf<(MelonSnackbarActionRequest) -> Unit> {
          error("No MelonSnackbarTrigger provided")
      }

실제 사용하는 곳에서는 snackbarController 를 호출하는 로직을 trigger 로 선언하여 외부에서 사용하게 했습니다.

• 선언 & 사용

  // MainScreen 에서 선언
  val snackbarController = rememberMelonSnackbarController()
  val snackbarTrigger: (MelonSnackbarActionRequest) -> Unit =
      remember {
          { request -> snackbarController.show(request) }
      }
  
  Scaffold(
      snackbarHost = {
          SnackbarHost(
              hostState = snackbarController.snackbarHostState,
          ) { data ->
              val request = snackbarController.currentRequest ?: return@SnackbarHost
  
              MelonActionSnackbar(
                  message = request.message,
                  actionLabel = request.actionLabel,
                  action = snackbarController::performAction,
                  modifier =
                      Modifier
                          .padding(
                              start = 16.dp,
                              end = 16.dp,
                              bottom = 16.dp,
                          ),
              )
          }
      },
    
  // 외부 Screen 에서 사용 ex. HomeScreen
  val snackbarTrigger = LocalMelonSnackbarTrigger.current
  val snackbarRequest =
      MelonSnackbarActionRequest(
          message = "mixup count $count",
          actionLabel = stringResource(snackbar_move_action_label),
          onClick = navigateToMixUp,
      )
  snackbarTrigger(snackbarRequest) // <- 실제 호출하는 함수

  snackbarTrigger 가 호출이 되면 snackbarRequest 가 전달되고 이를 통해 snackbarController.show 가 호출이 됩니다.
  

다시 돌아와서 보자면 ..!

1. 스낵바 여러번 클릭시마다 이전 스낵바는 취소하고 새로운 스낵바만 동작하도록 구성

   기존 구조는 연속 클릭시 해당 스낵바에 대한 요청이 사라지지 않고 대기했다가 계속해서 이전 호출을 다시 불러와지는것을 볼 수 있는데요..!!

   

   따라서 명시적으로 이를 해제하게 하는 방법을 사용했어요 !
   방법은 snackbarHostState 의 currentSnackbarData 에 dissmiss 함수를 사용하면되는데요 ..!

   아래는 매번 호출시 마다 이전 snackbar 를 명시적으로 해제해주는 코드입니다.

   fun show(request: MelonSnackbarActionRequest) {
       snackbarHostState.currentSnackbarData?.dismiss() // 명시적으로 Dismiss
   
       currentRequest = request
   
       coroutineScope.launch {
           launch {
               snackbarHostState.showSnackbar(
                   message = request.message,
                   actionLabel = request.actionLabel,
                   withDismissAction = true,
                   duration = SnackbarDuration.Short,
               )
           }
       }
   }

2. snackbar duration 값을 3초로 지정

   그러면 !! 이제 시간을 조정해봐야 겠죠?? 앞서 본것과 같이 Duration 을 Short 로 지정할 경우, 가장 짧아야 4초의 시간을 지정할 수 있었어요

   따라서 Snackbar 를 명시적으로 3초의 시간이 지나게 되면 타임 아웃이 걸리게 하여 스낵바가 dismiss 되는 로직이 필요했습니다

   해당 방식을 구현하기 위해서 corutineScope 내부에 delay 를 담당하는 launch 블록을 만들고 delay 가 지나면 dismiss 하게 하였어요

• 코드

  private const val SNACKBAR_AUTO_DISMISS_MS = 3000L
  
  fun show(request: MelonSnackbarActionRequest) {
      currentRequest = request
  
      coroutineScope.launch {
          snackbarHostState.currentSnackbarData?.dismiss()
  
          launch {
              snackbarHostState.showSnackbar(
                  message = request.message,
                  actionLabel = request.actionLabel,
                  withDismissAction = true,
                  duration = SnackbarDuration.Indefinite, // 무한으로 설정
              )
          }
  
          launch {                                            
              delay(SNACKBAR_AUTO_DISMISS_MS)  // 3초 딜레이    
              snackbarHostState.currentSnackbarData?.dismiss()
          }                                                   
      }
  }       

해당 코드로 실행 해보았는데 뭔가 이상하죠 ..?
분명 3초가 지나고 나서 snackbar 가 사라져야하는데 왜 바로 사라지는 걸까요?????

문제는 코루틴에 있었습니다. 기존의 코루틴이 계속해서 동작하고 있었기 때문인데요

정리하자면...

1. showSnackbar 수행 x 15
2. 매 show 마다 delay 코루틴 수행
3. 각 코루틴 별로 delay 3초가 지나면 dismiss 를 호출
4. 현재의 스낵바가 dismiss 된다

네 이상 깡깡이의 삽질이었습니다

그럼 이 문제를 어떻게 해결 했냐면 ~
코루틴의 job.cancle()을 이용해서 스낵바 요청에 대해서 1대1로 취소해주는 방식을 사용했어요.

• 코드

  fun show(request: MelonSnackbarActionRequest) {
  
      coroutineScope.launch {
          snackbarHostState.currentSnackbarData?.dismiss()
  
          val job = launch {
              snackbarHostState.showSnackbar(
                  message = request.message,
                  actionLabel = request.actionLabel,
                  withDismissAction = true,
                  duration = SnackbarDuration.Indefinite,
              )
          }
  
          launch {
              delay(SNACKBAR_AUTO_DISMISS_MS)
              job.cancel()          // 3초가 지나면 작업 취소
          }
      }
  }

  

  음 .. 잘되는거 같죠..??

  그래서 ! 이제 해결된거 아니냐 라고 생각하실 수 도 있지만 해당 구조는 문제점을 하나 가지고 있습니다.

  이전에 dismiss 된 코루틴 즉, 이전의 delay 가 계속 동작하고 있기에 문제가 돼요.
  제가 원한건 스낵바가 새로 호출이되면 이전의 작업이 완전히 취소 되기를 바랬어요.

  따라서 이전 job 을 참조하여 새로운 작업이 들어오면 cancle 해주는 로직을 구성했습니다.
  

• 최종 코드

  private const val SNACKBAR_AUTO_DISMISS_MS = 3000L
  
  class MelonSnackbarController(
      private val coroutineScope: CoroutineScope,
  ) {
      val snackbarHostState = SnackbarHostState()
  
      var currentRequest by mutableStateOf<MelonSnackbarActionRequest?>(null)
          private set
  
      private var actionJob: Job? = null // 이전 job 을 참조할 변수
      private var timerJob: Job? = null  // 이전 job 을 참조할 변수
  
      fun show(request: MelonSnackbarActionRequest) {
          currentRequest = request
  
          coroutineScope.launch {
              clearCurrentSnackbar()
  
              val job =
                  launch {
                      snackbarHostState.showSnackbar(
                          message = request.message,
                          actionLabel = request.actionLabel,
                          withDismissAction = true,
                      )
                  }
  
              actionJob = job
  
              timerJob =
                  launch {
                      delay(SNACKBAR_AUTO_DISMISS_MS)
                      clearCurrentSnackbar()
                      currentRequest = null
                  }
          }
      }
  
          // 전체 job cancel 및 리소스 제거
      private fun clearCurrentSnackbar() {
          actionJob?.cancel()
          timerJob?.cancel()
          actionJob = null
          timerJob = null
      }
  
      fun performAction() {
          currentRequest?.onClick?.invoke()
          currentRequest = null
  
          clearCurrentSnackbar()
      }
  }        

4. [추후 목표] 더 개선하기 위해 어떤 점을 더 고려할 수 있는지

앞서 구현한 방식은 Job 을 직접 들고 있으면서
이전 스낵바 Job/타이머를 취소하고 새 스낵바를 띄우는 방식이었는데요 !

추후에 해당 코드를 개선한다고 한다면 Flow + collectLatest 로 flow 기반의 처리로 요청시마다 매번 마지막 요청만을 처리해서 구현할 수도 있을 거 같습니다 !

또, 현재 구조는 매번 스낵바를 새로 불러오는데 해당 방식 말고 스낵바가 떠있는 동안에는 새로운 스낵바가 안 뜨게 하라는 요구사항이 있을 수도 있습니다.

그런경우에는 Channel 의 BufferOverFlow 정책을 적용해 사용하거나 이전의 요청 값을 비교해 이를 막는 방식이 있겠습니다 ㅎㅎ..

글 읽어 주셔서 감사합니다 ~!!

📕 참고 자료

다음의 링크를 참고했습니다.

compose snackbar 공식 문서
compose custom snackbar 아티클