[Swift] 프레임워크와 라이브러리 (2) UIKit SnapKit으로 비교하기

 

2024.02.23 - [iOS/SWIFT] - [Swift] iOS 커스텀 프레임워크 생성하고 사용하기

2024.02.26 - [iOS/SWIFT] - [Swift] 프레임워크와 라이브러리 (1)

2024.02.27 - [iOS/SWIFT] - [Swift] 프레임워크와 라이브러리 (2) UIKit SnapKit으로 비교하기

2024.02.29 - [iOS/SWIFT] - [Swift] 프레임워크와 라이브러리 (3) 접근제한자

 

 

 

 

프레임워크는 앱의 구조와 실행 흐름을 정의하며 이렇게 정의된 틀 안에서 개발합니다

라이브러리는 특정한 기능을 수행하는 코드의 집합이에요

 

iOS개발을 하다보면 가장 많이 접하게되는 프레임워크 중 대표적으로 UIKit, Foundation이 있고

라이브러리로는 SnapKit, Then, Alamofire 같은 게 있는 것 같아요!

 

이번 포스팅에서는 UIKit, SnapKit을 사용하여

오토 레이아웃 조절하는 코드를 통해 차이점을 보여드리도록 하겠습니다

 

 

🩵 UIKit & SnapKit

 

UIKit은 애플에서 iOS 개발을 위해 제공하는 핵심 프레임워크 중 하나입니다

UI컴포넌트를 포함하고 있고, 이런 개체를 사용하여 컨텐츠를 화면에 표시하죠

이벤트 처리, 애니메이션 등을 통해 컨텐츠(사용자)와 상호작용하며 시스템의 상호작용을 관리해요

 

SnapKit은 Swift로 작성된 오토 레이아웃을 쉽게 만들어주는 Domain Specific Language 입니다

iOS와 OS X에서 동작한다고 하네요!

 

 

 

✔️ 차이점

UIKit은 iOS 앱 UI 구축을 위해 만들어진 필수적인 프레임워크이고

SnapKit은 UIKit의 오토 레이아웃을 더욱 효율적으로 사용하기 위해 나온 보조 도구인 라이브러리입니다

 

 

 

 

✔️  UIKit 프레임워크 

UIKit은 iOS 애플리케이션의 UI를 구성하는 기본적인 요소를 제공합니다

 

버튼, 레이블, 테이블 뷰 같은 UI 컴포넌트 뿐만 아니라

터치, 제스처, 애니메이션 등을 처리하는 기능도 포함되어 있어요

 

미리 규칙으로 정의된 이러한 요소를 사용하여 개발자는 다양한 UI를 쉽게 구현할 수 있습니다

 

 

 

아래는 버튼을 하나 만드는 예시입니다

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // UIButton 생성
        let button = UIButton(type: .system) // .system 타입의 버튼을 생성합니다.
        button.setTitle("Tap Me!", for: .normal) // 버튼의 기본 상태에 표시될 텍스트를 설정합니다.
        button.translatesAutoresizingMaskIntoConstraints = false // 오토레이아웃 제약 조건을 코드로 설정하기 위해 필요합니다.
        view.addSubview(button) // 현재 뷰 컨트롤러의 뷰에 버튼을 추가합니다.
        
        // 버튼의 위치와 크기를 정의하는 제약 조건을 설정합니다.
        NSLayoutConstraint.activate([
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor), // 버튼을 뷰의 가운데로 정렬합니다.
            button.centerYAnchor.constraint(equalTo: view.centerYAnchor) // 버튼을 뷰의 중앙에 위치시킵니다.
        ])
        
        // 버튼의 액션 추가
        button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
    }
    
    @objc func buttonAction() {
        // 버튼 탭 시 실행될 코드
        print("Button was tapped!")
    }
}

 

UIKit 프레임워크를 사용하면 이렇게 간단한 코드로

iOS 애플리케이션 UI를 효과적으로 구성하고, 관리할 수 있어요!

 

다만 제가 텍스트를 하나 더 넣고싶다고 setTitle2 메서드를 만들수는 없습니다ㅠㅠ

 

 

 

 

 

 

✔️ SnapKit 라이브러리

 

라이브러리는 개발할 때 사용할 수 있는 유용한 도구(메서드) 모음이라고 설명할 수 있어요

 

 

SnapKit 라이브러리를 사용한 실제 코드를 봐볼까요?

 

이것은 객체간 레이아웃 관계를 나타내는 NSLayoutConstraint를 사용하여 구현한 오토 레이아웃 코드입니다

view.addSubview(subview)

subview.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    subview.topAnchor.constraint(equalTo: view.topAnchor),
    subview.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    subview.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    subview.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])

 

이건 SnapKit 라이브러리를 사용해서 구현한 오토 레이아웃 코드입니다

view.addSubview(subview)

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

 

 

우선 눈에 띄는 차이점으로는 translatesAutoresizingMaskIntoConstraints 를 설정하지 않아도 되고,

동작을 위한 코드도 눈에 띄게 줄어들었죠?

 

 

이렇듯 라이브러리는 앱의 생산성을 높여주는 용도로 많이 사용합니다!

주절주절.. 길게 작성해야 할 코드를 간략하게 사용할 수 있게 보조해주는 도구인 것이죠

 

 

 

 

 

🩵 라이브러리의 높은 자유도

라이브러리는 앱 구조에 영향을 주지 않기 때문에 필요에 따라 코드를 군데군데 커스텀하게 사용할 수 있어요

 

 

1) 조건부 레이아웃 구현 코드입니다

 

앱의 전반적인 구조에 영향을 주지 않으면서도,

개발자가 앱의 특정 부분에 대해 컨트롤을 할 수 있게 해줘요

 

// 화면의 크기를 체크하여 프로필 사진의 크기를 조정하는 로직
if UIScreen.main.bounds.width > 375 { // 예: 375픽셀보다 큰 화면인 경우
    profileImageView.snp.updateConstraints { make in
        make.width.height.equalTo(150) // 프로필 사진 크기를 더 크게 조정
    }
}

// 추가적인 조건에 따라 레이아웃을 조정할 수 있는 로직
// 예: 사용자 설정에 따라 레이블의 위치 조정
if userPrefersAdditionalSpacing {
    userNameLabel.snp.updateConstraints { make in
        make.top.equalTo(profileImageView.snp.bottom).offset(40) // 간격 증가
    }
}

 

 

 

2) 이벤트가 발생했을 때 레이아웃을 변경하는 코드입니다

 

이벤트 기반 레이아웃 변경은 사용자 경험을 향상시키는 중요한 요소 중 하나인데요,

이렇게 사용자 상호작용에 따라 UI를 즉각적으로 변경할 수 있는 유연성을 가집니다

 

let button = UIButton()
view.addSubview(button)
button.snp.makeConstraints { make in
    make.center.equalToSuperview()
    make.width.height.equalTo(100) // 초기 크기
}

// 버튼 탭 액션 추가
button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)

// 버튼 탭 액션 핸들러
@objc func buttonTapped() {
    // 크기를 변경하는 로직
    button.snp.updateConstraints { make in
        make.width.height.equalTo(150) // 크기를 150픽셀로 변경
    }
    
    // 애니메이션을 통한 레이아웃 변경 적용
    UIView.animate(withDuration: 0.3) {
        self.view.layoutIfNeeded()
    }
}

 

 

 

 

 

 

둘 다 SnapKit 라이브러리를 사용해서 동작시키고 있지만

개발자가 커스텀한 옵션을 추가해주었죠?

 

이런식으로 프레임워크보다는 조금 더 자율성 있게 사용할 수 있어요

 

 

---

 

 

이렇게 프레임워크와 라이브러리, 각각 대표적인 것들을 하나씩 선택해서 비교해보았는데 어떠신가요?

이제 좀 역할의 차이가 감이 잡히는 것 같아요ㅎㅎ

 

다음 포스팅은 프레임워크의 접근제한자에 관련한 내용을 적어볼까 합니다!

~ヾ(＾∇＾)

 

 

2024.02.23 - [iOS/SWIFT] - [Swift] iOS 커스텀 프레임워크 생성하고 사용하기

2024.02.26 - [iOS/SWIFT] - [Swift] 프레임워크와 라이브러리 (1)

2024.02.27 - [iOS/SWIFT] - [Swift] 프레임워크와 라이브러리 (2) UIKit SnapKit으로 비교하기

2024.02.29 - [iOS/SWIFT] - [Swift] 프레임워크와 라이브러리 (3) 접근제한자

 

 

 

 

 

 

https://developer.apple.com/documentation/uikit/nslayoutconstraint

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

https://developer.apple.com/documentation/uikit