[TIL] 트러블슈팅: gradientView가 늦게 나타나는 문제

🛑 문제 상황

• OnboardingCell에서 그라데이션 배경(gradientView)가 즉시 렌더링되지 않고, 화면이 뜬 후에야 서서히 나타나는 문제가 발생했다.
• applyGradientBackground()에서 CAGradientLayer를 설정했지만, 초기 로딩 시 보이지 않고 나중에 적용되는 현상 발생함 ㅠㅠ

---

🛑 문제 원인

1. CAGradientLayer는 UIView의 bounds가 설정된 후 적용되어야 함

2. applyGradientBackground()에서 gradientLayer.frame = bounds를 설정했지만, bounds 값이 아직 확정되지 않은 상태에서 실행됨

3. layoutSubviews()에서 gradientLayer.frame을 gradientView.bounds에 맞춰 업데이트해야 즉시 반영됨

---

🛑 문제가 있었던 원래 코드

/// 그라데이션 배경 적용 (기존 코드)
private func applyGradientBackground() {
    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [
        UIColor.clear.cgColor,
        UIColor.starDarkPurple.cgColor,
        UIColor.starAppBG.cgColor
    ]
    gradientLayer.locations = [0.0, 0.4, 0.6]
    gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
    gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
    gradientLayer.frame = bounds  // ✅ 아직 `bounds`가 확정되지 않은 상태에서 적용됨

    gradientView.layer.insertSublayer(gradientLayer, at: 0)
}

❌ 문제: bounds가 확정되기 전에 gradientLayer.frame = bounds가 설정되면서,

초기에는 frame = (0,0,0,0)이 되고, 나중에야 레이아웃이 적용되면서 점차적으로 보이는 문제 발생.

---

✅ 해결 방법

1. applyGradientBackground()에서 gradientLayer를 layoutSubviews()에서 업데이트하도록 수정

2. gradientLayer를 인스턴스 변수로 만들어 layoutSubviews()에서 크기 업데이트 보장

3. gradientLayer.frame을 gradientView.bounds에 맞춰서 적용하도록 변경

---

✅ 최종 코드

final class OnboardingCell: UICollectionViewCell {

    static let identifier = "OnboardingCell"

    // MARK: - UI Components
	
    ...
    UI 컴포넌트
    ...

    // MARK: - Init

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
        setupGradientLayer()  // ✅ 그라데이션 설정
    }

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

    // MARK: - Setup UI

    private func setupUI() {
        ...
        UI 레이아웃
        ...
    }

    /// 그라데이션 배경 설정
    private func setupGradientLayer() {
        gradientLayer.colors = [
            UIColor.clear.cgColor,
            UIColor.starDarkPurple.cgColor,
            UIColor.starAppBG.cgColor
        ]
        gradientLayer.locations = [0.5, 0.6, 1.0]
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)

        gradientView.layer.insertSublayer(gradientLayer, at: 0)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        contentView.frame = bounds

        // ✅ layoutSubviews()에서 정확한 크기로 업데이트
        gradientLayer.frame = gradientView.bounds
    }
}

---

✅ 결과

그라데이션 배경이 즉시 적용되게 할 수 있었다. 그리고 초기 로딩 시에도 사라지지 않고 정상적으로 표시된다 쿄쿄쿄