08 · 그래픽스와 UI 렌더링

import UIKit

// 커밋 트랜잭션(Layout → Display → Prepare → Commit)은 전부 메인에서 돈다.
// 여기에 디코드·파싱이 끼면 그 프레임은 예산을 넘긴다.

@MainActor
final class FeedCell: UICollectionViewCell {
    private let imageView = UIImageView()
    private var currentID: UUID?

    // ❌ 커밋 경로에서 디코드가 일어난다
    func configureBad(_ item: Item) {
        imageView.image = UIImage(contentsOfFile: item.path)
        // UIImage 생성은 lazy지만, 실제 디코드가 Prepare 단계에서 메인에 걸린다
    }

    // ✅ 백그라운드에서 픽셀까지 확정한 뒤 넘긴다
    func configure(_ item: Item) {
        currentID = item.id
        imageView.image = nil

        Task.detached(priority: .userInitiated) {
            guard let raw = UIImage(contentsOfFile: item.path) else { return }
            // byPreparingForDisplay가 디코드를 여기서 끝낸다
            let ready = await raw.byPreparingForDisplay()

            await MainActor.run {
                guard self.currentID == item.id else { return }   // 재사용 검증
                self.imageView.image = ready                       // 메인은 대입만
            }
        }
    }
}

// ✅ 텍스트 레이아웃도 미리 계산해 둘 수 있다
struct PreparedRow {
    let item: Item
    let titleHeight: CGFloat        // 백그라운드에서 미리 측정
    let image: UIImage?             // 미리 디코드
}

func prepare(_ items: [Item], width: CGFloat) async -> [PreparedRow] {
    await withTaskGroup(of: PreparedRow.self) { group in
        for item in items {
            group.addTask {
                let h = measure(item.title, width: width)
                let img = await UIImage(contentsOfFile: item.path)?.byPreparingForDisplay()
                return PreparedRow(item: item, titleHeight: h, image: img)
            }
        }
        var out: [PreparedRow] = []
        for await r in group { out.append(r) }
        return out
    }
}

struct Item { let id: UUID; let path: String; let title: String }
func measure(_ s: String, width: CGFloat) -> CGFloat { 0 }

import UIKit

// Commit 단계는 레이어 트리를 재귀적으로 인코딩해 렌더 서버로 보낸다.
// 비용이 레이어 개수와 깊이에 비례한다.

// ❌ 컨테이너를 겹겹이 쌓는 구조 — 셀 하나에 레이어 8개
final class DeepCell: UICollectionViewCell {
    func buildBad() {
        let outer = UIView(), middle = UIView(), inner = UIView()
        let bg = UIView(), border = UIView()
        contentView.addSubview(outer)
        outer.addSubview(middle)
        middle.addSubview(inner)
        inner.addSubview(bg)
        bg.addSubview(border)
    }
}

// ✅ 배경·테두리·모서리는 뷰를 추가하지 말고 레이어 속성으로
final class FlatCell: UICollectionViewCell {
    private let titleLabel = UILabel()

    func build() {
        contentView.layer.cornerRadius = 12
        contentView.layer.borderWidth = 1
        contentView.layer.borderColor = UIColor.separator.cgColor
        contentView.backgroundColor = .secondarySystemBackground
        contentView.addSubview(titleLabel)          // 레이어 2개로 끝
    }
}

// ✅ 구분선을 뷰로 만들지 않는다
//    ❌ 셀마다 1px 높이 UIView 추가  →  행 수만큼 레이어 증가
//    ✅ tableView.separatorStyle 또는 레이어 border 사용

// ✅ 여러 정적 요소는 하나의 이미지로 미리 합성한다
func composedBackground(size: CGSize) -> UIImage {
    UIGraphicsImageRenderer(size: size).image { ctx in
        UIColor.systemBackground.setFill()
        ctx.fill(CGRect(origin: .zero, size: size))
        UIColor.separator.setStroke()
        ctx.cgContext.stroke(CGRect(origin: .zero, size: size))
    }
}

// 확인: Debug View Hierarchy에서 뷰 개수를 보고,
//       Instruments의 Core Animation에서 Commit 시간을 확인한다

import UIKit

// 애니메이션이 도는 동안 setNeedsLayout을 부르면
// 매 프레임 재커밋이 일어나 애니메이션 자체가 무거워진다.

final class PanelController: UIViewController {
    private let panel = UIView()
    private var heightConstraint: NSLayoutConstraint!

    // ❌ 시작 상태를 확정하지 않고 애니메이션한다 (블록 자체는 한 번만 실행된다)
    func expandBad() {
        UIView.animate(withDuration: 0.3) {
            self.heightConstraint.constant = 300
            self.view.setNeedsLayout()          // 제약 변경이 이미 무효화하므로 불필요한 호출
            self.view.layoutIfNeeded()
        }
    }

    // ✅ 제약 변경 후 layoutIfNeeded를 한 번만 — 시스템이 보간한다
    func expand() {
        view.layoutIfNeeded()                    // 시작 상태 확정
        heightConstraint.constant = 300
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()           // 종료 상태로 보간
        }
    }

    // ✅ 더 싼 방법: 레이아웃을 아예 안 건드리는 속성으로 애니메이션
    func slide() {
        UIView.animate(withDuration: 0.3) {
            self.panel.transform = CGAffineTransform(translationX: 0, y: -120)
            // transform·opacity·backgroundColor는 레이아웃 무효화가 없다
            // → 렌더 서버가 알아서 굴리고, 메인은 커밋 한 번으로 끝난다
        }
    }

    // ✅ 스크롤 중 헤더 크기 조절처럼 매 프레임 바뀌는 것도 transform으로
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let scale = max(0.8, 1 - scrollView.contentOffset.y / 500)
        panel.transform = CGAffineTransform(scaleX: scale, y: scale)   // ✅
        // ❌ heightConstraint.constant = ... 는 매 프레임 레이아웃을 유발한다
    }
}

final class FPSMonitor {
    private var link: CADisplayLink?
    private var last: CFTimeInterval = 0

    // CADisplayLink는 target(self)을 강하게 retain한다. self가 link를,
    // link가 self를 서로 잡아 순환 참조가 생기므로 반드시 stop()으로 끊어야 한다.
    func start() {
        let link = CADisplayLink(target: self, selector: #selector(tick(_:)))
        link.add(to: .main, forMode: .common)
        self.link = link
    }

    func stop() {
        link?.invalidate()   // 순환을 끊어 FPSMonitor(self)가 해제되게 한다
        link = nil
    }

    @objc private func tick(_ link: CADisplayLink) {
        guard last != 0 else { last = link.timestamp; return }  // 첫 프레임은 기준만 잡고 건너뜀
        let delta = link.timestamp - last            // 두 프레임 사이 실제 간격(초)
        last = link.timestamp
        print("frame interval: \(delta * 1000) ms")  // 16.67 / 8.33 근처여야 정상
    }
}

import UIKit

// 60Hz  → 16.67ms
// 120Hz →  8.33ms   (예산이 정확히 반토막)
// 스크롤 셀 구성처럼 매 프레임 반복되는 작업이 이 안에 들어와야 한다.

enum FrameBudget {
    // UIScreen.main은 iOS 26에서 deprecated — 호출부에서 view.window?.windowScene?.screen을 넘긴다
    static func current(for screen: UIScreen) -> Duration {
        let hz = screen.maximumFramesPerSecond
        return .milliseconds(Int(1000.0 / Double(hz)))
    }

    /// 실제 예산은 더 짧게 잡는다 — 시스템 작업·변동성 여유
    static func target(for screen: UIScreen) -> Duration {
        let hz = screen.maximumFramesPerSecond
        return .microseconds(Int(1000.0 / Double(hz) * 700))   // 예산의 70%
    }
}

// ✅ hot path에 예산 검사를 걸어 회귀를 개발 중에 잡는다
@MainActor
final class FeedCell: UICollectionViewCell {
    func configure(_ item: Item) {
        #if DEBUG
        let elapsed = ContinuousClock().measure { applyConfiguration(item) }
        // 화면은 컨텍스트에서 얻는다 (UIScreen.main은 iOS 26에서 deprecated)
        let budget = window?.windowScene?.screen.map(FrameBudget.target(for:)) ?? .milliseconds(11)
        if elapsed > budget {
            print("⚠️ 셀 구성 \(elapsed) — 예산 \(budget) 초과")
        }
        #else
        applyConfiguration(item)
        #endif
    }

    private func applyConfiguration(_ item: Item) {}
}

// ✅ 예산을 나눠 쓴다는 감각
//   8.33ms 안에 들어가야 하는 것:
//     · cellForItemAt 반환      ~1ms
//     · layoutSubviews          ~1ms
//     · draw / 텍스트 렌더       ~2ms
//     · 커밋 인코딩              ~1ms
//     · 나머지는 여유
//
// ⚠️ GPU 렌더는 별도 주기다. 앱이 8ms를 다 써도 GPU가 못 따라가면 드롭된다.

struct Item {}

import UIKit

// ProMotion은 10~120Hz 사이에서 가변이다. 60을 상수로 박으면
// 기기·상황에 따라 애니메이션 속도가 달라진다.

// ❌ 1/60을 가정
final class BrokenAnimator {
    private var x: CGFloat = 0
    private let speed: CGFloat = 120        // "초당 120pt"

    @objc func step() {
        x += speed / 60                     // 💥 120Hz에서는 2배 빨라진다
    }
}

// ✅ delta time 기반 — 어떤 주사율에서도 같은 속도
final class Animator {
    private var x: CGFloat = 0
    private let speed: CGFloat = 120
    private var link: CADisplayLink?

    func start() {
        let l = CADisplayLink(target: self, selector: #selector(step(_:)))
        l.add(to: .main, forMode: .common)
        link = l
    }

    @objc private func step(_ link: CADisplayLink) {
        let dt = link.targetTimestamp - link.timestamp   // 실제 프레임 간격
        x += speed * CGFloat(dt)
    }

    func stop() { link?.invalidate(); link = nil }
}

// ✅ 시간 기반 보간 — 총 시간을 고정하면 주사율과 무관해진다
final class Interpolator {
    private var startTime: CFTimeInterval = 0
    private let duration: CFTimeInterval = 0.3

    func begin(_ link: CADisplayLink) { startTime = link.timestamp }

    func progress(_ link: CADisplayLink) -> CGFloat {
        let t = (link.timestamp - startTime) / duration
        return CGFloat(min(1, max(0, t)))
    }
}

// ✅ 애초에 Core Animation에 맡기면 이 문제가 없다
func preferCoreAnimation(_ view: UIView) {
    UIView.animate(withDuration: 0.3) {
        view.transform = CGAffineTransform(translationX: 100, y: 0)
        // 렌더 서버가 주사율에 맞춰 보간한다
    }
}

import UIKit

// 고주사율은 전력을 더 쓴다. 필요한 화면에서만 올리고, 아니면 낮춰야 한다.

final class ChartView: UIView {
    private var link: CADisplayLink?

    // ✅ 상호작용 중에만 높게
    func beginInteraction() {
        link?.preferredFrameRateRange = CAFrameRateRange(
            minimum: 80, maximum: 120, preferred: 120)
    }

    // ✅ 멈춰 있으면 낮게 — 또는 아예 링크를 멈춘다
    func endInteraction() {
        link?.preferredFrameRateRange = CAFrameRateRange(
            minimum: 10, maximum: 30, preferred: 15)
    }

    func idle() {
        link?.invalidate()          // ✅ 갱신할 게 없으면 아예 끈다
        link = nil
    }
}

// ✅ 열 상태·저전력 모드에 반응해 스스로 낮춘다
func adaptToSystemState(_ link: CADisplayLink) {
    if ProcessInfo.processInfo.isLowPowerModeEnabled {
        link.preferredFrameRateRange = CAFrameRateRange(
            minimum: 15, maximum: 30, preferred: 30)
        return
    }
    switch ProcessInfo.processInfo.thermalState {
    case .serious, .critical:
        link.preferredFrameRateRange = CAFrameRateRange(
            minimum: 20, maximum: 30, preferred: 30)
    default:
        link.preferredFrameRateRange = CAFrameRateRange(
            minimum: 60, maximum: 120, preferred: 120)
    }
}

// ⚠️ 120Hz를 쓰려면 Info.plist에 opt-in이 필요하다
//    CADisableMinimumFrameDurationOnPhone = YES
//    (없으면 앱이 60fps로 캡된다 — "120Hz 기기인데 왜 60인가"의 답)

// ⚠️ opt-in한 뒤에는 '항상 120'이 아니라 '필요할 때만 120'으로 관리해야 한다.
//    안 그러면 정적 화면에서도 배터리를 태운다.

import UIKit

// 그림자는 기본적으로 뷰의 알파 채널을 훑어 모양을 계산한다.
// 경로를 미리 알려 주면 그 계산이 사라진다.

final class CardView: UIView {

    // ❌ 경로 없는 그림자 — GPU가 매 프레임 알파를 분석한다
    func styleBad() {
        layer.cornerRadius = 12
        layer.masksToBounds = true
        layer.shadowOpacity = 0.2       // 위 masksToBounds 때문에 이 그림자는 통째로 잘려 아예 안 보인다
                                    // (마스킹을 풀어도 shadowPath가 없으면 알파 분석 → 오프스크린 패스)
        layer.shadowRadius = 8
    }

    // ✅ 경로를 명시하고 masksToBounds는 끈다
    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = 12
        layer.masksToBounds = false
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: 12).cgPath
        layer.shadowOpacity = 0.2
        layer.shadowRadius = 8
        layer.shadowOffset = CGSize(width: 0, height: 2)
        layer.shadowColor = UIColor.black.cgColor
    }
    // ⚠️ bounds가 바뀌면 shadowPath도 다시 만들어야 한다 → layoutSubviews에서
}

// ✅ 모서리 클리핑과 그림자를 둘 다 원하면 뷰를 두 겹으로 나눈다
final class ShadowedCard: UIView {
    private let shadowHost = UIView()     // 그림자 담당 (클리핑 없음)
    private let content = UIView()        // 클리핑 담당 (그림자 없음)

    override func layoutSubviews() {
        super.layoutSubviews()
        shadowHost.frame = bounds
        content.frame = bounds

        shadowHost.layer.shadowPath = UIBezierPath(
            roundedRect: bounds, cornerRadius: 12).cgPath
        shadowHost.layer.shadowOpacity = 0.2
        shadowHost.layer.masksToBounds = false

        content.layer.cornerRadius = 12
        content.layer.masksToBounds = true
    }
}

// ⚠️ 최신 iOS에서는 단순 cornerRadius(이미지·서브레이어 없이)는 최적화되어
//    오프스크린을 강제하지 않는다. 문제는 마스킹·그림자와 조합될 때다.
//    "항상 비싸다"로 외우지 말고 도구로 확인한다.

// 확인: 시뮬레이터 → Debug → Color Offscreen-Rendered Yellow

import UIKit

// 반투명 레이어가 겹칠 때마다 GPU가 아래 픽셀과 섞어야 한다.
// 불투명하면 아래를 아예 읽지 않아도 된다.

final class RowView: UIView {

    // ❌ 배경색 없이 투명하게 두면 아래 레이어까지 합성해야 한다
    func setupBad() {
        backgroundColor = .clear
        isOpaque = false
    }

    // ✅ 불투명하게 둘 수 있으면 둔다
    func setup() {
        backgroundColor = .systemBackground   // 알파 1.0인 색
        isOpaque = true                       // GPU에 "아래를 읽지 마라"
    }
}

// ⚠️ isOpaque = true인데 실제로 투명 영역이 있으면 렌더 결과가 깨진다.
//    "배경을 완전히 채운다"가 보장될 때만 켠다.

// ✅ 라벨·이미지뷰도 배경을 채우면 블렌딩이 준다
func configureLabels(_ label: UILabel, on background: UIColor) {
    label.backgroundColor = background        // .clear 대신
    label.isOpaque = true
}

// ✅ 알파를 쓰는 대신 색 자체를 섞어 둔다
func preferSolidColor() -> UIColor {
    // ❌ UIColor.black.withAlphaComponent(0.05)  → 블렌딩 발생
    // ✅ 배경과 미리 섞은 불투명 색
    UIColor { trait in
        trait.userInterfaceStyle == .dark
            ? UIColor(white: 0.12, alpha: 1)
            : UIColor(white: 0.96, alpha: 1)
    }
}

// ⚠️ 그림자·둥근 모서리가 있으면 isOpaque를 켤 수 없다(모서리가 투명해야 한다).
//    그 경우엔 겹치는 반투명 레이어 '개수'를 줄이는 데 집중한다.

// 확인: 시뮬레이터 → Debug → Color Blended Layers
//       빨간색이 진할수록 여러 겹이 섞이고 있다는 뜻이다

import UIKit

// drawRect는 CPU가 비트맵을 그리고, 그 비트맵(백킹스토어)이 메모리를 차지한 뒤
// GPU 텍스처로 올라간다. 레이어 속성은 GPU가 직접 처리한다.

// ❌ 단순한 도형을 drawRect로 — CPU 래스터화 + 백킹스토어 메모리
final class BadBadge: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath(ovalIn: rect)
        UIColor.systemRed.setFill()
        path.fill()
    }
}

// ✅ 레이어 속성으로 — GPU가 처리하고 백킹스토어도 없다
final class Badge: UIView {
    override func layoutSubviews() {
        super.layoutSubviews()
        backgroundColor = .systemRed
        layer.cornerRadius = bounds.width / 2
    }
}

// ✅ 그라디언트도 전용 레이어가 있다
final class GradientHeader: UIView {
    override class var layerClass: AnyClass { CAGradientLayer.self }

    override func layoutSubviews() {
        super.layoutSubviews()
        guard let gradient = layer as? CAGradientLayer else { return }
        gradient.colors = [UIColor.systemBlue.cgColor, UIColor.systemTeal.cgColor]
        gradient.startPoint = CGPoint(x: 0, y: 0)
        gradient.endPoint = CGPoint(x: 1, y: 1)
    }
}

// ✅ 테두리·마스크도 레이어로
func styleWithLayers(_ view: UIView) {
    view.layer.borderWidth = 1
    view.layer.borderColor = UIColor.separator.cgColor
    view.layer.cornerCurve = .continuous     // iOS 13+ 부드러운 모서리
}

// ✅ drawRect가 정당한 경우: 진짜 커스텀 드로잉
//    차트 곡선, 서명 캡처, 복잡한 벡터 도형 등
final class ChartView: UIView {
    var points: [CGPoint] = []
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        guard let first = points.first else { return }
        path.move(to: first)
        for p in points.dropFirst() { path.addLine(to: p) }
        UIColor.systemBlue.setStroke()
        path.stroke()
    }
    // ⚠️ 이 경우에도 자주 바뀌지 않으면 결과를 이미지로 캐시하는 걸 검토한다
}

let raw = UIImage(contentsOfFile: path)!

Task.detached(priority: .utility) {
    let ready = await raw.byPreparingForDisplay()   // 백그라운드에서 디코드 완료
    await MainActor.run {
        if let ready { cell.imageView.image = ready } // 메인 스레드는 표시만
    }
}

import UIKit
import ImageIO

// UIImage를 만드는 것만으로는 디코드가 일어나지 않는다.
// 실제 픽셀 생성이 메인의 커밋 단계로 미뤄지는 게 스크롤 끊김의 원인이다.

actor ImagePipeline {
    static let shared = ImagePipeline()
    private var cache = NSCache<NSString, UIImage>()

    func image(for url: URL, size: CGSize, scale: CGFloat) async -> UIImage? {
        let key = "\(url.absoluteString)|\(Int(size.width))x\(Int(size.height))" as NSString
        if let hit = cache.object(forKey: key) { return hit }

        // ✅ 다운샘플 — 디코드 비용과 메모리를 함께 줄인다
        guard let image = downsample(url, size: size, scale: scale) else { return nil }

        // ✅ 픽셀을 여기서 확정한다 (메인에서 디코드가 안 일어나게)
        let ready = await image.byPreparingForDisplay() ?? image

        cache.setObject(ready, forKey: key)
        return ready
    }

    private nonisolated func downsample(_ url: URL,
                                        size: CGSize, scale: CGFloat) -> UIImage? {
        let srcOpt = [kCGImageSourceShouldCache: false] as CFDictionary
        guard let src = CGImageSourceCreateWithURL(url as CFURL, srcOpt) else { return nil }
        let opt = [
            kCGImageSourceCreateThumbnailFromImageAlways: true,
            kCGImageSourceShouldCacheImmediately: true,
            kCGImageSourceCreateThumbnailWithTransform: true,
            kCGImageSourceThumbnailMaxPixelSize: max(size.width, size.height) * scale
        ] as CFDictionary
        return CGImageSourceCreateThumbnailAtIndex(src, 0, opt).map { UIImage(cgImage: $0) }
    }
}

// ⚠️ SDWebImage·Kingfisher·Nuke 같은 라이브러리는 백그라운드 디코드는 기본으로 해 주지만, 다운샘플은 프로세서를 지정해야 한다.
//    직접 만들 이유가 없다면 그쪽을 쓰는 편이 낫다.

import UIKit

// 셀이 화면에 나타난 뒤에 로드를 시작하면 이미 늦다.
// 곧 보일 셀의 이미지를 미리 준비해 두면 스크롤이 매끄러워진다.

@MainActor
final class FeedViewController: UIViewController,
                                UICollectionViewDataSourcePrefetching {
    private var items: [Item] = []
    private var prefetchTasks: [IndexPath: Task<Void, Never>] = [:]

    func collectionView(_ cv: UICollectionView,
                        prefetchItemsAt indexPaths: [IndexPath]) {
        for path in indexPaths {
            guard prefetchTasks[path] == nil else { continue }
            let item = items[path.item]
            prefetchTasks[path] = Task {
                _ = await ImagePipeline.shared.image(
                    for: item.url, size: cellSize, scale: displayScale)
            }
        }
    }

    // ✅ 스크롤 방향이 바뀌면 취소한다 — 안 하면 낭비가 쌓인다
    func collectionView(_ cv: UICollectionView,
                        cancelPrefetchingForItemsAt indexPaths: [IndexPath]) {
        for path in indexPaths {
            prefetchTasks[path]?.cancel()
            prefetchTasks[path] = nil
        }
    }

    private var cellSize: CGSize { CGSize(width: 120, height: 120) }
    private var displayScale: CGFloat { view.traitCollection.displayScale }
}

// ✅ 등록을 잊지 말 것
func setup(_ collectionView: UICollectionView, _ vc: FeedViewController) {
    collectionView.prefetchDataSource = vc
    collectionView.isPrefetchingEnabled = true      // 기본값이지만 명시
}

// ✅ 테이블뷰도 동일한 프로토콜이 있다 (UITableViewDataSourcePrefetching)

// ⚠️ prefetch는 '힌트'다. 시스템이 부를 수도, 안 부를 수도 있다.
//    cellForItemAt에서도 반드시 로드 경로가 있어야 한다.

struct Item { let url: URL }
enum ImagePipeline {
    static let shared = ImagePipelineImpl()
}
struct ImagePipelineImpl {
    func image(for url: URL, size: CGSize, scale: CGFloat) async -> UIImage? { nil }
}

import UIKit

// 셀은 재사용된다. 비동기 로드가 끝났을 때 그 셀이 이미 다른 항목을
// 표시하고 있을 수 있다 — 그러면 엉뚱한 이미지가 꽂힌다.

@MainActor
final class FeedCell: UICollectionViewCell {
    private let imageView = UIImageView()
    private var currentID: UUID?
    private var loadTask: Task<Void, Never>?

    func configure(_ item: Item) {
        // ✅ ① 이전 로드를 취소한다
        loadTask?.cancel()

        // ✅ ② 이전 이미지를 지운다 (잔상 방지)
        imageView.image = nil

        // ✅ ③ 현재 식별자를 기록한다
        currentID = item.id

        loadTask = Task { [item] in
            let image = await ImagePipeline.shared.image(for: item.url)

            // ✅ ④ 완료 시점에 '아직 그 항목인가'를 검증한다
            guard !Task.isCancelled, self.currentID == item.id else { return }
            self.imageView.image = image
        }
    }

    // ✅ ⑤ 재사용 직전에도 정리한다
    override func prepareForReuse() {
        super.prepareForReuse()
        loadTask?.cancel()
        loadTask = nil
        currentID = nil
        imageView.image = nil
    }
}

// ✅ 인덱스가 아니라 '안정적 식별자'로 검증해야 한다
//    ❌ guard indexPath == self.indexPath   — 인덱스는 삽입/삭제로 바뀐다
//    ✅ guard item.id == self.currentID     — id는 항목을 따라간다

struct Item { let id: UUID; let url: URL }
enum ImagePipeline {
    static let shared = ImagePipelineImpl()
}
struct ImagePipelineImpl { func image(for url: URL) async -> UIImage? { nil } }

func downsample(at url: URL, to pointSize: CGSize, scale: CGFloat) -> UIImage? {
    let srcOpt = [kCGImageSourceShouldCache: false] as CFDictionary
    guard let src = CGImageSourceCreateWithURL(url as CFURL, srcOpt) else { return nil }

    let maxPixel = max(pointSize.width, pointSize.height) * scale
    let opt = [
        kCGImageSourceCreateThumbnailFromImageAlways: true,
        kCGImageSourceShouldCacheImmediately: true,       // 이 시점에 디코드까지 완료
        kCGImageSourceCreateThumbnailWithTransform: true, // EXIF 회전 반영
        kCGImageSourceThumbnailMaxPixelSize: maxPixel
    ] as CFDictionary

    guard let cg = CGImageSourceCreateThumbnailAtIndex(src, 0, opt) else { return nil }
    return UIImage(cgImage: cg, scale: scale, orientation: .up)   // scale을 빼면 3x 기기에서 크기가 3배로 어긋난다
}

import UIKit
import ImageIO

// 100×100 point 뷰라도 3x 기기에서는 300×300 픽셀이 필요하다.
// point로 다운샘플하면 화면에서 뭉개진다.

func downsample(at url: URL,
                toDisplaySize pointSize: CGSize,
                scale: CGFloat) -> UIImage? {
    let srcOptions = [kCGImageSourceShouldCache: false] as CFDictionary
    guard let source = CGImageSourceCreateWithURL(url as CFURL, srcOptions) else {
        return nil
    }

    // ✅ 픽셀 기준으로 계산한다
    let maxPixelSize = max(pointSize.width, pointSize.height) * scale

    let options = [
        kCGImageSourceCreateThumbnailFromImageAlways: true,
        kCGImageSourceShouldCacheImmediately: true,
        kCGImageSourceCreateThumbnailWithTransform: true,
        kCGImageSourceThumbnailMaxPixelSize: maxPixelSize
    ] as CFDictionary

    guard let cgImage = CGImageSourceCreateThumbnailAtIndex(source, 0, options) else {
        return nil
    }
    // ✅ scale을 함께 넘겨야 UIKit이 올바른 point 크기로 표시한다
    return UIImage(cgImage: cgImage, scale: scale, orientation: .up)
}

// ✅ 배율은 화면이 아니라 '그 뷰의 trait'에서 가져온다 (외부 디스플레이 대응)
@MainActor
func configure(_ imageView: UIImageView, url: URL) {
    let scale = imageView.traitCollection.displayScale
    imageView.image = downsample(at: url,
                                 toDisplaySize: imageView.bounds.size,
                                 scale: scale)
}

// ⚠️ bounds가 아직 0일 수 있다 — layoutSubviews 이후나 예상 크기를 쓴다
// ⚠️ 너무 작게 잡으면 뭉개진다. 확대 제스처가 있으면 여유를 둔다.
func sizeForZoomable(_ base: CGSize, maxZoom: CGFloat = 2) -> CGSize {
    CGSize(width: base.width * maxZoom, height: base.height * maxZoom)
}

import Foundation

// 클라이언트 다운샘플은 '원본을 이미 받은 뒤'의 처리다.
// 원본 전송 비용(대역폭·시간·배터리)은 그대로 든다.
// 서버가 썸네일을 줄 수 있으면 그게 항상 낫다.

struct MediaItem: Decodable {
    let id: UUID
    let originalURL: URL
    let thumbnailURL: URL?          // ✅ 서버가 제공
    let variants: [Variant]?        // ✅ 여러 크기를 주는 경우

    struct Variant: Decodable {
        let width: Int
        let url: URL
    }
}

extension MediaItem {
    /// 표시 크기에 가장 알맞은 URL을 고른다
    func url(forDisplayWidth points: CGFloat, scale: CGFloat) -> URL {
        let neededPixels = Int(points * scale)

        if let variants, !variants.isEmpty {
            // 필요한 크기 이상 중 가장 작은 것
            let best = variants
                .filter { $0.width >= neededPixels }
                .min(by: { $0.width < $1.width })
            return (best ?? variants.max(by: { $0.width < $1.width }))!.url
        }
        if neededPixels <= 400, let thumbnailURL { return thumbnailURL }
        return originalURL          // 최후의 수단
    }
}

// ✅ 이미지 CDN을 쓰면 URL 파라미터로 요청할 수도 있다
func cdnURL(_ base: URL, width: Int, scale: CGFloat) -> URL {
    var components = URLComponents(url: base, resolvingAgainstBaseURL: false)!
    components.queryItems = [
        URLQueryItem(name: "w", value: String(Int(CGFloat(width) * scale))),
        URLQueryItem(name: "fm", value: "webp"),
        URLQueryItem(name: "q", value: "80")
    ]
    return components.url!
}

// ⚠️ 서버 팀과 합의할 것: 어떤 크기 변형을 제공할지, 캐시 정책은 어떻게 할지.
//    클라가 임의 크기를 요청하면 CDN 캐시 적중률이 떨어진다 → 몇 개 규격으로 고정.

import UIKit

// 리스트에서 원본을 로드하면 메모리와 대역폭이 동시에 터진다.
// 4000×3000 원본 하나 = 약 48MB 비트맵. 화면에 10개면 480MB.

@MainActor
final class GalleryViewController: UIViewController {
    private var items: [MediaItem] = []

    // ✅ 리스트 — 항상 다운샘플본, 캐시해서 재사용
    func configureThumb(_ cell: UICollectionViewCell,
                        imageView: UIImageView, item: MediaItem) {
        let scale = imageView.traitCollection.displayScale
        let url = item.url(forDisplayWidth: 120, scale: scale)
        Task {
            imageView.image = await ImagePipeline.shared.thumbnail(url, size: CGSize(width: 120, height: 120))
        }
    }

    // ✅ 상세 — 여기서만 원본. 그것도 화면 크기에 맞춰서
    func showDetail(_ item: MediaItem) {
        let detail = DetailViewController(item: item)
        navigationController?.pushViewController(detail, animated: true)
    }
}

@MainActor
final class DetailViewController: UIViewController {
    private let item: MediaItem
    private let scrollView = UIScrollView()
    private let imageView = UIImageView()

    init(item: MediaItem) { self.item = item; super.init(nibName: nil, bundle: nil) }
    required init?(coder: NSCoder) { fatalError() }

    override func viewDidLoad() {
        super.viewDidLoad()

        // ✅ ① 먼저 썸네일을 즉시 보여 준다 (이미 캐시에 있다)
        Task {
            let thumbURL = item.url(forDisplayWidth: 120, scale: 3)
            imageView.image = await ImagePipeline.shared.thumbnail(
                thumbURL, size: CGSize(width: 120, height: 120))

            // ✅ ② 그다음 고해상도로 교체 — 화면 크기 × 최대 줌 배율까지만
            let target = view.bounds.size
            imageView.image = await ImagePipeline.shared.image(
                item.originalURL, size: target, scale: view.traitCollection.displayScale)
        }
    }

    // ✅ ③ 화면을 벗어나면 큰 이미지를 놓는다
    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        imageView.image = nil
    }
}

struct MediaItem {
    let originalURL: URL
    func url(forDisplayWidth w: CGFloat, scale: CGFloat) -> URL { originalURL }
}
enum ImagePipeline { static let shared = ImagePipelineImpl() }
struct ImagePipelineImpl {
    func thumbnail(_ url: URL, size: CGSize) async -> UIImage? { nil }
    func image(_ url: URL, size: CGSize, scale: CGFloat) async -> UIImage? { nil }
}

import UIKit

// Layout 단계 비용 = 뷰 계층 깊이 × 제약 개수 × 재계산 횟수

// ✅ ① 셀 높이를 미리 계산해 캐시한다
@MainActor
final class HeightCache {
    private var cache: [UUID: CGFloat] = [:]
    private var cachedWidth: CGFloat = 0

    func height(for item: Item, width: CGFloat, font: UIFont) -> CGFloat {
        // 너비가 바뀌면(회전 등) 전부 무효화
        if width != cachedWidth { cache.removeAll(); cachedWidth = width }
        if let h = cache[item.id] { return h }

        let h = (item.title as NSString).boundingRect(
            with: CGSize(width: width, height: .greatestFiniteMagnitude),
            options: [.usesLineFragmentOrigin, .usesFontLeading],
            attributes: [.font: font],
            context: nil
        ).height.rounded(.up) + 24

        cache[item.id] = h
        return h
    }
}

// ✅ ② 자동 높이가 필요하면 추정치를 정확히 준다 — 스크롤바 점프가 줄어든다
func setupTable(_ tableView: UITableView) {
    tableView.rowHeight = UITableView.automaticDimension
    tableView.estimatedRowHeight = 88          // 실제 평균에 가깝게
}

// ✅ ③ 제약 대신 frame 계산이 훨씬 싼 경우가 있다 (셀처럼 단순·반복적인 레이아웃)
final class FastCell: UICollectionViewCell {
    private let icon = UIImageView()
    private let title = UILabel()

    override func layoutSubviews() {
        super.layoutSubviews()
        icon.frame = CGRect(x: 12, y: 12, width: 40, height: 40)
        title.frame = CGRect(x: 60, y: 12, width: bounds.width - 72, height: 40)
    }
}

// ✅ ④ 애니메이션 중 무효화를 막는다 (transform 사용)

struct Item { let id: UUID; let title: String }

import UIKit

// Display 단계는 drawRect/Core Graphics로 백킹스토어 비트맵을 CPU가 그린다.
// 비용은 그리는 면적과 복잡도에 비례하고, 메모리도 그만큼 쓴다.

// ✅ ① 반복되는 드로잉 결과는 이미지로 한 번만 만들어 재사용한다
enum BadgeRenderer {
    private static var cache: [String: UIImage] = [:]

    @MainActor
    static func badge(count: Int, color: UIColor) -> UIImage {
        let key = "\(count)|\(color.hashValue)"
        if let hit = cache[key] { return hit }

        let size = CGSize(width: 24, height: 24)
        let image = UIGraphicsImageRenderer(size: size).image { ctx in
            color.setFill()
            UIBezierPath(ovalIn: CGRect(origin: .zero, size: size)).fill()
            let text = "\(count)" as NSString
            text.draw(at: CGPoint(x: 8, y: 4),
                      withAttributes: [.foregroundColor: UIColor.white,
                                       .font: UIFont.systemFont(ofSize: 12)])
        }
        cache[key] = image
        return image
    }
}

// ✅ ② 단순 도형은 아예 그리지 않고 레이어 속성으로
func styleWithLayer(_ view: UIView) {
    view.backgroundColor = .systemRed
    view.layer.cornerRadius = view.bounds.width / 2   // drawRect 불필요
}

// ✅ ③ drawRect를 써야 하면 다시 그리는 영역을 좁힌다
final class ChartView: UIView {
    func updateLastPoint() {
        // ❌ setNeedsDisplay()          — 전체를 다시 그린다
        setNeedsDisplay(CGRect(x: bounds.width - 40, y: 0,
                               width: 40, height: bounds.height))   // ✅ 일부만
    }
}

// ✅ ④ 텍스트가 많은 셀은 미리 렌더한 NSAttributedString을 재사용한다
final class TextCache {
    private var cache: [UUID: NSAttributedString] = [:]
    func attributed(_ item: Item, font: UIFont) -> NSAttributedString {
        if let hit = cache[item.id] { return hit }
        let s = NSAttributedString(string: item.title, attributes: [.font: font])
        cache[item.id] = s
        return s
    }
}

struct Item { let id: UUID; let title: String }

import UIKit

// Commit은 완성된 레이어 트리를 인코딩해 렌더 서버로 IPC 전송한다.
// 비용 = 레이어 개수 + 전송할 백킹스토어 크기

// ✅ ① 화면당 레이어 수를 줄인다
final class CompactCell: UICollectionViewCell {
    // ❌ 아이콘·배지·구분선·배경을 각각 UIView로  → 레이어 5개
    // ✅ 정적인 것들은 한 장의 이미지로 합성 → 레이어 2개
    private let composited = UIImageView()
    private let dynamicLabel = UILabel()
}

// ✅ ② 거대한 백킹스토어를 매 프레임 새로 만들지 않는다
final class BadOverlay: UIView {
    // ❌ 전체 화면 크기 비트맵을 매번 다시 그려 전송
    func updateBad() { setNeedsDisplay() }     // 프레임마다 호출되면 치명적
}

final class GoodOverlay: UIView {
    // ✅ 변하는 부분만 작은 레이어로 분리하고, 나머지는 그대로 둔다
    private let staticBackground = UIImageView()   // 한 번 만들고 재사용
    private let movingIndicator = UIView()         // 작고, transform으로만 움직인다

    func update(progress: CGFloat) {
        movingIndicator.transform = CGAffineTransform(
            translationX: bounds.width * progress, y: 0)
        // 레이아웃 무효화도, 재드로잉도, 백킹스토어 전송도 없다
    }
}

// ✅ ③ 화면 밖 뷰는 아예 만들지 않는다 (셀 재사용의 본질)
//    스크롤뷰에 1000개 뷰를 미리 넣어 두면 Commit이 1000개 레이어를 매번 인코딩한다

// ✅ ④ 숨긴 뷰는 hidden보다 제거가 쌀 때가 있다
func hideProperly(_ view: UIView, permanently: Bool) {
    if permanently {
        view.removeFromSuperview()      // 트리에서 빠져 인코딩 대상이 아니게 된다
    } else {
        view.isHidden = true            // 트리에는 남는다 (자주 토글하면 이쪽)
    }
}

// 확인: Instruments → Core Animation → Commit 시간
//       또는 Animation Hitches의 "Commit" 구간