시각화를 이용한 버그 해결

• 복잡한 게임 로직을 구현하다보니 원인을 추적하기 어려운 버그가 많이 발생했습니다. 이 때 저희는 코드만 보면서 문제를 해결하려고 하기 보다는 버그를 시각화 해서 문제 상황을 명확히 이해한 뒤 해결책을 탐색했습니다.

• 예를 들어, 캐치마인드 게임에서 유저가 나가는 경우 그림을 그리는 순서가 바뀌거나 심각한 경우 게임이 중단되는 문제가 발생했습니다.

  문제는 생각보다 복잡했습니다. 게임에서 나가는 유저가 그림을 그리고 있는지의 여부, 게임 단계, 게임 플레이 인원 수 등 다양한 요인이 문제에 영향을 끼치고 있었습니다.

  저희는 피그마를 사용해 각각의 경우에 대한 시나리오를 그림으로 나타내 보았습니다. 아래 그림은 그림을 그리고 있는 유저가 결과 보여주기 단계에 게임에서 나갈 경우 발생하는 문제 상황을 나타내고 있습니다.

  

  위와 같이 시나리오를 시각화해서 명확히 나타내니 원인을 파악하기 쉬운 것은 물론이고 해결책 역시 바로 떠올릴 수 있었습니다.

• 비슷하게 캐치마인드 게임에서 게임 시간이 제대로 적용되지 않는 문제 역시 시각화를 통해 문제의 원인과 해법을 간단히 파악할 수 있었습니다.

  

  먼저 저희가 구현한 캐치마인드 게임은 위와 같이 라운드 시작 단계 → 그리기 단계 → 결과 단계 순으로 게임이 진행이 됩니다.

  게임이 시작되면 라운드 시작 단계의 로직을 처리하는 함수가 호출됩니다. 라운드 시작 로직을 처리하는 함수의 마지막 부분에서는 그리기 단계의 로직을 처리하는 함수를 5초 뒤에 실행하도록 미리 예약합니다. 마찬가지로 그리기 단계의 로직을 처리하는 함수 말미에서는 결과 단계의 로직을 처리하는 함수를 예약하며 결과 단계의 로직을 처리하는 함수 역시 다음 함수 예약을 진행합니다.

  그런데 게임 그리기 단계 시간이 많이 남았음에도 불구하고 게임 단계가 갑자기 결과 단계로 전환이 되는 문제가 발생했습니다.

  

  마찬가지로 시나리오를 그림으로 나타내보면서 분석을 하니 문제의 원인을 명확하게 파악할 수 있었습니다. 이 문제의 경우 결과 단계 로직 처리 함수가 호출된 시점과 예약된 시점의 라운드를 비교해 두 라운드가 다를 경우 예약된 함수를 호출하지 않도록 처리해 해결했습니다.