MAUI CollectionView에서 스크롤 중 상태 변경이 성능을 망가뜨리는 이유와 최적 해결 패턴

MAUI CollectionView를 사용할 때 가장 흔한 성능 저하 원인은 스크롤 중 항목의 상태가 변경되면서 발생한다. 예를 들어 체크박스 선택, 버튼 클릭 시 상태 값 변경, 다운로드 진행률 업데이트, 항목 활성화 토글 등이 스크롤 중 발생하면 스크롤이 끊기거나 프레임이 떨어지는 현상이 즉시 나타난다. 이번 글에서는 왜 상태 변경이 성능을 망치게 되는지 내부 구조를 분석하고, 이를 방지하기 위한 최적 패턴들을 실무 기준으로 정리한다.

 

1. 스크롤 중 상태 변경이 성능을 떨어뜨리는 원인
CheckBox 변경, ProgressBar 업데이트, 텍스트 변경 등은 레이아웃 재계산을 유발하며 FPS 저하의 직접 원인이 된다.

2. PropertyChanged 폭주 문제
항목 ViewModel의 다중 속성이 동시에 변경되면 Binding 재적용이 반복되어 가상화가 깨질 수 있다.

3. Command 실행의 부작용
스크롤 중 삭제, 정렬 변경 등이 발생하면 TemplateInvalidate가 전체 셀에 전파될 수 있다.

4. 해결 전략

• 실시간 업데이트는 지연 처리
• UI 구조 변경 금지, IsVisible만 조정
• Soft Delete 사용
• Overlay로 상태 처리
• SelectionMode는 Single 유지

5. 결론
CollectionView 성능 저하의 절반 이상은 “상태 변경 타이밍”에서 발생한다.
Debounce, 구조 고정, Overlay 전략을 적용하면 스크롤 성능은 극적으로 개선된다

 

 

 

---

1. 스크롤 중 상태 변경 State Change가 성능을 떨어뜨리는 핵심 원리

CollectionView는 다음 순서로 셀을 관리한다.

1, 화면에 필요한 셀만 바인딩
2, 스크롤 방향에 따라 셀 재사용
3, 필요할 때만 BindingContext를 교체
4, UI 요소의 변경 발생 시 레이아웃 재계산
5, 레이아웃 재계산이 늘어나면 가상화 효율이 떨어짐

문제는 스크롤 중 상태 변경이 발생하면 레이아웃 엔진이 재계산을 너무 자주 수행한다는 점이다. 그러면 Virtualization이 제대로 작동하지 않아 성능이 급격히 떨어진다.

---

1,1 CheckBox나 Toggle 상태가 바뀌면 셀 전체가 다시 레이아웃됨

특히 다음과 같은 상황이 매우 위험하다.

• CheckBox IsChecked 변경
• Label Text 변경
• Image 소스 변경
• Button 텍스트 변경
• ProgressBar 진행률 업데이트

상태 값이 바뀔 때마다 셀의 높이, 정렬, 가시성 등을 다시 계산하게 되어 스크롤이 끊기게 된다.

---

1,2 PropertyChanged 이벤트 폭주 문제

ItemViewModel에서 다양한 속성이 INotifyPropertyChanged로 구현되어 있으면 스크롤 중 아래 현상이 나타난다.

• PropertyChanged 이벤트가 한 번에 여러 개 발생
• 그때마다 UI 재바인딩
• 셀 재사용이 중단되고 새로운 셀을 만들게 됨
• 병목이 생기면서 프레임이 떨어짐

이 문제는 특히 다운로드 진행률, 스트리밍 목록, 로그 리스트 등 실시간 업데이트가 많은 화면에서 심각하게 나타난다.

---

1,3 스크롤 중 Command 실행이 TemplateInvalidate를 유발하는 경우

Button Command나 탭 제스처가 스크롤 중 실행되면 TemplateInvalidate가 전체 셀에 전파되어 가상화가 깨질 수 있다.

예

• 리스트 중 하나 삭제
• 항목 색상 변경
• 정렬 방식 변경
• 내부 Layout 속성 변경

이런 변경 사항이 스크롤 상황과 겹치면 화면 전체가 흔들리거나 성능이 급격히 나빠지는 것을 쉽게 볼 수 있다.

---

2. 스크롤 중 상태 변경을 방지하기 위한 최적 패턴

스마트하게 상태 변경을 제어하면 문제가 크게 감소한다.

---

2,1 UI 즉시 반영 대신 지연 업데이트 Deferred Update 적용

실시간으로 속성을 변경하는 대신 일정 시간 동안 모아서 UI에 반영한다.

예시 패턴

• 체크박스 선택은 즉시 반영
• ProgressBar는 100ms 단위로 업데이트
• 텍스트 변경은 모아서 일정 간격으로 실행

이 방식을 적용하면 PropertyChanged 이벤트 폭주를 막을 수 있다.

---

2,2 셀 내부 UI 구조는 절대 바꾸지 말고 Visibility만 조정

UI 구조 변경이 가장 무겁기 때문이다.

나쁜 예

• 버튼을 다른 컨트롤로 변경
• Grid 행 추가
• TemplateSelector 조건 변경

좋은 예

• Control은 그대로 두고 IsVisible만 On, Off
• 색상만 변경
• 텍스트만 변경

---

2,3 이벤트 핸들러는 화면 전체에 영향을 주지 않도록 격리

리스트 항목 하나가 변경되더라도 전체 CollectionView가 재그리기 되면 성능이 즉시 나빠진다.

해결 패턴

• 항목 ViewModel만 업데이트
• CollectionView 전체 Refresh는 하지 않기
• Remove 대신 Soft Delete 방식 활용

Soft Delete 예

 

item.IsDeleted = true; // UI에서는 숨김 처리

---

2,4 다운로드 진행률, 실시간 상태 변화는 CollectionView가 아닌 Overlay로 표시

아래 구조가 가장 성능이 좋다.

• 리스트는 변경 없음
• 진행률 표시만 별도 Overlay View에서 관리
• 또는 Window Popup에 표시

리스트 자체의 상태를 자주 바꾸지 않기 때문에 스크롤 성능이 매우 안정적이다.

---

2,5 SelectionMode를 Single 또는 None으로 유지

SelectionMode.Multiple은 스크롤 중 상태 변화가 더 잦아서 성능 저하를 일으킨다. 가능한 경우 단일 선택으로 유지한다.

---

3. 실무에서 가장 안전한 상태 업데이트 모델 정리

아래는 대용량 리스트에서 가장 안정적인 패턴이다.

1, 리스트 항목 상태는 최소한만 변경
2, 변경 시 UI 구조 자체는 절대 바꾸지 않음
3, PropertyChanged 이벤트는 Debounce 또는 Throttle 적용
4, 스크롤 중에는 실시간 데이터 반영을 최대한 피함
5, 템플릿 구조는 변화 없이 Visibility만 조정
6, UI 업데이트는 메인 스레드에서 한 번에 적용

이 패턴을 적용하면 수천 개 항목에서도 스크롤 끊김 없이 부드럽게 동작한다.

 

---

4. 디버깅 팁 상태 변경이 성능을 죽이는지 확인하는 방법

아래처럼 상태 변경이 발생할 때 로그를 찍어보면 성능 저하 원인을 찾기 쉽다.

 

PropertyChanged += (_, e) => Debug.WriteLine($"{e.PropertyName} updated");

스크롤하는 동안 로그가 폭주한다면 그것이 병목의 원인이다.
이 경우 가장 먼저 Debounce를 적용해야 한다.

---

5. 결론 스크롤 중 상태 변경은 CollectionView 성능의 최대 적이다

MAUI CollectionView는 가상화 구조가 강력하지만, 상태 변경이 잦으면 성능은 즉시 저하된다.
특히 실시간 상태 업데이트가 많은 화면에서는 Debounce, 구조 고정, Visibility 패턴이 필수이다.
이 글에서 소개한 원리와 최적 패턴을 적용하면 스크롤 부하를 크게 줄이고 안정적인 렌더링 성능을 확보할 수 있다.