복잡한 커스텀 레이아웃 설계를 위한 UICollectionViewCompositionalLayout의 고급 기능 탐구

Apple은 iOS 13에서 UICollectionViewCompositionalLayout을 도입하여 iOS 개발자들이 더욱 유연하고 강력한 Collection View 레이아웃을 설계할 수 있도록 하였습니다. Compositional Layout은 섹션별로 다른 레이아웃을 지정할 수 있는 유연성을 제공하며, 깊이 있는 계층적 구조를 쉽게 구성할 수 있는 다양한 도구를 제공합니다. 이번 글에서는 이러한 고급 기능을 활용하여 복잡한 커스텀 레이아웃을 구현하는 방법을 소개합니다.

기본 구성 요소 이해하기

NSCollectionLayoutItem

NSCollectionLayoutItem은 레이아웃의 기본 단위로, 셀 하나를 나타냅니다. NSCollectionLayoutSize를 통해 크기를 정의할 수 있으며, 셀의 가변적인 크기를 fractionalWidth와 fractionalHeight를 사용하여 설정할 수 있습니다.

swift
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0)) 
let item = NSCollectionLayoutItem(layoutSize: itemSize) 

NSCollectionLayoutGroup

NSCollectionLayoutGroup은 여러 NSCollectionLayoutItem을 묶어서 그룹화한 것입니다. horizontal, vertical, custom 세 가지 그룹 형태를 제공합니다.

swift
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.5)) 
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 2) 

NSCollectionLayoutSection

NSCollectionLayoutSection은 여러 그룹을 포함하는 레이아웃의 한 섹션입니다. NSCollectionLayoutGroup을 포함하여 다양한 배치를 정의할 수 있습니다.

swift
let section = NSCollectionLayoutSection(group: group) 

고급 기능 활용하기

복잡한 레이아웃을 구현하려면 더 고급 기능들을 활용해야 합니다. 여기에는 Supplementary Items, Decoration Items, Orthogonal Scrolling, Section Headers, Section Footers 등이 포함됩니다.

Supplementary Items

이 아이템들은 레이아웃의 보조 역할을 하며 주로 헤더와 푸터로 사용됩니다.

swift
let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(44)) 
let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top) 
section.boundarySupplementaryItems = [sectionHeader] 

Decoration Items

이 아이템들은 레이아웃의 배경을 꾸밀 때 사용됩니다.

swift
let decorationItem = NSCollectionLayoutDecorationItem.background(elementKind: "backgroundDecoration") 
section.decorationItems = [decorationItem] 

Orthogonal Scrolling

특정 섹션에서 가로로 스크롤을 하는 레이아웃을 만들 수 있습니다.

swift
section.orthogonalScrollingBehavior = .continuous 

다양한 레이아웃 예시

정사각형 그리드 레이아웃

정사각형 그리드를 만드는 기본 예시입니다.

swift
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0)) 
let item = NSCollectionLayoutItem(layoutSize: itemSize) 
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalWidth(0.25)) 
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item]) 
let section = NSCollectionLayoutSection(group: group) 

좌우 비대칭 레이아웃

좌우 비대칭인 레이아웃을 만들어보겠습니다.

swift
let leadingItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.7), heightDimension: .fractionalHeight(1.0)) 
let leadingItem = NSCollectionLayoutItem(layoutSize: leadingItemSize) 
let trailingItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.3), heightDimension: .fractionalHeight(1.0)) 
let trailingItem = NSCollectionLayoutItem(layoutSize: trailingItemSize) 
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.5)) 
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [leadingItem, trailingItem]) 
let section = NSCollectionLayoutSection(group: group) 

단일 섹션 내 다중 그룹 레이아웃

단일 섹션에 여러 개의 그룹을 포함하는 복잡한 예시입니다.

swift
let smallItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .fractionalHeight(1.0)) 
let largeItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0)) 
let smallItem = NSCollectionLayoutItem(layoutSize: smallItemSize) 
let largeItem = NSCollectionLayoutItem(layoutSize: largeItemSize) 
let verticalGroup = NSCollectionLayoutGroup.vertical(layoutSize: largeItemSize, subitems: [smallItem, smallItem]) 
let finalGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.3)) 
let finalGroup = NSCollectionLayoutGroup.horizontal(layoutSize: finalGroupSize, subitems: [verticalGroup, largeItem]) 
let section = NSCollectionLayoutSection(group: finalGroup) 

결론

UICollectionViewCompositionalLayout는 iOS 개발자들에게 복잡한 레이아웃을 효율적으로 설계할 수 있는 강력하고 유연한 도구를 제공합니다. 이 글에서 소개한 다양한 기능들을 활용하면, 보다 아름답고 직관적인 사용자 경험을 제공할 수 있는 커스텀 레이아웃을 구현할 수 있습니다.