[iOS/Swift] 온보딩(Onboarding) 페이지 만들기 - Storyboard, UserDefaults, SceneDelegate

💡 온보딩, Onboarding

온보딩 페이지는 새로운 유저나 다시 돌아온 유저를 환영해주는 역할을 한다. 유저에게 어플의 사용법을 알려주거나 기능에 대한 팁, 콘텐츠 샘플 등을 보여주기 위해 사용된다.

 

처음에 앱 최초 실행시 나타나는 페이지, 웰컴 페이지 등으로 검색을 했을 때에는 방법을 찾기가 어려웠다. 온보딩이라고 부른다는 것을 최근에 알게되었다. 🙂.. 개발하고자 하는 내용이 무엇으로 불리는지 아는게 중요하다고 느꼈다. (HIG 를 먼저 찾아봤다면 쉽게 찾았겠다..)

 

Human Interface Guidelines

 

온보딩 페이지를 추가하고, 앱의 최초 실행시에만 나타나게 하는 예제를 개발해보겠습니다!

1. Xcode 프로젝트에 Onboarding storyboard 추가하기
2. Storyboard 들의 첫 번째 VC 의 Storyboard ID 지정하기
3. UserDefaults 를 이용해 앱이 최초 실행인지 판단하기
4. SceneDelegate 클래스에서 Root VC 지정하기
5. Onboarding VC 에서 Main VC 로 이동하기
6. 끝 !! 🥳

---

1. Xcode 프로젝트에 Onboarding storyboard 추가하기

Onboarding 을 위한 새로운 Storyboard를 생성하고, View 를 꾸며준다.

첫번째 View 를 initial View Controller 로 지정해주면 화살표가 생긴다.

 

[v] is Initial View Controller

2. Storyboard 들의 첫 번째 VC 의 Storyboard ID 지정하기

먼저 OnboardingViewController 를 만들고, Custom Class 로 지정해주었다. 코드는 아직 작성하지 않았다. 

 

앱의 첫 실행 여부를 판단해 Onboarding 페이지를 띄워줄 것인데, 이때 Storyboard ID 가 필요하다.

어떤 값으로 지정하는지 정확히 모르겠지만, ViewController 클래스 이름과 동일하게 하는 경우를 봐서 동일하게 했다. 

 

Onboarding Storyboard

 

초간단 투두리스트 만들기 포스팅에서 만들어둔 Main Storyboard 의 View Controller 도 Storyboard ID 를 지정해주었다.

여러개의 VC 구분을 편하게 하기 위해 클래스명도 TodoViewController 로 변경했다.

 

Main Storyboard

3. UserDefaults 를 이용해 앱이 최초 실행인지 판단하기

이전 포스팅에서 작성했던 코드를 그대로 이용했다.

앱의 최초 실행인지를 판단하기 위해 method 에서는 defaults DB 에 isFirstTime key 이 존재하는지로 판단하고 있다.

 

public class Storage {
    static func isFirstTime() -> Bool {
        let defaults = UserDefaults.standard
        if defaults.object(forKey: "isFirstTime") == nil {
            defaults.set("No", forKey:"isFirstTime")
            return true
        } else {
            return false
        }
    }
}

 

4. SceneDelegate 클래스에서 Root VC 지정하기

검색을 해보면 AppDelegate 클래스에서 Root VC 를 지정하는 방법도 나오는데, iOS13 이전의 방식으로 앱이 crash 날 수도 있다.
iOS13 이후에 SceneDelegate 클래스가 추가되었고, 해당 클래스에서 Root VC 를 지정하는 방식이 적합한 것 같다.
이전 방식으로 사용하고싶다면 여기 에서 확인할 수 있다.  

SceneDelegate 클래스의 scene method 에서 Root View Controller 를 지정하면 된다.

setRootViewController(scene) method 를 따로 정의해서 호출했다.

 

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?


    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let _ = (scene as? UIWindowScene) else { return }
        setRootViewController(scene)
    }
    
    // ...
}

 

setRootViewController(_ scene:) method 는 첫 번째 실행인지 여부에 따라 Storyboard 이름과 식별자를 지정하기 위한 역할을 한다.

setRootViewController(_ scene: name: identifier:) method 는 Storyboard 이름과 식별자를 인자로 받아, 해당하는 ViewController 를 Root View Controller 로 지정하기 위한 역할을 한다.

 

extension SceneDelegate {
    private func setRootViewController(_ scene: UIScene){
        if Storage.isFirstTime() {
            setRootViewController(scene, name: "Onboarding",
                                  identifier: "OnboardingViewController")
        } else {
            setRootViewController(scene, name: "Main",
                                  identifier: "TodoViewController")
        }
    }
    
    private func setRootViewController(_ scene: UIScene, name: String, identifier: String) {
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            let storyboard = UIStoryboard(name: name, bundle: nil)
            let viewController = storyboard.instantiateViewController(withIdentifier: identifier)
            window.rootViewController = viewController
            self.window = window
            window.makeKeyAndVisible()
        }
    }
}

 

1. private method 를 따로 나타내기 위해서 extension 키워드를 이용해 클래스를 확장시켰다.
2. 두 method 는 이름은 같지만, 파라미터를 다르게 해 Overloading 방식을 적용시켰다. 
이 방법들은 개인적으로 적용한 방식이라 적합한 방법이 아닐 수도 있다. ( 혹시 개선해야할 부분이 있다면 댓글 남겨주세요 🥺)

5. Onboarding VC 에서 Main VC 로 이동하기

위의 과정까지 진행하면, 온보딩 페이지가 뜰 것이다! 하지만 Onboarding VC 에서 Main VC 로 이동하는 코드를 작성해주어야 이동이 가능하다. 개별적으로 작성하셨으면 문제가 없다 🙂

 

스토리보드에서 만들었던 버튼의 Action 을 추가해주었고, MainVC 로 이동하는 코드를 작성했다.

SceneDelegate 에서 RootVC 를 지정했던 방식과 비슷하다.

 

presentMainVC method 의 방식은 아래와 같다.

 

• storyboard 지정하기
• view controller 지정하기
• view controller 가 나타나는 방식 설정하기
• view controller 띄워주기

import UIKit

class OnboardingViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
    

    @IBAction func nextButtonClicked(_ sender: Any) {
        presentMainVC()
    }
    
    private func presentMainVC() {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let vc = storyboard.instantiateViewController(withIdentifier: "TodoViewController") as! TodoViewController
        vc.modalPresentationStyle = .fullScreen
        present(vc, animated: false, completion: nil)
    }
}

 

6. 끝 !! 🥳

디바이스에서 실행하면 Onboarding 페이지가 나타나고, Next 버튼 클릭시 Todo 페이지가 나타난다. 

참고로, UserDefaults 로 저장한 값은 앱을 삭제했을 때 삭제되기 때문에 디바이스에서 다시 확인하고 싶다면 삭제 후 설치해줘야한다.

 

 

---

온보딩 가이드에 대해 참고하면 좋을 문서 및 링크

• 개인적으로 디자인과 기획에 대해서도 알게되면 더 개발이 의미있어지는 것 같다.
• brunch.co.kr/@blackindigo-red/16
• developer.apple.com/design/human-interface-guidelines/ios/app-architecture/onboarding/

참고한 링크

• 스택오버플로우 질문 (패캠 슬랙에서 김배추님이 공유해주신 글)

연관된 포스팅

[iOS] UserDefaults 를 이용해 데이터 저장하기, 앱 최초 실행 여부 판단하기

[iOS] TableView 로 초간단 TodoList 만들기