[UIKit] UITableView, UICollectionView - 데이터를 목록 형태로 보여줄 때 어떤 뷰를 사용하면 좋을까?

 

모바일 앱을 개발하다보면 여러 데이터를 목록 형태로 보여줘야하는 경우가 있습니다.
Apple의 UIKit에는 이렇게 데이터를 목록 형태로 보여주는 방법으로 UITableView(이하 테이블 뷰)나 UICollectionView(이하 콜렉션 뷰) 등을 사용할 수 있는데, 이번 시간에는 테이블 뷰와 콜렉션 뷰의 공통점과 차이점, 그리고 어떤 경우에 어떤 뷰를 사용하는 것이 더 좋은지에 대해 알아보겠습니다.

 

공통점

테이블 뷰와 콜렉션 뷰는 UIKit에서 목록을 표시하는 UI 컴포넌트로, 두 뷰에는 몇 가지 공통점이 있습니다.

 

1. 데이터를 목록 형태로 보여주기 위한 UI 컴포넌트
앞서 설명했듯 테이블 뷰와 콜렉션 뷰는 데이터를 목록 형태로 보여주는데 사용할 수 있습니다.

 

2. Cell 단위 데이터 표시
테이블 뷰와 콜렉션 뷰는 각각의 데이터를 Cell(이하 셀)이라는 단위로 보여줍니다.

 

셀을 등록하는 데는 고전 방식인 register 메서드를 사용하는 방식과 iOS 14 이후의 비교적 최신 방식인 CellRegistration 구조체를 사용하는 방식을 사용할 수 있습니다.

 

테이블 뷰와 콜렉션 뷰는 메모리 효율성을 위해 스크롤할 때 필요 없는 셀을 재사용 큐에 넣고, 필요할 때마다 재사용 큐에서 셀을 꺼내어 재사용합니다.
이렇게 셀을 재사용하기 위해 dequeueReusableCell과 dequeueConfiguredReusableCell을 사용할 수 있습니다.

 

3. 섹션 및 헤더/푸터 지원
테이블 뷰와 콜렉션 뷰는 모두 여러 개의 섹션을 가질 수 있습니다.

 

4. delegate 패턴 사용
UITableView와 UICollectionView는 delegate 패턴을 사용합니다.
뷰에 따라 UITableViewDelegate 또는 UICollectionViewDelegate를 사용하여 셀 선택, 크기 조정, 이벤트 처리 등을 관리할 수 있습니다.

 

5. 데이터 갱신 기능 제공
데이터를 목록 형태로 보여줄 때, 목록에 보여지는 데이터가 바뀌면 목록을 갱신해서 바뀐 데이터를 보여줘야 할 때가 있습니다.
이럴 때, reloadData() 메서드를 호출하여 전체 리스트를 다시 그릴 수 있습니다.
만약, 리스트 전체가 아닌 특정 섹션만 갱신하고 싶다면 UITableView에서는 reloadSections(_:with:), UICollectionView에서는 reloadSections(_:) 메서드를 사용할 수 있으며, 특정 셀만 갱신하고 싶다면 UITableView에서는 reloadRows(at:with:), UICollectionView에서는 reloadItems(at:) 메서드를 사용할 수 있습니다.

 

6. 애니메이션을 활용한 업데이트
테이블 뷰와 콜렉션 뷰는 자체적으로 데이터 삽입/삭제 등의 애니메이션을 적용하는 메서드를 지원합니다.

 

7. DataSource 기반 데이터 관리
테이블 뷰와 콜렉션 뷰는 모두 dataSource를 기반으로 동적으로 데이터를 표시 및 관리합니다.
사용하려는 뷰에 따라 UITableViewDataSource 혹은 UICollectionViewDataSource를 사용하여 셀 개수, 구성 방식 등을 정의합니다.

 

iOS 13부터는 UITableViewDiffableDataSource와 UICollectionViewDiffableDataSource를 사용하여 최신 방식으로 애니메이션 적용과 성능 최적화, 데이터 갱신 등을 더 안전하게 적용할 수 있습니다.

 

차이점

이렇듯 테이블 뷰와 콜렉션 뷰는 다양한 공통점을 갖고 있지만, 구조와 사용 목적 등 여러 차이점도 갖고 있습니다.

 

1. 구성 요소
테이블 뷰는 데이터를 하나의 열과 여러 개의 행으로 보여주는 뷰로, 테이블 뷰의 셀은 한 줄 단위로 항목을 보여줍니다.
반면, 콜렉션 뷰는 데이터를 여러 개의 열과 행으로 보여주는 뷰로, 콜렉션 뷰의 셀은 한 줄 단위 뿐만 아니라 그리드, 혹은 커스텀 형태로 항목을 보여줄 수 있습니다.

 

또한, 테이블 뷰는 헤더와 푸터만을 제공하는데 반해, 콜렉션 뷰는 SupplementaryView(이하 보충 뷰)를 이용해 헤더, 푸터뿐만 아니라 그 외의 데코레이션 뷰 또한 지원합니다.

 

2. 스크롤 방향
테이블 뷰는 하나의 열과 여러 개의 행을 보여주는 것이 목적인 뷰이기 때문에 기본적으로 세로(Vertical) 방향, 한 방향으로만 스크롤을 지원합니다.
반면, 콜렉션 뷰는 여러 열과 행을 보여줄 수 있기 때문에 가로 또는 세로 스크롤을 모두 지원합니다.

 

3. 레이아웃 커스터마이징 유연성
콜렉션 뷰는 UICollectionViewFlowLayout, UICollectionViewCompositionalLayout 등 다양한 레이아웃을 지원하며, 이를 통해 그리드 형태 또는 그 외 다양한 스타일의 레이아웃을 구현할 수 있습니다.
반면, 테이블 뷰는 단순 리스트 형태의 UI만을 지원합니다.

 

4. 성능 차이
테이블 뷰는 비교적 다양한 커스터마이징이 불가능하지만, 단순한 리스트 형태의 UI를 구현할 때는 셀을 효율적으로 재사용할 수 있도록 최적화되어 있습니다.
이에 반해, 콜렉션 뷰는 더 많은 커스터마이징이 가능하지만, 레이아웃을 구현할 때 성능 최적화가 필요할 수 있습니다.

 

UITableView를 사용했을 때 이점

위와 같은 차이점을 갖고 있는 테이블 뷰와 콜렉션 뷰는 각각을 사용했을 때 얻는 이점이 몇 가지 있습니다.
특히, 테이블 뷰는 단순 리스트 형태를 구현할 때 콜렉션 뷰보다 아래와 같은 이점을 갖습니다.

 

1. 성능 최적화
테이블 뷰는 기본적으로 셀의 높이를 계산하고, 화면에 보이는 셀만 유지하는 방식으로 최적화되어 있습니다.
반면 콜렉션 뷰는 더 유연한 레이아웃을 제공하는 만큼 추가적인 메모리 및 연산 비용이 발생할 수 있습니다.

 

2. 기본 제공 기능이 많음
테이블 뷰는 자동 크기 조정, 헤더/푸터 지원, 스와이프 삭제 및 편집 기능 등을 기본적으로 제공합니다.
반면 콜렉션 뷰는 셀의 크기를 직접 조정해야하며, 보충 뷰를 통해 헤더/푸터를 직접 구현해야 하는 등 비슷한 기능을 직접 구현해야 하는 경우가 많습니다.

 

3. 단순한 코드 구조
테이블 뷰는 기본적으로 1개의 열 구조로 설계되어 있어 코드가 단순합니다.
이에 반해 콜렉션 뷰는 레이아웃을 별도로 설정해야 하는 경우가 많고, 기본적인 리스트 형태라도 UICollectionViewLayout 등의 레이아웃을 설정해야만 합니다.

 

UICollectionView를 사용했을 때 이점

위에서 테이블 뷰가 갖는 이점을 살펴보았다면, 콜렉션 뷰를 사용했을 때 얻는 이점이 있는데 아래와 같습니다.

 

1. 유연한 레이아웃
테이블 뷰는 기본적으로 단일 열만 지원하기 때문에 한 줄에 하나의 셀만 가질 수 있습니다. 또한 이 때문에 세로 스크롤만 지원합니다.
반면, 콜렉션 뷰는 여러 행과 열을 지원하며, 한 줄에도 여러 개의 셀을 배치할 수 있어 그리드 형태 등 다양한 레이아웃을 만들 수 있으며, 기본적으로 제공하는 UICollectionViewFlowLayout, UICollectionViewCompositionalLayout 등 외에도 UICollectionViewLayout을 상속 받아 직접 커스텀 레이아웃을 구현할 수도 있습니다. 또, 세로 뿐만 아니라 가로 스크롤도 지원하여 테이블 뷰에 비하여 더 다양하고 유연한 레이아웃을 구현할 수 있습니다.

 

2. 섹션별 레이아웃 차별화
테이블 뷰는 단순 리스트 형태의 UI만 지원하기 때문에 모든 섹션이 동일한 레이아웃을 따르게 됩니다.
반면, 콜렉션 뷰는 UICollectionViewCompositionalLayout을 사용하면 첫 번째 섹션은 가로 스크롤이 되는 단순 리스트 형태로, 두 번째 섹션은 세로 스크롤이 되는 3열 그리드 형태로 배치하는 등 각 섹션마다 다른 레이아웃을 적용할 수 있습니다.

 

3. 더 다양한 애니메이션 지원
테이블 뷰와 콜렉션 뷰 모두 셀 및 섹션의 삽입, 삭제 이동 등의 애니메이션을 제공하지만 콜렉션 뷰는 이에 더해 레이아웃의 변화까지 포함해 더 부드러운 애니메이션 적용이 가능합니다.

 

UITableView와 UICollectionView, 언제 어떤 뷰를 사용하면 좋을까?

지금까지 테이블 뷰와 콜렉션 뷰의 공통점과 차이점, 그리고 각각의 뷰가 갖는 상대적 이점에 대해 알아보았습니다.
그렇다면 어떤 상황에서 어떤 뷰를 사용하면 좋을지 간단하게 정리하고 결론을 내려볼까요?

 

상황	테이블 뷰	콜렉션 뷰
단순 리스트	✅	🔺 (구현할 수 있으나, 성능 최적화 필요)
그리드 등 유연한 UI	🚫	✅
가로/세로 스크롤을 유연하게 조절해야할 때	🚫	✅
레이아웃 전환이 필요할 때	🚫	✅
스크롤 성능이 중요한 경우	✅	🔺 (최적화 필요)
셀 크기가 가변적인 경우	🚫 (제한적)	✅ (유연함)
DiffableDataSource 적용	✅ (쉽게 적용 가능)	✅ (더 다양한 애니메이션)

 

테이블 뷰는 콜렉션 뷰에 비해 구현할 수 있는 UI가 단순하지만, 기본 제공하는 기능이 많고 코드가 단순하다는 장점이 있습니다. 이에 따라 단순한 1열 리스트 형태의 뷰를 구현해야 하며, 성능 최적화가 필요하다면 테이블 뷰를 사용하는 것이 더 좋은 선택일 수 있습니다.

 

콜렉션 뷰는 테이블 뷰에 비해 코드가 복잡하거나, 직접 구현해야하는 기능들이 많고, 최적화에 더 신경써야 하지만 그만큼 더 다양하고 유연한 레이아웃을 구현할 수 있습니다. 그렇기 때문에 더 유연한 UI와 가변적인 레이아웃이 필요한 경우 콜렉션 뷰가 더 좋은 선택일 것입니다.

 

마무리

이번 시간에는 비슷하게 데이터를 목록 형태로 보여줄 때 사용할 수 있는 UITableView와 UICollectionView의 공통점과 차이점, 언제 어떤 뷰를 사용하면 더 좋을지에 대해 알아봤는데요.
개인적으로는 그동안 목록 형태가 필요한 대부분의 프로젝트에서 UICollectionView + DiffableDataSource + CellRegistration를 사용해서 처리했는데, 단순 리스트를 구현한다면 앞으로는 UITableView를 사용하는 쪽으로 습관을 바꿔봐야겠습니다.

 

참고자료

https://developer.apple.com/documentation/uikit/uitableview

UITableView | Apple Developer Documentation

https://developer.apple.com/documentation/uikit/uicollectionview

UICollectionView | Apple Developer Documentation