Guarantee Order of Image by cache

비동기 네트워크 처리에 있어 순서대로 이미지 순서가 보장되어야 하는 문제를 해결했습니다.

• 방탈출 테마 세부페이지에서는 해당 방을 방문한 유저들의 Top 5 랭킹이 보여지도록 하였습니다.
• 이 때, 이상적인 상황의 경우, 모든 이미지 다운로드 속도가 동일하여 요청 순서대로 응답이 온다면 원하는 결과를 얻을 수 있습니다.

• 하지만, 각 이미지 크기가 다르고, 순간적인 네트워크 속도가 다르기 때문에 데이터가 응답되는 시점이 순차적이지 않았습니다. 결과적으로 단순히 도착 순서대로 이미지를 반영할 경우, 잘못된 유저의 이미지가 매칭된다는 문제가 발생했습니다.

• 이에 화면에 보이는 유저의 순서를 가지는 배열을 가지고, 도착 순서에 맞게 해당 유저 객체를 반영해주었습니다.
• 모든 유저가 네트워크 요청에 성공했을 때, 실제 이미지를 반영하는 방법을 통해 목적을 달성하였습니다.

순서 보장을 하는데 있어서 더 나은 방법은 없는가?

• 일단 가장 큰 문제점은, 해당 방법을 사용했을 경우, 먼저 응답이 온 유저의 경우 먼저 반영을 해줄 수 있음에도 불구하고 그러지 못한다는 점입니다. 이는 사용자 경험에 문제를 일으킬 수 있습니다.
• 따라서, 응답이 왔을 때, 해당 응답이 실제 화면에 몇번째 인덱스에 해당하는 유저인지만 알 수 있다면, 도착 시점에 바로바로 그려지도록 하는 것이 가장 반응성에 있어 좋은 해결이라고 생각합니다.

100명, 1000명의 유저가 있다면? 빠르게 스크롤 했을 때 문제점은?

• 테이블 뷰와 같은 많은 정보를 한번에 보여주는 경우, 빠르게 스크롤한다면 다음 셀에 대한 요청들이 큐에 쌓여 응답된 이미지들이 순차적으로 변경되는 문제가 발생할 수 있습니다.
• 또한 이는 사용자가 원치않는 데이터 요청을 하는 것이기 때문에, 사용자가 현재 보고 있는 화면, 앞뒤로 padding에 해당하는 셀 이외의 네트워크 요청을 끊어 주는 것이 옳은 판단입니다.
• 이를 가능하게 하는 방법으로는, 셀 내부에 해당 네트워크 테스크 자체를 가지도록 하고, 셀이 재사용되는 시점에 해당 task를 cancel 하는 방법이 있습니다. 이럴 경우, 재사용되는 시점에 무조건 이전 요청이 취소되기 때문에 문제를 해결할 수 있습니다.