[iOS] SnapKit 사용해보기

☁ SanpKit Download

SnapKit/SnapKit

 

1. SnapKit을 접하게 된 계기

회사에서 기존 어플리케이션 리팩터링을 결정했다.

 

현재 어플리케이션은 Obj-C로 되어있기도 했고,

부분 부분만 Swift가 사용되면서 유지보수성이나 추가 기능을 제작할 때 많은 제약사항이 있었고, 이에 따라 퍼포먼스도 좋을 수가 없었다.

 

현재 환경을 고려해서 UI를 Storyboard를 채택할 것인지, SnapKit을 채택할 것인지 많은 논의가 오갔다.

SnapKit을 채택하게 된 가장 큰 이유는 협업에서의 StoryBoard의 단점때문이었다.

많은 사람들이 커밋할 경우 간간히(자주) 충돌이 일어나기도 했고,

앞으로 많은 UI를 제작해야 할 텐데 StoryBoard로 제작할 경우 한 스크린당 하나의 StoryBoard를 만들어야 했다.

 

일단 위의 문제만으로도 SnapKit의 채택 이유는 명확했다.

리팩터링에 직접적으로 참여하게 될지는 명확하지 않지만, 추후에 모두 리팩터링이 완료된 코드를 볼 때나,

직접 참여하게 될 미래를 대비하기 위해서 SnapKit에 대해서 조금은 알아두어야겠다는 생각을 했다.

 

---

2. 무작정 SnapKit을 써보자!

먼저 SnapKit에 대해서 눈으로만 정보를 접한 뒤에.. 직접 코드를 작성해보자!라고 생각했다 🤤

 

SnapKit을 활용해 제작해 볼 예제

위 예제는 아래 페이지에서 참고하고 제작해보았다.
어떻게 Constrant를 적용하는지 곁눈질로 보고 직접 하나하나 코드를 작성해보았다.

Swift 로 iOS 앱 만들기 - 04 : SnapKit 사용 / leading 과 trailing

 

2-1. 🤖 추가할 UI 요소들

let nameLabel = UILabel()
let nameTextField = UITextField()
let changeButton = UIButton()

 

drawFunction함수에 하나씩 넣어서 UI를 그려보자!

func drawView() {
	...
}

 

func drawView() {
	// view에 nameLabel, nameTextField, changeButton을 넣어줍니다.
	// 넣지 않으면 생성만된 채 view에 그려지지 않으니까요!
	self.view.addSubview(self.nameLabel)
	self.view.addSubview(self.nameTextField)
	self.view.addSubview(self.changeButton)
	
	self.changeButton.backgroundColor = UIColor.red
	self.changeButton.snp.makeConstraints { constraint in
    	// SuperView(전체 스크린 뷰)의 정중앙에 오게 하기 위해서
	    constraint.center.equalToSuperview()
	}
	
	self.nameLabel.text = "Text"
	self.nameLabel.backgroundColor = UIColor.black
	self.nameLabel.snp.makeConstraints { constraint in
    	// SuperView에서 80만큼 아래로
	    constraint.top.equalToSuperview().offset(80)
        // label의 height는 24로
	    constraint.height.equalTo(24)
        // SuperView에서 24만큼 오른쪽으로
	    constraint.leading.equalToSuperview().offset(24)
        // SuperView에서 24만큼 왼쪽으로
	    constraint.trailing.equalToSuperview().offset(-24)
	}
	
	self.nameTextField.backgroundColor = UIColor.yellow
	self.nameTextField.text = "TextField"
	self.nameTextField.textAlignment = .center
	self.nameTextField.snp.makeConstraints { constraint in
    	// leading과 trailing을 한번에 nameLabel과 동일하게
	    constraint.leading.trailing.equalTo(self.nameLabel)
        // nameLabel의 bottom위치를 기준으로 아래로 24만큼 위치하게
	    constraint.top.equalTo(self.nameLabel.snp.bottom).offset(24)
	}
}

 

2-2. 👍🏻 결과물

 

---

 

3. 처음 사용해본 SnapKit 후기

아무래도 처음 사용해보았기 때문에 생김새가 어색한 부분은 분명 있었지만, 기존 iOS에서 Constraint에 대한 이해가 있었기 때문에 생김새에 적응만 한다면 충분히 적응해서 편하게 UI를 그릴 수 있을 것이라고 생각합니다.

다음에는 조금 더 복잡한 UI를 SnapKit으로 그려보면서 조금 더 익숙해지는 시간을 가지고자 합니다.