perf(banner): TabView 프리로딩 완화·다운샘플링·요청취소 적용

배너/캐러셀에서 인접 페이지 프리로딩과 원본 해상도 디코딩으로
발생하던 메모리 스파이크와 중복 로드를 완화했습니다.

- 각 페이지에서 이미지 URL을 onAppear에 바인딩, onDisappear에 nil 해제
  → 인접 페이지 프리로딩 시 중복 로드·디코딩 방지, 요청 취소 실효
- 모든 KFImage에 cancelOnDisappear(true) 일관 적용
- 큰 배너 이미지에 downsampling(size:) 적용(디코딩 메모리 절감)
- 자동 슬라이드 주기 3초 → 4초로 완화(동시 로드 빈도 감소)
- TabView 페이지를 서브뷰로 분리하여 뷰 로직 단순화 및 재사용성 향상

결과: 동시 디코딩 감소, 피크 메모리 사용량 하락, 자동 슬라이드 안정성 개선

SodaLive/Sources/Chat/Character/Banner/AutoSlideCharacterBannerView.swift

@@ -21,18 +21,13 @@ struct AutoSlideCharacterBannerView: View {
             TabView(selection: $currentIndex) {
                 ForEach(0..<items.count, id: \.self) { index in
                     let item = items[index]
-                    KFImage(URL(string: item.imageUrl))
+                    AutoSlideCharacterBannerPage(
-                        .placeholder { Color.gray.opacity(0.2) }
+                        item: item,
-                        .retry(maxCount: 2, interval: .seconds(1))
+                        width: screenSize().width,
-                        .cancelOnDisappear(true)
+                        height: height,
-                        .resizable()
+                        onTap: onTap
-                        .scaledToFill()
+                    )
-                        .frame(height: height)
-                        .clipped()
-                        .cornerRadius(12)
-                        .contentShape(Rectangle())
                     .tag(index)
-                        .onTapGesture { onTap(item) }
                 }
             }
             .tabViewStyle(.page(indexDisplayMode: .never))
@@ -77,3 +72,44 @@ struct AutoSlideCharacterBannerView: View {
     .padding()
     .background(Color.black)
 }
+
+
+private struct AutoSlideCharacterBannerPage: View {
+    let item: CharacterBannerResponse
+    let width: CGFloat
+    let height: CGFloat
+    let onTap: (CharacterBannerResponse) -> Void
+    @State private var boundURL: URL?
+    
+    var body: some View {
+        Group {
+            if let boundURL {
+                KFImage(boundURL)
+                    .placeholder { Color.gray.opacity(0.2) }
+                    .retry(maxCount: 2, interval: .seconds(1))
+                    .cancelOnDisappear(true)
+                    .downsampling(size: CGSize(width: width, height: height))
+                    .resizable()
+                    .scaledToFill()
+                    .frame(width: width, height: height)
+                    .clipped()
+                    .cornerRadius(12)
+            } else {
+                Color.clear
+                    .frame(width: width, height: height)
+                    .cornerRadius(12)
+            }
+        }
+        .contentShape(Rectangle())
+        .onTapGesture { onTap(item) }
+        .onAppear {
+            let encoded = item.imageUrl.addingPercentEncoding(
+                withAllowedCharacters: .urlQueryAllowed
+            ) ?? item.imageUrl
+            boundURL = URL(string: encoded)
+        }
+        .onDisappear {
+            boundURL = nil
+        }
+    }
+}

SodaLive/Sources/Content/Main/Banner/ContentMainBannerView.swift

@@ -19,67 +19,12 @@ struct ContentMainBannerView: View {
                     TabView(selection: $viewModel.currentIndex) {
                         ForEach(0..<viewModel.bannerList.count, id: \.self) { index in
                             let item = viewModel.bannerList[index]
-                            if let url = item.thumbnailImageUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) {
+                            ContentMainBannerPage(
-                                KFImage(URL(string: url))
+                                item: item,
-                                    .cancelOnDisappear(true)
-                                    .downsampling(
-                                        size: CGSize(
                                 width: screenSize().width - 26.7,
                                 height: (screenSize().width - 26.7) * 0.53
                             )
-                                    )
+                            .tag(index)
-                                    .resizable()
-                                    .scaledToFill()
-                                    .frame(
-                                        width: screenSize().width - 26.7,
-                                        height: (screenSize().width - 26.7) * 0.53
-                                    )
-                                    .onTapGesture {
-                                        switch item.type {
-                                        case .EVENT:
-                                            AppState.shared.setAppStep(step: .eventDetail(event: item.eventItem!))
-                                        case .CREATOR:
-                                            AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId!))
-                                        case .SERIES:
-                                            AppState.shared.setAppStep(step: .seriesDetail(seriesId: item.seriesId!))
-                                        case .LINK:
-                                            if let link = item.link, link.trimmingCharacters(in: .whitespaces).count > 0, let url = URL(string: link), UIApplication.shared.canOpenURL(url) {
-                                                UIApplication.shared.open(url)
-                                            }
-                                        }
-                                    }
-                                    .cornerRadius(4.7)
-                            } else {
-                                KFImage(URL(string: item.thumbnailImageUrl))
-                                    .cancelOnDisappear(true)
-                                    .downsampling(
-                                        size: CGSize(
-                                            width: screenSize().width - 26.7,
-                                            height: (screenSize().width - 26.7) * 0.53
-                                        )
-                                    )
-                                    .resizable()
-                                    .scaledToFill()
-                                    .frame(
-                                        width: screenSize().width - 26.7,
-                                        height: (screenSize().width - 26.7) * 0.53
-                                    )
-                                    .onTapGesture {
-                                        switch item.type {
-                                        case .EVENT:
-                                            AppState.shared.setAppStep(step: .eventDetail(event: item.eventItem!))
-                                        case .CREATOR:
-                                            AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId!))
-                                        case .SERIES:
-                                            AppState.shared.setAppStep(step: .seriesDetail(seriesId: item.seriesId!))
-                                        case .LINK:
-                                            if let link = item.link, link.trimmingCharacters(in: .whitespaces).count > 0, let url = URL(string: link), UIApplication.shared.canOpenURL(url) {
-                                                UIApplication.shared.open(url)
-                                            }
-                                        }
-                                    }
-                                    .cornerRadius(4.7)
-                            }
                         }
                     }
                     .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
@@ -103,7 +48,7 @@ struct ContentMainBannerView: View {
                 }
                 .frame(maxWidth: .infinity)
                 .onAppear {
-                    viewModel.timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
+                    viewModel.timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
                 }
                 .onDisappear {
                     viewModel.timer.upstream.connect().cancel()
@@ -133,6 +78,58 @@ struct ContentMainBannerView: View {
     }
 }
 
+private struct ContentMainBannerPage: View {
+    let item: GetAudioContentBannerResponse
+    let width: CGFloat
+    let height: CGFloat
+    @State private var boundURL: URL?
+    
+    var body: some View {
+        Group {
+            if let boundURL {
+                KFImage(boundURL)
+                    .cancelOnDisappear(true)
+                    .downsampling(size: CGSize(width: width, height: height))
+                    .resizable()
+                    .scaledToFill()
+                    .frame(width: width, height: height)
+                    .cornerRadius(4.7)
+            } else {
+                Color.clear
+                    .frame(width: width, height: height)
+                    .cornerRadius(4.7)
+            }
+        }
+        .contentShape(Rectangle())
+        .onTapGesture {
+            switch item.type {
+            case .EVENT:
+                AppState.shared.setAppStep(step: .eventDetail(event: item.eventItem!))
+            case .CREATOR:
+                AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId!))
+            case .SERIES:
+                AppState.shared.setAppStep(step: .seriesDetail(seriesId: item.seriesId!))
+            case .LINK:
+                if let link = item.link,
+                   link.trimmingCharacters(in: .whitespaces).count > 0,
+                   let url = URL(string: link),
+                   UIApplication.shared.canOpenURL(url) {
+                    UIApplication.shared.open(url)
+                }
+            }
+        }
+        .onAppear {
+            let urlString = item.thumbnailImageUrl.addingPercentEncoding(
+                withAllowedCharacters: .urlQueryAllowed
+            ) ?? item.thumbnailImageUrl
+            boundURL = URL(string: urlString)
+        }
+        .onDisappear {
+            boundURL = nil
+        }
+    }
+}
+
 struct ContentMainBannerView_Previews: PreviewProvider {
     static var previews: some View {
         ContentMainBannerView()

SodaLive/Sources/Content/Main/Banner/ContentMainBannerViewModel.swift

@@ -18,7 +18,7 @@ final class ContentMainBannerViewModel: ObservableObject {
     @Published var isLoading = false
     
     @Published var currentIndex = 0
-    @Published var timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
+    @Published var timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
     
     @Published var bannerList = [GetAudioContentBannerResponse]()
     

SodaLive/Sources/Content/Main/V2/ContentMainBannerViewV2.swift

@@ -14,7 +14,7 @@ struct ContentMainBannerViewV2: View {
     let bannerList: [GetAudioContentBannerResponse]
     
     @State var currentIndex = 0
-    @State var timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
+    @State var timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
     
     @State var width: CGFloat = 0
     @State var height: CGFloat = 0
@@ -68,7 +68,7 @@ struct ContentMainBannerViewV2: View {
         .onAppear {
             width = screenSize().width - 26.7
             height = width * 0.53
-            timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
+            timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
         }
         .onDisappear {
             timer.upstream.connect().cancel()
@@ -107,15 +107,25 @@ struct ContentMainBannerImageView: View {
     let width: CGFloat
     let height: CGFloat
     let item: GetAudioContentBannerResponse
+    @State private var boundURL: URL?
     
     var body: some View {
-        KFImage(URL(string: url))
+        Group {
+            if let boundURL {
+                KFImage(boundURL)
                     .cancelOnDisappear(true)
                     .downsampling(size: CGSize(width: width, height: height))
                     .resizable()
                     .scaledToFill()
                     .frame(width: width, height: height)
                     .cornerRadius(4.7)
+            } else {
+                Color.clear
+                    .frame(width: width, height: height)
+                    .cornerRadius(4.7)
+            }
+        }
+        .contentShape(Rectangle())
         .onTapGesture {
             switch item.type {
             case .EVENT:
@@ -130,5 +140,12 @@ struct ContentMainBannerImageView: View {
                 }
             }
         }
+        .onAppear {
+            let encoded = url.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? url
+            boundURL = URL(string: encoded)
+        }
+        .onDisappear {
+            boundURL = nil
+        }
     }
 }

SodaLive/Sources/Live/EventBanner/SectionEventBannerView.swift

@@ -11,7 +11,7 @@ import Kingfisher
 struct SectionEventBannerView: View {
     
     @State private var currentIndex = 0
-    @State private var timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
+    @State private var timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
     @AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
     
     let items: [EventItem]
@@ -21,51 +21,13 @@ struct SectionEventBannerView: View {
             TabView(selection: $currentIndex) {
                 ForEach(0..<items.count, id: \.self) { index in
                     let item = items[index]
-                    if let url = item.thumbnailImageUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) {
+                    SectionEventBannerPage(
-                        KFImage(URL(string: url))
+                        item: item,
-                            .cancelOnDisappear(true)
-                            .resizable()
-                            .scaledToFill()
-                            .frame(
                         width: screenSize().width,
                         height: screenSize().width * 300 / 1000,
-                                alignment: .center
+                        token: token
                     )
                     .tag(index)
-                            .onTapGesture {
-                                if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
-                                    if let _ = item.detailImageUrl {
-                                        AppState.shared.setAppStep(step: .eventDetail(event: item))
-                                    } else if let link = item.link, link.trimmingCharacters(in: .whitespaces).count > 0, let url = URL(string: link), UIApplication.shared.canOpenURL(url) {
-                                        UIApplication.shared.open(url)
-                                    }
-                                } else {
-                                    AppState.shared.setAppStep(step: .login)
-                                }
-                            }
-                    } else {
-                        KFImage(URL(string: item.thumbnailImageUrl))
-                            .cancelOnDisappear(true)
-                            .resizable()
-                            .scaledToFill()
-                            .frame(
-                                width: screenSize().width,
-                                height: screenSize().width * 300 / 1000,
-                                alignment: .center
-                            )
-                            .tag(index)
-                            .onTapGesture {
-                                if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
-                                    if let _ = item.detailImageUrl {
-                                        AppState.shared.setAppStep(step: .eventDetail(event: item))
-                                    } else if let link = item.link, link.trimmingCharacters(in: .whitespaces).count > 0, let url = URL(string: link), UIApplication.shared.canOpenURL(url) {
-                                        UIApplication.shared.open(url)
-                                    }
-                                } else {
-                                    AppState.shared.setAppStep(step: .login)
-                                }
-                            }
-                    }
                 }
             }
             .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
@@ -85,7 +47,7 @@ struct SectionEventBannerView: View {
             }
         }
         .onAppear {
-            timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
+            timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
         }
         .onDisappear {
             timer.upstream.connect().cancel()
@@ -109,3 +71,51 @@ struct SectionEventBannerView_Previews: PreviewProvider {
         SectionEventBannerView(items: [])
     }
 }
+
+private struct SectionEventBannerPage: View {
+    let item: EventItem
+    let width: CGFloat
+    let height: CGFloat
+    let token: String
+    @State private var boundURL: URL?
+    
+    var body: some View {
+        Group {
+            if let boundURL {
+                KFImage(boundURL)
+                    .cancelOnDisappear(true)
+                    .downsampling(size: CGSize(width: width, height: height))
+                    .resizable()
+                    .scaledToFill()
+                    .frame(width: width, height: height, alignment: .center)
+            } else {
+                Color.clear
+                    .frame(width: width, height: height, alignment: .center)
+            }
+        }
+        .contentShape(Rectangle())
+        .onTapGesture {
+            if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
+                if let _ = item.detailImageUrl {
+                    AppState.shared.setAppStep(step: .eventDetail(event: item))
+                } else if let link = item.link,
+                          link.trimmingCharacters(in: .whitespaces).count > 0,
+                          let url = URL(string: link),
+                          UIApplication.shared.canOpenURL(url) {
+                    UIApplication.shared.open(url)
+                }
+            } else {
+                AppState.shared.setAppStep(step: .login)
+            }
+        }
+        .onAppear {
+            let urlString = item.thumbnailImageUrl.addingPercentEncoding(
+                withAllowedCharacters: .urlQueryAllowed
+            ) ?? item.thumbnailImageUrl
+            boundURL = URL(string: urlString)
+        }
+        .onDisappear {
+            boundURL = nil
+        }
+    }
+}