CGColor 및 CGColorSpace: 개요, 색상 모델 및 관리 방법

CGColor와 CGColorSpace란?

CGColor는 색상을 나타내는 Core Graphics의 기본 객체입니다. CGColor 구조체는 색상 구성 요소의 숫자 값과 CGColorSpace에 대한 참조를 저장합니다 — 이러한 구성 요소가 해석되는 색상 공간입니다. 색상 공간에 연결되지 않으면 구성 요소의 숫자 값은 의미가 없습니다. RGB에서 값(1.0, 0.0, 0.0)은 빨간색이지만 CMYK에서는 시안색입니다.

CGColorSpace는 색상 모델과 표현 가능한 값의 범위(색역)를 정의하는 객체입니다. 색상 공간은 숫자 구성 요소가 특정 출력 장치에서 가시 색상으로 변환되는 규칙을 설정합니다. Core Graphics는 표준 ICC 프로파일 공간과 사용자 정의 변환 테이블이 있는 CGColorSpace를 통해 생성된 사용자 정의 공간을 모두 지원합니다.

색상과 색상 공간을 분리하는 아키텍처는 색상이 단순한 숫자 집합으로 저장되는 API와 차별화되는 Core Graphics의 핵심 기능입니다. 이 접근 방식을 통해 Core Graphics는 장치 독립적인 색상 관리를 수행할 수 있습니다. CGColorSpace 프로파일을 통한 자동 구성 요소 변환 덕분에 동일한 CGColor 객체를 다른 디스플레이에서 올바르게 표시할 수 있습니다.

Core Graphics에서 색상의 작동 방식

Core Graphics는 ICC 프로파일(International Color Consortium)을 기반으로 한 모델을 통해 색상을 구현합니다. 각 CGColorSpace에는 ICC 프로파일에 대한 참조가 포함됩니다 — 색상 구성 요소가 CIE XYZ(장치 독립적 색상 공간)로 변환되는 방법에 대한 표준화된 설명입니다. 이를 통해 Core Graphics는 다른 화면 간에 자동 측색 보정을 수행할 수 있습니다.

CGColor 객체의 수명 주기

CGColorCreate 함수를 통해 CGColor를 생성할 때, 구성 요소는 전달된 배열에서 캡처되어 지정된 CGColorSpace에 바인딩됩니다. Core Graphics는 구성 요소를 내부 표현으로 복사하고 색상 공간과의 연결을 만듭니다. 그 후 색상은 채우기, 선, 그라디언트, 그림자 등 모든 그래픽 작업에 사용할 준비가 됩니다.

ColorSync를 통한 색상 관리

macOS에서 색상 관리는 Core Graphics에 통합된 ColorSync 프레임워크를 통해 처리됩니다. ColorSync는 디스플레이 보정을 추적하고 소스 색상 공간에서 대상 장치 공간으로 구성 요소를 자동 변환합니다. iOS에서는 iPhone 7부터 넓은 색 영역(Display P3)을 지원하는 Quartz Core를 통해 색상 관리가 구현됩니다.

CGColorSpace의 기본 색상 모델

CGColorSpace는 RGB(DeviceRGB, sRGB, Display P3), Gray(DeviceGray), CMYK(DeviceCMYK) 및 Lab의 네 가지 기본 색상 모델을 지원합니다. 각 모델은 색상 구성 요소의 수와 의미를 정의합니다. RGB는 빨간색, 녹색, 파란색의 세 채널을 사용하고, Gray는 하나의 휘도 채널을 사용하며, CMYK는 인쇄용 네 채널을 사용하고, Lab은 휘도와 두 색차 구성 요소의 세 채널을 사용합니다.

DeviceRGB와 sRGB

DeviceRGB는 Core Graphics의 가장 일반적인 기본 색상 공간입니다. ICC 프로파일링 없이 표준 LCD 디스플레이의 색 영역을 사용합니다. UIView 또는 NSView 그래픽 컨텍스트를 생성할 때 Core Graphics는 자동으로 DeviceRGB를 기본 색상 공간으로 할당합니다. sRGB는 고정된 색역과 감마를 가진 ICC 프로파일 버전으로, 웹 콘텐츠에 권장됩니다.

Display P3 — 넓은 색 영역

Display P3는 DCI-P3 표준을 기반으로 한 색상 공간으로, 넓은 색 영역 디스플레이를 갖춘 최신 iOS 기기에서 사용됩니다. sRGB보다 약 25% 더 많은 가시 색상을 커버하며, 특히 스펙트럼의 녹색과 빨간색 영역에서 두드러집니다. iOS에서 Display P3로 작업하려면 iOS 9.3부터 사용 가능한 상수 kCGColorSpaceDisplayP3를 사용합니다.

CGColor 생성 및 관리

CGColor는 CGColorSpace와 CGFloat 구성 요소의 배열을 받는 CGColorCreate 함수를 통해 생성됩니다. 구성 요소의 수는 색상 모델에 따라 다릅니다. Gray의 경우 1, RGB의 경우 3, CMYK의 경우 4입니다. 생성 후 CGColor는 불변(immutable) 객체입니다 — 구성 요소를 변경할 수 없으며 새 색상만 만들 수 있습니다.

Core Graphics는 표준(제네릭) 색상 공간에서 색상을 생성하기 위한 CGColorCreateGenericRGB, CGColorCreateGenericGray 및 CGColorCreateGenericCMYK 함수도 제공합니다. 이러한 함수는 명시적으로 CGColorSpace를 생성할 필요를 없애 코드를 단순화합니다. 또한 Quartz 2D는 기본 색상에 대한 상수를 정의합니다: kCGColorWhite, kCGColorBlack, kCGColorClear.

색상을 생성할 때 구성 요소 지정 순서가 중요합니다 — 색상 공간 모델에 정의된 채널 순서와 엄격히 일치해야 합니다. RGB: 빨강(0.0–1.0), 초록, 파랑, 알파(0.0–1.0). Gray: 휘도, 알파. CMYK: 시안, 마젠타, 노랑, 검정, 알파. 구성 요소 순서를 위반하면 컴파일 오류 없이 색상이 잘못 표시됩니다.

알파 채널 및 투명도

알파 채널은 색상의 투명도를 제어하는 네 번째 구성 요소(Gray의 경우 두 번째)입니다. 값 1.0은 완전 불투명, 0.0은 완전 투명에 해당합니다. CGColor의 알파 채널은 선택 사항입니다. CGColorGetAlpha 함수는 현재 알파 값을 반환하며, 기본 함수를 통해 생성할 때 기본값은 1.0입니다. 색상을 혼합할 때 Core Graphics는 Porter-Duff Source Over 규칙에 따라 알파 합성을 사용합니다.

CGColorSpace 작업

CGColorSpace는 Core Graphics 팩토리 함수를 통해 생성됩니다: CGColorSpaceCreateDeviceRGB, CGColorSpaceCreateDeviceGray, CGColorSpaceCreateDeviceCMYK 또는 명명된 공간(sRGB, Display P3, Generic Gray)의 경우 CGColorSpaceCreateWithName. CGColorSpace 객체는 불변이며 스레드 안전합니다 — 동일한 객체를 여러 그래픽 컨텍스트에서 사용할 수 있습니다.

기본 CGColorSpace 얻기

Core Graphics는 명명된 상수를 통해 여러 사전 정의된 색상 공간을 제공합니다: kCGColorSpaceSRGB, kCGColorSpaceDisplayP3, kCGColorSpaceGenericGrayGamma2_2. 이러한 상수는 CGColorSpaceCreateWithName에 전달됩니다. 넓은 색 영역의 iOS 기기의 경우 Display P3를 권장합니다. sRGB는 디스플레이 기능을 완전히 활용하지 못할 수 있습니다.

ICC 프로파일 및 사용자 정의 CGColorSpace

ICC 프로파일은 장치의 색상 특성을 설명하는 표준화된 파일입니다. Core Graphics는 CGColorSpaceCreateWithICCProfile을 통해 임의의 ICC 프로파일을 기반으로 CGColorSpace를 생성할 수 있습니다. 이는 특정 프린터나 모니터에 대한 정확한 일치가 필요한 사진 인쇄 및 프리프레스 전문 응용 프로그램에서 사용됩니다.

색상 공간 간 변환

Core Graphics는 CGContextSetFillColorWithColor 또는 CGContextSetStrokeColorWithColor 함수를 통해 렌더링 중에 색상 공간 간 변환을 자동으로 수행합니다. 그래픽 컨텍스트의 색상 공간이 전달된 CGColor의 색상 공간과 다른 경우 Quartz 2D는 두 공간의 ICC 프로파일을 사용하여 변환을 수행합니다.

명시적 색상 변환을 위해 CGColorCreateCopyByMatchingToColorSpace를 사용합니다 — 구성 요소가 소스 공간에서 대상 공간으로 재계산된 새 CGColor를 생성하는 함수입니다. Apple Technical Note TN2313(2024)에 따르면, Display P3에서 sRGB로 변환할 때 sRGB 색역 밖의 색상은 클리핑되어 채도 손실이 발생합니다. 이는 밝은 녹색과 빨간색 음영에서 특히 두드러집니다.

ColorSync는 macOS에서 그래픽 스택 수준의 시스템 차원 색상 관리를 제공합니다. 응용 프로그램이 명시적 색상 공간을 지정하지 않으면 Core Graphics는 ColorSync에서 얻은 디스플레이 공간을 사용합니다. 이렇게 하면 다른 색상 프로파일을 사용하더라도 다른 모니터에서 색상이 동일하게 보입니다.

Swift 코드 예제

iOS 응용 프로그램에서 CGColor와 CGColorSpace를 생성하고 사용하는 실용적인 예제를 살펴보겠습니다. 코드는 Core Graphics 함수를 사용하여 Swift로 작성되었습니다.

다른 색상 공간으로 CGColor 생성

이 예제는 세 가지 다른 색상 공간에서 빨간색을 생성하는 방법을 보여줍니다. 동일한 RGB 구성 요소임에도 불구하고 CGColorSpace 색역에 따라 색상이 다르게 보입니다.

import CoreGraphics

// DeviceRGB에서 색상 생성
let rgbSpace = CGColorSpaceCreateDeviceRGB()
let redColor = CGColorCreate(rgbSpace, [1.0, 0.0, 0.0, 1.0])

// Display P3에서 색상 생성
let p3Space = CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3)
let p3RedColor = CGColorCreate(p3Space, [1.0, 0.0, 0.0, 1.0])

// 회색 색상 생성
let graySpace = CGColorSpaceCreateDeviceGray()
let grayColor = CGColorCreate(graySpace, [0.5, 1.0])

색상 공간 간 색상 변환

이 예제는 Display P3에서 sRGB로 밝은 녹색을 변환합니다. 이러한 변환 중에 sRGB 색역 밖의 색상은 적응되어 색조가 변경될 수 있습니다.

let p3Space = CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3)
let sRGBSpace = CGColorSpaceCreateWithName(kCGColorSpaceSRGB)

// Display P3의 밝은 녹색(sRGB 색역 밖)
let p3Green = CGColorCreate(p3Space, [0.0, 1.0, 0.0, 1.0])

// sRGB로 변환
let srgbGreen = CGColorCreateCopyByMatchingToColorSpace(
    sRGBSpace, p3Green, kCGRenderingIntentDefault
)

그래픽 컨텍스트에서 CGColor 사용

이 예제는 사용자 정의 UIView에서 CGColor를 사용하여 채워진 원을 그리는 방법을 보여줍니다. draw 메서드는 현재 그래픽 컨텍스트 UIGraphicsGetCurrentContext를 가져오고, 여기에서 채우기 색상이 설정됩니다.

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

        let rgbSpace = CGColorSpaceCreateDeviceRGB()
        let blueColor = CGColorCreate(
            rgbSpace,
            [0.2, 0.4, 1.0, 1.0]
        )

        ctx.setFillColor(blueColor)
        ctx.fillEllipse(in: CGRect(x: 50, y: 50,
                                  width: 200, height: 200))
    }
}