본문 바로가기

MAUI CollectionView에서 스크롤 위치가 갑자기 튀거나, 특정 항목으로 점프하는 문제의 구조적 원인과 해결 전략

@veedeeo 2025. 12. 9. 18:01

MAUI CollectionView 스크롤 튐 현상, 원인과 해결 전략

MAUI 기반 앱에서 CollectionView를 사용하면 리스트가 스크롤 되는 과정에서 예상치 못한 점프 현상이 발생하는 경우가 있다. 사용자가 아래로 스크롤하다가 화면 중간에서 살짝 움직이기만 했는데 갑자기 목록이 맨 위로 이동하거나, 특정 행으로 강제로 이동해버리는 현상이 대표적이다. 이 문제는 특히 CheckBox, Switch, RadioButton처럼 상태 기반 UI 요소가 Cell 내부에 포함된 경우 더 자주 발생한다.

개발자는 Data Binding, ObservableCollection, PropertyChanged 구조를 여러 번 검토해도 원인을 찾지 못하는 경우가 많다. 실제로 이 현상은 MAUI의 레이아웃 사이클, 스크롤 이벤트 처리, 템플릿 재활용, 플랫폼별 스크롤 엔진 차이가 복합적으로 얽혀 발생한다.

핵심 결론은 단순하다. 스크롤 도중 셀의 높이가 조금이라도 변경되면 가상화 리스트 엔진은 Offset을 다시 계산하고, 그 순간 스크롤 점프가 발생한다. 따라서 셀 높이 고정, 상태 기반 UI로 인한 레이아웃 변화 최소화, 스크롤 중 ObservableCollection 변경 금지가 기본 원칙이다.

MAUI CollectionView 스크롤 튐 현상


1. Measure와 Arrange 재실행으로 인한 스크롤 점프

MAUI 레이아웃 엔진은 화면을 그릴 때 Measure와 Arrange 두 단계를 거친다. CollectionView 내부 셀의 높이나 콘텐츠가 동적으로 변하면 이 과정이 스크롤 중간에서도 다시 실행된다.

CheckBox 클릭, 텍스트 길이 변화, 상태 아이콘 표시처럼 미세한 변화만으로도 전체 리스트 Measure가 재실행되고, Android RecyclerView는 Offset 기준점을 다시 계산한다. 이 순간 스크롤 점프가 발생한다.


2. 템플릿 재활용과 셀 높이 오차 누적

CollectionView는 RecycledElement 구조를 사용한다. 모든 셀의 높이가 동일하다고 가정하지만 실제로는 텍스트 길이, 스타일, 상태 변화로 미세한 차이가 발생한다.

이 오차가 누적되면 스크롤 위치 계산이 틀어지고, 결과적으로 화면이 갑자기 튀는 현상이 나타난다. Label AutoSize, Image, CheckBox가 포함된 템플릿에서 특히 심하다.


3. 스크롤 중 ObservableCollection 변경

스크롤 도중 항목 추가, 삭제, 이동, 필터 갱신이 발생하면 MAUI는 변경된 index 이후 셀을 전부 재배치한다. 이 과정에서 Offset과 셀 위치가 다시 계산되며 스크롤 튐은 거의 필연적으로 발생한다.


4. Android RecyclerView 스크롤 엔진 특성

Android RecyclerView는 Predictive Layout을 사용한다. MAUI가 예상 셀 높이를 정확히 전달하지 못하면 RecyclerView는 내부 계산을 리셋하고 스크롤 좌표를 재조정한다. 이 구조적 특성은 MAUI뿐 아니라 다른 크로스 플랫폼 프레임워크에서도 공통적으로 나타난다.


5. 실전 해결 전략

5-1. 셀 높이 완전 고정

스크롤 튐 문제의 대부분은 셀 높이를 고정하는 것만으로 해결된다.

<Grid HeightRequest="52">

5-2. 셀 내부 레이아웃 변경 금지

상태 변경에 따라 Visible, BorderThickness, 텍스트 크기가 변하는 UI는 스크롤 중 레이아웃 변화를 유발한다.

5-3. 스크롤 중 ObservableCollection 변경 금지

가능하면 일괄 처리나 편집 모드 전환으로 변경 시점을 통제한다.

5-4. Android 전용 안정화 우회 전략

await Task.Delay(1);
collectionView.InvalidateMeasure();

5-5. RecycleElements 비활성화 검토

<CollectionView RecycleElements="False">

6. 핵심 결론

셀의 높이가 스크롤 도중 변경되면 스크롤은 반드시 튄다. 이는 MAUI의 단순 버그가 아니라 모든 가상화 리스트 엔진의 구조적 특성이다.


7. 최종 요약

MAUI CollectionView 스크롤 튐 문제는 Measure와 Arrange 재실행, 템플릿 재활용, 셀 높이 변화, ObservableCollection 갱신, Android Predictive Layout이 결합된 결과다.

셀 높이 고정, UI 상태 변경 최소화, 스크롤 중 데이터 변경 통제라는 원칙을 지키면 대부분의 경우 안정적인 스크롤을 구현할 수 있다.

MAUI CollectionView 스크롤 점프 문제 구조 분석

veedeeo
@veedeeo :: .net MAUI·Netlify·SEO·웹 최적화 기술 블로그

.net MAUI·Netlify·SEO·웹 최적화 기술 블로그

공감하셨다면 ❤️ 구독도 환영합니다! 🤗

목차