MAUI CollectionView에서 빠르게 스크롤하면 체크 상태나 UI가 잘못 보이는 ‘플래시 오류·유령 상태’ 문제의 근본 원인과 해결 전략

MAUI CollectionView를 스크롤할 때, 특히 빠르게 위아래로 움직이거나 여러 항목을 빠르게 체크·해제하는 상황에서 UI가 잠깐 잘못 표시되는 현상이 발생할 수 있다. 흔한 예로 다음과 같은 상황이 있다.

• 화면을 빠르게 스크롤하면 체크되지 않은 항목이 잠깐 체크된 것처럼 깜빡임
• 이미 체크한 항목이 스크롤 후 잠시 해제된 것처럼 보였다가 다시 돌아옴
• 스크롤이 매우 빠르면 Label·Image·CheckBox 등의 UI 요소가 이전 셀의 정보를 잠시 노출
• 선택하지도 않은 항목이 체크된 것처럼 보였다가 사라지는 ‘유령 상태(Ghost State)’ 발생
• Android에서 특히 심하게 발생하며 iOS에서도 드물지만 동일 현상이 존재

이 현상은 UI 바인딩 구조의 단순 오류가 아니라, MAUI의 가상화(Virtualization) 구조, RecyclerView의 렌더링 스케줄, BindingContext 재주입 타이밍, Template Recycling 로직 등이 겹쳐 발생하는 복합적인 구조적 문제다. 개발자 입장에서는 "코드는 맞는데 UI가 일시적으로 틀리게 보이는" 상황이라 디버깅 자체가 어렵고, 실제로 많은 MAUI 초급·중급 개발자들이 이 문제로 고생한다.

이번 글에서는 이 플래시 오류가 발생하는 원인을 깊이 있게 분석하고, 실무에서 이를 완화하거나 해결할 수 있는 전략을 단계적으로 정리한다.

---

1. 플래시 오류가 발생하는 가장 근본 원인 — Template Recycling 속도가 BindingContext 갱신보다 빠르다

MAUI CollectionView는 성능을 위해 들어온 셀을 버리지 않고 재활용한다. 이때 다음 순서가 동시에 일어나면서 플래시 오류가 나타난다.

1. 스크롤 속도가 빠를 때, 셀 템플릿이 재활용됨
2. 재활용된 셀은 잠깐 동안 이전 항목의 UI 상태를 유지
3. BindingContext 교체가 조금 늦게 반영
4. 그 짧은 타이밍 동안 UI가 “이전 데이터”를 잠시 보여줌
5. 다음 렌더링 프레임에서 올바른 값으로 업데이트됨

따라서 개발자가 정상적인 MVVM 코드를 작성해도
UI가 0.05초 정도 잘못 보였다가 다시 맞는 상태로 바뀌는 현상
이 나타나는 것이다.

특히 Android는 다음 이유로 이 현상이 더 심하다

• RecyclerView의 Predictive Layout
• UI 스레드에서 Measure/Arrange가 비동기적으로 실행
• 스크롤 중 GC(가비지 컬렉션) 개입
• 동시에 여러 셀이 바인딩 재적용

이 구조는 Flutter, React Native에서도 보고되는 공통 문제이지만
MAUI는 특히 CheckBox, Switch 같은 상태 기반 컨트롤에서 문제가 크게 나타난다.

---

2. 플래시 오류 원인 2 — CheckBox의 시각적 상태가 데이터와 별도로 캐싱된다

CheckBox 컨트롤은 실제 데이터 상태(IsChecked)와 시각 상태(VisualState)를 분리하여 관리한다.
따라서 다음 상황이 발생한다.

• 셀 템플릿 재활용 시 VisualState는 초기화되지 않음
• BindingContext는 새로운 데이터를 가리키지만
• CheckBox UI는 이전 상태(true 또는 false)를 그대로 유지
• 몇 ms 뒤에 BindingContext가 적용되면 그제서야 올바르게 바뀜

즉 스크롤 시 "이전 항목의 체크 UI가 잠깐 보였다 사라짐"
이 정확한 재현 구조다.

---

3. 플래시 오류 원인 3 — LineBreakMode, AutoSize Label, Image 높이 변경 등 레이아웃 변경 요소

셀 내부 UI 중 하나라도 “높이가 바뀔 수 있는 요소”가 있으면 아래 문제가 발생한다.

• 레이아웃 엔진이 Measure를 다시 실행
• 셀의 높이가 달라지면서 스크롤 엔진이 위치 계산을 새로 함
• 재활용된 셀의 UI가 잠시 이전 상태를 노출
• 스크롤링과 동시에 UI가 갱신되므로 순간적인 플래시 발생

즉, 셀 높이가 고정되지 않으면 플래시 오류는 필연적으로 더 자주 발생한다.

플래시 발생 위험이 높은 UI 요소는 다음과 같다

• 자동 크기 조정(Label AutoSize, Multi-line)
• 문자열 길이에 따라 셀 전체의 높이가 변하는 텍스트
• 이미지 크기 자동 조절
• 동적 Visibility 조정되는 Layout

이 요소들이 조합되면 MAUI CollectionView는 스크롤 중 안정성을 보장할 수 없다.

---

4. 플래시 오류 원인 4 — ObservableCollection 변경 시 UI가 빗나가는 경우

빠르게 스크롤하는 동안 항목이 추가·삭제되면 CollectionView의 내부 버퍼링된 템플릿이 뒤섞인다.

예를 들어

• 현재 화면 중간을 보던 중
• 항목이 하나 삭제되면
• 스크롤 위치 아래 셀들의 BindingContext가 다 바뀜
• 템플릿은 재활용되지만 UI는 재적용되기 전 상태를 잠시 유지

따라서 순간적으로 엉뚱한 체크 상태가 노출되는 것처럼 보인다.
이 현상은 “UI가 잘못되었다”고 느끼지만 실제로는 정상 동작이다.

---

5. 플래시 오류 해결 전략 — 실무에서 가장 효과적인 방법 7가지

✔ 해결책 1: 셀 높이를 반드시 고정하기

플래시 오류의 70%는 셀 높이 고정으로 해결된다.

<Grid HeightRequest="52">

 

 

Label도 한 줄로 고정한다.

<Label LineBreakMode="TailTruncation" MaxLines="1" />

 

---

✔ 해결책 2: CheckBox의 시각 상태를 초기화하는 코드를 추가

템플릿이 재활용될 때 VisualState를 강제로 초기화하면 플래시를 크게 줄일 수 있다.

checkBox.IsChecked = viewModel.IsSelected;

 

 

또는 MAUI 8부터는 VisualStateManager.ResetState 사용 가능.

---

✔ 해결책 3: 셀 내부에서 Margin, Padding, Visibility가 바뀌지 않게 하기

• 체크 여부에 따라 BorderThickness 변경 금지
• 선택된 항목만 Layout이 달라지는 구조 금지
• Label이 길어져 높이가 변하는 구조 금지

---

✔ 해결책 4: RecycleElements=False 옵션 고려

성능은 약간 떨어지지만
플래시 오류는 거의 완전히 사라진다.

<CollectionView RecycleElements="False">

 

 

대부분의 실제 프로젝트에서는 성능보다 안정적인 UI가 더 중요하기 때문에 널리 사용되는 우회 전략이다.

---

✔ 해결책 5: 체크 이벤트를 순간적으로 지연 처리

 

await Task.Delay(1);
item.IsSelected = newValue;

 

Android의 렌더링 프레임과 동기화되는 효과가 있다.

---

✔ 해결책 6: CheckBox 대신 TapGestureRecognizer 기반 토글 UI 만들기

CheckBox는 내부 상태가 두 개(IsChecked + VisualState)라 버그가 생기기 쉽다.
개발자들은 다음 방식으로 “커스텀 체크 UI”를 만든다.

• Frame + Icon 조합
• TapGestureRecognizer로 토글
• 선택 상태는 VM에서 직접 관리

이 방식은 UI 미스매치가 거의 없다.

---

✔ 해결책 7: DataTemplateSelector로 상태 기반 UI를 분리하지 말 것

상태별 템플릿이 다르면 재활용 시 BindingContext 전환 문제가 더 심해진다.
가능하면 하나의 템플릿만 사용하자.

---

6. 가장 중요한 결론 — 플래시 오류는 버그가 아니라 구조적 특성이다

많은 개발자가 이 문제를 “MAUI 버그”라고 생각하지만
실제로는 다음 네 가지가 겹쳐 생긴다.

1. 템플릿 재사용 속도가 BindingContext 교체보다 빠름
2. CheckBox의 상태가 두 단계로 분리되어 있음
3. 셀 높이가 조금이라도 바뀌면 스크롤 엔진이 재계산
4. UI 렌더링이 비동기 처리됨

따라서 이 문제를 100% 제거하는 것은 어렵지만
올바른 전략을 사용하면
99%까지 완화할 수 있고 실사용에서 문제없는 수준으로 안정화할 수 있다