초기 상품 목록 페이지 로딩 - 사용자 경험에 대한 생각

[Fezravien]

초기 로딩 사용자 경험

< 좌: 텍스트, 이미지 따로 / 우: 텍스트, 이미지 통합 >

기존에 앱스토어에 올라온 앱들을 살펴보면 중간에 데이터 로딩으로 인해 빈 화면이 출력된다거나 업데이트하는게 보이거나 하는 상황이 발생되지 않는다. 이것이 사용자 경험을 생각하는것이라 본다.

그래서 위의 왼쪽 같은 경우 이미지와 텍스트를 비동기로 각각 업데이트 하다보니 무거운 작업인 이미지가 나중에 업데이트 되어 앱을 실행 시켰을 때 이미지가 나중에 나타나는 상황을 볼 수 있다.

오른쪽 같은 경우 이미지와 텍스트를 하나의 비동기로 묶었다. 그래서 이미지를 다 받아온 후 그떄서야 텍스트와 함께 화면에 업데이트 하도록 했다. 이런 방법이 딜레이는 있지만 사용자 경험을 생각하는 것이라 본다

    private func bindData() {
        self.marketMainViewModel.bindThumbnailHandler {
            guard let thumbnail = self.marketMainViewModel.itemThumbnail,
                  let item = self.marketMainViewModel.marketItem else {

                      return
                  }
            let convertedPrice = self.marketMainViewModel.convertPriceFormat(currency: item.currency, price: item.price, discountPrice: item.discountPrice)
            let convertedStock = self.marketMainViewModel.convertStockFormat(stock: item.stock)

            DispatchQueue.main.async {
                self.itemImageView.image = UIImage(data: thumbnail)
                self.itemTitle.text = item.title
                self.itemStock.text = convertedStock
                self.applyPriceFormat(priceFormat: convertedPrice)
                self.mainSceneDelegate?.updataCell(indexPath: self.indexPath ?? IndexPath())
            }
        }
    }

이미지 다운로드가 완료되었을때를 View와 ViewModel간 바인딩을 통해 함께 업데이트 시켜주도록 했다.