[SwiftUI] Launch Screen 만드는 방법들(코드, Info.plist)

 

앱을 개발할 때 꼭 빠질 수 없는 부분이 바로 Launch Screen!

오늘은 시작 화면을 간단하게 구현하는 방법을 알아보기로 ㅎㅎ

---

Launch Screen

앱이 구동될 때 보여주는 첫 시작 화면이다.

그럼 직접 만들어보자!

---

방법 1. Info.plist 파일로 설정하기

1️⃣ Assets에 필요한 부분을 추가하자.

LaunchScreen에는 로고와 배경색 정도가 필요할 것 같으니 Color, Image 각 하나씩 추가한다.

2️⃣ 프로젝트의 Target > Info에 들어가서 Launch Screen을 찾자.

Key 값에 LaunchScreen이 있을거임!!

3️⃣ + 버튼으로 Launch Screen 밑에 속성들을 추가해주자.

나는 여기서 Image Name과 Background color, Image respects safe area insets를 추가해보았다.

 

이제 실행해보면?? 잘 작동하는 것을 볼 수 있다.

---

방법 2. 코드로 구현해보기

아까처럼 에셋에 추가 해주고!

 

1️⃣ LaunchScreen 뷰를 하나 만들어서 코드를 작성해보자.

import SwiftUI

struct LaunchScreen: View {
    var body: some View {
        ZStack {
            Color.white
            
            VStack {
                Image("Image")
            }
        }
        .ignoresSafeArea()
    }
}

#Preview {
    LaunchScreen()
}

 

2️⃣ ContentView로 돌아와서 onAppear 모디파이어를 사용해서 작성해보자.

import SwiftUI

struct ContentView: View {
    
    @State var isLaunching: Bool = true
    
    var body: some View {
        VStack {
            if isLaunching {
                LaunchScreen()
                    .onAppear {
                        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                            isLaunching = false
                        }
                    }
            } else {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Hello, world!")
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

 

그럼 이제 실행을 해보쟈!

 

이렇게 잘 실행되는걸 볼 수 있다.

 

둘이 뭐가 다른지는 바로 알 수 있는데 Info.plist 기반은 앱을 누르는 동시에 LaunchScreen을 볼 수 있는데, 코드로 직접 만든 LaunchScreen은 흰색 화면이 짧게 보인 후에 뜨는 걸 볼 수 있다.

 

방법은 다양하니까!

 

오늘도 코드레시피 끄읕~👩🏻‍🍳