제가 담당했던 화면은 아래와 같았습니다. 매칭이 성사되면 카운트 다운과 함께 사용자의 정보를 보여주고, 사용자들이 운동할 때 이동한 거리를 실시간으로 업데이트 시키고, 자신의 휴대폰 뿐 아니라 다른 사용자의 휴대폰에서도 업데이트 되어야 했어요.
그리고 오른쪽으로 스와이프 했을 때는 내가 지나온 거리를 보여주는 지도 화면도 있었어요.
실제로 작업한 화면(3배속)
비교적 UI/UX는 간단해보이지만, 하나의 화면 내에서 정말 많은 기능으로 이루어져있는 것을 볼 수 있었어요.
저는 이 화면을 설계하기에 앞서 어느 부분에 어느 기능이 들어갈지 머릿속으로 정리한 것을 Figma를 이용하여 그려봤어요.
저는 여러 기능이 들어간 이 화면을 하나의 ViewController과 ViewModel로만 사용하게 된다면, **Massive ViewController(ViewModel)**이 될 것이라고 생각했어요. 여러 기능을 하나의 MVVM으로 다룬다면, 그만큼 코드가 커지고 분리하기 어려우며, 무엇보다 코드의 가독성이 떨어질 것이 자명했거든요.
그래서 기능을 분리하기 위해 다른 방법을 모색하기로 했고, 두 가지의 방법을 떠올리게 되었어요.
바로 UICollectionView와 UIPageViewController에요.
CollectionView는 스크롤 기능을 제공해주고 있고, Cell 단위로 뷰를 재사용할 수 있도록 만들어져 있어요.
하지만, 제가 구현하고자 하는 화면은 두 개 뿐이고, 각각의 화면은 뷰를 재사용하기 위한 형태가 아니었어요.