[UIKit] 그라데이션 효과 적용하기

iOS에서는 CAGradientLayer를 활용하여 쉽고 효율적으로 그라데이션을 적용할 수 있다.

CAGradientLayer란?

CAGadientLayer는 Core Animation의 하위 클래스로, UIView의 배경에 부드러운 색상 전환(그라데이션 효과)을 추가할 때 사용된다.

주요 특징

• 성능 최적화: GPU에서 렌더링되어 성능에 영향을 최소화함

• 다양한 색상 지원: 두 개 이상의 색상을 혼합 가능

• 다양한 방향 적용 가능: 수직, 수평, 대각선 등 다양한 방향으로 설정 가능

기본적인 그라데이션 적용 방법

import UIKit

class GradientViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        applyGradient()
    }
    
    private func applyGradient() {
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [
            UIColor.blue.cgColor,  // 시작 색상
            UIColor.purple.cgColor // 끝 색상
        ]
        gradientLayer.locations = [0.0, 1.0] // 색상 변화 위치
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0) // 상단 중앙 시작
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)   // 하단 중앙 끝
        gradientLayer.frame = view.bounds // 전체 화면 적용
        
        view.layer.insertSublayer(gradientLayer, at: 0)
    }
}

• colors: 그라데이션에 사용할 색상 배열 (cgColor 형식으로 전달)

• locations: 색상 전환 위치 (0.0 = 시작, 1.0 = 끝)

• startPoint & endPoint: 그라데이션의 방향을 결정

• frame: CAGradientLayer의 크기를 설정하여 전체 화면에 적용

• insertSublayer: 그라데이션을 뷰의 layer에 추가

다양한 그라데이션 방향 적용하기

수평 그라데이션 (왼쪽 → 오른쪽)

gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5) // 왼쪽 중앙
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)   // 오른쪽 중앙

대각선 그라데이션(왼쪽 상단 → 오른쪽 하단)

gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0) // 왼쪽 상단
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)   // 오른쪽 하단

여러 색상을 활용한 그라데이션

let gradientLayer = CAGradientLayer()
gradientLayer.colors = [
    UIColor.red.cgColor,
    UIColor.orange.cgColor,
    UIColor.yellow.cgColor
]
gradientLayer.locations = [0.0, 0.5, 1.0] // 색상 전환 비율

위 코드에서는 빨강 → 주황 → 노랑으로 부드럽게 변화하는 그라데이션을 적용했다.

애니메이션 효과 추가하기

그라데이션 색상을 애니메이션으로 변경할 수도 있다.

let animation = CABasicAnimation(keyPath: "colors")
animation.fromValue = [
    UIColor.blue.cgColor,
    UIColor.purple.cgColor
]
animation.toValue = [
    UIColor.green.cgColor,
    UIColor.cyan.cgColor
]
animation.duration = 3.0 // 3초 동안 변화
animation.autoreverses = true // 원래 색상으로 돌아오기
animation.repeatCount = Float.infinity // 무한 반복

gradientLayer.add(animation, forKey: "colorChange")

애니메이션 적용 시 주의할 점

• fromValue: 시작 색상 배열

• toValue: 변화 후 색상 배열

• duration: 애니메이션 실행 시간

• autoreverses = true: 원래 색상으로 돌아가도록 설정

• repeatCount: 애니메이션 반복 횟수 (무한 반복 가능)

UIView 확장(Extension)으로 간편하게 적용하기

매번 CAGradientLayer를 설정하는 것이 번거롭다면, UIView 확장(Extension)을 활용하면 더 쉽게 적용할 수 있다.

UIView에 그라데이션 적용하는 Extension

extension UIView {
    func applyGradient(colors: [UIColor], locations: [NSNumber]? = nil, startPoint: CGPoint = CGPoint(x: 0.5, y: 0.0), endPoint: CGPoint = CGPoint(x: 0.5, y: 1.0)) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.bounds
        gradientLayer.colors = colors.map { $0.cgColor }
        gradientLayer.locations = locations
        gradientLayer.startPoint = startPoint
        gradientLayer.endPoint = endPoint
        
        self.layer.insertSublayer(gradientLayer, at: 0)
    }
}

view.applyGradient(colors: [UIColor.blue, UIColor.purple])