/
/

[UIKit] SnapKit으로 iOS 오토레이아웃을 간편하게 적용하자!

iosSwift
avatar
지성
2025.02.20
·
5 min read

iOS 앱 개발에서 UI를 만들 때 오토레이아웃(Auto Layout)을 설정하는 것은 필수다.

하지만 스토리보드를 사용하지 않고 코드로 오토레이아웃을 적용하는 것은 코드가 길어지고 복잡해질 수 있다.

SnapKit이라는 강력한 오토레이아웃 라이브러리를 사용하면 이 문제를 해결할 수 있다.

SnapKit이란?

SnapKit은 Swift에서 오토레이아웃을 간단하게 적용할 수 있도록 도와주는 라이브러리다.

Apple의 NSLayoutConstraint를 대체하여 더 직관적이고 짧은 코드로 오토레이아웃을 설정할 수 있다.

SnapKit의 장점

  1. 코드 가독성이 좋아짐 (제약 조건을 선언형으로 설정 가능)

  2. NSLayoutConstraint보다 코드가 짧고 직관적

  3. 스토리보드없이 오토레이아웃을 쉽게 구현 가능

설치 방법

SPM

  1. Xcode - File - Add Package Dependencies... 선택

  2. SnapKit의 GitHub URL 입력

    https://github.com/SnapKit/SnapKit

  3. Add Package 버튼 클릭

CocoaPods

  1. Podfile에 SnapKit 추가

    pod 'SnapKit'

  2. 터미널에서 pod install 실행

기본 사용법

SnapKit을 사용하여 오토레이아웃 적용

UIView를 SnapKit으로 제약 조건 설정하는 기본 코드

import SnapKit

class ViewController: UIViewController {
    let boxView = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()

        boxView.backgroundColor = .blue
        view.addSubview(boxView)

        boxView.snp.makeConstraints { make in
            make.center.equalToSuperview() // 부모 뷰의 중앙에 배치
            make.width.height.equalTo(100) // 가로, 세로 100px
        }
    }
}

make.center.equalToSuperview() → boxView를 superview의 중앙에 배치

SnapKit 속성 활용하기

뷰 크기 설정

boxView.snp.makeConstraints { make in
    make.width.equalTo(200) // 너비 200px
    make.height.equalTo(100) // 높이 100px
}

뷰 위치 설정 (왼쪽, 오른쪽, 위, 아래)

boxView.snp.makeConstraints { make in
    make.top.equalTo(view.safeAreaLayoutGuide).offset(20) // 상단에서 20px 떨어진 위치
    make.left.equalToSuperview().offset(20) // 왼쪽에서 20px 떨어진 위치
}

뷰를 다른 뷰와 동일한 크기로 설정

anotherView.snp.makeConstraints { make in
    make.size.equalTo(boxView) // boxView와 동일한 크기
}

뷰를 부모 뷰에 꽉 차게 설정

boxView.snp.makeConstraints { make in
    make.edges.equalToSuperview() // 부모 뷰에 꽉 차게
}

SnapKit을 활용한 복잡한 UI 레이아웃 구현

상단 제목과 버튼을 SnapKit으로 배치하기

import SnapKit

class ViewController: UIViewController {
    let titleLabel = UILabel()
    let actionButton = UIButton()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(titleLabel)
        view.addSubview(actionButton)

        titleLabel.text = "Hello, SnapKit!"
        titleLabel.font = UIFont.boldSystemFont(ofSize: 24)

        actionButton.setTitle("Click Me", for: .normal)
        actionButton.backgroundColor = .systemBlue

        titleLabel.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide).offset(20)
            make.centerX.equalToSuperview()
        }

        actionButton.snp.makeConstraints { make in
            make.top.equalTo(titleLabel.snp.bottom).offset(20)
            make.centerX.equalToSuperview()
            make.width.equalTo(120)
            make.height.equalTo(50)
        }
    }
}

  • titleLabel → 상단에 위치

  • actionButton → titleLabel 아래에 배치

SnapKit 사용 시 주의점

오토레이아웃 충돌을 방지해야함

SnapKit을 사용하기 전에 뷰가 이미 다른 오토레이아웃 제약 조건을 가지고 있는지 확인해야 한다.

아래 설정을 통해 SnapKit이 정상 작동하도록 해야 한다.

boxView.translatesAutoresizingMaskIntoConstraints = false

makeConstraints를 중복해서 호출하면 안됨

boxView.snp.makeConstraints { make in
    make.width.equalTo(100) 
}
boxView.snp.makeConstraints { make in
    make.width.equalTo(200) // ❌ 이전 제약 조건과 충돌 발생 가능
}

remakeConstraints() 또는 updateConstraints() 사용하여 해결

boxView.snp.remakeConstraints { make in
    make.width.equalTo(200) // 기존 제약 조건을 모두 제거하고 새롭게 설정
}
boxView.snp.updateConstraints { make in
    make.width.equalTo(150) // 기존 제약 조건을 변경
}

레이아웃을 동적으로 변경할 때 updateConstraints()를 사용하면 성능이 최적화됨

- 컬렉션 아티클