본문 바로가기

iOS

[iOS] Storyboard 없이 코드로 UI 구성하기 -1-

안녕하세요! Wody 입니다.

 

오랜만에 포스팅을 하네요 ☺️

 

비도 오고 다른 일들을 하느라 글을 못쓰고 있었는데...! 

이번에 프로젝트를 하나 새로 하면서 너무나도 당연하게 하고 있던 일들을 한번 정리해보고자 왔습니다.

 

오늘의 주제는 바로 `Storyboard 없이 코드로 UI 구성하기` 입니다.

제가 처음 iOS 개발을 배우면서 Storyboard 없이 코드를 왜 구성해야 하는지 이해를 못했는데요.

코드로 UI를 작성하면 나에게 불필요한 UI 관련 정보와 기능을 접하지 않고, 필요한 기능만 끌어다 사용이 가능합니다!

 

반대로 반복적으로 사용되는 UI가 있다면, Custom View를 통해 언제든지 UI를 찍어낼 수 있다는 장점이 있습니다!

또한 복잡한 아웃렛 연결도 안해도 되구요!

 

암튼 코드로 UI 구성하기! 츄라이 츄라이~

 

코드로 UI 구성하기 위한 세팅

참고 글 : https://sarunw.com/posts/how-to-create-new-xcode-project-without-storyboard/

 

How to create a new Xcode project without Storyboard | Sarunw

Modify AppDelegate or SceneDelegate to support a non-storyboard approach.

sarunw.com

 

0. 프로젝트 생성

Xcode를 통해 프로젝트를 생성해줍니다

이름은 `NonStoryboard` 프로젝트인데 storyboard가 있네요

 

지금부터 3가지 작업을 하게 될겁니다.

 

1. Main Interface 삭제

2. Info.plist 정보 수정

3. SceneDelegate의 window를 ViewController와 연결

 

 

1.  Main Interface 삭제

1번의 경우 storyboard 없이 UI 만들기니깐, Main.storyboard를 삭제해줘야겠죠? 



과감하게 Main.Storyboard 파일을 삭제하겠습니다

 

그리고 NonStoryboard.xcodeproj 파일로 가서 project 정보 중 main interface의 main 부분을 삭제해줍니다.

 

 

2.  Info.plist 정보 수정

Application Scene Manifest > Scene Configuration > Application Session Role > Item 0 > Storyboard Name 을 삭제해주세요 (키보드의 delete 키를 누르면 됩니다)

3. SceneDelegate 수정

`SceneDelegate.swift` 파일에 있는 SceneDelegate.scene 메소드를 수정해줄겁니다.

 

원본은 다음과 같이 생겼습니다.

깔끔하게 정리해줬습니다.

 

 

// SceneDelegate.swift

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?

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

 

원본에는 func scene 말고도 다양한 메소드가 있었습니다. 그런데 삭제해도 잘 돌아갑니다.

 

왜냐하면 앱의 생명주기 - scenedelegate의 메소드의 역할을 알아보시면 자세하게 알 수 있습니다! (이 글의 주제는 아니니깐 짧게짧게)

 

4. 시뮬레이터 실행

위 과정을 진행하고 시뮬레이터를 돌려보면 검정 화면만 보일겁니다. 왜냐하면 rootViewController인 ViewController에 아무것도 없기 때문이죠. 아무것도 없는 우주 공간도 검정색이잖아요 😉

 

그래서 확인하고 싶어서 ViewController의 배경색을 입혀줬습니다.

그리고 다시 실행해보면!

 

 

시뮬레이터의 배경색이 변했습니다!

 

다음 시간에는 코드로 UIView, Button 등 UI를 구성해보는 시간을 가져보겠습니다.