Core Graphics — 개요, 작동 원리 및 2D 그래픽 프레임워크

Core Graphics란?

Core Graphics(Quartz 2D라고도 함)는 Apple의 2D 그래픽 엔진을 구현하는 프레임워크입니다. Quartz 포터블 그래픽 라이브러리를 기반으로 하며 각 작업이 종이에 그리는 것과 유사한 시퀀스의 명령인 페이지 기반 그리기 모델을 사용합니다. Core Graphics는 앤티앨리어싱, 투명도(알파 합성) 및 ICC 색상 공간을 지원합니다.

Core Graphics 아키텍처는 대상 출력 장치(화면, 프린터, PDF 문서 또는 래스터 버퍼)를 캡슐화하는 그래픽 컨텍스트(CGContext)를 중심으로 구축됩니다. 컨텍스트는 현재 설정(색상, 선 두께, 변환, 클리핑 영역 및 글꼴)을 관리합니다. 이 접근 방식은 그리기 코드를 변경하지 않고도 다양한 출력 장치에 대해 통일된 API를 제공합니다.

Core Graphics는 주로 CPU에서 작동하며 벡터 모델(해상도 독립적)을 사용합니다. 즉, 선과 곡선은 그릴 때 현재 장치 해상도로 래스터화됩니다. Metal과 달리 Core Graphics는 명시적인 GPU 리소스 관리가 필요하지 않습니다. 시스템이 모든 최적화를 처리합니다. 대부분의 2D 작업(그래픽, 차트, 사용자 정의 UI 요소)에서 Core Graphics의 성능은 60 FPS를 유지하기에 충분합니다.

아키텍처 및 주요 유형

Core Graphics에는 약 50개의 기본 유형(불투명 유형)이 포함되어 있으며 각각 특정 기능을 담당합니다. 모든 유형은 Core Foundation 메모리 관리 규칙을 따릅니다. 이름에 Create가 포함된 함수를 통해 생성되며 CGRelease 호출이 필요하고 Objective-C에서 ARC와 호환되지 않습니다(그러나 Swift는 CF_RETURNS_RETAINED 주석을 통해 메모리를 자동으로 관리합니다).

Core Graphics의 주요 유형

CGContext — 그리기 컨텍스트, 프레임워크의 중심 유형. CGPath — 불변의 벡터 패스. CGColor — 지정된 색상 공간의 색상. CGGradient — 그라디언트 채우기. CGImage — 래스터 이미지. CGLayer — 반복 그리기를 위한 최적화된 오프라인 버퍼. CGDataProvider — 이미지의 데이터 소스. CGColorSpace — 색상 공간(sRGB, Display P3, Gray).

각 유형은 최소한의 오버헤드를 위해 설계되었습니다. CGPath는 캐시되어 여러 컨텍스트에서 재사용될 수 있고, CGColor는 전달될 때 GPU 하드웨어 표현으로 변환되며, CGLayer는 사전 래스터화된 콘텐츠를 저장합니다. 이 아키텍처를 통해 Core Graphics는 단순한 UI 작업과 전문 그래픽 편집기 모두에서 효율적으로 작동할 수 있습니다.

CGPath: 벡터 패스와 최적화

CGPath는 직선, 베지어 곡선, 호 및 닫힘과 같은 기하학적 세그먼트의 시퀀스를 설명하는 불변 객체입니다. UIBezierPath와 달리 CGPath에는 그리기 메서드가 포함되어 있지 않습니다. 지오메트리만 저장합니다. 그리려면 CGPath를 컨텍스트(CGContextAddPath)에 추가한 다음 strokePath 또는 fillPath를 통해 렌더링합니다. 불변성은 스레드 안전성과 캐시 가능성을 보장합니다.

패스 생성 및 최적화

CGPathCreateMutable은 단계별 구성을 위한 가변 패스(CGMutablePathRef)를 생성합니다. 최종 조립 후 불변의 CGPathRef로 변환됩니다. Apple은 CGPath의 포인트 수를 최소화할 것을 권장합니다. 너무 복잡한 패스(1000세그먼트 이상)는 래스터화를 느리게 합니다. 최적화를 위해 중복된 동일선상 포인트를 제거하는 CGPathCreateCopyBySimplifyingPath를 사용하세요.

두 CGPath 객체 간의 형태 애니메이션을 위해 CAShapeLayer의 path 속성에서 CABasicAnimation을 사용할 수 있습니다. 제한 사항: 두 CGPath 모두 동일한 수의 세그먼트(제어점)를 가져야 합니다. CGPathApply 함수를 사용하면 패스의 모든 요소를 탐색하고 구조를 비교할 수 있습니다. 세그먼트가 일치하지 않으면 애니메이션이 끊깁니다. 이 경우 수동 포인트 보간을 위해 CADisplayLink를 사용하세요.

// 가변 패스 생성
let mutablePath = CGMutablePath()
mutablePath.moveTo(to: CGPoint(x: 0, y: 0))
mutablePath.addLine(to: CGPoint(x: 100, y: 0))
mutablePath.addLine(to: CGPoint(x: 100, y: 100))
mutablePath.closeSubpath()

// 안전한 캐싱을 위해 불변으로 변환
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

그라디언트: CGGradient 및 CGShading

CGGradient는 직선을 따라(선형 그라디언트) 또는 중심에서 바깥쪽으로(방사형 그라디언트) 두 개 이상의 색상 간의 부드러운 전환을 정의하는 객체입니다. CGGradient는 지정된 색상 공간, CGColorRef 배열 및 0.0에서 1.0까지의 중지 위치 배열로 생성됩니다. 생성 후 그라디언트는 여러 컨텍스트에서 여러 번 재사용할 수 있습니다.

고급 그라디언트를 위한 CGShading

CGShading은 패스를 따라 색상 변경 함수를 정의할 수 있는 더 강력한 메커니즘입니다. 고정된 색상 세트로 작동하는 CGGradient와 달리 CGShading은 각 지점에서 색상을 계산하는 콜백 함수(CGFunctionRef)를 사용합니다. 이를 통해 비선형 전환 및 복합 색상 구성표를 가진 복잡한 그라디언트를 만들 수 있습니다.

형태 내부에 그라디언트를 그리려면 형태의 패스에 클립이 필요합니다. 순서: 컨텍스트에 패스를 추가하고, CGContextClip을 호출한 다음, 그라디언트를 그립니다. 클립이 없으면 그라디언트가 전체 컨텍스트를 채웁니다. iOS에서는 CGGradient가 더 간단하고 성능이 뛰어난 옵션으로 권장됩니다. CGShading은 사용자 정의 색상 함수에만 적합합니다.

func drawGradient(ctx: CGContext, rect: CGRect) {
    let colors = [UIColor.red.cgColor, UIColor.blue.cgColor] as CFArray
    guard let gradient = CGGradient(
        colorsSpace: CGColorSpaceCreateDeviceRGB(),
        colors: colors,
        locations: [0.0, 1.0]
    ) else { return }

    ctx.saveGState()
    ctx.addEllipse(in: rect)
    ctx.clip()
    ctx.drawLinearGradient(
        gradient,
        start: CGPoint(x: rect.midX, y: rect.minY),
        end: CGPoint(x: rect.midX, y: rect.maxY),
        options: []
    )
    ctx.restoreGState()
}

이미지 작업: CGImage 및 CGLayer

CGImage는 Core Graphics의 래스터 이미지로, 파일에서 로드하거나 프로그래밍 방식으로 생성하거나 UIImage에서 가져올 수 있습니다. CGImage에는 픽셀 데이터, 색상 공간 정보, 크기, 비트 깊이 및 데이터 레이아웃이 포함됩니다. UIImage와 달리 CGImage는 Retina 배율을 관리하지 않습니다. 이 책임은 scale 매개변수를 통해 개발자에게 있습니다.

CGLayer — 반복 그리기 최적화

CGLayer는 정적 콘텐츠의 사전 래스터화를 위한 오프라인 버퍼입니다. 동일한 그리기 명령 세트가 반복적으로 실행되는 경우(예: 배경 패턴), CGLayer는 한 번 래스터화한 다음 컨텍스트에 복사하기만 하면 됩니다. Apple에 따르면 CGLayer를 사용하면 반복 그리기가 CPU에서 2~5배, 하드웨어 가속을 사용하면 최대 10배까지 빨라질 수 있습니다.

이미지 로드를 위해 CGImageSource를 사용하세요. GIF/APNG에서 메타데이터, 썸네일 및 개별 프레임을 읽기 위한 강력한 API입니다. CGImageSource는 점진적 로딩과 필요한 부분만 검색할 수 있게 합니다. 큰 이미지(화면 크기를 초과하는)를 작업할 때는 디스크 캐싱을 사용하여 CGImageSource를 만들고 CGImageSourceCreateThumbnailAtIndex를 사용하여 축소된 버전을 표시하는 것이 좋습니다.

func createLayer(ctx: CGContext, size: CGSize) -> CGLayer? {
    guard let layer = CGLayer(ctx, size: size, auxiliaryInfo: nil) else { return nil }
    let layerCtx = layer.context !

    // 한 번 그리기
    layerCtx.setFillColor(UIColor.lightGray.cgColor)
    layerCtx.addEllipse(in: CGRect(origin: .zero, size: size))
    layerCtx.fillPath()
    return layer
}

// draw()에서 사용
for i in 0..<20 {
    ctx.draw(layer, at: CGPoint(x: CGFloat(i) * 30, y: 0))
}

Core Graphics 코드 예제

Core Graphics를 사용하여 이미지에 워터마크를 표시하는 사용자 정의 View를 만들어 보겠습니다. 워터마크에는 원본 이미지 위에 반투명 텍스트와 벡터 로고가 포함됩니다. 이 코드는 단일 컨텍스트에서 CGContext, CGImage, 텍스트 및 투명도를 사용한 작업을 보여줍니다.

class WatermarkView: UIView {

    private let watermarkText = "IT Sectr"
    private let watermarkOpacity: CGFloat = 0.3

    override func draw(_ rect: CGRect) {
        guard let ctx = UIGraphicsGetCurrentContext() else { return }

        // 배경 이미지 그리기
        UIImage(named: "background")?.draw(in: rect)

        // 워터마크 투명도 구성
        ctx.saveGState()
        ctx.translateBy(x: rect.midX, y: rect.midY)
        ctx.rotate(by: -.pi / 6)

        // 반투명 텍스트
        let attributes: NSAttributedString.Attributes = [
            .font: UIFont.boldSystemFont(ofSize: 48),
            .foregroundColor: UIColor.white.withAlphaComponent(watermarkOpacity)
        ]
        let textSize = watermarkText.size(withAttributes: attributes)
        watermarkText.draw(
            at: CGPoint(x: -textSize.width / 2, y: -textSize.height / 2),
            withAttributes: attributes
        )

        // 텍스트 아래 벡터 아이콘 (십자가가 있는 원)
        ctx.setStrokeColor(UIColor.white.withAlphaComponent(watermarkOpacity).cgColor)
        ctx.setLineWidth(3)
        ctx.addEllipse(in: CGRect(x: -25, y: -75, width: 50, height: 50))
        ctx.strokePath()
        ctx.moveTo(x: -15, y: -50)
        ctx.addLineTo(x: 15, y: -50)
        ctx.moveTo(x: 0, y: -65)
        ctx.addLineTo(x: 0, y: -35)
        ctx.strokePath()

        ctx.restoreGState()
    }
}

이 코드는 Core Graphics의 주요 기능을 사용합니다: 배경에서 워터마크 효과를 분리하는 saveGState/restoreGState, 위치 지정 및 회전을 위한 translateBy 및 rotate, withAlphaComponent를 통한 반투명 텍스트, addEllipse 및 addLineTo를 통한 벡터 아이콘. 전체 워터마크는 배경 이미지 뒤에 단일 구성으로 그려집니다.

프로덕션에서 사진에 워터마크를 만들 때는 성능을 고려하는 것이 중요합니다. 이미지가 화면보다 큰 경우 워터마크를 적용하기 전에 CGImageSourceCreateThumbnailAtIndex를 사용하여 축소하세요. Core Graphics는 모든 작업을 CPU에서 처리합니다. 수십 개의 이미지를 배치 처리할 때는 UI 차단을 방지하기 위해 백그라운드 큐와 CGBitmapContext를 사용하세요.