[iOS] SnapKit과 AutoLayout

✅ SnapKit이란?

• SnapKit은 iOS에서 오토레이아웃을 코드로 작성할 수 있게 도와주는 프레임워크
• 기존의 NSLayoutConstraint보다 훨씬 간결하고 직관적으로 레이아웃을 구성

// Auto Layout 코드 (기본 방식)
NSLayoutConstraint.activate([
    label.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
    label.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])

// SnapKit 방식
label.snp.makeConstraints { make in
    make.top.equalToSuperview().offset(20)
    make.centerX.equalToSuperview()
}

 

 

✅ 헷갈렸던 개념들

1️⃣ inset vs. offset

	inset	offset
목적	크기 줄이기 (padding)	위치 조정 (margin)
	같은 anchor에 제약 걸 때	다른 anchor에 제약 걸 때
적용 예	edges.equalToSuperview().inset(20)	top.equalTo(label.snp.bottom).offset(20)
방향성	네 방향 동시에 설정 가능	보통 한 방향씩 설정
값 방향	inset(20) → 안쪽으로 20pt	offset(20) → 아래/오른쪽 20pt 이동→ offset(-20) → 위/왼쪽 이동
요약	부모보다 작게 만들고 싶을 때 보통 edges, leading, trailing에 사용	기준점에서 떨어뜨리고 싶을 때 보통 top, bottom 등에 사용

 

view.snp.makeConstraints { make in
    make.edges.equalToSuperview().inset(20) // 네 방향 모두 안쪽으로 20pt -> 뷰의 크기가 작아짐
}

view.snp.makeConstraints { make in
    make.top.equalTo(titleLabel.snp.bottom).offset(20) // titleLabel 기준 아래로 20pt 떨어짐 -> 뷰의 위치만 바뀜, 크기는 그대로
}

 

 

2️⃣ left, right vs. leading, trailing

	left, right	leading, trailing
의미	물리적 왼쪽/오른쪽	언어 방향 기준 왼쪽/오른쪽
특징	화면이 어떤 언어이든 항상 같은 방향	영어(좌→우), 아랍어(우→좌) 등 언어 방향에 따라 달라짐

-> 로컬라이제이션과 접근성을 고려했을때, leading, trailing를 권장! (left, right는 없다고 생각하는게..)

 

3️⃣ 동시 설정 앵커들

top, bottom, leading, trailing -> directionalEdges

leading, trailing -> directionalHorizontalEdges

top, botton -> directionalVerticalEdges

 

4️⃣ 안해줘도 되는 설정

// Auto Layout을 설정할 때, UIKit의 자동 제약 설정을 끄는 설정
translatesAutoresizingMaskIntoConstraints = false

 

추후에 헷갈리는 것들 계속 추가 예정..!