[SwiftUI] Onboarding 화면 만들기

 

 

🎁 Onboarding

 

이번 MC3 프로젝트에서 온보딩화면 구현을 맡았어서,

옛날에 온보딩을 구현할 때는 그냥 되는대로 막 구현을 해서 정리가 안되었지만

이번에 다시하는 김에 정리를 해보려 합니다.

 

 

1. 재시작 여부를 저장할 로컬 데이터 변수 + 최초 실행시 온보딩 화면 띄우게 하는 작업

앱이 재시작 여부를 기억하기 위해선, 기기에 로컬 데이터로 저장합니다.

@AppStorage를 이용합니다.

최초 구동시에만 해당 데이터 값이 true이므로 온보딩화면이 .fullScreen으로 띄워지고, 이후에 false로 바꿔주면서

재실행시에도 뜨지 않게 합니다.

import SwiftUI

struct ContentView: View {
	// 온보딩 화면을 앱 최초 실행때 한번만 띄우도록 하는 로컬 변수
	@AppStorage("isFirstOnboarding) var isFirstOnboarding: Bool = true
	
	var body: some View {
		Text("앱 메인화면")
			// 앱 최초 실행 시 full Screen으로 띄워짐
				.fullScreenCover(isPresented: $isFirstOnboarding) {
					OnboardingTabView(isFirstOnboarding: $isFirstOnboarding)
				}
	}
}

 

 

2. 온보딩 기본(공통) 페이지 구성하기 

온보딩 화면의 한 페이지를 나타낼 뷰를 생성합니다. 

보통 마지막 뷰는 온보딩화면을 끝내는 버튼이 존재하기 때문에, 마지막 페이지를 제외한 나머지 페이지들의 경우입니다.

import SwiftUI

struct OnboardingCommonView: View {
    let imageName: String
    let title: String
    let subtitle: String
	
    var body: some View {
        VStack {
            Image(systemName: ImageName)
                .font(.system(size: 100))
                .padding()
            Text(title)
                .bold()
                .font(.largeTitle)
                .padding()
            Text(subtitle)
                .font(.title2)
        }
    }
}

 

3. 온보딩 마지막 페이지 만들기

마지막 페이지에는 보통 온보딩을 마치는 완료와 같은 버튼이 있고, 이를 AppStorage에서 저장했던 Bool 값을 false로 변경하게 하면 됩니다.

import SwiftUI

struct OnboardingLastView: View {
    let imageName: String
    let title: String
    let subtitle: String
	
    @Binding var isFirstOnboarding: Bool
	
    var body: some View {
        VStack {
            Image(systemName: imageName)
                .font(.system(size: 100)
                .padding()
            Text(title)
                .font(.largeTitle)
                                .bold()
                .padding()
            Text(subtitle)
                .font(.title2)
				
            Button {
                isFirstOnboarding.toggle()
            } label: {
                Text("앱 시작하기")
                    .bold()
            }
        }
    }
}

 

4. 온보딩 탭뷰 만들기

이제 위에서 만들어준 온보딩 페이즈들을 모아 책처럼 넘길 수 있게 해주면 됩니다.

OnboardingTabView안에 TabView를 하나 만들고, tabViewStyle을 PageTabViewStyle()로 넣어 좌우로 넘길 수 있도록 해줍니다.

import SwiftUI

struct OnboardingTabView: View {
    @Binding var isFirstLaunching: Bool
    
    var body: some View {
        TabView {
            // 페이지 1: 온보딩 첫번째 페이지 ( 앱 소개 )
            OnboardingPageView(
                imageName: "person.3.fill",
                title: "Alright",
                subtitle: "목소리 크기 조절을 도와드리는 앱이에요."
            )
            
            // 페이지 2: 온보딩 두번째 페이지 ( 기능 소개 )
            OnboardingPageView(
                imageName: "note.text.badge.plus",
                title: "상황 선택",
                subtitle: "상황에 맞추어 목소리 크기 조절을 도와드려요!"
            )
            
            // 페이지 3: 읽기 페이지 안내 + 온보딩 완료
            OnboardingLastPageView(
                imageName: "house",
                title: "백그라운드",
                subtitle: "백그라운드모드로 실행해보세요!",
                isFirstOnboarding: $isFirstOnboarding
            )
        }
        // 여기 indexDisplayMode의 never 혹은 always로 기본 인디케이터를 생성해줌
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)) 
    }
}

 

---

>> 만약에 SKIP 버튼이 있다면

앱 최초 실행시, Onboarding이 fullScreen으로 띄워지는 것이기 때문에 OnboardingTabView안에서 SKIP 버튼을 만들고 그안에 dismiss를 넣어주면 끝입니다.

import SwiftUI

struct OnboardingTabView: View {
    
    @Environment(\.dismiss) private var dismiss
    @Binding var isFirstOnboarding: Bool
    
    private let totalPages = 4
    @State private var selectedPage = 0
    
    var body: some View {
        ZStack {
            Color.sgmGray2
                .ignoresSafeArea()
            
            VStack {
                HStack {
                    Spacer()
                    
                    Button {
                        isFirstOnboarding = false
                        dismiss()
                    } label: {
                        Text("Skip")
                            .font(.Pretendard.Light.size17)
                            .foregroundColor(.sgmGrayA)
                    }
                    .padding(.trailing)
                    .opacity(selectedPage == 3 ? 0 : 1)
                }
                
                TabView(selection: $selectedPage) {
                    ...
                }
                .ignoresSafeArea()
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            }
        }
    }
}

 

>> Indicator를 커스텀해야 한다면

만약 기본으로 생기는 indicator를 .never로 설정하여 사용을 하지 않고, 따로 indicator를 만들어 커스텀해야한다면 ! 

// 이렇게 전체 페이지와 현재 선택한 페이지의 변수를 선언해주고
private let totalPages = 4
@State private var selectedPage = 0

// 이렇게 HStack안에 ForEach로 Circle()을 생성해주고, 컬러를 selectedPage에 따라
// 구분해주면 된다. 
// ( 현재 코드에서 VStack이후 Spacer()가 있는 이유는, 수직으로 맨 아래쪽에 인디케이터를 위치시키려고 )
VStack {
    Spacer() 
        HStack(spacing: 8) {
            ForEach(0..<totalPages, id: \.self) { index in
                Circle()
                    .frame(width: 8, height: 8)
                    .foregroundColor(index == selectedPage ? .sgmBlue1 : .sgmBlue1.opacity(0.3))
                    .opacity(selectedPage == 3 ? 0 : 1)
            }
        }
        .padding(.bottom, 40)
}

 

 

내가 프로젝트에서 사용했던, OnboardingTabView 코드 

import SwiftUI

struct AppOnboardingView: View {
    
    @Environment(\.dismiss) private var dismiss
    @Binding var isFirstOnboarding: Bool // 앱 Onboarding
    @Binding var isCompletedOnboarding: Bool // 도움말 Onboarding
    
    private let totalPages = 4
    @State private var selectedPage = 0
    
    var body: some View {
        ZStack {
            Color.sgmGray2
                .ignoresSafeArea()
            
            VStack {
                HStack {
                    Spacer()
                    
                    Button {
                        isFirstOnboarding = false
                        dismiss()
                    } label: {
                        Text("Skip")
                            .font(.Pretendard.Light.size17)
                            .foregroundColor(.sgmGrayA)
                    }
                    .padding(.trailing)
                    .opacity(selectedPage == 3 ? 0 : 1)
                }
                
                TabView(selection: $selectedPage) {
                    OnboardingCommonPageView(
                        title: "Alright",
                        subtitle: "청각장애인의 목소리 크기 조절을\n도와드리는 앱 올라잇이에요." ,
                        imageName: "OnboardingImage1"
                    )
                    .tag(0)
                    
                    OnboardingCommonPageView(
                        title: "상황 선택",
                        subtitle: "대화, 발표 등 다양한 상황에 맞추어\n목소리 크기 조절을 도와드려요!" ,
                        imageName: "OnboardingImage2"
                    )
                    .tag(1)
                    
                    OnboardingCommonPageView(
                        title: "실시간 피드백",
                        subtitle: "애니메이션, 색상 등 시각적 피드백을 통해\n목소리 크기를 한 눈에 확인해요!" ,
                        imageName: "OnboardingImage3"
                    )
                    .tag(2)
                    
                    OnboardingLastPageView(
                        title: "백그라운드",
                        subtitle: "Dynamic Island, Live Activity로\n다른 화면을 보며 모니터링 할 수 있어요!" ,
                        imageName: "OnboardingImage4",
                        isFirstOnboarding: $isFirstOnboarding,
                        isCompletedOnboarding: $isCompletedOnboarding
                    )
                    .tag(3)
                }
                .ignoresSafeArea()
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            }
            
            // Indicator
            VStack {
                Spacer()
                
                HStack(spacing: 8) {
                    ForEach(0..<totalPages, id: \.self) { index in
                        Circle()
                            .frame(width: 8, height: 8)
                            .foregroundColor(index == selectedPage ? .sgmBlue1 : .sgmBlue1.opacity(0.3))
                            .opacity(selectedPage == 3 ? 0 : 1)
                    }
                }
                .padding(.bottom, 40)
            }
        }
    }
}