[iOS] Page view controller를 Container View로 사용하며 발생한 문제 해결 과정

프로젝트를 진행하면서 가장 많은 삽질의 시간을 갖은

page view controller에 대한 기록을 남겨보겠습니다.

 

(사실 page view controller에 직접적으로 관련된 내용은 아니고..
제가 원하는 기능을 구현하면서 만난 문제들 위주로 작성했습니다 👍)

 

해당 뷰 로직은..

모든 것이 처음이었던 저에게 많은 문제를 안겨주었고, 많은 시간 고민을 하게 만들었습니다.

(순서가 정해져 있으며, 버튼 선택에 따라 다음 뷰들의 구성이 바뀌는 로직...)

 

저와 같은 상황을 겪는 사람들에게 조금이나마 도움을 주기 위해 기록으로 남겨보려고 합니다.

 

물론, 아직 공부중인 과정에서 해결한 문제들이기 때문에

저의 해결 방법이 정답은 아니겠지만, 그래도 나름 고민 많이 해보고 해결한 방식입니다!

---

배경 설명

• 바텀 시트 뷰를 사용하여 step 3까지 순서를 지키며 뷰를 보여주고, 선택된 버튼이나 작성된 문장을 통해
  Chat gpt에게 답을 요청하고 보여주는 앱입니다.
• 바텀 시트 관련 VC(부모 VC)에 Container View를 추가하고, 해당 view에 page view controller(자식 VC)를 연결했습니다.
  = 각 step에 따라 새로운 view를 보여주기 위해 page view controller를 자식 뷰로 갖는 부모 VC를 만들었습니다.
• 각각의 버튼은 table view로 구현합니다.
• 데이터를 받아오면 각 view의 table view를 reload하여 데이터를 채워 그려줍니다.
• step 1에서 선택된 버튼에 따라, step 2에서 보여져야 하는 view가 바뀝니다.
  (1,2 번째 버튼이 눌린 채 다음을 누르면, 1,2 번째 버튼과 관련있는 step2 VC만을 보여야 합니다.)
• step 2에서 '나만의 문장 추가하기' 버튼이 눌리면, 다음 뷰로 step 2-1 VC가 추가되어야 합니다.
• step 3는 무조건 마지막에 배치되어 있어야 합니다.
• 스텝 1,2에서 보이는 데이터들은 모두 서버에 개별적으로 네트워크 요청을 보내서 데이터를 받아와야 합니다.
  • 스텝 2는 스텝 1에서 선택된 버튼의 인덱스 값을 파라미터로 함께 보내 특정 step 2 데이터만을 받아옵니다.
  • 즉, 모든 페이지를 볼 경우에 API 요청을 따로 6번 해야 합니다.

---

문제 1: 버튼을 통해 Page view controller의 VC 전환

• 보통 page view controller에서 페이지 전환은 tab이나 swipe 동작을 통해 진행합니다.
• 해당 앱의 UI 경우, 버튼을 통해 페이지 전환이 이뤄져야 합니다.
• page view controller의 모든 자식 뷰에 버튼을 추가하여, 페이지 전환을 진행하기에는 생성되는 버튼의 수가 많고, 페이지 전환에 필요한 로직이 많아 지기 때문에 비효율적이었습니다.

해결: prepare 메서드 활용

 

• continerVC와 pageVC가 segway로 연결되어 있어, 이를 이용하면 continerVC에서 page view controller와 관련된 모든 VC들을 관리할 수 있습니다.
• prepare메서드를 통해, continerVC에서 page view controller를 참조하여 활용합니다.
• pageVC에서 인덱스를 통해 페이지를 전환하는 메서드를 작성하고, containerVC에서 버튼이 눌릴 때마다 해당 메서드를 실행시킵니다.

// container view controller에서 구현

// 세그웨이를 통해 page view controller 저장
var pageViewController : PageViewController!

// 다음 버튼
@IBAction func nextButtonTapped(_ sender: Any) {
    // 다음 페이지로 이동
    pageViewController.setNextViewControllersFromIndex(index: currentIndex)
}

// 이전 버튼
@IBAction func beforeButtonTapped(_ sender: Any) {
    // 이전 페이지로 이동
    pageViewController.setBeforeViewControllersFromIndex(index: currentIndex)
}


//MARK: - 세그웨이의 prepare 메서드를 통해 데이터 교환
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    
    if segue.identifier == "PageViewController" {
        print("Connected")
        
        // 세그웨이의 도착지인 pageVC를 현재 부모 VC에 저장
        guard let vc = segue.destination as? PageViewController else { return }
        pageViewController = vc
        
    }
}

// page view controller에서 구현

// index 파라미터: 이전 페이지 인덱스
func setNextViewControllersFromIndex(index : Int){
    
    // 가능한 인덱스 범위 설정
    guard index >= 0 && index < pageVCArray.count - 1 else { return }
    
    // 다음 인덱스 번호를 보여줘야 하기 때문에 + 1 입니다.
    self.setViewControllers([pageVCArray[index + 1]], direction: .forward, animated: true, completion: nil)
    
    // pageVC에 저장되어 있는 currentIdex를 containerVC에 전달
    completeHandler?(currentIndex)
}

func setBeforeViewControllersFromIndex(index : Int){

    // 가능한 인덱스 범위 설정
    guard index > 0 && index < pageVCArray.count  else { return }
    
    // 이전 인덱스 번호를 보여줘야 하기 때문에 - 1 입니다.
    self.setViewControllers([pageVCArray[index - 1]], direction: .reverse, animated: true, completion: nil)
    
    // pageVC에 저장되어 있는 currentIdex를 containerVC에 전달
    completeHandler?(currentIndex)
}

---

문제 2: 동적으로 바뀌는 페이지 순서

• 처음에는 step 1과 step 3는 무조건 있어야하기 때문에 두 개의 VC만 초기화하여 페이지 배열에 저장했습니다.
• step1에서 특정 버튼이 선택될 때마다, 해당 step 2 VC를 초기화하고 배열의 마지막 인덱스보다 1 작은 위치에 해당 VC를 append 해주었습니다.
• step 2 VC가 초기화 되면 바로 서버 통신을 통해 데이터를 받아오고, 해당 VC에 저장해줬습니다.
• 해당 방식에 문제점은 버튼을 반복해서 누를 경우 똑같은 VC가 반복해서 만들어질 수 있고, 서버 통신도 계속해서 실행될 수 있어 메모리 낭비가 발생할 수 있습니다.

해결: 모든 VC를 초기에 모두 생성

• 상황에 따라 VC를 계속해서 새로 만들고, 데이터를 통신하기에는 너무 비효율적이었습니다.
• 따라서, 버튼에 따라 VC를 초기화하는 것이 아닌 해당 뷰가 처음 등장할 때 모든 관련 뷰들을 초기화하여 배열에 저장하고, 서버 통신을 위해 데이터를 저장하는 것입니다. 다시 말해, 초기에 모든 관련 VC들을 데이터와 함께 배열에 저장해서 사용하는 것입니다.
  • 물론, 버튼 선택에 따라 VC를 초기화하여 추가하는 방식도 한 번 생성된 VC나 데이터들을 또 추가하지 않는 과정을 추가한다면해당 방법도 활용할 수 있겠지만, 한 번 생성된 VC나 데이터를 관리하기 위해 추가해야 할 프로퍼티들이 많아질 것이라 생각했습니다. 따라서 한 번에 모든 페이지를 배열에 저장하고, 인덱스를 통해 접근하는 방식이 좀 더 편할 것이라고 생각했습니다.
• 모든 VC를 allPageVCArray에 저장하고, step 1 VC에서 선택된 버튼들의 인덱스를 배열에 저장하고, 델리게이트 방식으로 page view controller에 전달 해주면, 선택된 인덱스의 관련 VC들을 pageVCArray 배열에 새롭게 저장하여 페이지 순서를 지정해줍니다.

// 부모 뷰에 삽입할 pageViewController 리스트
var pageVCArray: [UIViewController] = []

// 초기에 모든 뷰 컨트롤러들을 저장할 배열
var allPageVCArray: [UIViewController] = []

//MARK: - 페이지 인덱스 배열에 따라 페이지를 조정하는 메서드
func updatePageVCArray() {
    // 페이지 배열 전체 삭제
    self.pageVCArray.removeAll()
    
    // 첫 번째 페이지 추가
    self.pageVCArray.append(allPageVCArray[0])
    
    for index in stepTwoVCIndexArray {
        
        switch index {
        case 1:
            self.pageVCArray.append(allPageVCArray[1])
        case 2:
            self.pageVCArray.append(allPageVCArray[2])
        case 3:
            self.pageVCArray.append(allPageVCArray[3])
        case 4:
            self.pageVCArray.append(allPageVCArray[4])
        case 5:
            self.pageVCArray.append(allPageVCArray[5])
        default:
            break
        }
    }
    
    // 마지막 페이지 추가
    self.pageVCArray.append(allPageVCArray[allPageVCArray.count - 1])
    
}

---

문제 3:  step 2-1는 어째..😅

• (요즘 프로젝트하면서 느낀 건데.. 당장 앞에 있는 문제만 해결하려다보니 다음 과정은 생각도 안하고 진행합니다.... )
• 아무튼! 위에 방식으로 진행하니 step1~3는 원하는 방식으로 구현이 가능했습니다. 그러나 step2에서 step2-1을 요구할 때는 어떻게 해야할지 막막했습니다.
• 처음에는 위에 방식과 마찬가지로, step2-1도 allPageVCArray에 저장해서, 보여줄 필요가 없으면 인덱스에 +1이 아닌 +2를 해서 페이지 전환을 시도했습니다.
  • 하지만 또 전체를 보지 않고 앞에 있는 문제만 해결하다 보니..
    다음 버튼으로는 원하는 방식이 구현이 되었는데, 이전 버튼에서도 같은 로직을 추가하려다 보니 모든 step2 VC의 step 2-1 버튼 선택의 유무를 저장해서 매번 확인해야 하는 상황이 발생했습니다. 

해결:  Delegate Protocol 

• 각각의 step2 VC에서 bool 값으로 버튼의 선택 유무를 판단하고, table view의 delegate 메서드를 활용하여 마지막 셀의 버튼이 선택될 때마다 bool 값을 수정합니다.
• 또한, 해당 delegate 메서드에서 bool 값에 따라 해당step2-1 VC를 pageVCArray에 현재 인덱스 다음 순번으로 추가 또는 삭제하는 코드를 작성합니다.

// stepTwoViewController

// pageVC를 delegate로 설정
var customVCDeldgate: BottomSheetStepTwoCustomDelegate?

// step2 커스텀 뷰컨을 보여줄지 판단을 위한 bool 프로퍼티
// 초기에 '나만의 문장 추가'버튼이 눌려있지 않기 때문에 false로 초기화
var showStepTwoCustomVC = false

// 마지막 셀이 선택될 때 실행되는 메서드
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    if indexPath.row == guideDetailData.count - 1 {
        showStepTwoCustomVC = true
        customVCDeldgate?.showStepTwoCustomVC(bool: showStepTwoCustomVC)
    } else {
        return
    }
}

// 마지막 셀이 선택 해제될 때 실행되는 메서드
func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
    if indexPath.row == guideDetailData.count - 1 {
        showStepTwoCustomVC = false
        customVCDeldgate?.showStepTwoCustomVC(bool: showStepTwoCustomVC)
    } else {
        return
    }
}

// pageViewController

extension PageViewController: BottomSheetStepTwoCustomDelegate {
	// step2의 bool값을 확인하고, step2-1 VC를 추가/삭제한다.
    func showStepTwoCustomVC(bool: Bool) {
        if bool {
            if let stepTwoCustomVC = makeStepTwoCustomVC() {
                self.pageVCArray.insert(stepTwoCustomVC, at: currentIndex + 1)
            }
        } else {
            self.pageVCArray.remove(at: currentIndex + 1)
        }
    }
}

---

문제 4:  데이터 도착 완료 시점

• 위에 방식들로 페이지 구성에 대한 로직은 구현이 완료되었습니다. 그러나 생각지도 못한 문제가 발생하였습니다.
• 가끔 테스트를 하는 도중 페이지의 순서가 제 생각과 다르게 보이는 경우가 있었습니다.
  (사실 이때까지만 해도 비동기에 대해 크게 생각하지 못했습니다..😭)
• 왜 순서가 다르게 나올지에 대해 여러 메서드에 print를 찍어가며 확인한 결과, allPageVCArray에 step2 VC를 추가할 때 순서가 보장되지 않는 문제가 있었습니다.
• step2 VC를 초기화하고 배열에 추가하는 과정이 step 2 VC를 초기화 하고, 관련 데이터를 서버에서 받아오는 비동기 메서드를 실행한 뒤, 해당 데이터를 할당하고, VC에 append하는 것이었습니다. 
• 위에 과정은 step2 VC들의 순서에 맞게 코드 실행은 시켰지만, 서버 통신을 위한 비동기 과정이 포함되어 있어 종료 시점에는 순서가 보장이 되지 않은 채 배열에 VC들이 추가되고 있었습니다.

해결:  VC들의 순서를 미리 저장

• 비동기 함수가 실행되기 전에 미리 배열에 VC를 추가하여 순서를 보장해주기로 하였습니다. 페이지 전환 시 인덱스를 통해 전환을 하기 때문에 VC만 해당 인덱스에 저장된다면 비동기 함수의 종료 시점은 큰 문제가 될 게 없었습니다.
• (사실 이 방식은 아직 만족스러운 방식은 아니지만..일단은 임시 방편으로 문제를 해결했습니다. 나중에 좀 더 공부를 하고 마음에 드는 방식을 찾게 되면 공유하겠습니다 😎 아마.. async/await를 활용하면 코드가 마음에 들지도..?)

// pageViewController에 구현

// 해당 페이지가 5개니까 우선은 아래처럼 반복문을 작성. but, 나중에 페이지가 늘어날 경우를 생각한다면 수정 필요
for index in 1...5 {
    if let stepTwoVC = UIStoryboard(name: "DiaryGuide", bundle: nil).instantiateViewController(withIdentifier: "StepTwoViewController") as? StepTwoViewController {
        // 비동기 함수 처리 전 순서 보장을 위해 배열에 스텝2 VC 미리 저장
        self.allPageVCArray.append(stepTwoVC)
        // 비동기 함수 실행
        fetchGPTDiaryDetailGuide(index: index, stepTwoVC: stepTwoVC)
    }
}

---

마무리

아직 프로젝트가 완성되지 않은 상태이지만, 지금 저의 상태를 남겨보고 싶어 열심히 적어보았습니다.

 

현재 문제 해결 방식들 중 마음에 들지 않는 부분들도 많기 때문에, 꾸준히 공부를 하면서 리팩토링 과정을 진행해보고 싶습니다. (앱 출시가 제일 우선..)

---

더 효율적이고 나은 방식이 있다면 알려주세요 !

잘못된 내용이 있다면 지적해주시고, 피드백은 언제나 환영합니다. 🤓

 

2024년 개발 공부와 영어 공부 꾸준하게 해보자.

아자 아자❗️  화이팅❤️‍🔥