[미니프로젝트] Splash Screen 구현하기

EarthSea·2024년 2월 27일
0

🎈 내일배움캠프

목록 보기
3/5
post-thumbnail

안녕하세요! 째에요💗
오늘은 미니 프로젝트에서 제가 맡은 Splash 화면을 구현하는 방법에 대한 회고를 써볼까 합니다.


Splash 화면을 구현하는 방법에는 다양한 방법이 있습니다.

저는 그 중 LaunchScreen을 사용하여 구현하는 방법을 사용했어요!



LaunchScreen이란?

애플에서 만들어놓은 앱이 시작할 때 가장 먼저 나타나도록 설정된 화면입니다.



LaunchScreen을 활용한 Splash 화면 구현

너어무나 간단합니다요!!!!
우선 iOS 앱 프로젝트를 생성하여 줍니다.

저희 팀 이름이 "응~ 나 T야"여서 프로젝트 명을 간단히 Team-T로 했어요!

iPhone 앱을 만들 예정이라 설정에서 Destinations은
iPhone을 제외하고는 다 삭제했습니다.

이제 오른쪽의 네비게이션에서 LaunchScreen을 선택하여 storyboard를 띄웁니다.

View 위에 ImageView를 넣고, ImageView의 AutoLayout을 화면과 맞게 설정해줍니다.



[ AutoLayout 화면과 일치하도록 설정 ]

오른쪽 하단의 가운데 아이콘을 클릭하면 아래보이는 것처럼 Add New Constraints가 떠요!

동서남북으로 놓여있는 저 칸에 원하는 만큼의 크기를 적으면 AutoLayout 설정 완료!

하지만, 일반적으로 설정이 되어있는 건 Safe Area에 맞춰져 있어서 0으로 설정해도 위 아래, 양 옆에 여백이 생깁니다. 여백이 없기 위해서는 AutoLayout의 FirstItem을 Superview로 일일히 바꿔주는 설정을 해야합니다.

너무 번거롭기 때문에 한번에 바꿔볼게요!

빨강색 동그라미를 클릭하면

이렇게 뜰거에요~!
이미 선택되어 있는 Safe Area의 밑의 View를 클릭해주시고 다음에 숫자를 0으로 바꿔주시면 됩니다.

그리고 또 까먹으면 안되는 한가지!
바로 Constrain to margins의 체크표시를 해제해주셔야 해요!
그래야 이미 설정이 되어있는 margin까지 없앨 수 있습니다.


그 다음 View를 잘 선택해서 오른쪽의 인스펙터 화면에서 제일 상단에 있는 Image에서 원하는 Image를 선택하시면 됩니다!

이 때, Image를 넣는 방법은 Assets에 원하는 이미지 파일을 끌어다 놓으시면 돼요!

이렇게 Splash 화면 만들기 끝!!
쉽죠?!

근데 너무 빨리 없어져서 좀 더 시간을 늘리고 싶으시다면,
AppDelegate에

// Splash Screen을 1초동안 띄우기
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    sleep(1)
    return true
}

를 추가해주시면 됩니다~!

다음에는 Splash 화면을 애니메이션으로 만들어보고 싶네요~!

profile
I'm Junior iOS developer 배지해.

0개의 댓글