[swift] SnapKit으로 스토리보드 대체하기

14 Nov 2023

swift

개요

스토리보드는 iOS 앱 개발에서 인터페이스를 구성하기 위해 자주 사용되는 도구입니다. 하지만 스토리보드는 대규모 프로젝트에서 불필요한 복잡성을 초래할 수 있으며, 협업과 버전 관리에 어려움을 줄 수 있습니다. 이런 이유로 스토리보드의 대안으로 코드로 인터페이스를 구성하는 방법을 찾게 되었습니다.

이번 포스트에서는 SnapKit을 사용하여 스토리보드를 대체하는 방법을 알아보겠습니다.

SnapKit이란?

SnapKit은 iOS 애플리케이션의 인터페이스를 구성하기 위한 DSL(Domain Specific Language)을 제공하는 라이브러리입니다. 이 라이브러리는 코드로 작성하는 방식으로 인터페이스를 구성할 수 있으며, Auto Layout을 쉽게 다룰 수 있는 기능을 제공합니다.

SnapKit 설치하기

SnapKit은 CocoaPods, Carthage, Swift Package Manager 중 선택할 수 있습니다. 본 예시에서는 CocoaPods를 사용하여 설치해보겠습니다.

터미널을 열고 프로젝트가 있는 디렉토리로 이동합니다.
Podfile을 생성합니다.

$ pod init

생성된 Podfile을 열고 다음과 같이 작성합니다.

platform :ios, '9.0'
use_frameworks!

target 'YourProjectName' do
  pod 'SnapKit', '~> 5.0'
end

Podfile이 있는 디렉토리에서 다음 명령어를 실행하여 SnapKit을 설치합니다.

$ pod install

이후로는 .xcworkspace 파일을 사용하여 프로젝트를 열어야 합니다.

SnapKit 사용하기

SnapKit을 사용하여 인터페이스를 구성하는 것은 간단합니다. 이번 예시에서는 간단한 프로필 화면을 코드로 작성해보겠습니다.

ViewController.swift 파일을 열고 다음과 같이 작성합니다.

import UIKit
import SnapKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let profileImageView = UIImageView()
        profileImageView.image = UIImage(named: "profile_image")
        profileImageView.contentMode = .scaleAspectFill
        profileImageView.layer.cornerRadius = 50
        profileImageView.clipsToBounds = true
        self.view.addSubview(profileImageView)
        
        profileImageView.snp.makeConstraints { (make) in
            make.centerX.equalToSuperview()
            make.centerY.equalToSuperview().offset(-100)
            make.width.height.equalTo(100)
        }
        
        let nameLabel = UILabel()
        nameLabel.text = "John Doe"
        nameLabel.font = UIFont.systemFont(ofSize: 24, weight: .bold)
        self.view.addSubview(nameLabel)
        
        nameLabel.snp.makeConstraints { (make) in
            make.centerX.equalToSuperview()
            make.top.equalTo(profileImageView.snp.bottom).offset(20)
        }
    }
}

Assets.xcassets에 프로필 이미지를 추가하고 “profile_image”라는 이름으로 설정합니다.
이후로 SnapKit을 사용하여 필요한 제약조건을 설정하고 뷰를 구성합니다.

결론

SnapKit은 스토리보드를 대체하는데 매우 유용한 라이브러리입니다. 코드로 인터페이스를 구성함으로써 프로젝트의 복잡성을 줄이고 협업과 버전 관리를 용이하게 할 수 있습니다. 향후 프로젝트에 스토리보드를 대신해 SnapKit을 활용해보는 것을 고려해보세요.

참고자료

SnapKit 공식 문서: https://github.com/SnapKit/SnapKit
SnapKit iOS 예제: https://github.com/SnapKit/SnapKit/tree/develop/Examples/iOS%20Example