초기의 온보딩은 1차 앱 배포 직전에 갑작스럽게 제작된 터라 환영합니다 라는 느낌의 아무 쓸모 없는 뷰였다. 원래의 익명계정 생성을 시작하기 버튼을 눌렀을 시점에서 일기를 작성하는 시점으로 변경했기 때문에 사실상 제거를 해도 됬었다. 다만, 애니메이션을 넣기 위해 Lottie 외부라이브러리를 도입하여 실험적으로 json 파일을 주입했었고 생각보다 애니메이션 적용이 성공적이였기 때문에 우선은 버리지 않고 배포에 넣기로 했다.
배포를 하고나서, 여러 피드백이 들어왔는데 그 중에 하나가 일기앱인데 어떤 기능이 있는지를 잘 모르겠다는 의견이 지배적이였다. 그래서 이 온보딩은 원래 2차 배포 때 삭제하려고 했었으나, 앱에 대한 전반적인 기능을 설명하는 View로 기획하게 되었다.
Lottie의 문제점
이런 형태의 애니메이션이 Xcode에서 JSON파일 형태로 넣으면
이렇게 깨져서 보이는데, 구글링을 해도 이유를 찾지 못했다. 내가 검색한 키워드가 잘못된건지 lottie 그림 깨짐이라고 검색하면 애초에 애니메이션이 작동이 안되는 이유들만 찾아졌다. Xcode에서 지원하는 형식이 아닌건지는 모르겠는데 문제는 하나의 파일만 깨지는게 아니라 이렇게 그림이 깨지는 파일이 정말 많다는 것이다. 그렇기에 온전히 작동하는 json파일이 하늘에 별따기였고, Lottie를 이용하여 온보딩 뷰를 구현하기는 어렵게 되었다.
View 구성
결국 우리가 구현한 View들을 직접 스크린샷으로 찍어서 간단하게 무슨 기능을 하는지 UIPageViewController를 이용하여 구현하기로 했고, 아래에 버튼을 두어 버튼을 누를 때마다 페이지가 넘어가고 마지막엔 onboardingView를 나가도록 구현했다.
StartVC가 부모 뷰컨이고, 그아래 PageVC라는 자식 뷰컨이 존재한다. VC안에 VC를 넣는 것은 처음이기 때문에 코드가 복잡할 줄 알았지만, 기존의 View 컴포넌트를 구성하는 것과 똑같은 방식으로 구현하면 됬었다.
// StartVC에서
private var pageVC : PageVC!
private func setPageVC() {
addChild(pageVC)
view.addSubview(pageVC.view)
pageVC.view.snp.makeConstraints { make in
make.centerX.equalTo(view.safeAreaLayoutGuide)
make.top.equalTo(view.safeAreaLayoutGuide).inset(16)
make.width.equalTo(view.safeAreaLayoutGuide).offset(-20)
make.bottom.equalTo(pageControl.snp.top).offset(16)
}
}addChild로 자식 VC를 추가하고 그 VC안에 있는 뷰 컴포넌트들을 추가해주면 되었다.
그럼 이제 pageVC를 구성할 차례다. 기존에 생각했던 것은 한 페이지에 하나의 UIImage와 UILabel을 구성하려고 했기 때문에 모델화하여, 페이지 별로 각각의 VC를 만들기 보다는 하나의 VC로 구성하여 관리에 용이하도록 구현했다.
// PageVC에서
var pagesData : [OnboardingModel] = [
OnboardingModel(descriptionImage: "onBoarding1", descriptionLabel: "오늘의 일기를 기록해보아요"),
OnboardingModel(descriptionImage: "onBoarding2", descriptionLabel: "일기를 작성하고 불을 밝히세요"),
OnboardingModel(descriptionImage: "onBoarding3", descriptionLabel: "일기를 채우고 건물을 세우세요"),
OnboardingModel(descriptionImage: "onBoarding4", descriptionLabel: "캘린더로 기록한 일기를 확인해요"),
OnboardingModel(descriptionImage: "onBoarding5", descriptionLabel: "일기를 안전하게 저장하세요")
]
private func setPageVC() {
pages = pagesData.map { model -> UIViewController in
let vc = ContentVC()
vc.onboardingModel = model
return vc
}
if let firstVC = pages.first {
setViewControllers([firstVC], direction: .forward, animated: true, completion: nil)
}마지막으로 ContentVC에서 페이지VC에 들어갈 뷰가 구성되어있다.
// ContentVC
var onboardingModel : OnboardingModel? {
didSet {
updateUI()
}
}
private func updateUI() {
if let model = onboardingModel {
imageView.image = UIImage(named: model.descriptionImage)
descriptionLabel.text = model.descriptionLabel
}
}처음에 헷갈렸던 점은 PageVC 내에서 각 페이지의 뷰를 관리하는 줄 알고, 코드를 작성했으나 빌드가 제대로 작동하지 않았다. 각각의 페이지를 새로운 VC클래스에서 따로 관리를 해줘야했었고 그렇게 하지 않아서 제대로 작동하지 않았던 것이다. PageVC의 주된 역할은 여러 개의 뷰 컨트롤러를 페이징 방식으로 관리하는 것이며, 사용자가 페이지를 넘길 때마다 해당 페이지에 대응하는 뷰 컨트롤러를 표시하는 것이다.
결과물
