MAUI CollectionView SelectionMode가 성능 저하와 구조적 충돌을 일으키는 이유와 최적의 설계 가이드

MAUI CollectionView의 SelectionMode는 단순히 항목을 선택할 수 있도록 하는 옵션처럼 보이지만, 실제 동작 원리를 분석하면 템플릿 구조, 데이터 흐름, 상태 변화 처리, 렌더링 파이프라인 전체에 영향을 준다는 사실을 알 수 있다. 특히 SelectionMode를 Multiple로 사용할 때는 내부적으로 SelectionChanged 이벤트가 빈번하게 발생하며 BindingContext 교체, VisualState 변경, Template 재측정 등 다양한 오버헤드를 동반한다. 이 오버헤드는 CollectionView Virtualization 효율을 떨어뜨리고 스크롤 성능 저하로 이어질 뿐 아니라 체크박스 기반 UI와 충돌하여 예측 불가능한 상태 불일치를 유발하기도 한다.

이번 글에서는 개발자들이 놓치기 쉬운 SelectionMode 내부 처리 과정을 분석하고, 성능과 안정성을 동시에 확보할 수 있는 설계 전략을 자세히 정리한다.

 

 

요약 카드

MAUI CollectionView SelectionMode 성능 영향 요약

1. SelectionMode가 성능을 떨어뜨리는 이유

• SelectionChanged 이벤트가 스크롤 중 반복 호출됨
• 선택 상태 변경 시 VisualStateManager가 템플릿 전체를 재평가
• 셀 재사용 과정에서 “이전 선택 상태 잔여 현상” 발생
• Multiple 모드에서 체크박스와 충돌하여 상태 불일치 및 프레임 저하
• 선택 강조 UI가 Layout Reflow를 유발하여 스크롤 성능 하락

---

2. 안정적인 선택 구조를 위한 설계 전략

• 체크박스 UI 사용 시 SelectionMode="None" 이 가장 안전
• Multiple 선택이 필요하면 SelectionModel을 직접 구현
• Single 선택은 비교적 안전하나 템플릿 복잡도는 줄여야함
• VisualState 대신 직접 바인딩으로 색상만 변경해 Reflow 최소화
• Virtualization과 충돌하지 않도록 템플릿 단순화 필수

---

3. 실무에서 사용되는 최적 패턴

• SelectionMode.None + CheckBox + SelectedItems 직접 관리
• 템플릿은 Grid 한 개, 텍스트는 2개 이하, Margin 최소화
• VisualStateManager 최소 사용
• 스크롤 성능 목표 시 선택 모델을 UI에서 최대한 분리

---

4. 결론
SelectionMode는 단순 옵션이 아니라
UI 상태 관리, 렌더링 성능, 셀 재사용 구조 전체에 영향을 주는 핵심 요소이다.
올바른 설계 원칙을 적용하면 선택 기능과 성능을 모두 안정적으로 유지할 수 있다.

---

1. SelectionMode가 성능 문제를 일으키는 핵심 원인

SelectionMode는 내부적으로 다음 세 가지 레이어에서 이벤트와 UI 변경을 유발한다.

---

1,1 SelectionChanged 이벤트 폭주 문제

SelectionMode의 변경이 발생할 때 MAUI는 다음 작업을 수행한다.

1. 이전 선택 상태 확인
2. 새 선택 목록 생성
3. 항목별 VisualState 업데이트
4. BindingContext 다시 확인
5. UI 강제 갱신

이 과정은 스크롤 도중에도 발생할 수 있으며, 특히 Multiple 모드에서는 항목이 스크롤될 때마다 가상화된 셀의 재진입으로 인해 SelectionChanged가 반복적으로 호출된다. 이는 GC Alloc을 유발하고 UI 스레드 부하를 증가시킨다.

---

1,2 VisualStateManager가 셀 재사용과 충돌

SelectionMode는 기본적으로 선택된 셀에 VisualState "Selected"를 적용하는 방식으로 동작한다.
문제는 다음 상황에서 발생한다.

• 셀 재사용 시 이전 SelectionState 잔여
• VisualStateManager가 템플릿 내부 모든 요소를 다시 측정
• UI 반응이 느려지며 깜빡임 Flicker 현상 발생

가상화 구조에서는 셀이 재사용되므로 “이전 선택 상태가 남아 있는 문제”가 자주 발생한다. 이는 체크박스 UI와 결합되면 상태 불일치로 이어진다.

---

1,3 SelectionMode.Multiple은 구조적으로 체크박스와 충돌

일반적으로 개발자들은 체크박스를 항목 선택 UI로 사용하려 하지만
SelectionMode.Multiple과 체크박스를 동시에 사용하면 다음 충돌이 발생한다.

• CheckBox 변경 → PropertyChanged 발생
• PropertyChanged 변경 → SelectionChanged 발생
• SelectionChanged → 템플릿 다시 계산
• 다시 UI 갱신 → CheckBox 상태 재평가

이 순환 루프가 반복되면 스크롤 중 프레임이 떨어지고 셀 재사용이 비효율적으로 돌아간다.

특히 Android 환경에서는 이 현상이 매우 두드러져서 체크박스가 스크롤 중 제멋대로 On Off되는 버그가 흔하게 나타난다.

---

1,4 선택 상태 변경은 레이아웃 재계산을 유발

SelectionMode는 선택된 셀을 강조하기 위해 VisualState를 적용한다.
이때 다음 레이아웃 변경이 발생할 수 있다.

• 배경색 변경
• 크기 변화
• 텍스트 색상 변경
• Border 또는 Highlight 표시

이러한 변경은 Layout Reflow를 유발하며 스크롤 중 발생하면 FPS가 떨어지는 원인이 된다.

---

2. SelectionMode를 안정적으로 사용하기 위한 설계 전략

---

2,1 체크박스를 사용하는 경우 SelectionMode를 None으로 설정

가장 안정적인 패턴
✔ SelectionMode="None"
✔ 체크박스 또는 Toggle로 선택 모델을 직접 구현

이 방식은 다음 장점이 있다.

• SelectionChanged 이벤트가 발생하지 않음
• VisualState 변경 비용이 없음
• 셀 재사용 시 상태 불일치가 사라짐
• 성능이 가장 부드럽게 유지

실무 프로젝트 대부분이 사용하는 방식이다.

---

2,2 Single 선택은 SelectionMode.Single로 사용해도 무방

Single 선택은 Multiple보다 훨씬 가볍다.
선택 상태는 1개만 유지하므로 VisualState 갱신 비용이 작고 SelectionChanged도 단발성이다.

아래와 같은 UI에 적합하다.

• 목록 중 하나를 선택하고 상세 페이지 표시
• 옵션 선택
• 단일 체크 UI

단 템플릿이 복잡할 경우 VisualState 적용 시 성능 저하가 있을 수 있으므로 조정이 필요하다.

---

2,3 Multiple 선택이 필요한 경우 SelectionModel을 직접 구현

SelectionMode.Multiple을 그대로 사용하면 병목이 많기 때문에 개발자들이 직접 SelectionModel을 구현하는 방식이 더 안정적이다.

핵심 아이디어

• ObservableCollection SelectedItems 유지
• ItemTapped 또는 CheckBox 변경 시 직접 추가 및 제거
• UI 템플릿의 VisualState는 최소한으로 유지

이를 통해 SelectionChanged 이벤트 폭주를 제거할 수 있다.

---

2,4 VisualState 대신 단순 스타일 변경 사용

VisualState는 내부적으로 트리 전체를 탐색하고 각 요소에 대한 상태를 재평가하기 때문에 비용이 크다.
더 가벼운 방식은 다음과 같다.

 

<Border BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColor}}" />

VisualState 없이 색상만 변경하면 Reflow 비용이 크게 줄어들고 스크롤이 안정된다.

---

2,5 Virtualization과 SelectionMode의 충돌 방지

Virtualization은 스크롤 성능의 핵심이지만 SelectionMode와 충돌할 때 성능이 급격히 나빠진다.
따라서 다음을 반드시 지켜야 한다.

• 셀 높이 고정 HeightRequest 지정
• Grid 단순화
• Margin 최소화
• Text 요소 수를 줄이기
• 이미지 Downsample 적용

템플릿이 가벼울수록 SelectionMode 효과가 부드럽게 유지된다.

---

3. SelectionMode와 체크박스 UI를 함께 사용하는 올바른 패턴

잘못된 방식
❌ SelectionMode="Multiple"
❌ CheckBox IsChecked와 IsSelected를 양방향 바인딩

올바른 패턴
✔ SelectionMode="None"
✔ 체크박스에서 SelectionModel을 직접 관리
✔ ViewModel에서 SelectedItems 리스트를 유지
✔ UI를 단순한 스타일로 유지

이 방식은 성능과 안정성을 모두 확보한다.

---

4. MAUI 내부 Selection 파이프라인 완전 분석

Selection 흐름은 아래 순서로 진행된다.

1. 사용자가 탭 또는 클릭
2. CollectionView 내부 SelectionController에서 선택 상태 변경
3. SelectionChanged 이벤트 발생
4. VisualStateManager가 템플릿 내 모든 요소 재평가
5. Layout Reflow 발생 가능
6. 셀 재사용 시 잔여 상태가 남을 경우 상태 불일치 발생

이 구조를 이해하면 SelectionMode를 잘못 사용했을 때
왜 FPS가 떨어지고
왜 체크박스가 꼬이고
왜 UI가 깜빡이는지
완벽하게 이해할 수 있다.

 

---

5. 결론 SelectionMode는 단순 옵션이 아니라 UI 전체 설계에 영향을 준다

이번 글에서 다룬 것처럼 SelectionMode는

• 템플릿 구조
• 상태 모델링
• 스크롤 성능
• 셀 재사용
• VisualState
• 바인딩
  에 모두 영향을 준다.

따라서 다음 원칙은 필수이다.

✔ 체크박스를 사용하는 경우 SelectionMode는 None
✔ Multiple은 직접 SelectionModel 구현
✔ Single은 비교적 안전
✔ VisualState는 최소한으로 사용
✔ 템플릿은 반드시 단순화

이 원칙을 따르면 CollectionView의 성능과 안정성이 체감될 정도로 개선된다.