GaNaDa - Onboarding

이전 글

https://daebong-monk.tistory.com/45

GaNaDa 2번째

 

이번 시간부터는 실질적으로 이 앱에서 사용했던 기능을 어떻게 구현하였는지 한번 살펴보자. 가장 먼저 앱을 실행하면 볼 수 있는 Onboarding View 대해서 한번 알아보자.

 

---

 

Onboarding View(사용자 설명서 뷰)

보통 이미 출시 되어있는 앱들을 살펴보면 대부분 사용자에게 해당 앱이 어떤 앱인지 설명해주는 페이지 즉 Onboarding 페이지는 설치 이후 처음 실행하고 이후에는 찾아볼 수없다. 왜? 앱 사용에 있어 추가적인 설명이 필요한 경우 앱 내에서 가이드 또는 튜토리얼을 통해야겠지만 보통의 앱들은 그 정도로 사용자가 사용하기에 어렵지 않기 때문인 것 같다.

 

예를 들어 우리가 자주 사용하는 인스타그램이나 카카오톡을 본다면 매번 앱을 실행 할때마다 사용자가 우리 앱은요~ 어떻고요~ 어떻고요~ 페이지를 다 넘기고 나서야 실행이 된다면 이건 매우 불필요할뿐더러 굉장한 시간낭비이며 이는 곧 사용자가 앱을 실행할 때마다 약간의 귀찮음? 번거로움을 겪어야 한다. 이를 방지하기 위해 이 페이지에서 가장 중요한 부분이 앱을 실행한 이력에 따라 재시작 여부를 따져 그를 Bool값으로 저장할 변수가 필요하다는 것을 알 수 있다.

 

따라서 해당 부분을 메모리가 아닌 데이터에 저장하여 이를 통해 재시작 여부를 기기가 판단하게끔 해야 한다. 그러려면 @AppStorage를 이용하게 된다. 아래 코드를 확인해보면 알겠지만 최초로 앱을 구동할 때에는 초기값이 true로 되었는데 처음에는 당연히 해당 페이지를 보여주어야 하니 true값이겠지만, 이후 해당 페이지가 끝나면 이제는 이 값을 true에서 false로 바꿔 주게 되는 작업이라 할 수 있다. 

 

@AppStorage("_Firstrun") var Firstrun: Bool = true
@State var ShowOnboarding: Bool = true

여기서 AppStorage에 있는 값은 이전에도 말했듯이 앱 종료 후에도 지속적으로 유지되기 때문에 지금 하는 작업들이 가능해진다고 할 수 있다.

---

Onboarding Page(PageView)

이제 실질적으로 화면상에 보이게 할 페이지들을 구성해야 한다.  나의 경우 기본적으로 사진 하나와 제목, 부연 설명이 VStack으로 표현되게끔 해보았다. 사진을 안 넣을 수 있지만, 그렇게 되면 너무 심심해 보여서 관련 있는 사진들을 한번 사용하였다. 그리고 여기서 하나 중요한 게 있다면 코드의 아래쪽에 보면 버튼이 하나 있는데 이는 마지막 페이지에서만 등장하게 되고 결국 이를 눌렀을 때 메인 페이지로 넘어가면서 AppStorage의 값이 false로 변하게끔 해두었다. 

var body: some View {
        VStack(spacing: 20) {
            VStack {
                Image(imageName)
                    .resizable()
                    .scaledToFit()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 100.0, height: 100.0)
                    .padding()
                
                Text(title)
                    .font(.title2)
                    .bold()
                    .padding()
                
                
                Text(subtitle)
                    .font(.headline)
                    .multilineTextAlignment(.center)
                    .frame(maxWidth: 250)
                    .foregroundColor(Color(red: 255 / 255, green: 140 / 255, blue: 0 / 255))
                    .shadow(color: Color.black.opacity(0.1), radius: 1, x: 2, y: 2)
                
            }
            
            if showsDismissButton {
                // ShowOnboarding 값을 false로 바꾸기 때문에 최초 실행 이후에는 onboardingview를 보여주지 않는다.
                Button(action: {    // 온보딩이 끝나고 메인 페이지로 넘어가기 위한 버튼
                    ShowOnboarding.toggle()
                }, label: {
                    Text("Get Start")
                        .foregroundColor(.white)
                        .bold()
                        .cornerRadius(20)
                        .frame(width: 200, height: 50)
                        .background(Color(red: 60 / 255, green: 179 / 255, blue: 113 / 255))
                    
                  
                })
            }
               
        }
        .padding()
    }
}

 

 

---

Basic Page

 

이 페이지에서는 온보딩 페이지에서 설정해둔 자신의 위치에 각각 맞게 선언한 대로 데이터들이 들어가서 앉으면 된다. 그래서 각각의 페이지마다 제목, 부연설명, 사진이 모두 다르게 설정되어있는 것을 볼 수 있다.

 

각 페이지뷰들 마다 아래 showsDismissButton: false 이는 버튼을 출력할 것인지에 대한 여부를 나타내 주며 1,2 번째 페이지에서는 버튼이 보이지 않는다.  그리고 showOnboarding: $ShowOnboarding은 앱의 최초 구동 여부를 바인딩해와서 해당 페이지를 출력할지 안 할지를 판단할 수 있게 된다.

 

온보딩부터 힘 빠지게 페이지수를 늘리는 것보단 많아도 3페이지 정도로 꾸밀 생각이었다. 전체적인 구성은 탭 뷰를 하나 만들고 그 안에 이후 pageview를 넣어 이를 PageTabViewStyle을 이용하여 페이지를 좌우로 넘기면서 사용자가 원하는 속도로 읽게끔 해보았다.

 

import SwiftUI

struct OnboardingView: View {
    @Binding var ShowOnboarding: Bool
    var body: some View {
        
        TabView {
            PageView(title: String(localized:"How well do you know Korean?",comment: ""),
                     subtitle: String(localized: "Until now, it was not easy to learn Korean. But what about with GaNaDa?",comment: ""),
                     imageName: "king",
                     showsDismissButton: false,
                     ShowOnboarding: $ShowOnboarding
            )
            
            PageView(title: String(localized:"learnig",comment: ""),
                     subtitle: String(localized:"Learn a variety of Korean through a simple game",comment: ""),
                     imageName: "south-korea",
                     showsDismissButton: false,
                     ShowOnboarding: $ShowOnboarding
                     
            )
            
            
            PageView(title: String(localized:"Learning by Repetition",comment: ""),
                     subtitle:  String(localized:"After completing the study, write it down in a notepad, and repeat the study!",comment: ""),
                     imageName: "student",
                     showsDismissButton: true,
                     ShowOnboarding: $ShowOnboarding              
            )

        }
        .tabViewStyle(PageTabViewStyle())
    }
}

해당 코드들에 대한 결과는 영상으로 한 번에 확인해보자!!

 

 

 

 

---

결론!!

해당 페이지를 꾸밀 때부터 애플의 HIG(human-interface-guidelines)을 최대한 참고하려고 하였다. HIG에서 온보딩에 대한 설명을 요약하자면, 이상적으로는 사람들이 앱이나 게임을 경험하는 것만으로도 이해할 수 있지만 온보딩이 필요한 경우 빠르고 재미있고 선택적인 흐름을 제공하세요. 요렇게~ 필요하다면? 최대한 빠르고 재미있게 전체적인 흐름을 한번 보여주세요~라고 하는 것 같다.

 

온보딩에 대한 자세한 설명은 아래 링크를 걸어두었으니 한 번쯤 참고해보아도 좋을 것 같다.

https://developer.apple.com/design/human-interface-guidelines/patterns/onboarding/

Onboarding - Patterns - Human Interface Guidelines - Design - Apple Developer