[Swift] iOS 스플래시 / 런치 스크린 화면 만들기

 

iOS Splash

메인화면 로딩 페이지

iOS 스플래쉬 화면

LaunchScreen.storyboard 코드 베이스 구현

 

이게 다 뭐냐고요?

제가 스플래시 화면 넣고 싶어서 검색했던 키워드 입니다...

 

(참고로 안드로이드에서 스플래시라고 부르고, iOS는 런치 스크린입니다)

슬픔

 

 

당연히 스토리보드로 작업하면 편했겠죠...

그러나 저는 코드 베이스로 UI를 구현하고 있기 때문에 방법을 찾아 헤맸습니다

 

해당 스플래시 화면에 로고를 띄워줄 목적으로 정보를 찾아보다가 이런 정보를 발견했습니다

 

https://developer.apple.com/design/human-interface-guidelines/launching#Launch-screens

Launching | Apple Developer Documentation

https://developer.apple.com/design/human-interface-guidelines/launching

Launching | Apple Developer Documentation

 

Don’t advertise. 

The launch screen isn’t a branding opportunity. Avoid creating a screen that looks like a splash screen or an “About” window, and don’t include logos or other branding elements unless they’re a fixed part of your app’s first screen. If your game or other immersive app displays a solid color before transitioning to the first screen, create a launch screen that displays only that solid color.

 

 

광고하지 마세요. 
시작 화면은 브랜딩을 위한 기회가 아닙니다. 스플래시 화면이나 '정보' 창처럼 보이는 화면을 만들지 말고 앱 첫 화면의 고정된 부분이 아니라면 로고나 기타 브랜딩 요소를 포함하지 마세요. 게임이나 기타 몰입형 앱에서 첫 화면으로 전환하기 전에 단색으로 표시되는 경우 해당 단색만 표시하는 시작 화면을 만드세요.

 

 

 

런치 스크린/스플래시 화면에 로고같은 걸 넣어서 정보 화면으로 사용하지 말고

메인 화면에서 데이터만 빠진 느낌으로 제공하라는 겁니다.

 

마치 위에 예시로 있는 사파리 로딩화면처럼요....

 

하지만 찾아보니 모두가 첫 진입 로딩화면으로 사용중이라서 저도 그냥 썼습니다 ^^

 

 

---

 

✔️ SceneDelegate 설정

 

저는 iOS 14를 기준으로 개발하고 있기 때문에 SceneDelegate에서 네비게이터를 작업해주었습니다

❓ iOS 13 부터 SceneDelegate를 사용하는 이유? -> 링크

 

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 }
        
        let window = UIWindow(windowScene: windowScene)
        window.overrideUserInterfaceStyle = UIUserInterfaceStyle.light
        
        let splashVC = SplashViewController()
        window.rootViewController = splashVC
        window.makeKeyAndVisible()
        
        self.window = window
        
        let rootVC = MainGPSViewController()
        
        // 스플래시 화면 2초 노출
        DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
            let navigationController = UINavigationController(rootViewController: rootVC)
            
            self.window?.rootViewController = navigationController
        }
    }
    
    
    // ... 하단 코드 생략
    
}

 

 

이 코드는 앱이 실행될 때 스플래시 화면을 표시하고, 일정 시간이 지난 후에 메인 화면을 표시하는 프로세스를 구현하고 있어요

 

1. SplashViewController의 인스턴스를 생성하고 앱의 주 창의 루트 뷰 컨트롤러로 SplashViewController를 설정
2. 현재 SceneDelegate의 window 프로퍼티에 새로 생성된 window를 할당
3. 현재 스레드에서 비동기적으로 클로저를 실행
4. 2초동안 SplashViewController를 보여줌
5. UINavigationController(rootViewController: rootVC)를 새롭게 할당해서 스플래시 화면 -> 메인화면으로 변경

 

 

❓ DispatchQueue.main.asyncAfter

 

지정된 시간 이후에 클로저를 비동기적으로 실행하기 위한 DispatchQueue의 메서드입니다!

현재 스레드에서 지정된 시간이 경과한 후에 클로저를 실행해요

 

단순히 그냥 시간차를 두고 클로저를 실행하고 싶다! 할 때 사용해주면 됩니다

 

클로저 내부에 작성된 코드는 지연 후에 비동기적으로 실행되어요

 

 

https://developer.apple.com/documentation/dispatch/dispatchqueue/2300020-asyncafter

asyncAfter(deadline:execute:) | Apple Developer Documentation

 

 

 

 

 

✔️ SplashViewController 

 

런치 스크린 (스플래시) 화면을 만들때 주의점이 있습니다

1. UIKit만을 사용
2. 단 하나의 UIView나 UIViewController 객체만을 사용
3. 액션, 아울렛과 같은 코드를 연결하면 안 ㄷ됨
4. UIWebView를 사용하면 안 됨
5. 어떤 커스텀 클래스도 사용하면 안 됨
6. 런타임 속성을 사용하면 안 됨

 

저는 간단하게 UIViewController와 ImageView를 사용해서 로딩창을 만들었어요

 

final class SplashViewController: UIViewController {
    
    // MARK: - UI Properties
    
    private lazy var logoImage: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFit
        
        imageView.image = UIImage(named: "Logo")
        
        return imageView
    }()
    
    // MARK: - Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
    
        setUI()
        setLayout()
    }
    
}

// MARK: - Extensions

extension SplashViewController {
    private func setUI() {
        view.backgroundColor = .mainTheme
        
        view.addSubview(logoImage)
    }
    
    private func setLayout() {
        logoImage.snp.makeConstraints { make in
            make.center.equalToSuperview()
            make.width.equalToSuperview().multipliedBy(0.5)
        }
    }
}

 

 

 

✔️ 완성본

 

깔끔하게 잘 됐네요! ㅎㅎ