[iOS] UIKit으로 No 스토리보드 세팅하기

!·2023년 2월 26일

iOS

목록 보기

16/22

Overview

기존에 UIKit을 공부할 때는 인터페이스 빌더를 이용해 스토리보드와 클래스파일을 연결해 공불르 해왔다.
하지만, 유어슈에서 코드베이스로 UI 구성에 대한 발표영상을 보고 인터페이스 빌더가 장점만 있는 게 아닌 걸 알게되었다. 인터페이스 빌더를 통한 개발의 장점은 초심자에게는 쉬운 난이도, UI를 통한 코드 베이스 설계등의 장점이 있다.
하지만, 단점은 코드의 유지보수가 어려울 수 있다는 점과 매 번 cmd + R을 눌러 내가 작성한 코드에 대한 결과를 확인해야한다는 점이다.

그래서?

이 포스트를 작성하기전에는 인터페이스 빌더에서 제공하는 @IBDesignable 속성을 이용해 내가 작성한 코드에 대한 결과를 즉각적으로 확인하고자 하였다. 하지만, 결국에는 이와 같은 방식도 스토리보드 및 객체와 클래스를 결국 연결해야 하는 것이기때문에 스토리보드로 개발하는 것과 마찬가지인 셈이 였다. 특히, 인터페이스 빌더로 오토레이아웃을 주게되면 생각보다 오토레이아웃이 내가 설정한 방향대로 되지는 않았다. 내가 No 스토리보드로 개발하고자 하는 이유 중에는 인터페이스 빌더를 통한 오토레이아웃이 너무 엉망인 이유도 있다.

No 스토리보드 세팅하기

첫번째는 프로젝트 디렉토리에 Main 스토리보드를 삭제한다.

두번째는 Info.plist 에 가서 Application Scene Manifest > Scene Configuration > Storyboard Name 어트리뷰트 자체를 삭제한다. ( - 버튼 누르면 됨!)

세번째는 프로젝트 파일로의 Deployment Info의 Main Interface 항목을 지운다. 아마 Main이라고 적혀있을 것이다.

마지막으로, SceneDelegate 파일의 sceneWillConnect 메소드에 다음 코드를 넣어준다.
이때 rootViewController에는 첫 뷰컨트롤러의 클래스 인스턴스가 오면된다.
makeKeyAndVisible() 메소드는 현재 화면을 띄워주는 역할이다!

이렇게 하고 cmd + R을 눌러, 스토리보드없이 시뮬레이터가 정상작동하는 것을 알 수 있다!

SwiftUI의 Preview

No 스토리보드를 세팅한 후, 실시간으로 반영되는 UI를 확인하는 법까지 알아보자.
SwiftUI에서 제공하는 Preview 기능을 이용해 실시간으로 UI를 확인할 수 있다. 물론 인터페이스 빌더로 작업하는 중에도 실시간으로 확인할 수 있다.

위의 코드를 내가 보고자하는 뷰 컨트롤러 클래스 아래의 작성해주면 된다.
makeUIViewController() 메소드의 return 문만 현재 클래스의 인스턴스를 반환하면 된다.

option + cmd + p로 프리뷰를 반영할 수 있다!

`또한, PreviewProvider 구조체의 previews를 다음과 같이 구성하면 여러 기기에 대한 preview도 한 눈에 볼 수 있다.

struct ViewController_Previews: PreviewProvider{
    static var previews: some View{
        Group{
            ViewControllerRepresentable().previewDevice("iPhone 8")
            ViewControllerRepresentable().previewDevice("iPhone SE")
            ViewControllerRepresentable().previewDevice("iPhone 12 mini")
            ViewControllerRepresentable().previewDevice("iPhone 11")
            ViewControllerRepresentable().previewDevice("iPhone 13")
            ViewControllerRepresentable().previewDevice("iPhone 13 Pro Max")
        }
            
    }
}