SwiftUI | Luanch Screen(Splash Image) 구현

 

 

 

SwiftUI로 앱을 구현하게 되면서 앱의 처음이라는 느낌 때문인지 제일 처음 시도한 게 Luanch Screen을 구현하는 거였다. UIKit과 달리 Luanch Screen 파일이 생성되어 있지 않아서 구글링부터 시작하게 되었는데, 문득 Luanch Screen과 Splash Image의 차이가 뭔지 궁금해졌다.

 

 

먼저 Luanch Screen과 Splash Image의 차이가 뭔지에 대해 알아보자. 

 

 

 

Launch Screen (런치 스크린)

• 정의: 앱이 실행될 때 가장 먼저 보여지는 화면으로, 사용자가 앱을 로드하는 동안 보여지는 화면
• 목적: 1) 앱의 초기 로딩 시간을 숨기고 사용자에게 앱이 로드되고 있다는 것을 시각적으로 전달
           2) 사용자에게 앱의 브랜드 아이덴티티를 강화하는 역할
• 구현 방법: iOS에서는 Launch Screen을 Storyboard 파일로 설정하는 것이 일반적
                  - 스토리보드에서는 이미지, 라벨, 버튼 등을 배치할 수 있으나, 애니메이션은 지원되지 않음
• 특징: Launch Screen은 앱이 완전히 로드되기 전에 자동으로 사라지며, 사용자가 상호작용할 수 없는 상태

 

 

---

 

 

Splash Image (스플래시 이미지)

• 정의: 일반적으로 앱이 시작되는 순간에 보여지는 정적인 이미지나 애니메이션으로, 브랜드나 앱의 테마를 강조하는 데 사용
• 목적: 앱의 첫인상과 사용자에게 시각적인 경험을 제공하며, 보통 앱의 로고나 마케팅 요소를 포함
• 구현 방법: 스플래시 이미지는 보통 앱의 메인 뷰 컨트롤러에서 구현
                  - 이미지가 나타난 후 일정 시간이 지나면 메인 화면으로 전환
• 특징: 스플래시 이미지는 애니메이션 효과를 추가할 수 있으며, 사용자가 상호작용할 수 있는 UI 요소를 포함할 수 있음

 

 

---

 

 

차이점 요약

• 용도:
  • Launch Screen: 앱 로딩 시 사용자에게 로딩 상태를 알림
  • Splash Image: 브랜드 아이덴티티를 강조하고 첫인상을 제공

• 구현 방식:
  • Launch Screen: Storyboard로 설정하고 애니메이션 없음
  • Splash Image: 메인 뷰에서 구현하고 애니메이션 가능
• 상호작용:
  • Launch Screen: 사용자와의 상호작용 없음
  • Splash Image: 사용자와의 상호작용 가능

 

 

---

 

 

 

그래. 그 Luanch Screen과 Splash Image의 차이는 이제 알겠는데, 그래서 어떻게 만드는데? 

 

 

 

Luanch Screen 구현 

➊ Luanch Screen 파일 생성 

 

command + n 을 눌러 Luanch Screen파일을 생성한다. 

 

 

 

➋ Luanch Screen 꾸미기 

 

Launch Screen는 기본적으로 Story Board(UIKit)로 되어 있으니 참고하자. 

 

➌ Luanch Screen 설정 

경로

AppName.xcodeproj → Targets → General → App Icons and Launch Screen → Launch Screen File 변경 

 

 

※ Luanch Screen 시간 설정 

Launch Screen을 보여주는 시간을 설정하고 싶다면 아래와 같이 코드를 추가하면 된다.