NSCollectionLayoutSection과 NSCollectionLayoutGroup을 활용한 멀티 섹션 레이아웃 마스터하기

컬렉션 뷰는 많은 양의 데이터를 효율적으로 표시해주는 강력한 도구입니다. iOS 개발에서 이 도구를 활용하기 위해, NSCollectionLayoutSection과 NSCollectionLayoutGroup을 사용해 멀티 섹션 레이아웃을 마스터하는 방법에 대해 알아보겠습니다. 이 글에서는 다양한 예제를 통해 각 개념과 함께 실제 응용 방법을 단계별로 살펴볼 것입니다.

NSCollectionLayoutSection이란?

NSCollectionLayoutSection은 컬렉션 뷰의 각 섹션에 대한 레이아웃 속성을 정의하는 객체입니다. 모든 섹션은 각 섹션의 아이템들이 어떻게 배치될지 결정하는 레이아웃을 가집니다. 주로 NSCollectionLayoutGroup과 함께 사용되며, 각 섹션의 기본 단위가 됩니다.

swift
let section = NSCollectionLayoutSection(group: group)

NSCollectionLayoutSection의 주된 구성 요소는 group입니다. 이 group은 섹션 내의 모든 아이템을 포함하는 컨테이너 역할을 합니다.

NSCollectionLayoutGroup의 역할

NSCollectionLayoutGroup은 여러 개의 아이템 또는 서브그룹을 포함할 수 있는 컨테이너입니다. 그룹은 여러 형식으로 구성될 수 있으며, 각 그룹 내의 아이템 배치 방식을 정의하는 데 중요합니다.

swift
let group = NSCollectionLayoutGroup.horizontal(
    layoutSize: groupSize,
    subitems: [item1, item2]
)

위 코드는 수평으로 배치된 그룹을 정의합니다. groupSize는 그룹의 크기를 설정하고, subitems는 그룹 내에 포함될 아이템 리스트입니다.

다양한 레이아웃 구성하기

복잡한 레이아웃을 구성하기 위해서는 NSCollectionLayoutSection과 NSCollectionLayoutGroup을 유연하게 사용할 줄 알아야 합니다. 다음은 다양한 레이아웃을 설정하는 예제입니다.

간단한 수평 스크롤 섹션 만들기

가장 기본적인 예제로, 간단한 수평 스크롤 섹션을 만들어 봅시다.

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

let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.8),
                                       heightDimension: .fractionalHeight(0.3))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .continuous

위 코드는 수평으로 스크롤 가능한 섹션을 구성합니다. fractionalWidth와 fractionalHeight를 통해 아이템과 그룹의 크기를 정의합니다.

격자 형태의 섹션 만들기

다음 예제는 격자 형식으로 아이템을 배치하는 방법을 보여줍니다.

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

let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2),
                                       heightDimension: .absolute(100))
let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitem: item, count: 4)

let section = NSCollectionLayoutSection(group: group)

이 예제는 각 그룹에 세로로 네 개의 아이템을 배치하여 격자 형태를 만듭니다.

복잡한 레이아웃 구성 예제

복잡한 레이아웃을 구성할 때는 다양한 섹션과 그룹을 결합하여 사용합니다. 여러 개의 섹션과 그룹을 조합함으로써 매우 유연한 레이아웃을 만들 수 있습니다.

복합 레이아웃 만들기

다음은 두 가지 다른 레이아웃 섹션을 결합하여 복합 레이아웃을 구성하는 예제입니다.

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

let groupSizeA = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5),
                                        heightDimension: .fractionalHeight(0.6))
let groupA = NSCollectionLayoutGroup.vertical(layoutSize: groupSizeA, subitem: itemA, count: 2)

let sectionA = NSCollectionLayoutSection(group: groupA)

let itemSizeB = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                        heightDimension: .fractionalHeight(1.0))
let itemB = NSCollectionLayoutItem(layoutSize: itemSizeB)

let groupSizeB = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                        heightDimension: .absolute(200))
let groupB = NSCollectionLayoutGroup.horizontal(layoutSize: groupSizeB, subitems: [itemB])

let sectionB = NSCollectionLayoutSection(group: groupB)
sectionB.orthogonalScrollingBehavior = .continuous

collectionViewLayout = UICollectionViewCompositionalLayout { (sectionIndex, environment) -> NSCollectionLayoutSection? in
    switch sectionIndex {
    case 0:
      return sectionA
    case 1:
      return sectionB
    default:
      return nil
    }
}

위의 예제는 두 개의 섹션을 만들고, 첫 번째 섹션은 2열 구성이고 두 번째 섹션은 수평 스크롤이 가능한 섹션이 됩니다.

마무리

NSCollectionLayoutSection과 NSCollectionLayoutGroup을 사용하여 멀티 섹션 레이아웃을 구성하는 것은 처음에는 복잡해 보일 수 있지만, 강력하고 유연한 컬렉션 뷰를 만들 수 있는 능력을 제공합니다. 다양한 예제와 함께 이 개념들을 학습하면 보다 복잡하고 기능적인 레이아웃을 만들 수 있을 것입니다. 이 글을 통해 여러분이 Swift에서 멀티 섹션 레이아웃을 구현하는 데 필요한 기본기와 자신감을 얻기를 바랍니다.