[iOS] Kingfisher & AppStorage로 이미지 다운로드 속도 개선하기

이력서와 프로젝트에 작성했던 부분인데, 최근 면접을 준비하다가 내가 한 방법이 맞는지 잘 모르겠다.

다른 분들은 어떻게 하는지 궁금하기도 해서 쓰는 글

URLSession & Kingfisher

홈화면 - 오른쪽 상단 프로필 이미지

내가 맡은 부분은 인스타그램처럼 홈 화면에 매번 떠있는 저 프로필 이미지를 가져와야한다.
URLSession으로 Firebase Storage 에 담긴 회원 프로필 이미지 url을 다운받아 보여주는 역할을 한다.
Kingfisher의 경우 이미지 캐싱 라이브러리이기 때문에, URLSession보다 빠르게 다운로드가 가능하다.
Instrument - profile - network 로 테스트 해본 결과,
약 2초 걸리는 이미지 다운로드가 1.3초까지 줄여지는 것이 확인된다.

 

많이 줄여졌지만, 이 과정에 대한 의문점이 생겼다.

프로필 이미지를 보여주는 프로세스

이미지 등록 및 변경 시,

• Firebase에 이미지 업로드 → 이미지 업로드 성공 → 이미지 url 다운 받아 화면에 출력

위와 같은 프로세스를 보여주는데, 굳이 다시 이미지를 url로 다운 받을 필요가 없다.

갤러리에서 선택한 이미지를 Firebase로 이미지 업로드를 하는 것을 비동기 처리 후, 성공 응답이 오면 그때 이미지를 imageView에 로컬로 바로 담는 것이다.

• Firebase 이미지 업로드(비동기) → 이미지 업로드 성공 → profileImageView = 선택한 이미지

이렇게 하면, 업로드 처리에 대한 응답만 가져오기 때문에 이전보다 빠른 속도로 이미지를 보여준다.

그럼 언제 Firebase에 있는 이미지를 사용하는가?

앱을 켰을 때는 프로필 이미지가 비어있기 때문에, 로그인 정보로 사용자의 아이디 → Firebase Storage에서 이미지를 다운받아 보여주는 역할을 한다.

여기서 Firebase Storage에서 사용자의 ID 부분 이미지를 찾고 → 다운받아 오는 시간도 줄여주기 위해, AppStorage를 사용했다.

사용자 이미지를 자주 변경하는 것이 아니고, 사용자 정보이기 때문에 AppStorage를 사용해 프로필 이미지 UR을 등록시켜 바로 Kingfisher로 다운받을 수 있도록 설정했다.

class ProfileViewModel: ObservableObject {
    static let shared = ProfileViewModel()
    
    @AppStorage("user_name") private var userName: String = "EYE-Mate"
    @AppStorage("user_UID") private var userUID: String = ""
    @AppStorage("user_profile_url") private var userProfileURL: String = String.defaultProfileURL
    @AppStorage("Login") var loggedIn: Bool = false

결과적으론, 직접적으로 Firebase Storage에서 이미지를 다운받아 사용하지는 않고, 사용자의 정보 손실용으로 이미지 변경, 초기화 때만 url을 변경하는 식으로 저장해둔다.

정리

• 이미지 캐싱 라이브러리인 kingfisher를 사용했다.
  • 사실 NukeUI가 속도, 캐싱 면에서 더 성능이 좋지만 보편적으로 kingfisher가 더 많이 사용되기에 안전성으로 사용했다.
• AppStorage로 사용자 프로필 이미지 url을 이중으로 저장한다.
  • 바로 정보를 찾을 수 있는 장점으로, 홈화면에서 빠르게 보여줘야하는 특성을 생각해 사용했다.