[SwiftUI] Info.plist로 Launch Screen 구현
Launch Screen Launch Screen은 앱이 시작되기 전 보이는 짧은 화면으로 Android에서는 Splash라고 부르고, iOS에서는 Launch Screen이라고 부른다. UIKit 에서는 LaunchScreen storyboard로 비교적 쉽게 구현할 수 있다.
mohagunolziii.tistory.com
1년 넘는 시간 전에 썼던 이 글이 내 블로그 방문 경로의 25% 정도를 차지한다.
꽤나 많은 사람들이 찾아주고 있고, 최근에는 아카데미 러너들이 이 글을 잘 봤다면서 이야기를 해주었는데.. 사실 나는 더 이상 이 방법을 사용하지 않아서 머쓱해했다. 😅
너무 방치해 둔 블로그 같아서 민망하면서도, 새로 내가 사용하는 방법에 대해 올려야겠다는 계기가 되었다.
UIKit에서는 storyboard로 쉽게 구현할 수 있지만, SwiftUI에서는 어떻게 해야 하지? 보다가 당시 글을 썼었다. 하지만 지금 내가 사용하는 방법이 바로 이 storyboard로 Launch Screen 구현하기이다!
어라? SwiftUI에서 왜 storyboard를 사용하나요? 저는 storyboard를 잘 몰라요..
라고 생각할 수 있을 것 같다. 하지만 UIKit을 사용해야 한다!!라는 것은 아니다.
Launch Screen 특성 상, 다양한 UI가 포함되지 않기 때문에! 간단한 사용 방법만 알면 금방 뚝딱 만들어낼 수 있다.
서론이 길었는데.. 한 단계 한 단계 살펴보자 ㅎㅎ
1. LaunchScreen.storyboard 파일 만들기
1. 우선 SwiftUI 프로젝트를 하나 만들어주었다.
2. 여기서 새로운 파일을 하나 만들어주면 되는데, 바로 이 Launch Screen 파일을 선택해 만들어준다! 이름은 기본 값으로 있던 Launch Screen에서 공백을 제거해 주었다.
그대로 두어도 상관없지만 왠지 공백이 없는 이름이 더 마음이 편안해서 그냥 그렇게 했다.
ㅎㅎ흐흫
3. 그러면 이렇게 LaunchScreen.storyboard 파일이 생성되고, storyboard 화면을 볼 수 있다. 나는 "NewLaunchScreen"이라는 글자가 기본으로 생겼는데, 사용하지 않을 예정이라 삭제했다.
2. LaunchScreen.storyboard 구성하기
만약 스토리보드로 UI를 구성하는 것을 잘 알고 있다면, 이 단계는 그냥 넘어가도 좋다!
그렇지만 간단하게 스토리보드 안에서 이미지를 배치하는 방법을 소개하고 넘어가겠다.
만약 조금 더 다양한 구성의 화면을 원한다면, 스토리보드와 오토 레이아웃에 대한 내용을 찾아보면 쉽게 할 수 있다.
1. Xcode 상단 + 버튼을 누르면 아래와 같은 창이 뜬다. 여기서 Image View를 찾아 추가해 준다.
2. 이렇게 View Controller 위에 이미지 뷰를 추가한다면, 우측 인스펙터 영역으로 설정을 할 수 있게 된다. 우측에 Image View에서 Image에 해당하는 부분의 목록을 보면, 내가 Asseets에 추가한 이미지와 SF Symbols를 모두 볼 수 있다. 원하는 이미지로 선택해 이미지를 추가해 주면 된다.
3. 다음으로는 Image View의 크기를 맞추고 정렬을 하는 과정이다. 간단하게 크기를 조정하고 가운데 위치할 수 있도록 하려고 한다.
하단의 아이콘을 클릭해 Constraints를 추가할 수 있다. 새로 뜬 창에서 세 영역으로 나눠서 볼 수 있는데, 상단은 상위 View 또는 근처 다른 영역으로부터의 거리를 조정할 때 사용한다.
우리는 가운데 영역의 가로와 세로 길이를 지정해 주자. 여기서 값을 입력하고 엔터를 누르거나 Add 2 Constraints를 눌러준다. 빨간색으로 뜨거나 이상한 색이 뜨는 것은 자연스러운 상황이다. 다음 순서를 이어나가자!
3-1. 만약 값을 잘못 입력했다면 이미지 이름 아래에 생긴 Constraints에서 값을 변경할 수 있다.
4. 이제 이미지를 가운데 정렬하자. 이미지를 클릭한 상태에서 Control 키를 누르고 View Controller에 드래그해 준다.
그 후 Center Horizontally in Safe Area와 Center Vertically in Safe Afrea를 선택해 준다. 아래 화면처럼 해주면 된다!
스토리보드를 구성하는 방법은 이 한 가지만 있는 것은 아니기 때문에, 각자 편한 대로 구성하고 넘어가면 된다!
3. LaunchScreen.storyboard 등록하기
LaunchScreen을 잘 구성했다면 이제 이 파일을 Launch Screen File로 등록하면 된다.
TARGETS > General > App Icons and Launch Screen에서 Launch Screen File 목록을 열면 내가 만든 파일이 뜬다. 이제 잘 선택해 주고 빌드하면 Launch Screen이 잘 작동할 것이다!
짠!
결론! LaunchScreen.storyboard 파일을 만들고, 구성해서 잘 등록해 주면 끝난다!
오히려 Info 파일을 활용하는 것보다 다양한 구성을 할 수 있고 간단하다고 생각해서 더 자주 사용한다.
각자 편한 대로 구성하면 되지 않을까? 😉
끝!
'📕 iOS > SwiftUI' 카테고리의 다른 글
| [SwiftUI] custom view modifier 만들기 (0) | 2023.08.31 |
|---|---|
| [SwiftUI] Info.plist로 Launch Screen 구현 (0) | 2023.05.04 |