[IOS] SnapKit 사용 스토리보드 없는 개발! (feat: SwiftUI_Preview_Provider)

지금까지 스토리보드만 사용하다 처음으로 SnapKit을 사용해 Autolayout을 코드로 간단하게 작성하고 사용해 봤습니다.

https://github.com/SnapKit/SnapKit

GitHub - SnapKit/SnapKit: A Swift Autolayout DSL for iOS & OS X

SnapKit ?

UI 작성 시 StoryBoard를 사용했을 때 빌드 시간이 오래 걸리는 단점 때문에 UI들을 코드로 작성하여 사용하는 부분이 있습니다.

아래 코드처럼 UI를 Autolayout을 정해 놓을 수 있지만 만일 여러 개의 많은 UI를 사용한다면 코드가 많이 복잡하게 됩니다.

// 코드로 layout을 잡을 때 false로 해줘야함
contentView.translatesAutoresizingMaskIntoConstraints = false
// constraint 작성
contentView.topAnchor.constraint(equalTo: 
			titleView.bottomAnchor, constant: 8.0).isActive = true

이런 단점을 해결할 수 있는 라이브러리가 바로 SnapKit입니다. 

imageView.snp.makeConstraints {
	$0.centerY.equalToSuperview()
	$0.leading.top.bottom.equalToSuperview().inset(20)
	$0.width.equalTo(80)
}

snp.makeConstraints 메서드를 사용해 내부에 클로저를 정의해주면 간단히 사용할 수 있습니다.

또한 contentView.translatesAutoresizingMaskIntoConstraints = false 이 부분도 SnapKit에선 내부에서 알아서 해줍니다.

SnapKit 코드에 대한 설명은 아래에서 알아보기로 하고, 먼저 내가 작성한 constraints가 오류가 난다면 어떻게 해야 할지 알아보겠습니다.

StoryBoard는 오류가 직관적으로 보였기에 어떤 부분을 수정해줄지 확인만 하면 됐지만, 코드로만 설정하기 때문에 실행하기 전 까진 실수를 알아차릴 수 없습니다.

실행을 시키면 로그에 상세히 어느 부분이 잘못됐는지 나오기 때문에, 문제없이 잘못된 코드를 수정할 수 있습니다.

34, 35, 37번 줄 코드에 문제가 있다고 알려주는 로그

SnapKit 자세히 알아보기

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

Requirements

사용법을 자세히 알아보려면 역시 공식 문서만 한 게 없는 거 같습니다. 자세한 것은 깔끔하게 정리된 공식문서에서 찾고 간단하게 자주 쓰는 것만 남겨보겠습니다.

예시

SuperView에 20씩 떨어져 있는 갈색 뷰를 만들어 보았습니다.

box의 레이아웃을 조절하는데 주석이 돼 있는 코드는 다 같은 동작을 합니다. 

offset의 경우 superView + offsetValue로 계산을 하기 때문에 right, bottom을 -20을 줍니다.

하지만 inset과 edges를 활용해 더 간결한 코드를 작성할 수 있습니다.

예시 2

equalToSuperView 말고도 equalTo()를 사용해 내가 레이아웃을 맞추고 싶은 대상을 지정하여 맞출 수 있습니다.

맞추고 싶은 대상의 어떤 뷰 속성인지 명시를 해줘도 되고 안 해줘도 정상적으로 작동합니다.

ViewAttribute 종류

여기서 Left-Leading, Right-Trailing은 같은 속성 같지만 다른 부분이 있습니다.

leading-trailing으로 설정을 하면 right-to-left로 읽는 나라의 경우 UI가 반전돼서 나온다고 합니다.. 그렇기에 left-right를 사용하면 UI반전 없이 작성을 할 수 있다고 합니다.

예시 코드에 썼던 edges처럼 여러 부분을 한 번에 정의할 수 있는 속성들이 있습니다.

처음 AutoLayout을 할 때 신경 쓰였던 부분인 Priority도 간단하게 설정할 수 있습니다.

 

직접 사용하기

이제 직접 프로젝트를 만들어서 간단하게 사용만 해보겠습니다. SnapKit 사용 코드는 위에 예시 든 것을 그대로 사용합니다.

먼저 storyBoard를 사용하지 않기 때문에 다 삭제를 해줬습니다. 하지만 그 상태에서 실행 시키면 target이 없기 때문에 오류가 납니다.

SceneDelegate에서 내가 사용할 컨트롤러를 root로 연결해줘 실행시 보이게 코드를 작성해야 합니다.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions:
UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }
    
    self.window = UIWindow(windowScene: windowScene)
    let rootViewController = ViewController()
    //let rootNavigationController = UINavigationController(rootViewController: rootViewController)
    
    self.window?.rootViewController = rootViewController
    self.window?.makeKeyAndVisible()
}

만약 navigationView를 사용하고 싶으면 window에 rootViewController를 만들어놓은 rootNavigationController를 넣어주면 됩니다.

그리고 StoryBoard를 지웠기 때문에 실행 시 Main StoryBoard를 바라보고 있는 옵션들을 삭제해줘야 합니다.

지워야 하는 부분들 (XCode14)

StoryBoard가 없기 때문에 꼭 실행을 해야지만 결과가 보이는 부분이 좀 귀찮은데요, 이 부분은 SwiftUI의 Preview를 사용하면 바로바로 수정사항을 확인할 수 있습니다. 물론 추가적인 작업이 필요합니다.

먼저 SwiftUI를 Import 해주시고, 아래와 같은 코드를 작성하면 됩니다.

// SwiftUI Preview Provider
struct ViewController_Preview: PreviewProvider {
    static var previews: some View {
        Container().edgesIgnoringSafeArea(.all)
    }
    
    struct Container: UIViewControllerRepresentable {
        func makeUIViewController(context: Context) -> UIViewController {
            let vc = ViewController()
            return UINavigationController(rootViewController: vc)
        }
        func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
    }
}

결과

Cmd + Opt + Enter를 눌러서 Preview 창을 볼 수 있습니다. 아니면 오른쪽 위에 버튼 있어요

간단한 SnapKit 알아보고 사용하기 끝