사용자 경험을 고려한 NestedScroll 계층 구조 전략

[pachuho]

개요

개발하고자하는 화면은 앱의 메인화면으로, 다양한 컴포넌트로 구성되어 있다.
제한된 화면 안에서 사용성을 해치지 않으면서 모든 구성요소들을 적절하게 표시하는 전략이 필요했다.
이런 구성을 한 화면에 알맞게 담기 위해 중첩 스크롤과 고정헤더 그리고 스크롤 이벤트 발생 시 우선순위 조정을 기획에 맞게 처리하였다.
그 과정에서 겪은 이슈와 해결 방법을 정리한다.

Published in Goqual

배경

원본	컴포넌트 영역 표시

사용자 경험을 고려하며 적절한 화면 스크롤 처리 전략을 구성하기 위해 다음 기획을 따른다.

1. AppBar와 Bottom Navigation을 제외한 나머지 영역에 대해 스크롤이 가능하다.
2. 기기 목록은 전체 영역에 대한 스크롤과 별개로 내부적으로 스크롤될 수 있다.
3. 전체 영역 스크롤 시 방 목록은 사라지지 않고 AppBar 하위에 고정되어야 한다.
4. 연결된 기기가 없거나 스크롤 할 만큼 기기 수가 표시되지 않더라도 방 목록이 App Bar 하위에 위치할 때 까진 화면 스크롤이 가능 해야한다.
5. 기기 목록을 스크롤하더라도 상위 영역이 표시된 상태라면 상위 뷰가 우선 스크롤 된다.

[pachuho]

중첩 스크롤 처리

기획 1.AppBar와 Bottom Navigation을 제외한 나머지 영역에 대해 스크롤 처리

AppBar와 동일 계층에 스크롤 가능한 영역을 먼저 구현했다.
이때 화면 전체 영역을 스크롤 가능하게 하려면 두가지 방식을 고려할 수 있다.

1. Column의 modifier에 scrollState를 설정한다.
2. Column을 Lazy Column으로 대체한다.

1번 방식은 최소한의 코드 수정만으로 스크롤을 처리할 수 있다는 장점이 있지만,
기획 5번을 구현을 하기 위해선 pointerInput 등으로 터치 이벤트를 직접 커스텀하는 방식을 사용해 스크롤 동작을 우회 해야하며
이로 인해 안정성이 떨어질 수 있다. 따라서 2번 방식을 채택하면서 추후에 LazyColumn + stickyHeader + item(grid) 패턴을 적용하였다.

---

기획 2.기기 목록은 전체 영역에 대한 스크롤과 별개로 내부적으로 스크롤될 수 있다.

기기 목록을 표시하기 위해 기존에 사용하는 LazyVerticalGrid는 기본적으로 스크롤을 제공한다.
다만, LazyVerticalGrid 상위 뷰에 스크롤이 가능한 뷰가 위치하는 경우 LazyVerticalGrid 최대 높이를 지정 해주어야한다.

지정하지 않는 경우 다음 에러가 발생한다.

java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()). If you want to add a header before the list of items please add a header as a separate item() before the main items() inside the LazyColumn scope. There are could be other reasons for this to happen: your ComposeView was added into a LinearLayout with some weight, you applied Modifier.wrapContentSize(unbounded = true) or wrote a custom layout. Please try to remove the source of infinite constraints in the hierarchy above the scrolling container.

LazyVerticalGrid는 스스로 길이(여기서는 높이)를 결정하고 스크롤 가능한 컴포넌트이다.
지금과 같이 상위에 스크롤이 가능한 LazyColumn이 배치되면 한 화면에 두 개의 스크롤 가능한 컴포넌트가 겹쳐지고
외부 Column이 얼마나 길어질 수 있는지 계산을 못해 내부 컴포넌트인 LazyGrid의 높이가 무한한 값으로 처리된다.
그래서 Compose 시스템이 이를 감지하고 IllegalStateException이 발생되는 것이다.

이를 해결하기 위해 LazyColumn를 감싸는 BoxWithConstraints를 생성하여 뷰가 가질 수 있는 최대 높이를 가져와 LazyVerticalGrid에 적용해주었다.

BoxWithConstraints {
    val height = this.maxHeight

    LazyColumn(
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        item {
            LazyVerticalGrid(modifier = Modifier.height(height))
        }
    }
}

apply_nestedScroll.mp4

[pachuho]

스크롤 시 특정 컴포넌트 고정 및 적절한 높이 계산

기획3.전체 영역 스크롤 시 방 목록은 사라지지 않고 AppBar 하위에 고정되어야 한다.

LazyColumn를 상위 뷰로 채택한 덕분에 item 대신 stickyHeader를 사용하여 방 목록을 고정시킬 수 있다.

stickyHeader {
    RoomComponent(uiState.home.rooms)
}

apply_stickyHeader.mp4

위 영상에서는 크게 문제 없어 보이지만 기기 목록이 없거나 적은 경우,
방 목록에 기기 목록 상단이 가려지는 문제가 생긴다.

before_fix_height.mp4

이를 해결하기 위해서는 기기목록이 적용된 LazyVerticalGrid의 높이를 수정해야한다.
기존 상위 뷰의 최대 높이에서 고정된 방 목록의 높이 만큼을 제거해주면 된다.

BoxWithConstraints {
    // 화면에서 스크롤 가능한 높이
    val height = this.maxHeight

    // 방 목록의 높이
    var roomHeight by remember { mutableIntStateOf(0) }

    LazyColumn(
        modifier = Modifier.fillMaxWidth(),
        state = parentListState,
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        stickyHeader {
            RoomComponent(
                modifier = Modifier.onGloballyPositioned { // 방 목록 높이 가져오기
                    roomHeight = it.size.height
                },
                rooms = uiState.home.rooms
            ) {
                // TODO
            }
        }

        item {
            LazyVerticalGrid(
                modifier = Modifier.height(height - roomHeight.pxToDp()) // 전체 높이 - 방 목록 높이
            )
        }
    }
}

계산된 높이를 LazyVerticalGrid높이에 적용함으로써 기기 목록 상단이 가려지는 문제와 기획4를 처리할 수 있었다.

after_fix_height.mp4

[pachuho]

NestedScroll 계층 구조

기획5. 기기 목록을 스크롤하더라도 상위 영역이 표시된 상태라면 상위 뷰가 우선 스크롤 된다.

현재 사용자가 기기 목록을 스크롤 할때 화면의 절반도 안되는 영역을 스크롤 한 다음 전체 영역이 스크롤 되는 구조다.
만약 기기가 매우 많은 사용자라면 상단 영역을 스크롤한 뒤 기기 목록을 스크롤 하거나 모든 기기 목록을 스크롤 해야 기기를 보여주는 영역이 넓어지는 불편함을 겪을 것이다.

이를 해결하기 위해 두 스크롤의 상태를 확인하고 스크롤 이벤트 우선순위를 지정한다.

1. 상태 값 준비

// LazyColumn의 스크롤 위치와 상태를 관리하는 State로 현재 LazyColumn이 어느 만큼 스크롤됐는지, 몇 번째 아이템이 화면에 보이는지를 알 수 있다.
val parentListState = rememberLazyListState()

// LazyVerticalGrid의 스크롤 상태로 grid의 현재 스크롤 상태 파악 및 조작에 사용된다.
val gridListState = rememberLazyGridState()

// LazyColumn 내에서 그리드(Grid)가 몇 번째에 들어오는지를 의미하는 인덱스
val gridStartIndex = 3

2. NestedScroll 동작 분배

겹쳐진 스크롤 컴포넌트에서 터치/스크롤 이벤트를 부모와 자식 사이에서
어떻게 분배할지 결정해야 한다. 이러한 상황에서 NestedScrollConnection를 사용하면 적절히 처리할 수 있다.

val nestedScrollConnection = object : NestedScrollConnection {
    override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
        println("Received onPreScroll callback.")
        return Offset.Zero
    }

NestedScrollConnection 클래스가 제공하는 함수 중 onPreScroll는 터치/드래그 이벤트가 컴포넌트에 전달되기 직전에 호출된다.
여기서 스크롤 이동량을 부모에 넘길 수 있다.

해당 기능을 이용해 상위 뷰에 부착해둔 parentListState의 상태 값을 조건으로
하위 뷰 스크롤 이동량을 상위 뷰로 넘기면 원하는 기획 의도에 맞출 수 있다.

if (parentListState.firstVisibleItemIndex < gridStartIndex)

상위 뷰를 우선 스크롤해야하는 상황은 다음과 같으며 위 코드로 적용할 수 있다.

• LazyColumn의 현재 최상단에 보이는 item의 index가 gridStartIndex보다 작은 경우

처음에는 보이는 첫 아이템이 gridStartIndex이더라도 아직 완전히 top에 도달하지 않아 offset이 남아있는 경우도 분기 조건에 추가하려 했으나 제거하였다. 해당 조건을 조건을 추가한다면 남아있는 offset을 계산하여 완전히 방 목록이 고정된 상태에서 기기 목록이 움직이는 안정성을 확보할 수 있다. 하지만 현재 stickyHeader로 고정된 영역 높이를 제외한 높이를 기기 목록에 할당하고 있다. 이때 parentListState.firstVisibleItemScrollOffset에서 가져온 값과 roomHeight 단위가 달라 오차가 발생하여 스크롤이 되지 않는 오작동 문제를 직면하여 이를 제거하였다.

조건에 부합하는 경우 부모 스크롤에 이벤트를 넘기기 위해 LazyListState.dispatchRawDelta에 offset 값을 넘겨주면 된다.

val nestedScrollConnection = remember(parentListState) {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                if (parentListState.firstVisibleItemIndex < gridStartIndex) {
                    parentListState.dispatchRawDelta(-available.y)
                    return Offset(0f, available.y)
                }
                return Offset.Zero
            }
        }
    }

이렇게 구현한 nestedScrollConnection를 Modifier.nestedScroll를 이용해
하위 스크롤에 부착하면 의도한 대로 작동한다.

final_result.mp4