Jetpack Compose 오버 스크롤 효과 제거 방법 (LazyColumn & Column)

 

Jetpack Compose에서 LazyColumn, Column 등 스크롤 가능한 컴포넌트는 기본적으로 오버 스크롤(Edge Glow) 효과가 적용됩니다. 이러한 오버 스크롤 효과는 앱의 디자인 요구에 따라 불필요할 수 있습니다. 이 글에서는 오버 스크롤 효과를 제거하는 방법에 대해 자세히 알아보겠습니다.

 

---

1. LazyColumn 오버 스크롤 제거

Jetpack Compose의 LazyColumn에서 오버 스크롤 효과를 제거하려면 LocalOverscrollConfiguration을 활용해야 합니다.

🔹 코드 예제

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalOverscrollConfiguration
import androidx.compose.runtime.CompositionLocalProvider

@Composable
fun NoOverscrollLazyColumn() {
    // 오버 스크롤 효과 제거
    CompositionLocalProvider(LocalOverscrollConfiguration provides null) {
        LazyColumn(modifier = Modifier.fillMaxSize()) {
            items(50) { index ->
                Text(text = "Item $index")
            }
        }
    }
}

🔍 설명

• CompositionLocalProvider(LocalOverscrollConfiguration provides null) 코드를 사용하여 오버 스크롤 효과를 비활성화합니다.
• 이 방법은 LazyColumn, LazyRow, LazyVerticalGrid 등에 모두 동일하게 적용할 수 있습니다.

---

 

2. Column 오버 스크롤 제거

Column은 기본적으로 스크롤 기능이 없습니다. 따라서 Modifier.verticalScroll()을 사용해 스크롤을 추가한 후 오버 스크롤 효과를 제거해야 합니다.

🔹 코드 예제

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalOverscrollConfiguration
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.foundation.rememberScrollState

@Composable
fun NoOverscrollColumn() {
    CompositionLocalProvider(LocalOverscrollConfiguration provides null) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
        ) {
            repeat(50) { index ->
                Text(text = "Column Item $index")
            }
        }
    }
}

 

🔍 설명

• Column은 기본적으로 스크롤이 비활성화되어 있으므로 Modifier.verticalScroll()과 rememberScrollState()를 조합하여 스크롤 기능을 추가합니다.
• LocalOverscrollConfiguration provides null로 설정하여 오버 스크롤 효과를 제거합니다.
•  

---

 

3. 오버 스크롤 제거가 필요한 경우

• 앱의 UI 디자인이 미니멀하거나 특정 애니메이션이 요구될 때
• 사용자 경험(UX)에서 오버 스크롤 효과가 어색하거나 불필요할 때
• 특정 레이아웃에서 스크롤 효과를 제한해야 할 때

 

---

 

4. 요약

컴포넌트 스크롤 방법 오버 스크롤 제거 방법

LazyColumn	기본 스크롤 지원	LocalOverscrollConfiguration provides null
Column	verticalScroll() 필요	LocalOverscrollConfiguration provides null

 

---

결론

Jetpack Compose에서는 오버 스크롤 효과를 간단히 비활성화할 수 있습니다. 특히 LazyColumn, Column 등 다양한 스크롤 컴포넌트에서 동일한 방식으로 적용할 수 있으므로 디자인 요구에 맞춰 활용해 보세요.

반응형