MAUI CollectionView를 사용할 때 가장 자주 오해되는 성능 문제가 바로 Horizontal 스크롤 성능이다. 많은 개발자들이 Vertical 스크롤은 충분히 부드럽게 동작하는데 Horizontal 레이아웃으로 변경하는 순간 갑자기 끊김이 발생하거나 프레임이 급격히 떨어지는 상황을 경험한다. 특히 카드 스타일 UI, 이미지 가로 스크롤 배너, Youtube 스타일의 Thumbnail List 등을 구현할 때 이러한 문제가 두드러진다. Horizontal 스크롤은 단순히 방향만 다를 뿐인데 왜 성능이 크게 떨어지는지 이해하기 위해서는 MAUI 내부 레이아웃 엔진과 RecyclerView, UICollectionView의 스크롤 처리 방식을 비교해 볼 필요가 있다. 이번 글에서는 이러한 성능 저하의 근본 원인을 기술적으로 분석하고 현업에서 즉시 적용할 수 있는 최적화 기법을 단계별로 정리한다.
요약 카드
MAUI CollectionView Horizontal 스크롤이 느린 이유와 해결 전략
1. Horizontal 스크롤이 느려지는 주요 원인
- Measure 연산 증가
가로 방향은 너비 계산이 복잡해 측정 비용이 세로보다 훨씬 크다. - ScrollView와의 충돌
상하 스크롤과 좌우 스크롤이 동시에 존재하면 레이아웃 재계산이 반복된다. - 이미지 디코딩 병목
가로 배너 스타일 UI는 이미지 교체 빈도가 높아 렌더링 스레드에 부담을 준다. - 높은 레이아웃 비용
Grid, Margin, Shadow 등의 가중치가 가로 환경에서 더 크게 작용한다. - 많은 셀이 한 화면에 노출됨
가로 스크롤은 보이는 셀이 Vertical보다 많아 처리량이 급증한다.
2. 최적화 전략 요약
- ItemSizingStrategy는 반드시 MeasureFirstItem
- 템플릿 단순화(Grid 한 개, Text 두 개 이하)
- 이미지 DownsampleToViewSize 활성화
- ScrollView 중첩 제거
- Margin 최소화
- 보이는 셀 개수 줄이기
3. 결론
Horizontal CollectionView는 Vertical보다 구조적으로 성능 부담이 크다.
따라서 템플릿 구조 간소화와 이미지 최적화가 필수이며
MeasureFirstItem 설정만으로도 20, 30퍼센트 이상의 개선을 기대할 수 있다.
1. Horizontal 스크롤이 Vertical보다 느린 이유 5가지
1,1 Measure 연산이 더 자주 호출되는 구조 때문
Vertical 스크롤에서는 세로 방향 공간만 고려하면 되지만 Horizontal 스크롤은 가로 공간을 기준으로 자식 요소의 크기를 더 세밀하게 측정해야 한다.
특히 다음 상황에서 Measure 연산이 큰 부담을 준다.
- Template 내부에 Auto 크기가 포함된 경우
- 이미지가 가로로 긴 경우
- 텍스트가 길어 가변 너비 측정이 필요한 경우
가로 스크롤은 기본적으로 세로보다 측정 연산이 두 배 이상 발생한다.
1,2 ScrollView + CollectionView 인접 배치 시 계산 충돌
많은 화면이 다음과 같은 구조를 가진다.
- 상단 ScrollView
- 하단 Horizontal CollectionView
이 경우 ScrollView와 CollectionView가 스크롤 공간을 서로 계산하려 하고 이 과정에서 크기 측정이 반복되며 성능이 저하된다.
특히 Android에서 이 현상이 심각하다.
1,3 이미지 디코딩이 가로 스크롤에서 더 자주 발생
가로 스크롤 배너는 보통
- 고해상도 이미지
- 긴 가로 비율
- 화면을 꽉 채우는 썸네일
을 사용한다.
이런 이미지가 빠른 속도로 좌우 이동할 때 디코딩과 바인딩이 반복되므로 렌더링 스레드가 버거워진다.
Vertical 리스트보다 훨씬 많은 이미지가 짧은 시간 안에 교체되기 때문에 병목이 발생한다.
1,4 누적된 Horizontal 레이아웃 비용
MAUI 레이아웃 엔진은 세로보다 가로 계산이 비용이 크다.
Vertical은 Column 하나로 단순 계산이 가능하지만
Horizontal은 Column을 여러 개 두는 것과 비슷한 계산을 반복하기 때문이다.
특히 아래 요소가 있으면 비용이 폭증한다.
- 내부 Grid
- 프레임 Border
- 그림자 Shadow
- 가변 크기 텍스트
여기에 Margin과 Padding이 더해지면 성능은 급격히 떨어진다.
1,5 가로 스크롤은 더 많은 요소를 한 화면에 렌더링한다
세로 스크롤은 최소 6~12개의 셀만 보이지만
가로 스크롤 카드 UI는 화면에 10~20개가 동시에 보이는 경우도 있다.
즉
유효 화면에 더 많은 셀이 노출되므로
더 많은 바인딩
더 많은 이미지 디코딩
더 많은 Measure 연산
이 한 번에 발생한다.
2. Horizontal 스크롤 최적화 전략
2,1 ItemSizingStrategy = MeasureFirstItem 필수
가로 스크롤에서 가장 강력한 최적화는 첫 번째 아이템의 크기를 기준으로 모든 셀을 고정시키는 방식이다.
이 설정만으로 스크롤이 20~30퍼센트 부드러워진다.
2,2 Template 구조 단순화가 필수
Vertical보다 Horizontal에서 템플릿 구조의 영향이 훨씬 크다.
템플릿 구조 최적화 기준
- Grid는 한 개
- Column 두 개 이하
- Text는 1~2개
- 이미지 한 개
- Frame이나 Shadow 제거
이 기준을 어기면 가로 스크롤은 즉시 끊긴다.
2,3 이미지 DownsampleToViewSize 적용
가로 스크롤은 이미지 병목이 50퍼센트를 차지한다.
따라서 이미지 처리는 필수적으로 다운샘플링해야 한다.
Android에서 효과가 특히 크다.
2,4 ScrollView 중첩을 피한다
Horizontal CollectionView가 ScrollView 내부에 있으면
레이아웃 엔진은 두 레벨의 스크롤 계산을 반복한다.
해결책
- ScrollView 밖으로 CollectionView 분리
- 전체를 CollectionView 그룹으로 재구성
2,5 가로 방향에서 Margin 최소화
Margin은 Horizontal 레이아웃에서 성능을 크게 떨어뜨린다.
가능하면 Padding으로 대체하고 외곽 Margin만 적용한다.
2,6 화면에 보이는 셀 수 줄이기
가로 스크롤이 부드러워지는 즉각적인 해결책은 간단하다.
✔ 셀 크기를 조금 키워서 한 화면에 보이는 개수를 줄이기
✔ 아이콘을 단순화하여 렌더링 비용을 줄이기
3. 실전 최적화 적용 예시
문제가 되는 화면 예시
- HorizontalList
- 텍스트 3개
- 버튼 2개
- Frame + Shadow
- 긴 가로 이미지
최적화 후
- 텍스트 2개 이하
- 버튼 1개
- Frame 제거
- Shadow 제거
- 이미지 Downsample
- Grid → 단측 VerticalStackLayout
이렇게 바꾸면 스크롤 FPS는 거의 두 배 가까이 올라간다.
4. 결론 Horizontal 스크롤은 Vertical보다 훨씬 민감하다
Horizontal CollectionView는
- 이미지 병목
- 많은 셀 노출
- 더 복잡한 레이아웃 계산
- ScrollView와의 충돌
등의 이유로 Vertical보다 성능이 훨씬 민감하다.
따라서 가로 스크롤 UI를 만들 때는
Layout Compression
이미지 최적화
템플릿 단순화
ItemSizingStrategy 최적화
의 네 축을 반드시 고려해야 한다.
26번째 글은 Horizontal 스크롤 성능 문제를 깊이 다뤘고
다음 글에서는 CollectionView와 CarouselView 성능 차이를 분석할 예정이다.
'MAUI CollectionView 문제 해결 > Korean Version' 카테고리의 다른 글
| MAUI CollectionView에서 OnBindingContextChanged 타이밍이 셀 상태를 망가뜨리는 구조적 이유와 해결 전략 (0) | 2025.12.25 |
|---|---|
| MAUI CollectionView SelectionMode가 성능 저하와 구조적 충돌을 일으키는 이유와 최적의 설계 가이드 (0) | 2025.12.25 |
| CollectionView에서 부분 업데이트(Partial Update)가 반영되지 않는 이유 (0) | 2025.12.22 |
| CollectionView 이미지 로딩 최적화 (0) | 2025.12.22 |
| CollectionView Preload·Prefetch 설계 (0) | 2025.12.21 |