[Swift / iOS] LaunchScreen 설정 (UIKit, Storyboard)

 

 

UIKit, Storyboard로 개발하면서 LaunchScreen을 설정해보자.

(안드로이드에서는 Splash Screen이라고 부른다.)

 

생각보다 간단하다.

SwiftUI가 아닌, Storyboard로 프로젝트를 생성하면, LaunchScreen.storyboard라는 파일이 생기게 되는데, 

우리는 이것을 이용할 것이다.

 

LaunchScreen.storyboard

정적인 화면

 

단순히 이미지나 로고, Label 등으로 구성하려면

LaunchScreen.storyboard라는 파일 안에, 이미지를 넣던, 단순 Label을 넣던 취향껏 구현해주면 된다.

방법은 기존 Stroyboard로 UI를 구현할 때와 같은 방식이다.

 

단, 이렇게 구현하는 방식은 정적인 화면만 표시할 수 있다.

동적인 화면, 애니메이션 등을 추가하려면  LaunchScreen.storyboard대신, 앱의 첫 화면에서 구현해야 한다.

 

동적인 화면

import UIKit

class SplashViewController: UIViewController {
    let logoImageView = UIImageView(image: UIImage(named: "app_logo"))

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setupLogo()
        animateLogo()
    }

    private func setupLogo() {
        logoImageView.contentMode = .scaleAspectFit
        logoImageView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(logoImageView)

        NSLayoutConstraint.activate([
            logoImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            logoImageView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            logoImageView.widthAnchor.constraint(equalToConstant: 150),
            logoImageView.heightAnchor.constraint(equalToConstant: 150)
        ])
    }

    private func animateLogo() {
        UIView.animate(withDuration: 1.5, animations: {
            self.logoImageView.alpha = 0.0
        }) { _ in
            // 애니메이션이 끝난 후 메인 화면으로 이동
            let mainVC = MainViewController()
            mainVC.modalTransitionStyle = .crossDissolve
            mainVC.modalPresentationStyle = .fullScreen
            self.present(mainVC, animated: true)
        }
    }
}

변수명이나 이동할 뷰 등 상황에 맞게 코드를 수정해야겠지만, 대략 이런식으로 코드를 작성하면 된다.

 

 

SnapKit으로 코드를 좀 더 단순하게 하려면, 

import UIKit
import SnapKit

class SplashViewController: UIViewController {
    let logoImageView = UIImageView(image: UIImage(named: "app_logo"))

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setupLogo()
        animateLogo()
    }

    private func setupLogo() {
        logoImageView.contentMode = .scaleAspectFit
        view.addSubview(logoImageView)

        logoImageView.snp.makeConstraints {
            $0.center.equalToSuperview()
            $0.width.height.equalTo(150)
        }
    }

    private func animateLogo() {
        UIView.animate(withDuration: 1.5, animations: {
            self.logoImageView.alpha = 0.0
        }) { _ in
            // 애니메이션이 끝난 후 메인 화면으로 이동
            let mainVC = MainViewController()
            mainVC.modalTransitionStyle = .crossDissolve
            mainVC.modalPresentationStyle = .fullScreen
            self.present(mainVC, animated: true)
        }
    }
}

이런 식으로 구현하면 되겠다.

 

 

여기까지만 해도 충분히 LaunchScreen은 구현되었지만, 한가지 작업을 더 거쳐주는 것이 좋다.

 

info.plist

info.plist파일에서, UILaunchStoryboardName이라는 Key를 추가하고(추가는 저기 선택된 창에 보이는 + -버튼을 이용하면 됨),

Value에는 LaunchScreen을 넣는다.

 

왜 이 과정이 필요할까?

이 과정을 거치지 않아도 LaunchScreen을 표시하는데는 아무 문제가 없다. 

왜냐하면 Xcode가 자동으로 LaunchScreen이라는 파일을 찾아서 사용하기 때문이다.

 

But

파일이름을 바꿔서 사용한다면?

Xcode는 LaunchScreen이라는 파일을 찾지 못했기 때문에, 흰화면이나 검은화면만 나오고 넘어갈 것이다.

따라서 이것을 방지하기 위해서 이 작업이 필요한 것이다.

 

혹은 다른 작업을 하다가,

프로젝트를 리팩토링하다가,

다른 작업자가 파일 이름을 바꾼다던지,

가끔 특정 서드파티 라이브러리나 빌드설정에서 Launch Screen을 참조하는 경우,

UILaunchStoryboardName 키가 설정되지 않으면 충돌이나 동작 오류가 발생하는 경우도 있다.

이러한 문제를 방지하고 안정성위해서 그냥 info.plist에 어떤것을 LaunchScreen으로 사용하는지 명시하는 것이 좋다.

 

그리고 협업이나 나중에 다른사람이 유지보수를 할때도,

info.plist에 어떤것을 LaunchScreen으로 사용하는지 명확하게 명시하는 것이 혼란을 야기하지 않을 것이다.

 

 

 

노출 시간 설정

Launch Screen이 보여지는 시간을 설정하고 싶다면,

AppDelegate.swift 파일에서 설정하면 된다.

 

 

Thread.sleep(forTimeInterval: 3.0)

뒤에 숫자를 변경하면 된다. 초단위