[iOS] SnapKit을 활용한 iOS UI 레이아웃 잡기

iOS 앱을 개발할 때 UI를 배치하는 방법은 여러 가지가 있지만, 최근에는 Auto Layout을 코드로 작성하는 것이 일반적입니다. 하지만 Apple의 기본 API인 NSLayoutConstraint를 사용하면 코드가 길어지고 가독성이 떨어지는 문제가 있습니다. 이를 해결하기 위해 SnapKit이라는 라이브러리를 활용하면 훨씬 간결하고 직관적인 코드로 UI를 구성할 수 있습니다.

이번 글에서는 SnapKit을 사용하여 iOS UI를 어떻게 쉽게 배치하는지 설명하고, 여러 가지 예제 코드를 제공하겠습니다.

1. SnapKit이란?

SnapKit은 Swift 기반의 Auto Layout DSL (Domain Specific Language) 로, 코드로 UI 레이아웃을 설정할 때 더 간결하고 읽기 쉽게 만들어주는 라이브러리입니다. UIKit의 NSLayoutConstraint를 직접 사용하면 다음과 같이 코드가 길어지는데:

view.addSubview(label)
label.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    label.widthAnchor.constraint(equalToConstant: 200),
    label.heightAnchor.constraint(equalToConstant: 50)
])

SnapKit을 사용하면 아래처럼 코드가 훨씬 간단해집니다.

view.addSubview(label)
label.snp.makeConstraints { make in
    make.center.equalToSuperview()
    make.width.equalTo(200)
    make.height.equalTo(50)
}

이제 SnapKit을 프로젝트에 추가하는 방법부터 설명하겠습니다.

2. SnapKit 설치하기

SnapKit을 사용하려면 Swift Package Manager (SPM) 를 이용하는 것이 가장 쉽습니다.

Swift Package Manager(SPM)로 설치하는 방법

1. Xcode를 열고 프로젝트를 선택합니다.
2. Package Dependencies 탭에서 + 버튼을 클릭합니다.
3. SnapKit의 GitHub URL을 입력합니다.
4. https://github.com/SnapKit/SnapKit
5. 최신 버전을 선택한 후 Add Package를 클릭합니다.

이제 SnapKit을 사용할 준비가 되었습니다.

3. SnapKit 기본 사용법

SnapKit은 makeConstraints를 사용하여 뷰의 레이아웃을 쉽게 설정할 수 있습니다. 아래 예제는 기본적인 사용법을 보여줍니다.

3.1. 뷰를 부모 뷰의 중앙에 배치하기

import UIKit
import SnapKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let box = UIView()
        box.backgroundColor = .blue
        view.addSubview(box)

        box.snp.makeConstraints { make in
            make.center.equalToSuperview() // 부모 뷰의 중앙에 배치
            make.width.height.equalTo(100) // 100x100 크기 설정
        }
    }
}

3.2. 특정 뷰의 상단에 다른 뷰 배치하기

let titleLabel = UILabel()
titleLabel.text = "Hello, SnapKit!"
titleLabel.textAlignment = .center
view.addSubview(titleLabel)

titleLabel.snp.makeConstraints { make in
    make.top.equalTo(view.safeAreaLayoutGuide).offset(20) // 안전 영역 기준으로 위에서 20pt 떨어짐
    make.left.right.equalToSuperview().inset(20) // 좌우 20pt 마진
    make.height.equalTo(50) // 높이 50pt
}

4. SnapKit 활용 예제

4.1. 여러 개의 뷰를 정렬하기 (Stack처럼 사용)

let button1 = UIButton()
button1.setTitle("Button 1", for: .normal)
button1.backgroundColor = .red

let button2 = UIButton()
button2.setTitle("Button 2", for: .normal)
button2.backgroundColor = .green

view.addSubview(button1)
view.addSubview(button2)

button1.snp.makeConstraints { make in
    make.top.equalTo(view.safeAreaLayoutGuide).offset(20)
    make.left.equalToSuperview().offset(20)
    make.right.equalToSuperview().offset(-20)
    make.height.equalTo(50)
}

button2.snp.makeConstraints { make in
    make.top.equalTo(button1.snp.bottom).offset(10) // button1 아래에 위치
    make.left.right.equalTo(button1) // 좌우는 button1과 동일
    make.height.equalTo(50)
}

4.2. 컬렉션 뷰를 SnapKit으로 배치하기

let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
collectionView.backgroundColor = .white
view.addSubview(collectionView)

collectionView.snp.makeConstraints { make in
    make.edges.equalToSuperview() // 부모 뷰의 모든 가장자리와 동일하게 설정
}

4.3. UIScrollView 안에 콘텐츠 배치하기

let scrollView = UIScrollView()
let contentView = UIView()

view.addSubview(scrollView)
scrollView.addSubview(contentView)

scrollView.snp.makeConstraints { make in
    make.edges.equalToSuperview()
}

contentView.snp.makeConstraints { make in
    make.edges.equalToSuperview()
    make.width.equalToSuperview() // 가로 스크롤 방지
    make.height.equalTo(1000) // 내용의 높이를 설정하여 세로 스크롤 가능하게 만듦
}

---

5. SnapKit에서 자주 사용하는 제약 조건

SnapKit 코드	설명
make.edges.equalToSuperview()	부모 뷰의 모든 가장자리에 맞춤
make.top.equalTo(view.safeAreaLayoutGuide).offset(10)	safeArea 기준으로 10pt 아래 배치
make.left.right.equalToSuperview().inset(20)	좌우 20pt 마진 설정
make.width.equalTo(100)	너비 100pt
make.height.equalTo(50)	높이 50pt
make.center.equalToSuperview()	부모 뷰의 정중앙 배치

이 정도만 알아도 대부분의 UI는 쉽게 구성할 수 있습니다.

 

6. 마무리

SnapKit을 사용하면 iOS UI를 코드로 작성할 때 훨씬 간편하고 직관적으로 배치할 수 있습니다. 특히 반복적인 레이아웃 코드가 줄어들어 유지보수도 쉬워집니다. UIKit을 사용할 때 Auto Layout 코드가 너무 길어 불편하다면, SnapKit을 활용하여 깔끔한 UI 코드를 작성해보세요.