안녕하세요. Deah 입니다!
오늘의 주제는 iOS에서 사용하는 컬러인 UIColor와, CGColor 입니다.
웹 개발에서는 기본적으로 CSS, 또는 다양한 CSS 전처리기를 통해 사용할 컬러를 핸들링했기 때문에 컬러의 종류가 나뉘어져 있지는 않았던 거 같아요. 하지만 iOS에서 색상을 설정할 때, 언제는 .black만 해줘도 잘 적용되지만 또 언제는 컬러 뒤에 .cgColor를 적용하지 않으면 오류가 발생할 때가 있더라구요. 🤔
위 예제처럼요! 그래서 오늘은 이 두 컬러의 차이에 대해 알아보겠습니다.
UIColor
UIColor
An object that stores color data and sometimes opacity.
먼저 UIColor를 살펴볼게요.
공식 문서에서는 UIColor를 색상 데이터와 불투명도를 저장할 수 있는 객체라고 정의되어 있습니다.
그런데 저는 이 표현이 그닥 한 번에 와닿지 않더라구요..?
Overview
Use color to customize your app’s appearance, communicate status, and help people visualize data. (중략)
UIColor provides a list of class properties that create adaptable and fixed colors such as blue, green, purple, and more. UIColor also offers properties to specify system-provided colors for UI elements such as labels, text, and buttons. (후략)
그래서 Overview를 보면, 색상을 사용해 앱의 Appearance를 지정하거나 상태를 알려주고, 데이터를 시각화할 수 있도록 돕는다고 설명되어 있습니다.
때문에 UIColor에서는 Blue, Green, Purple 등의 유연하거나 고정적인 색상을 만드는 클래스 속성 목록을 제공하고, Label, Text, Button 등의 UI 요소에 대해서도 색상을 지정할 수 있는 속성을 제공한다고 해요.
음? 한 번에 이해하기 어렵지만 나름 요약을 해본다면...
"앱에서 보여지는 화면이 있고, 화면 위에 존재하는 Label, Text, Button 등의 UI 요소가 있는데, 거기에서 사용할 수 있도록 제공되는 컬러들이야!" 라고 1차적으로 이해를 해보고 넘어가겠습니다 ㅎ_ㅎ
class UIColor : NSObject혹시 UIColor라는 이름이 익숙하지는 않나요?
접두사에서 알 수 있듯이 UIColor는 UIKit 프레임워크의 하위 요소입니다.
UIKit의 한 종류인 만큼 User Interface를 담당하는 곳에서 사용하는 색상이라고 생각해보면 될 거 같아요.
(UIColor가 상속받고 있는 NSObject는 Objective-C 클래스들의 최상위 루트 클래스입니다. 아주 간단히 이해해본다면, iOS 애플리케이션이 기본적으로 동작할 수 있도록 하는데 필요한 기본적인 기능들(?)을 상속 받는다고 생각해보면 될 거 같아요. 이 부분은 다음에 기회가 된다면 좀 더 자세히 알아봐야겠네요!)
UIColor에서 사용할 수 있는 색상을 살펴보면,
UI 객체에서 사용할 수 있는 컬러와, 시스템에서 제공하는 기본 컬러가 있고, 또 색상을 따로 만들어줄 수도 있습니다.
CGColor
CGColor
A set of components that define a color, with a color space specifying how to interpret them.
CGColor도 알아볼게요!
공식 문서는 CGColor에 대해 색상을 해석하는 방법이 명시되어있는 색상 공간(color space)이 있는, 색상을 정의하는 요소의 집합이라고 정의하고 있습니다.
왜인지 모르게 UIColor보다 어려운 말로 들리네요... 허허. 🤯
Overview
CGColor is the fundamental data type used internally by Core Graphics to represent colors. CGColor objects, and the functions that operate on them, provide a fast and convenient way of managing and setting colors directly, especially colors that are reused (such as black for text). (후략)
좀 더 자세히 살펴보면, CGColor는 Core Graphics(코어 그래픽스)에서 내부적으로 색상을 나타내는 데 사용되는 기본 데이터 유형이라고 설명해주고 있어요. UIColor가 UIKit 프레임워크의 하위 요소이듯, CGColor 또한 Core Graphics 프레임워크의 하위 요소입니다. 즉, Core Graphics를 사용하는 곳에서는 CGColor를 사용해야 하는 것이죠!
개발을 하면서 자주 볼 수 있는 CGFloat, CGSize 등도 모두 Core Graphics를 상속 받고 있는 아이들임을 알 수 있습니다.
Core Graphics를 간단히 살펴보면, Quartz 고급 드로잉 엔진을 기반으로 2D 렌더링, 경로 기반 드로잉, 변환, 색상 관리, 오프스크린 렌더링, 패턴, 그라디언트 및 음영 등을 처리한다고 해요.
즉, Quartz 고급 드로잉 엔진을 기반으로 2D 작업, 2차원 그래픽을 그리는 라이브러리입니다.
우리 개발자들이 원하는 걸 그려주는 역할을 하는 도구라고 생각해볼 수 있을 거 같네요!
Quartz
방금 살펴본 Core Graphics와, Core Animation, OpenGL ES, UIKit 클래스 등 사용 가능한 모든 그래픽 및 애니메이션 기술과 함께 작동하는 것이 Quartz 입니다.
그래서 차이가 뭔데?
하지만 공식 문서의 정의나 설명만으로는 두 개념의 차이가 정확히 무엇인지 직관적으로 알기는 어려운 거 같아요. (적어도 저는...)
UIColor는 User Interface 구성 요소의 색상을 설정할 때 사용하고,
CGColor는 Core Graphics를 사용하는 곳에서 사용해야 한다는 건 알겠는데...
우리가 실제로 개발을 할 때 어떻게 활용해야 하는 건지 감이 잘 안 온단 말이죠?
가장 처음에 봤던 예제 코드를 기억하시나요?
view.backgroundColor = .black
view.layer.borderColor = UIColor.black.cgColor 
뷰의 backgroundColor 타입을 확인해보면 UIColor, borderColor는 타입이 CGColor로 되어있습니다.
각 속성의 타입이 다르기 때문에 타입에 맞게 컬러를 설정해야 하는 것까지는 이해해볼 수 있을 거 같아요!
여기서 조금 이상한 점은(?)
같은 뷰 객체인데도 불구하고 backgroundColor는 뷰 객체에서 직접 접근하는 반면에
borderColor는 뷰 객체의 layer에 접근하고 있다는 사실입니다.
borderColor를 뷰 객체에서 직접 접근해보면 이렇게 오류가 발생해요!
Value of type 'UIView' has no member 'borderColor'
(UIVIew는 borderColor가 없다....!? 🤯)
뷰인데 왜 없어요...
(라고 저는 생각했습니다.)
CALayer
UIView는 borderColor가 없으니 layer를 통해서 접근하게 되는데,
그럼 이 layer라는 건 뭐냔 말입니다?
UIView layer의 타입을 확인해보면 CALayer라고 되어있어요.
앞서 UIColor는 UIKit, CGColor는 Core Graphics의 하위 요소임을 확인했었죠!
CA는 Core Animation(코어 애니메이션)의 약자입니다.
CALayer는 Core Animation의 하위 요소에요.
Core Animation
Render, compose, and animate visual elements.
CGColor를 알아보면서 Core Graphics를 잠깐 살펴봤었는데
Core Graphics는 Quartz 드로잉 엔진을 기반으로 하고 있고, Quartz 드로잉 엔진은 Core Animation도 관여하고 있습니다.
UIView를 투명색 필름지라고 생각해본다면 분명 존재는 하지만 투명해서 아무것도 보이지 않을 거에요.
개발자는 UIView를 통해 화면을 구성하지만, 정확하게 이야기하자면 UIView에 컨텐츠를 그리는(draw) 행위를 직접 하지 않습니다.
Core Animation에 위임하게 되어요!
그리는 것은 Core Animation이 하위 요소인 CALayer를 통해 컨텐츠를 그리고
그 layer를 가지고 있는 UIView를 통해 개발자가 화면을 핸들링 하는 것이죵!
그래서 이 layer를 통해 접근하는 것들은 layer의 타입인 CGLayer와 맞춰주기 위해서 CGColor를 사용해주어야 합니다.
마무리
UIColor와 CGColor 차이에 대해 이해하셨나요?
저는 이 차이를 알고나니 무조건 컴파일 결과에 따라 시키는대로 수정하는 거보단
왜 해야하는지를 알고 수정하니 더 납득이 가능한 개발을 할 수 있을 거 같습니다 🤓
부족하거나 잘못된 부분이 있다면 댓글로 피드백 부탁드려요!
참고자료
UIColor - Apple Developer
cgColor - Apple Developer
UIKit - Apple Developer
Core Graphics - Apple Developer
NSObject - Apple Developer
iOS) CGColor와 UIColor의 차이
iOS) CALayer 제대로 이해하기
Cocoa Touch의 Root 클래스인 NSObject 클래스에 대해서
Core Graphics
