숏폼 플랫폼 재생 화면 정보를 불러올 때는 어떻게 불러오는게 좋을까?

위치기반 숏폼 플랫폼 Layover에서 재생 화면 기능을 맡아 개발한 경험이 있다.

유저 프로필 정보, 유저의 위치 정보를 재생 화면과 같이 담아 보여줘야 하는 기능이었다.

재생 화면

위와 같은 재생 화면에서 제목, 내용, 태그, 유저 이름 까지는 따로 비동기적인 동작이 필요하지 않았다. 왜냐하면 영상 데이터를 불러올 때 같이 불러오기 때문이다.

그러나 프로필 이미지와 위치 정보 같은 경우 비동기로 동작하기 때문에 고민이 필요해졌다.

최초 로직

CollectionView의 Cell을 구성할 때, 제목, 내용, 태그, 유저 이름과 같은 정보들을 넣어주고 같이 유저 프로필과 위치 정보를 넣어주었는데, 유저 프로필과 위치 정보를 기다려야 하는 탓에 재생 화면 스크롤을 내릴 때 끊김이 발생했다.

필자는 생각했다. 그렇다면 동영상 먼저 틀어주고 내용을 구성하면 되지 않을까?

다음 해결 로직

이렇게 하면, 영상을 먼저 재생하고 영상 정보를 불러오기 때문에, 아무런 정보 없이 영상만 틀어져 있는 경우가 발생했다.

이러고 나서야 드디어 생각한 방법이 유저 프로필과 위치 정보는 기본 데이터로 해두고 셀을 구성한 뒤, 데이터를 불러오면 추후에 업데이트하는 것이었다.

수정된 재생 화면

영상을 보면 처음 들어갈 때 프로필 이미지가 로드되지 않았지만 자연스럽게 로드하고 있는 것을 확인할 수 있다.

최종 로직

코드로 보면 다음과 같다.

func configureDataSource(viewModel: PlaybackModels.ConfigurePlaybackCell.ViewModel) {
        playbackCollectionView.register(PlaybackCell.self, forCellWithReuseIdentifier: PlaybackCell.identifier)
        dataSource = UICollectionViewDiffableDataSource<Section, Models.PlaybackVideo>(collectionView: playbackCollectionView) { (collectionView, indexPath, playbackVideo) -> UICollectionViewCell? in
            guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: PlaybackCell.identifier, for: indexPath) as? PlaybackCell else { return PlaybackCell() }
            // 일단 정보들을 넣어두고!
            cell.setPlaybackContents(post: playbackVideo.displayedPost)
            if let teleportIndex = viewModel.teleportIndex {
                if indexPath.row == 0 || indexPath.row == teleportIndex {
                    cell.playbackView.resetPlayer()
                    return cell
                }
            }
            // 재생하고!
            cell.addAVPlayer(url: playbackVideo.displayedPost.board.videoURL)
            // 그 다음에 로드를 하자구!
            Task {
                await self.interactor?.loadProfileImageAndLocation(with: Models.LoadProfileImageAndLocation.Request(
                    curCell: cell,
                    profileImageURL: playbackVideo.displayedPost.member.profileImageURL,
                    latitude: playbackVideo.displayedPost.board.latitude,
                    longitude: playbackVideo.displayedPost.board.longitude))
            }
            cell.delegate = self
            return cell
        }
    }

 

물론 이도 완벽하지는 않아 Prefetch기능을 추가했다. 다음 글에서 확인할 수 있다.

https://chopmozzi.tistory.com/16

Swift Concurrency를 이용한 UICollectionView Prefetch

Layover 프로젝트에 관심이 있다면 여기로.

https://github.com/boostcampwm2023/iOS09-Layover

GitHub - boostcampwm2023/iOS09-Layover: 내 여정의 경유지들을 기록하다🧑‍🚀👩‍🚀👨‍🚀 - 위치기