[iOS] UserDefaults를 사용해서 온보딩(Onboarding) 화면을 만들어보자

오늘은 온보딩(Onboarding) 화면을 구현하고 연결하는 방법에 대해 글을 써보려고 한다.

온보딩(Onboarding)이란 사용자가 앱을 처음 들어왔을 때, 기본적인 앱에 대한 소개와 새로운 사용자에 대한 환영을 해주는 화면을 뜻한다.

보통 온보딩은 처음 1회를 기준으로만 사용자가 볼 수 있는 화면이며,
온보딩이 2개 이상일 경우 보통 '건너뛰기' 같은 이동 기능을 제공하는 경우가 많다.

조금 더 자세하게, 애플의 H.I.G(Human Interface Guide)에 설명되어 있는 온보딩 내용을 살펴봐보자.

1. 사용자에게 설정이 아닌, 앱을 즐길 수 있도록 도움이 되는 온보딩을 제공하세요
2. 빠른 액션을 제공하세요 (튜토리얼이나 순서가 있는 화면인 경우, skip 기능을 제공하며, 다시 돌아올 때는 자동으로 보이지 않도록 함)
3. 사용자가 도움이 필요한 지점을 예상하세요 (예를 들어, 게임의 경우 캐릭터가 움직이지 않는 상황이 지속될 때, 팁을 자연스럽게 표시)
4. 튜토리얼에 필수 사항을 충실하세요 (디자인보다 중요한 건 직관적인 초기 정보 제공임)
5. 사용자가 재미있게 앱에 대해 배울 수 있도록 만드세요 (애니메이션, interact 사용 권장)

그럼 이제 이 내용을 토대로 온보딩을 한번 만들어가보겠다.

카카오페이 온보딩 화면 예시

온보딩 화면을 만들기 위해서 고려해야 할 세 가지 사항이 있다.

첫째, 온보딩을 어떻게 만들지 생각해야 한다. -> 스크롤, 페이지 넘김, present 등 다양한 방법을 활용할 수 있다.
둘째, 어느 화면에서 온보딩을 보여줄지 생각해야 한다. -> 온보딩은 최초 스플래시 화면 뒤에 붙을 수도, 로그인 이후가 될 수도, 혹은 실행 중이 될 수도 있다.
셋째, 처음으로 사용자가 앱을 실행한 경우에만 온보딩을 보여야 한다. -> 즉, 처음으로 사용자가 앱을 실행한 경우란 걸 인식해야 함

우선, NADA 앱을 기준으로 온보딩은 스크롤 뷰로, 온보딩 표출은 스플래시 이후로 정했다.

첫째, 둘째 부분은 iOS 개발자뿐만 아니라 기획과 디자이너와 함께 얘기하면서 정해야 하는 사항이기에 넘어가도록 하고, 결국 이 글에서는 "처음으로 사용자가 앱을 실행한 경우를 어떻게 인식할 것인가"를 핵심으로 다루게 되겠다.

가장 많이 사용하는 방법은 UserDefaults를 사용하는 방법이다.

예전에 집중적으로 다룬 글도 있지만, UserDefaults는 앱 자체에서 가지고 있어야 할 정보를 담고 있는 일종의 공간이다.

별도의 명령이 없으면, UserDefaults에 담고 있는 정보는 앱의 실행 여부와 상관없이 지속해서 담고 있으며, 앱을 지우면 UserDefaults에 담고 있는 정보도 함께 사라지게 된다.

그렇다면, 이걸 온보딩에서 어떻게 활용한다는 뜻일까?

스플래시 화면에서 자동 로그인 처리와 함께 화면 전환에 대한 로직을 추가하면 된다.

즉, 기존 appDelegate에서 토큰의 존재성, 유효성을 체크하면서 Main 화면으로 전환할지, 로그인 화면으로 전환할지를 결정했었는데, 자동 로그인이 유효하지 않은 경우에 분기 처리를 하나 더 해준 거다.
(왜냐면, 앱을 최초로 실행했다는 거는 로그인을 하지 않았다는 것과 같고, 추가로 토큰 값 또한 존재하지 않을 거기 때문)

어떤 분기 처리냐고?
isOnboarding이라는 UserDefaults 값이 nil인지를 한번 더 확인해서, 만약 nil일 경우에는 온보딩 화면으로 전환되도록 한 거다.

override func viewWillAppear(_ animated: Bool) {
         super.viewWillAppear(animated)
        
        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 1) {
            if self.appDelegate?.isLogin == true {
                self.presentToMain()
            } else {
                if UserDefaults.standard.object(forKey: Const.UserDefaultsKey.isOnboarding) != nil {
                    self.presentToLogin()
                } else {
                    self.presentToOnboarding()
                }
            }
        }
    }

그리고, 사용자가 로그인을 했을 때, (= 더 이상 최초 사용자가 아닌 경우)
UserDefaults에 값을 set 하면서, 더 이상 nil이 아니도록 구성했다.

// 로그인 후, 메인 화면으로 전환 함수
    func presentToMain() {
        let nextVC = UIStoryboard(name: Const.Storyboard.Name.tabBar, bundle: nil).instantiateViewController(withIdentifier: Const.ViewController.Identifier.tabBarViewController)
        nextVC.modalPresentationStyle = .overFullScreen
        self.present(nextVC, animated: true) {
            UserDefaults.standard.set(false, forKey: Const.UserDefaultsKey.isOnboarding)
        }
    }

그러면 사용자가 최초로 앱을 실행했다는 것을
토큰도 유효하지 않고, UserDefaults에 값이 없음 = 아직 로그인을 한 번도 한 적이 없음과 같이 앱 자체에서 알 수 있게 되는 것이다.

UserDefaults의 개념과 활용법만 잘 알고 있다면, 온보딩 화면을 연결하는 것도 전혀 어렵지 않게 쉽게 할 수 있을 거다 ^__^

아, 혹시나 아직도 UserDefaults 글을 읽어보지 않았다면, 아래에서 읽어보길 추천한다 :)

[Foundation] UserDefaults를 사용해서 데이터를 전달하는 방법