iOS/Xcode 14X - 4. Splash screen 추가

 

Splash screen 이란?

스플래시 스크린(또는 런치 스크린)이란 앱을 구동(Cold start)할 때 보여주는 시작화면을 말한다. 앱의 데이터를 로딩하는 시간 동안 빈 화면을 보여주지 않기 위해 1초에서 2초 정도 노출되며 게임같이 용량이 큰 경우 더 오랜 시간 동안 노출되기도 한다. (참조 사이트에서 퍼옴)

 

 

이미지 만들기

이미지는 케이스에 따라 다양한 사이즈가 필요한데, 보통 사이즈별로 직접 만들기 보다는 App Icon Genrator 사이트를 활용한다.

1024x1024 사이즈의 아이콘 이미지를 준비하고 아래 사이트 접속 후 Generate 버튼을 클릭하면 아이템이 만들어 진다.

https://appicon.co/

App Icon Generator

다양한 이미지 사이즈

 

Assets 이미지 등록

AppIcon

참조 유튜브에서는 쉽게 등록이 가능한것 같지만 중요한건 아님으로 노가다로 이미지 사이즈에 맞게 드래그 앤 드롭..!

Assets -> AppIcon 이미지 사이즈에 맞게 등록

Splash

앱 시작시에 보여줄 이미지를 등록해야한다, svg 및 png 모두 가능한것 같아서 가지고 있는 svg파일로 등록하였습니다.

 

LaunchScreen 설정

LaunchScreen을 누르면 원래대로라면 실수로 View Controller Scene을 지워버렸다..

첨부터 다시 하기 그러니깐 View Controller를 만드는 부분 부터 시작하겠다.

 

실수! View Controller Scene삭제 없음!

 

View Controller 생성

LaunchScreen -> + -> 드래그 앤 드롭

 

짜잔! View Controller 생성됨

 

이제 Splash 이미지를 적용해보자.

View 콤포넌트를 추가해준다.

View 검색 후 해당 위치에 드래그 앤 드롭해서 추가해 준다.

 

View를 앱 모든 영역에 꽉 차도록 설정

Constraints 등록을 통해 View가 앱 모든 영역에 꽉차도록  한다.

 

Background 색상 설정 후 단말기를 변경해도 VIew가 모든 영역을 차지하는지 확인

테스트 이후에는 Background 색상 원복

 

Splash 이미지용 Image VIew 추가

두가지 방법이 있지만 우린 Image View 추가하는 방식으로 진행

 

추가된 Image View에 Assets에서 등록한 Splash 이미지로 변경

 

Constraints를 통해 단말기에 상관없이 Splash 이미지 중앙 배치

 

View Controller 새로 생성했더니 아래 에러 발생..!

“View Controller“ is unreachable because it has no entry points, and no identifier for runtime access via -[UIStoryboard instantiateViewControllerWithIdentifier:].

아래 사진과 같이 시작하는 컨트롤러로 지정

Is Initial View Controller 설정

 

최종 확인

AppDelegate 딜레이 주기

캡쳐뜨기 위해서 임시로 주고 나중에 빼자.

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        // TODO. 스플래시 딜레이 3초
        Thread.sleep(forTimeInterval: 3.0)
        
        return true
    }
    
    ....
}

 

성공!!

 

역시 정리하면서 하는게 머리속에 더 잘 들어오는것 같습니다!

 

참조

https://brunch.co.kr/@kangsigner/1

스플래시 스크린은 꼭 필요할까?

https://velog.io/@2ast/React-Native-ios-app-icon%EA%B3%BC-splash-screen-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

React Native) ios app icon과 splash screen 적용하기

https://www.youtube.com/watch?v=-EurVuAil4A