안녕하세요! Apple Garden 팀입니다. 이번 포스트에서는 Mate Runner 에서 자주 사용되는 UI 요소들을 어떻게 구현하였는지 설명드릴까 하는데요
Mate Runner에는 혼자 달리기, 경쟁모드로 달리기, 협동모드로 달리기 이렇게 총 3가지의 달리기 모드가 있다는 거 알고계시죠? 그래서 운동 중 화면과 달리기 결과 화면을 보면 다음과 같이 공통된 부분이 있다는 걸 확인할 수 있습니다.
혼자 달리기
경쟁 모드로 달리기
협동 모드로 달리기
운동 중 화면의 경우, 칼로리/시간/내가 달린 거리/달린 거리에 대한 프로그레스 바/종료버튼/지도가 공통으로 나타나고, 달리기 결과 화면의 경우 운동 시간/날짜/내가 달린 거리/칼로리/달린 시간/경로를 나타내는 지도가 공통으로 표시됩니다. 초기에는 단순히 뷰가 많이 겹치고, 혼자 달리기의 운동중 화면 및 혼자 달리기의 결과 화면에 데이터를 조금만 더 추가하면 같이 달리기의 운동중 화면/결과 화면을 만들 수 있기 때문에, 다음과 같은 형태로 상속하여 구현하기로 합의하였습니다.
초기 설계는 위와 같은 상속 구조를 가졌습니다. 혼자 달리기 SingleRunningVC를 RaceRunningVC & TeamRunningVC가, SingleResultRunningVC를 RaceResultRunningVC & TeamResultRunningVC가 상속 받고, SingleRunningVC & SingleResultRunningVC는 각자 뷰모델을 프로퍼티로 가지고 있습니다.
SingleRunningVC와 그 뷰모델, RaceRunningVC & TeamRunningVC만 구현했을 때는 이 방식이 괜찮아보였습니다. 그런데 RaceRunningVC & TeamRunningVC의 뷰모델을 구현하려고 했을 때 문제가 생겼습니다. 위와 같은 상속 구조를 갖추려면 RaceRunning & TeamRunning 뷰모델이 SingleRunning 뷰모델을 상속받아야 합니다. 그런데 세 뷰 모델은 각자 Input과 Output이 달라서, 상속으로 구현하기 까다로웠습니다. 또한 이와 같은 방식으로 구현을 하면, 추가적인 요구사항이 발생했을 때 확장을 하기가 힘들어집니다.
결국 기존 방식이 좋지 않음을 깨닫고 기존의 방식을 변경하기로 했습니다. 위의 그림과 같이 RunningVC를 부모로 하고, 이를 SingleRunningVC & RaceRunningVC & TeamRunningVC가 상속합니다. 이 때 RunningVC는 UI를 그리는 메서드만을 가지고, 뷰모델을 가지지 않습니다. 대신, SingleRunningVC & RaceRunningVC & TeamRunningVC가 각각의 뷰모델을 가지고 있습니다. RunningResultVC의 경우도 이와 마찬가지입니다.
이렇게 변경한 결과, 뷰컨트롤러에서 공통 UI를 그리는 중복 코드를 줄일 수 있었습니다. 뷰모델의 경우 서로 중복된 코드가 존재하기는 했으나, 변경 사항이 생기면 더욱 유연성 있게 대처할 수 있게 되었습니다.
이 밖에도 친구 탭에서 확인할 수 있는 친구 목록 화면과 달리기 초대를 보낼 때 맞이하게 되는 친구 목록 화면도 거의 비슷한 것을 확인하실 수 있습니다.
친구 탭 - 친구 리스트 화면
같이 달리기 - 친구 선택 화면
메이트러너에서는 친구 탭에 보여지는 목록과 같이 달릴때 친구를 지정하는 화면이 네비게이션바 버튼을 제외하고는 대부분이 비슷한 UI인것을 보실 수 있으실 겁니다!
저희는 중복된 코드를 줄이고 재사용할 수 있는 부분은 최대한 다시 사용하려 했습니다. 그렇기 때문에 BaseViewController인 친구 리스트 화면을 친구 선택화면이 상속받고 코디네이터로 화면 전환을 호출하는 메서드를 오버라이딩 하는 방식으로 구현했습니다.