CGGradient: 그레이디언트의 유형과 생성 방법

CGGradient란?

CGGradient는 Core Graphics의 불변 객체로, 그레이디언트 전환을 따라 색상 집합과 이를 혼합하는 규칙을 캡슐화합니다. 내부적으로 CGGradient는 CGColor 배열, [0.0, 1.0] 범위의 위치(locations) 배열, 그리고 색상이 해석되는 CGColorSpace에 대한 참조를 저장합니다. 각 색상은 그레이디언트 스케일의 위치와 연결됩니다: 위치 0.0은 시작, 1.0은 전환의 끝에 해당합니다.

CGGradientCreateWithColors 함수를 통해 CGGradient를 생성할 때, Core Graphics는 중간 색상 값을 미리 계산합니다. 그레이디언트는 임의의 수의 색상 중단점(컬러 스톱)을 포함할 수 있어 복잡한 다중 색상 전환이 가능합니다. 색상 수는 최소 2개여야 하며, 각 색상은 locations 배열의 위치와 일치해야 합니다.

CGGradient의 아키텍처는 Core Animation의 CAGradientLayer와 같은 상위 수준 API와 달리 Core Graphics 컨텍스트에서 직접 작동합니다. 이는 그리기 프로세스를 완전히 제어하고 그레이디언트를 다른 Quartz 2D 작업(클리핑 마스크, 그림자, 변환)과 결합할 수 있는 기능을 제공합니다.

선형 및 방사형 그레이디언트

Core Graphics는 선형(축) 및 방사형의 두 가지 그레이디언트 유형을 지원합니다. 선형 그레이디언트는 CGGradientCreateWithColors 함수로 생성되고 CGContextDrawLinearGradient로 그려집니다. 방사형 그레이디언트는 동일한 CGGradient 구조가 필요하지만 CGContextDrawRadialGradient로 그려집니다.

선형 그레이디언트(축)

선형 그레이디언트는 시작점 startPoint에서 끝점 endPoint까지의 직선을 따라 색상 전환을 늘립니다. 색상은 이 두 점 사이에서 보간되며, 그 너머의 동작은 확장 옵션에 의해 제어됩니다. 선형 그레이디언트는 부드러운 배경 만들기, 금속 표면 시뮬레이션 및 인터페이스 요소의 색상 전환에 이상적입니다.

방사형 그레이디언트

방사형 그레이디언트는 한 원에서 다른 원으로의 색상 전환을 만듭니다. 각 원은 중심(startCenter / endCenter)과 반지름(startRadius / endRadius)으로 정의됩니다. 색상은 내부 원에서 외부 원으로 보간됩니다. 시작 반지름이 0인 특수한 경우에는 그레이디언트가 단일 지점에서 방사됩니다. 방사형 그레이디언트는 광원, 렌즈, 천체 및 스포트라이트 효과를 시뮬레이션하는 데 사용됩니다.

CGGradient 만들기: 색상 및 위치

CGGradient는 하나의 기본 함수 — CGGradientCreateWithColors로만 생성됩니다. 이 함수는 CGColorSpace, CGColor 배열(CFArray) 및 CGFloat locations 배열을 받습니다. locations가 NULL이면 색상이 그레이디언트 스케일을 따라 균일하게 분포됩니다. locations가 지정되면 그 수가 색상 수와 일치해야 합니다.

locations 배열에는 각 색상의 중단점을 정의하는 0.0~1.0의 값이 포함됩니다. 값은 단조롭게 증가해야 합니다. 첫 번째 값이 0.0보다 크면 시작부터 이 위치까지의 색상이 위치 0.0의 색상에서 외삽됩니다. 마지막 값이 1.0보다 작은 경우도 마찬가지입니다. 이 동작은 그리기 중 확장 옵션에 의해 제어됩니다.

그레이디언트의 색상을 선택할 때는 색상 공간을 고려하는 것이 중요합니다. 단일 CGGradient의 모든 색상은 동일한 CGColorSpace에 속해야 합니다 — Core Graphics는 해당 공간에서 구성 요소를 보간합니다. 다른 공간에서 생성된 색상이 있다면 CGColorCreateCopyByMatchingToColorSpace를 사용하여 공통 공간으로 먼저 변환해야 합니다.

컨텍스트에서 그레이디언트 그리기

Core Graphics는 그레이디언트 그리기를 위한 두 가지 함수를 제공합니다: 선형용 CGContextDrawLinearGradient와 방사형용 CGContextDrawRadialGradient입니다. 두 함수 모두 그래픽 컨텍스트, CGGradient 객체, 확장 옵션 및 유형별 기하학적 매개변수를 받습니다. 그리기는 현재 클리핑 마스크와 컨텍스트 변환을 고려하여 수행됩니다.

확장 옵션(그레이디언트 옵션)

확장 옵션은 0.0~1.0 위치 범위를 벗어난 그레이디언트의 동작을 제어합니다. 상수 kCGGradientDrawsBeforeStartLocation은 시작 위치 이전 영역을 첫 번째 중단점의 색상으로 채웁니다. kCGGradientDrawsAfterEndLocation은 마지막 중단점의 색상으로 채웁니다. 이러한 옵션은 비트마스크를 통해 결합할 수 있습니다. 방사형 그레이디언트의 경우 옵션은 시작 및 끝 반지름 외부 영역에 적용됩니다.

변환의 영향

그레이디언트는 현재 그래픽 컨텍스트의 좌표계에서 변환(CTM — 현재 변환 행렬)을 고려하여 그려집니다. 그리기 함수를 호출하기 전에 CGContextTranslateCTM, CGContextScaleCTM 또는 CGContextRotateCTM을 적용하면 그레이디언트의 위치와 배율이 변경됩니다. 이를 통해 새 객체를 만들지 않고도 여러 영역에 단일 CGGradient를 재사용할 수 있습니다.

옵션: 확장, 스무딩 및 마스킹

Core Graphics는 그레이디언트 제어를 위한 여러 추가 메커니즘을 제공합니다: 앤티앨리어싱, 클리핑 마스크를 통한 마스킹 및 투명도 효과와의 결합입니다. 앤티앨리어싱은 그래픽 컨텍스트에서 기본적으로 활성화되어 있으며 CGContextSetShouldAntialias를 통해 제어됩니다.

클리핑 마스크를 사용하면 그레이디언트 그리기 영역을 임의의 모양으로 제한할 수 있습니다. CGContextDrawLinearGradient를 호출하기 전에 CGContextBeginPath, CGContextAddPath 및 CGContextClip을 통해 경로를 정의해야 합니다. 그레이디언트는 이 경로로 둘러싸인 영역 내에서만 그려집니다. 이는 그레이디언트 아이콘, 버튼 및 진행 표시줄을 만드는 데 널리 사용됩니다.

그레이디언트 확장은 또 다른 중요한 매개변수입니다. kCGGradientDrawsBeforeStartLocation을 사용하면 Core Graphics가 startPoint 앞의 전체 영역에 첫 번째 중단점의 색상을 외삽합니다. 이 옵션이 없으면 그레이디언트 외부 영역이 채워지지 않고(투명하게) 남습니다. 두 옵션을 모두 결합하면 startPoint와 endPoint가 내부에 있더라도 그래픽 컨텍스트의 전체 사각형이 그레이디언트로 채워집니다.

Swift 코드 예제

CGGradient와 Core Graphics를 사용하여 iOS에서 그레이디언트를 만들고 그리는 실용적인 예제를 살펴보겠습니다.

세 가지 색상의 선형 그레이디언트

이 예제는 세 가지 색상(파랑, 초록, 빨강)의 선형 그레이디언트를 만들고 UIView의 대각선으로 그립니다. locations 배열은 색상을 고르지 않게 분배합니다: 파랑은 0.0~0.3, 초록은 0.6, 빨강은 0.6~1.0입니다.

func drawLinearGradient(in ctx: CGContext,
                          rect: CGRect) {
    let colors = [
        UIColor.blue.cgColor,
        UIColor.green.cgColor,
        UIColor.red.cgColor
    ] as CFArray

    let locations: [CGFloat] = [0.0, 0.6, 1.0]
    let space = CGColorSpaceCreateDeviceRGB()

    guard let gradient = CGGradientCreateWithColors(
        space, colors, locations
    ) else { return }

    let start = CGPoint(x: 0, y: 0)
    let end = CGPoint(x: rect.width,
                         y: rect.height)

    ctx.drawLinearGradient(gradient,
        start: start, end: end,
        options: [.drawsBeforeStartLocation,
                  .drawsAfterEndLocation])
}

광택 효과가 있는 방사형 그레이디언트

이 예제는 광택 효과를 시뮬레이션하는 방사형 그레이디언트를 그립니다. 반지름이 0인 시작점이 광택의 중심을 정의하고, 바깥쪽 원이 페이드 경계를 정의합니다. 이 효과는 인터페이스 요소나 활동 표시기를 강조하는 데 사용됩니다.

func drawRadialGlow(in ctx: CGContext,
                     center: CGPoint) {
    let colors = [
        UIColor.white.cgColor,
        UIColor.orange.cgColor,
        UIColor.clear.cgColor
    ] as CFArray
    let locations: [CGFloat] = [0.0, 0.4, 1.0]

    let gradient = CGGradientCreateWithColors(
        CGColorSpaceCreateDeviceRGB(), colors, locations)

    ctx.drawRadialGradient(gradient,
        startCenter: center, startRadius: 0,
        endCenter: center, endRadius: 100,
        options: [.drawsBeforeStartLocation,
                  .drawsAfterEndLocation])
}

클리핑 마스크가 있는 그레이디언트

이 예제에서는 그레이디언트가 클리핑 경로를 통해 원형 영역으로 제한됩니다. 그레이디언트를 그리기 전에 원형 경로가 정의되어 현재 컨텍스트 마스크가 됩니다. 그레이디언트는 원 내부 영역만 채워 그레이디언트 아이콘 효과를 만듭니다.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Creating circular clip path
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Drawing gradient inside clip mask
    let colors = [UIColor.magenta.cgColor,
                    UIColor.cyan.cgColor]
    let gradient = CGGradientCreateWithColors(
        CGColorSpaceCreateDeviceRGB(),
        colors as CFArray, nil)

    ctx.drawLinearGradient(gradient,
        start: CGPoint(x: 0, y: 0),
        end: CGPoint(x: rect.width,
                     y: rect.height),
        options: [.drawsBeforeStartLocation])
}