[SwiftUI] 온보딩(Onboarding) 화면 만들기

Seodam·2022년 5월 4일

온보딩 화면은 앱을 최초로 실행했을 때 앱 소개, 사용법 안내 등을 위해 사용됩니다.

SwiftUI에서 온보딩 페이지를 만드는 방법을 순서대로 살펴보겠습니다.

프로젝트 만들기

Xcode에서 OnboardingSample이라는 이름의 iOS 앱을 만들었습니다.

OnboardingTabView, OnboardingPageView, OnboardingLastPageView를 추가합니다.

재시작 여부를 저장할 변수 선언 + 온보딩 화면 띄우기

앱이 재시작 여부를 기억해야 하므로, 메모리가 아닌 기기에 데이터를 저장해야 합니다. @AppStorage 프로퍼티 래퍼를 이용해서 앱 재시작 여부를 나타내는 간단한 데이터를 기기에 저장해보겠습니다. @AppStorage로 선언한 변수는 저장된 값이 없으면 초기값(아래 코드에서는 true)를 할당하고, 저장된 값이 있으면 해당 값을 불러옵니다.

최초 구동 시에는 isFirstLaunching 값이 true이므로 온보딩 내용이 전체화면( .fullScreenCover() )으로 뜹니다. 온보딩 작업이 끝나면 이 값을 false로 바꿔주겠습니다.

//  ContentView.swift

import SwiftUI

struct ContentView: View {
    // 사용자 안내 온보딩 페이지를 앱 설치 후 최초 실행할 때만 띄우도록 하는 변수. 
    // @AppStorage에 저장되어 앱 종료 후에도 유지됨.
    @AppStorage("_isFirstLaunching") var isFirstLaunching: Bool = true

    var body: some View {
        Text("App Main")
            // 앱 최초 구동 시 전체화면으로 OnboardingTabView 띄우기
            .fullScreenCover(isPresented: $isFirstLaunching) {
                OnboardingTabView(isFirstLaunching: $isFirstLaunching)
            }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

기본 페이지 구성하기

온보딩 화면의 한 장을 나타낼 뷰를 디자인합니다.

여기서는 시스템 기본 이미지를 사용했는데, 스크린샷이나 영상을 넣어 원하는대로 디자인하면 됩니다.

//  OnboardingPageView.swift

import SwiftUI

struct OnboardingPageView: 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)
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding()
            Text(subtitle)
                .font(.title2)
        }
        
    }
}

struct OnboardingPageView_Previews: PreviewProvider {
    static var previews: some View {
        OnboardingPageView(
            imageName: "note.text.badge.plus",
            title: "쓰기 탭",
            subtitle: "이 앱은 개인 메모장으로 쓸 수 있어요"
        )
    }
}

마지막 페이지 만들기

마지막 페이지에는 완료 버튼을 추가하고, AppStorage 값을 false로 변경할 수 있도록 해야하기 때문에 뷰를 따로 만들어 줍니다.

온보딩 기본 페이지에서 isFirstLaunching 바인딩 값과 버튼을 추가하면 아래와 같습니다.

//  OnboardingLastPageView.swift

import SwiftUI

struct OnboardingLastPageView: View {
    let imageName: String
    let title: String
    let subtitle: String
    
    @Binding var isFirstLaunching: Bool
    
    var body: some View {
        VStack {
            Image(systemName: imageName)
                .font(.system(size: 100))
                .padding()
            Text(title)
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding()
            Text(subtitle)
                .font(.title2)
            
            // 온보딩 완료 버튼.
            // AppStorage의 isFirstLaunching 값을 false로 바꾸기 때문에, 다음번에 앱을 실행할 때는 OnboardingTabView를 띄우지 않음.
            Button {
                isFirstLaunching.toggle()
            } label: {
                Text("시작하기")
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .frame(width: 200, height: 50)
                    .background(Color.blue)
                    .cornerRadius(6)
            }
            .padding()
        }
    }
}

온보딩 탭뷰 만들기

이제 위의 온보딩 페이지들을 모아 책처럼 넘길 수 있게 해주겠습니다. OnboardingTabView 안에 TabView를 하나 만들고 tabViewStyle을 PageTabViewStyle()로 넣어 좌우로 넘길 수 있도록 해줍니다.

여기서는 탭뷰 안에 세 페이지만 넣었는데, 원하는 만큼 넣어도 됩니다.

//  OnboardingTabView.swift

import SwiftUI

struct OnboardingTabView: View {
    @Binding var isFirstLaunching: Bool
    
    var body: some View {
        TabView {
            // 페이지 1: 앱 소개
            OnboardingPageView(
                imageName: "person.3.fill",
                title: "놀라운 개발자 커뮤니티",
                subtitle: "질문을 던지고, 다른 사람의 답변을 확인하세요"
            )
            
            // 페이지 2: 쓰기 페이지 안내
            OnboardingPageView(
                imageName: "note.text.badge.plus",
                title: "쓰기 탭",
                subtitle: "이 앱은 개인 메모장으로도 쓸 수 있어요"
            )
            
            // 페이지 3: 읽기 페이지 안내 + 온보딩 완료
            OnboardingLastPageView(
                imageName: "eyes",
                title: "읽기 탭",
                subtitle: "시행착오를 정리해서 공유하고, 다른 개발자들의 인사이트를 얻으세요",
                isFirstLaunching: $isFirstLaunching
            )
        }
        .tabViewStyle(PageTabViewStyle())
    }
}