iOS 앱에서 CollectionView 레이아웃 만드는 방법, 단계별 완벽 가이드

iOS 개발에서 CollectionView와 TableView는 모든 개발자가 반드시 숙지해야 할 핵심 개념입니다. 좋은 iOS 개발자가 되기 위해서는 두 가지를 모두 능숙하게 다룰 수 있어야 합니다.

이 글에서는 특히 CollectionView에 초점을 맞춰 살펴보겠습니다. CollectionView는 TableView와 유사하지만 몇 가지 중요한 차이점이 있습니다. 가장 큰 특징은 격자(grid) 형태의 레이아웃을 지원하며, 수평 및 수직 스크롤을 모두 사용할 수 있다는 점입니다. 안드로이드의 GridView와 비슷한 역할을 한다고 이해하면 쉽습니다.

더 자세한 내용은 Apple 공식 문서(UICollectioonView Documentation)를 참고하시기 바랍니다.

CollectionView의 기본 구조

CollectionView는 크게 셀(Cell)과 보조 뷰(Supplementary View)로 구성됩니다.

셀(Cell): 화면에 아이템을 표시하는 기본 단위로, UICollectionViewCell 클래스의 인스턴스입니다. 데이터 소스(data source)가 각 셀을 구성하고 제공합니다.
보조 뷰(Supplementary View): 섹션 헤더(header)나 푸터(footer)처럼 개별 셀과는 별개로 정보를 전달하는 요소입니다. 보조 뷰 지원은 선택 사항이며, CollectionView의 레이아웃 객체(layout object)가 지원 여부와 배치 위치를 모두 결정합니다.

그럼 지금부터 실제로 CollectionView를 만들어 보겠습니다.

단계별 구현 방법

1단계 – Xcode 프로젝트 생성

Xcode를 열고 Single View Application을 생성한 뒤, 프로젝트 이름을 SampleCollectionView로 지정합니다.

2단계 – Storyboard에 UICollectionView 추가

Main.storyboard에 아래 그림과 같이 UICollectionView를 추가합니다.

iOS 앱에서 CollectionView 레이아웃 만드는 방법, 단계별 완벽 가이드

3단계 – 셀 재사용 식별자 설정

CollectionView Cell을 선택하고, 재사용 식별자(reuse identifier)를 아래 그림과 같이 "cell"로 지정합니다.

4단계 – 커스텀 셀 클래스 생성

Cocoa Touch Class 파일을 새로 생성하고, 이름을 CollectionViewCell, 타입은 UICollectionViewCell로 지정합니다. 그런 다음 해당 클래스를 셀에 연결해 줍니다.

5단계 – IBOutlet 연결

ViewController.swift에 CollectionView의 @IBOutlet을 생성하고 연결합니다.

6단계 – Delegate & DataSource 지정

CollectionView의 delegate와 dataSource를 ViewController에 연결합니다.

7단계 – 프로토콜 채택

ViewController.swift 파일을 열어 UICollectionViewDelegate와 UICollectionViewDataSource 프로토콜을 채택합니다.

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource

8단계 – 필수 델리게이트 메서드 구현

아래와 같이 필수 델리게이트 메서드를 구현합니다.

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 500
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell: UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
    cell.backgroundColor = UIColor.gray
    return cell
}

9단계 – 실행 및 스크롤 방향 변경

앱을 실행하면 세로 방향으로 스크롤되는 것을 확인할 수 있습니다. CollectionView를 가로로 스크롤되게 하려면 Scroll Direction 속성을 Horizontal로 변경하면 됩니다.

전체 코드

import UIKit
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
    @IBOutlet var collectionView: UICollectionView!
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 500
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell: UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
        cell.backgroundColor = UIColor.gray
        return cell
    }
}