📐 Compositional Layout에서 interGroupSpacing vs interItemSpacing 완벽 정리

UIKit의 UICollectionViewCompositionalLayout을 사용하다 보면
누구나 한 번쯤 이런 의문을 가집니다.

 

“section.interGroupSpacing이랑 group.interItemSpacing…
뭐가 다른 거지? 둘 다 간격 아닌가?” 🤔

 

비슷해 보여도, 적용되는 범위와 역할이 완전히 다릅니다.
이 둘을 정확히 이해하면 섹션 간격, 셀 간격을 직관적으로 제어할 수 있어요.

---

🧠 핵심 요약

속성	적용 범위	역할
group.interItemSpacing	그룹 내부의 아이템 간 간격	한 행(또는 열) 안 셀 간 거리
section.interGroupSpacing	섹션 내 그룹 간 간격	한 행과 다음 행 사이의 세로 거리

 

👉 쉽게 말하면,

 

interItemSpacing → 가로 간격 (아이템 간)

interGroupSpacing → 세로 간격 (행 간)

---

📦 구조적으로 이해하기

Section
│
├── Group 1  ←── 그룹 간 세로 간격 = interGroupSpacing
│     ├─ Item 1
│     ├─ Item 2  ←── 아이템 간 가로 간격 = interItemSpacing
│
├── Group 2
│     ├─ Item 1
│     ├─ Item 2
│
└── Group 3

 

🔹 group.interItemSpacing — 그룹 내부 아이템 간 거리

그룹 안에서 아이템끼리 얼마나 떨어질지 결정합니다.
즉, 한 행에 여러 개의 셀이 있을 때 가로 간격이에요.

group.interItemSpacing = .fixed(12)

 

✅ 예시 코드

let item = NSCollectionLayoutItem(
    layoutSize: .init(
        widthDimension: .fractionalWidth(0.45),
        heightDimension: .fractionalHeight(1.0)
    )
)

let group = NSCollectionLayoutGroup.horizontal(
    layoutSize: .init(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .absolute(140)
    ),
    subitems: [item]
)

group.interItemSpacing = .fixed(12)

 

📸 결과

→ 같은 줄에 배치된 셀들 사이가 12pt만큼 떨어져 보입니다.

 

🔸 section.interGroupSpacing — 그룹(행) 간 거리

한 그룹(한 행)과 다음 그룹(다음 행) 사이의 세로 간격을 설정합니다.

section.interGroupSpacing = 20

 

✅ 예시 코드

let item = NSCollectionLayoutItem(
    layoutSize: .init(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .fractionalHeight(1.0)
    )
)

let group = NSCollectionLayoutGroup.vertical(
    layoutSize: .init(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .absolute(100)
    ),
    subitems: [item]
)

let section = NSCollectionLayoutSection(group: group)
section.interGroupSpacing = 20

 

📸 결과

→ 한 줄(그룹)과 다음 줄 사이에 20pt의 세로 여백이 생깁니다.
즉, 리스트나 카드 형태에서 행 간 간격을 조정할 때 쓰죠.

---

🧩 함께 쓰는 경우

보통 두 속성을 함께 조합합니다 👇

group.interItemSpacing = .fixed(10)    // 가로 셀 간 간격
section.interGroupSpacing = 20         // 세로 행 간 간격

---

⚡ 시각적으로 구분하자면

구분	역할	설명
group.interItemSpacing	가로 셀 간 거리	🟨🟨🟨 (셀 사이 10pt)
section.interGroupSpacing	세로 행 간 거리	🟨🟨🟨🟨 (행 사이 20pt)