게임시작하기 버튼을 탭하면 Game 화면 및 Game 결과대기 화면을 보여줍니다

[yanghojoon]

배경

사용자가 Game을 통해 9가지 질문에 대답하는 기능을 구현했습니다.
질문은 Card 형태로 띄우고, 7개 질문은 버튼을 통한 좋아요/싫어요, 2개 질문은 CollectionView를 통한 다중선택로 답변하도록 했습니다. 이때 사용자가 Game에 집중할 수 있도록 NavigationBar 및 TabBar가 숨겨지도록 했습니다.

작업 내용

1. 전체적인 게임 애니메이션 구현

참고한 게임 애니메이션 링크

위 애니메이션처럼 답변 버튼을 탭하면 답변 종류 (좋아요, 싫어요, 상관 없음)에 따라 카드가 날아가고, 이전 질문 버튼을 탭하면 카드가 날아간 방향에서 다시 돌아오도록 구현했습니다.
카드는 별도의 Custom View 타입을 생성하여 구현했고, UI요소인 만큼 CardGameViewController가 가지고 있도록 했으며, 애니메이션을 위해 CGRect로 위치를 잡았습니다. 따라서 translatesAutoresizingMaskIntoConstraints를 true로 줬습니다.

카드 위치의 경우 화면에 보이는 1, 2, 3번째 카드의 위치를 고정해두었고, 답변을 제출하거나, 이전 질문으로 되돌렸을 때 특정 카드의 위치를 바꿔주도록 했습니다.

카드가 제출되어 날라가는 경우 CGAffineTransform(translateX:y)와 CGAffineTransform(rotationAngle:)을 사용했고, 카드가 다시 돌아오는 경우 날라갔던 위치를 기억하고 있었기 때문에 CGAffineTransform(rotationAngle:)만 사용해서 다시 원래대로 돌아오도록 했습니다.

2. TabBar마다 개별적인 Coordinator 및 NavigationController를 가지도록 구현

HIG 문서의 Tab bars 내용 (They also let people quickly switch between sections of the view while preserving the current navigation state within each section.)과 같이
TabBar 마다 독립적으로 화면이 작동하도록 해야 하므로 TabBarViewController를 띄우는 Coordinator 및 NavigationController (이하 부모 Coordinator 및 Navigation), 그리고 특정 TabBar 내부에서 화면을 이동하는 Coordinator 및 NavigationController (이하 자식 Coordinator 및 Navigation)을 분리했습니다. 또한 부모 Coordinator 및 자식 Coordinator는 Delegate Pattern을 활용하여 소통하도록 했습니다.

Coordinator 구조는 아래와 같습니다.

사용자가 게임을 할 때 게임에 몰입할 수 있도록 Game 화면에서는 부모 Coordinator를 통해 NavigationBar 및 TabBar가 숨겨지도록 했고, 게임 대기/결과 화면에서 다시 보여지도록 구현했습니다.
또한 자식 Coordinator에는 Game 화면에 필요한 별도의 Coordinator를 추가하여 코드 재사용성을 개선했습니다.

3. 다중선택 게임의 CollectionView 구현

다중선택 게임의 경우 선택지가 고정적이고 Animation이 따로 필요하지 않았기에 DiffableDataSource를 사용하지 않았습니다.
대신 ComposiontalLayout을 통해 CollectionView의 레이아웃을 잡고, Rx의 bind 오퍼레이터를 통해 데이터를 넣어줬습니다.
다중선택 게임의 경우 기존에는 다른 형태의 View로 넘어가서 게임을 진행하는 방식이었으나, 기존 Yes/No 게임처럼 카드 형태로 되어 있을 경우 게임이 얼마나 남았는지 시각적으로 파악할 수 있기 때문에 다중선택 게임 또한 카드 방식으로 구현했습니다.

4. 결과 제출 버튼을 누르면 서버에 결과를 취합하여 전송하도록 구현

혼자메뉴결정, 함께메뉴결정 모두 마지막 질문에서 다음 버튼을 누르는 경우, 게임 답변을 서버에 전송하도록 구현했습니다.

결과 전송 API의 경우 PIN번호가 있으면 함께메뉴결정, 없으면 혼자메뉴결정에 해당하는 URL로 데이터를 Post 도록 했으며, httpMethod가 Post인 경우 httpBody에 인코딩한 JSON 데이터를 넣도록 했습니다.

5. 함께메뉴결정 탭의 Game 결과대기 화면 구현

10초 Timer의 타이머를 통해 서버에서 제출인원수 (SubmissionCount)를 10초 간격으로 받아 화면에 나타내도록 했습니다. 따라서 얼마나 많은 인원이 제출을 했는지 확인이 가능하도록 했습니다.
Refresh 버튼을 만드는 방안도 고려했으나 이는 사용자가 계속해서 해당 버튼을 눌러줘야 하는 불편함이 있기에, 자동으로 갱신되도록 구현했습니다.

6. 게임 다시 시작 버튼 구현

함께메뉴결정 탭의 Game 결과대기 화면에서 게임 다시 시작 버튼을 탭하면, 서버에 제출한 개인 데이터를 삭제하고, 해당 탭의 초기화면으로 돌아가도록 구현했습니다.
초기화면으로 돌아갈 때는 메모리 관리를 위해 부모 Coordinator의 childCoordinators 프로퍼티에서 기존의 자식 Coordinator를 삭제하고, 새롭게 생성한 자식 Coordinator를 추가하도록 했습니다.

• 이때 핀넘버 공유 (SharePinNumber) 화면 및 게임결과 대기 (Submission) 화면의 ViewModel이 메모리에서 해제되지 않는 문제가 발생했습니다. 원인을 파악하지 못하여 추후 리팩토링하면서 해결할 예정입니다.

테스트 방법

• Simulator 화면 확인으로 대체했습니다. (ViewModel 테스트코드 추후 추가 예정)

리뷰 노트

• 디자인은 추후 변경될 수 있습니다.

스크린샷