[iOS] SnapKit 라이브러리 사용하기

모리스·2025년 1월 31일

AutoLayout NSLayoutConstraints Snapkit iOS swift

iOS

목록 보기

17/17

이번 노트에서는 iOS의 AutoLayout을 쉽게 설정할 수 있도록 해주는 SnapKit 라이브러리에 대해서 기술해 보려 합니다.

SnapKit?

SnapKit은 iOS, OS X등의 앱 개발에서 AutoLayout을 코드로 구현할 때 사용하는 강력한 라이브러리에요. 기존의 복잡한 NSLayoutConstraint 코드를 더 읽기 쉽고 유지보수가 용이한 레이아웃 코드를 작성할 수 있게 해줘요. 자, 사실 우리에게 중요한건 SnapKit이 무엇이냐보단 어떻게 쓰느냐일 태니.. 본론으로 들어가 볼게요.

설치 방법

SnapKit 라이브러리 문서에서는 세 가지 설치 방법을 제공해요.

CocoaPods

터미널에서 프로젝트 디렉토리로 이동
pod init 명령어로 Podfile 생성 (Podfile이 없을 시)
Podfile에 다음 코드 추가

pod "SnapKit', '~> 5.7.0'

추가 후 terminal에 다음 명령 실행

$ pod install

참고로 CocoaPods 1.1.0 이상 버전에서는 SnapKit 버전으 4.0.0이상 설치를 해야한다네요.

Carthage

Cartfile에 SnapKit 라이브러리 정보 추가

github "SnapKit/SnapKit" ~> 5.0.0

terminal에 다음 명령어 추가

$ carthage update --use-xcframeworks --platform iOS

생성된 SnapKit.xcframework파일을 프로젝트로 drag and drop하여 추가
Xcode 프로젝스 타겟 설정 > Framework, Libraries, and Embedded Content" > SnpaKit.xcframework 추가

Swift Package Manager

Xcode > File > Swift Packages > Add Package Dependency 선택
다음 Github 저장소 URL 입력

https://github.com/SnapKit/SnapKit

사용하기

아래 이미지 처럼 부모 뷰인 containerView(UIView)에 자식 뷰들 imageView(UIImageView)와 label(UILabel), button(UIButton)의 UI Layout을 설정한다고 가정해 볼게요.

SanpKit을 사용하지 않는 즉, 기존에 NSLayoutConstraints설정 방식대로 라면 다음과 같은 코드일 거에요.

func setLayout() {
	containerView.addSubview(imageView)
    containerView.addSubview(label)
  	containerView.addSubview(button)
    
  	containerView.translatesAutoresizingMaskIntoConstraints = false
  	imageView.translatesAutoresizingMaskIntoConstraints = false
  	label.translatesAutoresizingMaskIntoConstraints = false
  	button.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([
        imageView.widthAnchor.constraint(equalToConstant: 50.0),
        imageView.heightAnchor.constraint(equalToConstant: 50.0),
        imageView.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 30.0),
        imageView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 20.0),
        imageView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -30.0),

        label.leadingAnchor.constraint(equalTo: imageView.trailingAnchor, constant: 20.0),
        label.centerYAnchor.constraint(equalTo: imageView.centerYAnchor),

        button.widthAnchor.constraint(equalToConstant: 100.0),
        button.heightAnchor.constraint(equalToConstant: 36.0),
        button.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -20.0),
        button.centerYAnchor.constraint(equalTo: imageView.centerYAnchor)
    ])
}

길다..길어.. 요런 식으로.. 했던 코드를 SnapKit 라이브러리로 바꿔볼게요.

import SnapKit

func makeLayout() {
	containerView.addSubview(imageView)
    containerView.addSubview(label)
    containerView.addSubview(button)

	imageView.snp.makeConstraints { imageView in
    	imageView.size.equalTo(50.0)
        imageView.top.equalToSuperview().inset(30.0)
        imageView.leading.equalToSuperview().inset(20.0)
        imageView.bottom.equalToSuperview().inset(30.0)
    }
    
    label.snp.makeConstraints {
    	$0.leading.equalTo(imageView.snp.trailing).offset(20.0)
        $0.centerY.equalTo(imageView.snp.centerY)
    }
    
    button.snp.makeConstraints { button in
    	button.size.equalTo(CGSize(width: 100.0, height: 36.0))
        button.trailing.equalToSuperview().inset(20.0)
        button.centerY.equalTo(imageView.snp.centerY)
    }
}

어떤가요?? 훨씬 간결하고 코드양도 확 줄어보이지 않나요? (저는.. 줄어보여요..ㅎ)

주요 메서드

그럼 SnapKit에서 주로 사용되는 주요 메서드 몇가지만 알아볼게요.

제약 조건 생성, 수정, 재설정, 제거 메서드

makeConstraints
새로운 제약 조건을 생성할 때 사용해요.
위에서 봤듯이 최초 제약 조건들을 설정해요. SnapKit을 사용하지 않는 방법으로 제약조건을 설정할 땐 해당 뷰에 자동 제약조건 설정 즉, translatesAutoresizingMaskIntoConstraints을 false로 설정 해야 원하는 제약조건을 설정할 수 있었어요.
그러나 SnapKit에서는 해당 작업까지 내부적으로 알아서 다~~~해준다는 것....!
또 눈치 채셨겠지만 SnapKit 라이브러리는 클로저 기반이기 때문에 $0으로도 접근이 가능해요.

view.snp.makeConstraints {
	$0.top.equalToSuperview()
}

view.snp.makeConstraints { view in
	view.top.equalToSuperview()
}

updateConstraints
작성 방식은 makeConstraints과 동일해요.
다만 이 메서드는 이미 설정된 제약 조건만 업데이트하며 설정되지 않은 제약조건 접근 시 에러를 일으킨다는 점을 주의해야 해요.
remakeConstraints
기존의 모든 제약 조건을 제거하고 새로운 제약 조건을 설정해요.
우리가 보기에 동작은 makeConstraints와 비슷하게 보일 수 있어요.
removeConstraints
해당 뷰에 설정된 모든 제약조건을 제거해요.

제약 조건 설정 메서드

equalTo()
다른 뷰나 상수 값과 동일한 제약 조건을 설정할 때 사용해요.

view.snp.makeConstraints {
	$0.top.equalTo(imageView.snp.top) // 다른 뷰와의 제약 조건 설정
    
    $0.height.equalTo(50.0) // 상수 값과 동일한 제약 조건 설정
}

equalToSuperview()
현재 뷰의 제약 조건을 상위 뷰와 동일하게 설정할 때 사용해요.

view.snp.makeConstraints {
	// top, bottom의 constraint를 부모뷰와 동일하도록 제약 조건 설정
	$0.verticalEdges.equalToSuperview()
}

inset()
뷰의 내부에 여백을 설정할 때 사용해요. 주로 상위 뷰와 하위 뷰 간의 간격을 조정할 때 사용해요.

view.snp.makeConstraints {
	// 상위 뷰와 하위 뷰 left, right의 간격을 20만큼의 제약 조건 설정
	$0.horizontalEdges.equalToSuperview().inset(20.0)
}

offset()
뷰와 뷰 사이 제약 조건 간의 오프셋을 설정할 때 사용해요.

view.snp.makeConstraints {
	// 동일한 depth의 view의 trailing에 imageView의 leading간의 간격을 10만큼의 제약 조건 설정
	$0.trailing.equalTo(imageView.snp.leading).offset(-10.0)
}

priority()
뷰의 우선 순위를 설정할 때 사용해요.

view.snp.makeConstraints {
	// 상수로 우선순위 설정
	$0.top.equalTo(imageView.snp.top).priority(999)
    
    // enum으로 우선순위 설정
    $0.top.equalTo(imageView.snp.top).priority(.high)
}

제약 조건 위치 설정 메서드

top: 뷰의 top (= topAnchor)
leading: 뷰의 leading (= leadingAnchor)
trailing: 뷰의 trailing (= trailingAnchor)
left: 뷰의 left (=leftAnchor)
right: 뷰의 right (=rightAnchor)
bottom: 뷰의 bottom (= bottomAnchor)
verticalEdges: 뷰의 top, bottom
horizontalEdges: 뷰의 leading, trailing
edges: 뷰의 모든 면 (top, leading/left, trailing/right, bottom)
width: 뷰의 너비 (= widthAnchor)
height: 뷰의 높이 (= heightAnhcor)
size: 뷰의 너비, 높이
centerX: 뷰의 x축 중앙 (= centerXAnchor)
centerY: 뷰의 y축 중앙 (= centerYAnchor)
center: 뷰의 중앙(x,y축 중앙)

SnapKit은 iOS앱 개발자들이 AutoLayout 코드로 개발을 진행할 때 간결한 코드를 제공해 생산성을 크게 향상시켜준다고 생각해요.
그럼 이번 노트는 여기서 끗!!

2025년도 화이팅~!!! 🎉 🐍 🧧

https://github.com/SnapKit/SnapKit
https://snapkit.github.io/SnapKit/docs/

모리스

모바일 앱 개발 노트 :)

이전 포스트