핀터레스트 UI?

일단 시작하기 앞서… 이작업을 하루하고도 절반을 쏟아서 얻어낸 결과입니다.
그만큼 시행 착오가 정말 많았고 머리도 아프고.. ㅠ 아무튼 그 과정들을 소개 할까 합니다.

핀터레스트 UI 가 무엇이나면

위와같은 사진처럼 사진의 크기에 따라
UI가 결정되는 정확히는 레이아웃이 정해지는 UI를 핀터레스트 UI라고 합니다.
다른 용어로는 Masonry 레이아웃 이라고도 합니다.

컴포지셔널로 도전해 볼까?

결론부터 말씀 드리자면 저는 컴포지셔널로는 실패했습니다.
이유가 기본적인 컴포지셔널 레이아웃 코드를 보며 설명하겠습니다.

func createBasicListLayout() -> UICollectionViewLayout { 
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),                                  
                                         heightDimension: .fractionalHeight(1.0))    
    let item = NSCollectionLayoutItem(layoutSize: itemSize)  
  
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),                                          
                                          heightDimension: .absolute(44))    
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,                                                   
                                                     subitems: [item])  
  
    let section = NSCollectionLayoutSection(group: group)    

    let layout = UICollectionViewCompositionalLayout(section: section)    
    return layout
}

위와같이 컴포지셔널 레이아웃을 구성하게 될텐데
잘 보시면 이게 하나 하나 에게 주는 방식이 아니라
전체적으로 이럴거야~ 라는 레이아웃 구성방식이라
하나하나의 비율을 적용 시키기에는 무리가 있었다고 생각합니다.

• 4/29 추가사항 -> 컴포지셔널로도 구현이 가능한 정보를 알게되어 후에 새로운 글로 업데이트 하겠습니다.

그럼 플로우?

최종적 으로도 플로우 레이아웃이긴 하나 그과정을 소개합니다.

extension UserProfileViewController: UICollectionViewDelegateFlowLayout {
     func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
         // 모델....
         let model = viewModel.realModel[indexPath.row]
         // 비율
         let asecpct =  CGFloat(Double(model.content3) ?? 1)
         print("작동은 하니? \(collectionView.bounds.width)")
         // 컬렉션뷰 전체
         let totalWidth = collectionView.bounds.width
         
         let spacing: CGFloat = 5
         
         let itemsRow: CGFloat = 2
         
         let estWidth = totalWidth - (spacing * (itemsRow + 1))
         
         let cellWidth = estWidth / itemsRow
         
         let cellHeight = cellWidth / asecpct
         
         return CGSize(width: cellWidth, height: cellHeight)
     }
 }

위의 코드를 보시면 content3 가 보이실 텐데 저가 서버에
원래의 이미지 비율을 전송을 하고 그 값을 다시 받아올때 이미지 비율을 계산할 필요없이
바로 적용할수 있게 (서버와의 딜레이 최소화) 하였습니다.

하지만 좌우 여백을 생각 하지 못해서 일자로 쭉 나오게 되는 일이 발생하게 되는데,
그것을 보완하고자 아래와 같이 섹션인셋을 가져와 추가하라고 했었습니다.

extension UserProfileViewController: UICollectionViewDelegateFlowLayout {
     func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // 모델에서 비율을 가져옵니다.
        let model = viewModel.realModel[indexPath.row]
        let aspectRatio = CGFloat(Double(model.content3) ?? 1)
        
        // 컬렉션뷰의 섹션 인셋을 가져옵니다.
        let sectionInsets = (
            collectionView.collectionViewLayout as? UICollectionViewFlowLayout
        )?.sectionInset ?? UIEdgeInsets.zero
        
        // 셀 간격을 정의합니다.
        let spacing: CGFloat = 5
        // 한 줄에 표시될 아이템의 수를 정의합니다.
        let itemsPerRow: CGFloat = 2
        print(sectionInsets)
        // 사용 가능한 너비를 계산합니다.
        let totalSpacing = (spacing * (itemsPerRow - 1)) + sectionInsets.left + sectionInsets.right
        let availableWidth = collectionView.bounds.width - totalSpacing
        
        // 셀의 너비와 높이를 계산합니다.
        let cellWidth = availableWidth / itemsPerRow
        let cellHeight = cellWidth / aspectRatio
        
        return CGSize(width: cellWidth, height: cellHeight)
     }
 }

코드만 보면 벌써 완성 된거 같은데 결과는 뭔가 아쉬운 결과물이 탄생합니다.

흠… 뭔가 되는거 같긴한데 참 …. 이쁘죠?
이유가 뭘까요?
코드가 이상할까요?
플로우 레이아웃의 개념을 다시 살펴 봅니다.

플로우 레이아웃은 특정 Line 따라서 Cell을 배치하는데요
공간이 부족해질때 새로운 라인을 생성해 레이아웃을 그리는 구조입니다.
그래서 위와같은 생기다 만 친구가 탄생하게 됩니다.

커스텀 레이아웃 클래스 만들자~

그래서… 저런것들을 정의할수있는 클래스를 생성하게 되는데요
같이 한번 보실까요?

핵심부분

final class CustomPinterestLayout: UICollectionViewFlowLayout {
/// 한 행의 아이템 갯수
    private let numberOfColums: Int // 한 행의 아이템 갯수
    /// 셀의 패딩
    private let cellPadding: CGFloat // 셀의 패딩
    /// 필요의 경우 헤더의 높이 지정: Int
    private
    let headerHeight: CGFloat?
    
     // 1.END 컬렉션뷰의 컨텐츠 사이즈를 지정
    override var collectionViewContentSize: CGSize {
        let minHeight = collectionView?.bounds.height ?? 0
        
        return CGSize(width: contetnsWidth, height: max(contentsHeight,minHeight))
    }
    
    // 2. 컬렉션뷰가 처음 초기화 혹은 뷰가 변경될때 실행되는 메서드
  
    override func prepare() 
    
    // 3. 모든 셀과 서브 뷰의 레이아웃 정보를 리턴해줍니다. (Rect) 기반
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]?
    
    // 4. 모든 셀의 레이아웃 정보를 반환합니다.
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes?

위와같은 메서드들을 직접 다 정의할건데 이 것들을 효과적으로 전달하기 위해서
딜리게이트를 먼저 생성하면서 시작해 볼께요

protocol CustomPinterestLayoutDelegate: AnyObject {
		
    func collectionView(for collectionView: UICollectionView, heightForAtIndexPath indexPath: IndexPath) -> CGFloat
    
}

위의 코드는 딜리게이트 패턴으로 활용할 프로토콜입니다.
목적은 생김새와 같이 컬렉션뷰와 인덱스패스를 받아서 CGFloat을 반환합니다.
즉 높이를 반환하는 거죠

구성의 시작

final class CustomPinterestLayout: UICollectionViewFlowLayout {
    weak var delegate: CustomPinterestLayoutDelegate?
	// 한행의 아이템 갯수
    private let numberOfColums: Int
  // 셀의 패딩
    private let cellPadding: CGFloat
  // 필요할 경우에 헤더의 높이를 지정
    private let headerHeight: CGFloat?

    init(numberOfColums: Int, cellPadding: CGFloat, headerHeight: CGFloat? = nil) {
        self.numberOfColums = numberOfColums
        self.cellPadding = cellPadding
        self.headerHeight = headerHeight
        super.init()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

사이즈를 어떻게 계산하지?

이부분을 좀 고민을 하였는데 플로우 레이아웃이다 보니 셀의 갯수가 화면에 비해 부족하면
스크롤이 안되는 참사가 이뤄지기 때문에 다음과 같은 코드로 계산합니다.

override var collectionViewContentSize: CGSize {
    let minHeight = collectionView?.bounds.height ?? 0
    return CGSize(width: contetnsWidth, height: max(contentsHeight, minHeight))
}

스크롤 가능한 영역을 정의하고, 컨텐츠가 뷰의 크기보다 작을때도 스크롤이 가능하게 합니다.

What the Prepare!

다음 코드에 앞서서 나오게 되는 Prepare 라는 메서드가 등장하는데
레이아웃의 초기 계산과 칠요한 레이아아수 정보의 세팅을 담당합니다.
( 컬렉션뷰 컨텐츠 표시하기전의 호출됨)

구성된 Prepare

// Options 다시 레이아웃을 계산할 필요가 없도록 메모리에 저장한다.
    private
    var cache: [UICollectionViewLayoutAttributes] = []
    
 // 2. 컬렉션뷰가 처음 초기화 되거나, 뷰가 변경될때 실행됩니다.
    // ... 해당 메서드는 레이아웃을 미리 계산 하고  메모리에 캐쉬하여
    // ... 불필요한 반복적인 연산을 하는것을 방지하도록 해야한다.
    override func prepare() {
        guard let collectionView = collectionView,
              collectionView.numberOfSections > 0,
              collectionView.numberOfItems(inSection: 0) > 0,
              cache.isEmpty else {
            return
        }
        cache.removeAll()
        
        let cellWidth = contetnsWidth / CGFloat(numberOfColums)
        
        var yOffSet:[CGFloat] = []
        
        if let headerHeight {
            // 헤더 레이아웃 속성
            let headerIndexPath = IndexPath(item: 0, section: 0)

            let headerAttribute = UICollectionViewLayoutAttributes(forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, with: headerIndexPath)
            
            headerAttribute.frame = CGRect(
                x: 0,
                y: 0,
                width: collectionView.bounds.width,
                height: headerHeight
            ) // 헤더높이 지정
            
            cache.append(headerAttribute)
            // cell 의 Y위치를 나타내는 배열입니다.
            yOffSet = [CGFloat](repeating: headerAttribute.frame.maxY, count: numberOfColums)
            
            yOffSet[0] = headerAttribute.frame.maxY
            
        } else {
            yOffSet = [CGFloat](repeating: 0, count: numberOfColums)
        }
        
        // cell 의 X위치를 나타내는 배열입니다.
        let xOffSet:[CGFloat] = [0, cellWidth]

        var colum: Int = 0 // 현재 행의 위치
        
        for item in 0..<collectionView.numberOfItems(inSection: 0) {
            // 인덱스 패스를 통해
            let indexPath = IndexPath(item: item, section: 0)
            // 인덱스 패스에 맞는 셀의 크기를 계산합니다.
            let customContentHeight = delegate?.collectionView(for: collectionView, heightForAtIndexPath: indexPath) ?? 100
            // 상항 패딩(패딩 2배) 에 컨테트 높이를 더한 값은 높이
            let height = cellPadding * 2 + customContentHeight
            
            let frame = CGRect(
                x: xOffSet[colum],
                y: yOffSet[colum],
                width: cellWidth,
                height: height
            )
            
            // 생소한 dx, dy가 나왔는데
            // dx: x축 방향의 패딩 값 -> 좌우 프레임 안으로 이동
            // dy: y축 방향의 패딩 값 -> 상하 프레임 안으로 이동
            let insetFrame = frame.insetBy(
                dx: cellPadding, dy: cellPadding
            )
            
            // 계산한 Frame를 통해 레이아웃정보를 반영하고 캐쉬에 저장
            let attribute = UICollectionViewLayoutAttributes(
                forCellWith: indexPath
            )
            // 레이아웃정보를 반영
            attribute.frame = insetFrame
            cache.append(attribute)
            
            // 컬렉션뷰의 높이를 다시 지정한다.
            // frame.maxY -> 현재 셀의 프레임이 끝나는 Y축 위치 -> 셀 상단 위치에서 셀 높이를 더한값
            contentsHeight = max(contentsHeight, frame.maxY)
            // 새로운 셀의 frame.maxY중 더큰 값을 선택하여 컬렉션뷰의 전체 컨텐츠 높이를 업데이트
            
            yOffSet[colum] = yOffSet[colum] + height
            
            // 다른 이미지 크기로 인해, 한쪽열에만 이미지가 추가됨을 방지
            colum = yOffSet[0] > yOffSet[1] ? 1 : 0
            // 만약 첫번째 열의 높이가 두번째 열의 높이보다 크다면
            // 새 셀들 두번째 열에 배치하는데
            // 아닐시 새 셀을 첫번째 열에 배치한다.
        }
        
    }
    

어우…. 너무 길죠?
잘라서 보겠습니다.

Prepare() 1. 뷰의 상태를 확인하고 초기 설정 진행하기

• 컬렉션뷰가 존재 하나요?
• 하나 이상의 섹션은 있나요?
• 캐시가 비어있나요?
• 위 3개의 따라 불필요한 계산을 방지할 레이아웃은 최신 상태를 반영하도록 합니다.

guard let collectionView = collectionView else { return }
  if collectionView.numberOfSections == 0 || cache.isEmpty == false {
      cache.removeAll()
 }

Prepate() 2. 셀 및 헤더의 레이아웃 속성 계산 및 캐싱

 let cellWidth = contetnsWidth / CGFloat(numberOfColums)
        
 var yOffSet:[CGFloat] = []
        
 if let headerHeight {
    // 헤더 레이아웃 속성
   let headerIndexPath = IndexPath(item: 0, section: 0)

   let headerAttribute = UICollectionViewLayoutAttributes(forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, with: headerIndexPath)
            
   headerAttribute.frame = CGRect(
       x: 0,
       y: 0,
       width: collectionView.bounds.width, // 컬렉션뷰 자체의 넓이에 
       height: headerHeight // 헤더 높이 
   ) 
            
   cache.append(headerAttribute)
   // cell 의 Y위치를 나타내는 배열입니다.
   yOffSet = [CGFloat](repeating: headerAttribute.frame.maxY, count: numberOfColums)
            
   yOffSet[0] = headerAttribute.frame.maxY
            
} else {
   yOffSet = [CGFloat](repeating: 0, count: numberOfColums)
}

레이아웃의 각 셀과 헤더(선택적) 위치와 크기를 계산하여서
UICollectionViewLayoutAttributes 객체에 저장합니다.

Prepare() 2.2 셀의 정의

  // cell 의 X위치를 나타내는 배열입니다.
        let xOffSet:[CGFloat] = [0, cellWidth]

        var colum: Int = 0 // 현재 행의 위치
        
        for item in 0..<collectionView.numberOfItems(inSection: 0) {
            // 인덱스 패스를 통해
            let indexPath = IndexPath(item: item, section: 0)
            // 인덱스 패스에 맞는 셀의 크기를 계산합니다.
            let customContentHeight = delegate?.collectionView(for: collectionView, heightForAtIndexPath: indexPath) ?? 100
            // 상항 패딩(패딩 2배) 에 컨테트 높이를 더한 값은 높이
            let height = cellPadding * 2 + customContentHeight
            
            let frame = CGRect(
                x: xOffSet[colum],
                y: yOffSet[colum],
                width: cellWidth,
                height: height
            )
            
            // 생소한 dx, dy가 나왔는데
            // dx: x축 방향의 패딩 값 -> 좌우 프레임 안으로 이동
            // dy: y축 방향의 패딩 값 -> 상하 프레임 안으로 이동
            let insetFrame = frame.insetBy(
                dx: cellPadding, dy: cellPadding
            )
            
            // 계산한 Frame를 통해 레이아웃정보를 반영하고 캐쉬에 저장
            let attribute = UICollectionViewLayoutAttributes(
                forCellWith: indexPath
            )
            // 레이아웃정보를 반영
            attribute.frame = insetFrame
            cache.append(attribute)
            
            // 컬렉션뷰의 높이를 다시 지정한다.
            // frame.maxY -> 현재 셀의 프레임이 끝나는 Y축 위치 -> 셀 상단 위치에서 셀 높이를 더한값
            contentsHeight = max(contentsHeight, frame.maxY)
            // 새로운 셀의 frame.maxY중 더큰 값을 선택하여 컬렉션뷰의 전체 컨텐츠 높이를 업데이트
            
            yOffSet[colum] = yOffSet[colum] + height
            
            // 다른 이미지 크기로 인해, 한쪽열에만 이미지가 추가됨을 방지
            colum = yOffSet[0] > yOffSet[1] ? 1 : 0
            // 만약 첫번째 열의 높이가 두번째 열의 높이보다 크다면
            // 새 셀들 두번째 열에 배치하는데
            // 아닐시 새 셀을 첫번째 열에 배치한다.
        }
        
    }

3. 모든셀, 서브뷰의 레이아웃 정보를 돌려줘야 해요

 override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var visibleLayoutAttributes: [UICollectionViewLayoutAttributes] = []
        
        for attribute in cache {
            // intersects 메서드는 두 사각형이 겹치는지 여부를 반환
            if attribute.frame.intersects(rect){
                // 셀 프레임과 요청과 교차한다면 리턴 값의 추가
                    visibleLayoutAttributes.append(attribute)
            }
        }
        return visibleLayoutAttributes
    }

현재 화면에 보여질 셀, 헤더, 푸터 등의 레이아웃 속성을 결정할 때 호출 되어지는 메서드 입니다.
스크롤링이 발생 될때마다 호출되며, 화면에 보이는 요소들의 레이아웃을 업데이트합니다.

마지막….! 모든셀의 레이아웃 정보를 리턴하기!

// 4. 모든 셀의 레이아웃 정보를 리턴한다. IndexPath 기반
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        return cache[indexPath.item]
    }

해당 메서드는 특정 셀에 대한 레이아웃 속성을 반환하는 기능을 가지고 있습니다.
각 셀이 화면에 표시될 때 해당 셀의 위치, 크기, 변형 등의 레이아웃 속성을 제공하는 데 사용됩니다.

전체코드 공개

//
//  Created by Jae hyung Kim on 4/27/24.
//

import UIKit
/*
 회고...!
 Masonry or Pinterest Style Layout
 collectionView.collectionViewLayout.invalidateLayout()
 */
protocol CustomPinterestLayoutDelegate: AnyObject {
    
    func collectionView(for collectionView: UICollectionView, heightForAtIndexPath indexPath: IndexPath) -> CGFloat
    
}

final class CustomPinterestLayout: UICollectionViewFlowLayout {
    
    weak var delegate: CustomPinterestLayoutDelegate?
    
    /// 한 행의 아이템 갯수
    private let numberOfColums: Int // 한 행의 아이템 갯수
    /// 셀의 패딩
    private let cellPadding: CGFloat // 셀의 패딩
    /// 필요의 경우 헤더의 높이 지정: Int
    private
    let headerHeight: CGFloat?
    
    
    init(numberOfColums: Int, cellPadding: CGFloat,_ headerHeight: CGFloat? = nil) {
        self.numberOfColums = numberOfColums
        self.cellPadding = cellPadding
        self.headerHeight = headerHeight
        super.init()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 1. 컬렉션뷰 컨텐츠 사이즈를 지정해야한다.
    // 1.1 컨텐츠 높이의 그릇을 만들고 (프로퍼티)
    private
    var contentsHeight: CGFloat = 0
    
    // Options 다시 레이아웃을 계산할 필요가 없도록 메모리에 저장한다.
    private
    var cache: [UICollectionViewLayoutAttributes] = []
    
    // 1.2 컨텐츠 넓이를 정하는데...
    private
    var contetnsWidth: CGFloat {
        guard let collectionView = collectionView else {
            return 0
        }
        // 여백의 정보를 받아와
        let insets = collectionView.contentInset
        // 좌우여백을 더한값을
        let totalInset = insets.left + insets.right
        // 컬렉션뷰넓이에 값을 빼면. 넓이가 나온다.
        return collectionView.bounds.width - (totalInset)
    }
    
    // 1.END 컬렉션뷰의 컨텐츠 사이즈를 지정
    override var collectionViewContentSize: CGSize {
        let minHeight = collectionView?.bounds.height ?? 0
        
        return CGSize(width: contetnsWidth, height: max(contentsHeight,minHeight))
    }
        
    // 2. 컬렉션뷰가 처음 초기화 되거나, 뷰가 변경될때 실행됩니다.
    // ... 해당 메서드는 레이아웃을 미리 계산 하고  메모리에 캐쉬하여
    // ... 불필요한 반복적인 연산을 하는것을 방지하도록 해야한다.
    override func prepare() {
        guard let collectionView = collectionView else { return }
        if collectionView.numberOfSections == 0 || cache.isEmpty == false {
            cache.removeAll()
        }
        
        let cellWidth = contetnsWidth / CGFloat(numberOfColums)
        
        var yOffSet:[CGFloat] = []
        
        if let headerHeight {
            // 헤더 레이아웃 속성
            let headerIndexPath = IndexPath(item: 0, section: 0)

            let headerAttribute = UICollectionViewLayoutAttributes(forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, with: headerIndexPath)
            
            headerAttribute.frame = CGRect(
                x: 0,
                y: 0,
                width: collectionView.bounds.width,
                height: headerHeight
            ) // 헤더높이 지정
            
            cache.append(headerAttribute)
            // cell 의 Y위치를 나타내는 배열입니다.
            yOffSet = [CGFloat](repeating: headerAttribute.frame.maxY, count: numberOfColums)
            
            yOffSet[0] = headerAttribute.frame.maxY
            
        } else {
            yOffSet = [CGFloat](repeating: 0, count: numberOfColums)
        }
        
        // cell 의 X위치를 나타내는 배열입니다.
        let xOffSet:[CGFloat] = [0, cellWidth]

        var colum: Int = 0 // 현재 행의 위치
        
        for item in 0..<collectionView.numberOfItems(inSection: 0) {
            // 인덱스 패스를 통해
            let indexPath = IndexPath(item: item, section: 0)
            // 인덱스 패스에 맞는 셀의 크기를 계산합니다.
            let customContentHeight = delegate?.collectionView(for: collectionView, heightForAtIndexPath: indexPath) ?? 100
            // 상항 패딩(패딩 2배) 에 컨테트 높이를 더한 값은 높이
            let height = cellPadding * 2 + customContentHeight
            
            let frame = CGRect(
                x: xOffSet[colum],
                y: yOffSet[colum],
                width: cellWidth,
                height: height
            )
            
            // 생소한 dx, dy가 나왔는데
            // dx: x축 방향의 패딩 값 -> 좌우 프레임 안으로 이동
            // dy: y축 방향의 패딩 값 -> 상하 프레임 안으로 이동
            let insetFrame = frame.insetBy(
                dx: cellPadding, dy: cellPadding
            )
            
            // 계산한 Frame를 통해 레이아웃정보를 반영하고 캐쉬에 저장
            let attribute = UICollectionViewLayoutAttributes(
                forCellWith: indexPath
            )
            // 레이아웃정보를 반영
            attribute.frame = insetFrame
            cache.append(attribute)
            
            // 컬렉션뷰의 높이를 다시 지정한다.
            // frame.maxY -> 현재 셀의 프레임이 끝나는 Y축 위치 -> 셀 상단 위치에서 셀 높이를 더한값
            contentsHeight = max(contentsHeight, frame.maxY)
            // 새로운 셀의 frame.maxY중 더큰 값을 선택하여 컬렉션뷰의 전체 컨텐츠 높이를 업데이트
            
            yOffSet[colum] = yOffSet[colum] + height
            
            // 다른 이미지 크기로 인해, 한쪽열에만 이미지가 추가됨을 방지
            colum = yOffSet[0] > yOffSet[1] ? 1 : 0
            // 만약 첫번째 열의 높이가 두번째 열의 높이보다 크다면
            // 새 셀들 두번째 열에 배치하는데
            // 아닐시 새 셀을 첫번째 열에 배치한다.
        }
        
    }
    
    // 3. 모든 셀과 서브 뷰의 레이아웃 정보를 리턴한다. (Rect) 기반
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var visibleLayoutAttributes: [UICollectionViewLayoutAttributes] = []
        
        for attribute in cache {
            // intersects 메서드는 두 사각형이 겹치는지 여부를 반환
            if attribute.frame.intersects(rect){
                // 셀 프레임과 요청과 교차한다면 리턴 값의 추가
                    visibleLayoutAttributes.append(attribute)
            }
        }
        
        return visibleLayoutAttributes
    }
    
    // 4. 모든 셀의 레이아웃 정보를 리턴한다. IndexPath 기반
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        return cache[indexPath.item]
    }
    
    
}

돌아보며

결과적으론, 커스텀 레이아웃을 통해 원하는 UI를 구현할 수 있었지만,
이 배우는 과정에서 레이아웃의 계산 로직과 성능 최적화의 중요성을 깊이 깨달았습니다.
또한, UICollectionView의 레이아웃 시스템의 이해도를 높이는 데 큰 도움이 되었습니다.

레이아웃 프로세스와 속성 관리 방법에 대해 조금이나마 더 깊은 이해를 할수 있게 되어서
기쁩니다. 하루 반 정도 이것에 할애 하게 되었지만 그래도 결과가 나와서 기쁩니다.!!!