🚀 로딩도 UX다! Jetpack Compose Skeleton Loading 구현 가이드 ✨

❓ 로딩 UI는 왜 필요할까?

앱을 개발하다 보면 데이터를 불러오는 동안 잠깐의 공백이 생깁니다.
만약 이때 화면이 텅 비어 있다면 사용자는 불안해집니다.
"앱이 멈춘 건가?" 라는 의문을 갖게 되죠.

그래서 보통은 ProgressBar 같은 스피너를 사용합니다.
하지만 스피너만 돌고 있으면 사용자는 단순히 "로딩 중이다" 라는 사실만 알 뿐,
👉 무엇을 기다리고 있는지는 알 수 없습니다.

---

🎭 Skeleton Loading

여기서 등장하는 게 Skeleton Loading(스켈레톤 로딩)입니다.

💡 Skeleton Loading이란?
실제 콘텐츠의 레이아웃을 회색 블록 등으로 미리 그려두고,
그 위에 빛이 흘러가는 듯한 애니메이션을 넣어
사용자가 "곧 이 자리에 콘텐츠가 나타나겠구나" 라고 느끼게 하는 기법입니다.

즉, UX적으로 사용자에게 데이터의 맥락과 기대감을 주는 방식입니다.

---

🛠️ Jetpack Compose로 구현하기

저는 이번에 Modifier 확장을 활용해서
아주 간단히 shimmer 애니메이션을 적용할 수 있는 SkeletonBox를 만들었습니다.

@Composable
fun SkeletonBox(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit = {}
) {
    Box(
        modifier = modifier.shimmerBackground()
    ) {
        content()
    }
}

여기서는 Box에 Modifier.shimmerBackground()를 붙여서
내부 콘텐츠가 없어도 반짝이는 배경을 보여줄 수 있게 합니다.

---

🎨 Modifier 확장 함수

핵심은 Modifier.shimmerBackground() 입니다 👇

@SuppressLint("SuspiciousModifierThen")
fun Modifier.shimmerBackground(): Modifier = composed {
    // 1) 무한 애니메이션 컨테이너 생성
    val transition = rememberInfiniteTransition(label = "shimmerBackground")

    // 2) 0f → 1000f 까지 선형으로 이동하는 값을 무한 반복
    val translateAnimation by transition.animateFloat(
        initialValue = 0f,
        targetValue = 1000f,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = 1200,
                easing = LinearEasing
            ),
            repeatMode = RepeatMode.Restart
        ),
        label = "shimmerTranslate",
    )

    // 3) 그리기 단계: 캐시 가능한 리소스는 캐시하고, 매 프레임 그라데이션을 그려줌
    return@composed this.then(
        drawWithCache {
            // 3-1) 고정된 컬러 리스트는 캐시
            val shimmerColors = listOf(
                Color.LightGray.copy(alpha = 0.9f),
                Color.LightGray.copy(alpha = 0.5f),
                Color.LightGray.copy(alpha = 0.9f)
            )

            // 3-2) 실제 그리기: 콘텐츠 "뒤"에 사각형을 그라데이션 브러시로 채움
            onDrawBehind {
                // 3-2-1) 대각선(좌상→우하)으로 흐르는 선형 그라데이션
                val brush = Brush.linearGradient(
                    colors = shimmerColors,
                    start = Offset.Zero,
                    end = Offset(x = translateAnimation, y = translateAnimation)
                )

                // 3-2-2) 현재 레이아웃 영역 전체를 채움
                drawRect(
                    brush = brush,
                    size = this.size
                )
            }
        }
    )
}

---

1) composed { ... } 를 쓰는 이유

• Modifier 내부에서 remember/애니메이션 상태를 안전하게 쓰기 위한 진입점입니다.
  일반 Modifier 체인에서는 컴포지션 스코프가 없어 remember 계열 API를 직접 사용할 수 없는데, composed { ... } 블록 안에서는 컴포지션 수명주기를 갖게 되어 상태를 기억하고 재구성(recomposition)에 반응할 수 있습니다.
• 이 덕분에 rememberInfiniteTransition, animate* 같은 Compose Runtime 의존 API를 Modifier 구현 안에서 사용할 수 있습니다.
• 또한 Modifier가 설치/해제될 때의 라이프사이클을 분리해 주므로, 애니메이션 객체가 불필요하게 재생성되거나 메모리 누수가 나는 것을 피하는 데 유리합니다.

---

2) rememberInfiniteTransition + animateFloat

• rememberInfiniteTransition()은 무한 반복 애니메이션 컨테이너입니다. 이 컨테이너에 여러 트랙(animateFloat, animateColor 등)을 등록하면 각각이 독립적으로 반복됩니다.
• 여기서는 animateFloat(0f → 1000f)로 값을 선형(LinearEasing)으로 증가시키고, RepeatMode.Restart로 끝에서 다시 처음으로 점프해 재생합니다.
• 이렇게 얻은 시간에 따른 실수 값(여기서는 translateAnimation)을 그라데이션의 종점 좌표로 사용해, 시각적으로 빛이 흘러가는 느낌을 만듭니다.

---

3) drawWithCache + onDrawBehind

• drawWithCache는 그리기 리소스의 캐시 지점을 제공합니다. 컬러 리스트나 브러시 계산 등 매 프레임 동일한 값은 캐시하고, 입력이 바뀔 때만 재계산해 퍼포먼스 비용을 줄입니다.
• onDrawBehind는 콘텐츠 뒤쪽 레이어에 그립니다. 즉, 스켈레톤을 배경처럼 흐르게 할 수 있어 레이아웃/터치 영역을 해치지 않습니다.
  (콘텐츠 위에 덮고 싶다면 onDrawWithContent에서 drawContent() 이후에 오버레이를 그리면 됩니다.)

---

4) Brush.linearGradient와 좌표

• 선형 그라데이션은 start: Offset, end: Offset 두 점으로 방향과 길이가 정해집니다.
  start = Offset.Zero, end = Offset(x = translate, y = translate)이면 좌상단 → 우하단(대각선) 으로 흐르죠.
• 색 배열을 밝-어둡-밝(예: alpha 0.9 → 0.5 → 0.9)로 두면 가운데가 하이라이트처럼 보이며, 이동하는 종점 좌표와 결합되어 샤머(Shimmer) 효과가 납니다.
• 좌표 단위는 픽셀(px) 이므로, 이동 범위(예: 1000f)는 화면/컴포넌트 크기에 따라 시각적 체감이 달라질 수 있습니다.

---

🔁 동작 흐름 요약

1. composed 안에서 무한 애니메이션 컨테이너를 remember 한다.
2. animateFloat로 0→목표값까지 반복 증가하는 진행 값을 만든다.
3. drawWithCache로 불변 리소스를 캐시하고, 매 프레임 onDrawBehind에서 그라데이션을 그린다.
4. 증가하는 값으로 그라데이션의 방향/종점을 갱신해 빛이 흐르는 듯한 배경을 만든다.

---

✅ 이 설계가 적합한 이유

• 적용성: Modifier 확장이므로 어떤 컴포저블에도 쉽게 부착 가능.
• 레이어 안전성: onDrawBehind로 배경 레이어에서 동작 → 레이아웃/터치에 간섭 없음.
• 성능 고려: drawWithCache로 불필요 할당/계산 최소화, 애니메이션은 Compose 런타임이 관리.
• 일관된 UX: 프로젝트 전반에서 동일한 스켈레톤 패턴을 재사용해 로딩 경험을 통일할 수 있음.

---

🎬 데모 (GIF)

위 사진과 같은 Skeleton Loading 적용이 가능합니다.

---

🎯 결론

• 단순 스피너보다 Skeleton Loading이 UX적으로 훨씬 우수합니다.
• Jetpack Compose에서는 Modifier 확장만으로 손쉽게 구현할 수 있습니다.
• 특히 Paging3 초기 로딩 상태에 적용하면,
  사용자에게 "앱이 멈춘 게 아니라 데이터를 불러오는 중이구나" 라는 안정감과
  "곧 어떤 콘텐츠가 나타날지"에 대한 기대감을 함께 줄 수 있습니다.

---

💬 여러분은 로딩 UI를 어떻게 처리하시나요?

• Spinner?
• Skeleton Loading?
• 혹은 또 다른 방식?

💡 Skeleton Loading은 단순한 로딩 표시 이상의 가치를 제공합니다.
⚡ Jetpack Compose의 Modifier 확장을 활용하면 간단하면서도 ✨ 일관된 사용자 경험을 만들 수 있습니다.