iOS ) CGColor와 UIColor의 차이

안녕하세요 :) Zedd입니다!!

정~~말 예전에 썼던  < 텍스트뷰 테두리 둥글게/버튼 둥글게 > 글에서

이랬었죠...오늘에서야 이 궁금증을 풀 수 있게 됐네요 ㅎㅎ..

아무튼 오늘은 궁금했던 CGColor와 UIColor의 차이점에 대해서 알아볼거에요 :)

시작할게요!

CGColor VS UIColor 

---

● CGColor

정의 :  색상(color)을 해석하는 방법이 명시되어있는 색상 공간(color space)이 있는, 색상(color)을 정의하는 요소의 집합입니다. 

혹시 왜 그냥 Color도 아니고, CGColor인지 아시나요?

이  Color는 "코어 그래픽스(Core Graphics) 프레임워크"와 연결되어있기 때문에 CGColor라는 이름이 붙었답니다.

CG가 붙은 여러가지 것들이 있죠. 우리가 얼마전에 배운 CGRect, CGSize, CGPoint. 이녀석들도 코어 그래픽스(Core Graphics) 프레임워크의 데이터 타입이에요.

iOS에서 "그리기"는 모두 코어 그래픽스(Core Graphics) 프레임워크가 담당합니다. 

코어 그래픽스(Core Graphics) 프레임워크에 대해 더 알고싶으신 분들은 <Core Graphics Apple문서>를 읽고오시는 걸 추천!!

여기에는 코어 그래픽스(Core Graphics)에 대한 개념과 OverView, 그리고 관련된 메소드과 데이터타입들을 볼 수 있어요,

여기에는 코어 그래픽스(Core Graphics) 프로그래밍 가이드가 있답니다 :)

정리하자면, Core Graphics가 색상을 표현하기 위해서는, 내부적으로 사용하는 기본 데이터 타입이 있는데! 그게 CGColor입니다.

색상 객체(color object)에는 색상을 고유하게 정의하는 구성요소 집합이 있습니다.(예 : R, G, B) 

또한, 해당 구성요소의 해석방법을 지정하는 색상 공간(color space)이 있습니다.

그래서 이 코어 그래픽스(Core Graphics)와 관련된 Color는 모두 CGColor로 주어야 합니다. 

● UIColor

정의 : 색상 데이터 및, 때로는 불투명도(알파값)를 저장하는 객체입니다. 

자. 먼저 CGColor처럼 우리 UIColor의 이름을 봅시다.

UI....UI라니, 어디서 많이 들어보지 않았나요?

ViewController파일에서 많이 보았죠!

UIKit!!!

네. UIColor는 NSObject를 상속받으며,  UIKit 프레임워크와 연결되어있습니다. 

Apple의 UIColor설명에 따르면,

UIKit은 빨강, 주황,노랑 등과 같은 매우 기본적인 색상에 대한 정의를 제공한다고 해요.

CGColor와 UIColor의 차이점을 문서만 봐서는 정말 모르겠어요 :)................

그래서 제 나름대로 해석해봤는데, 

CGColor는 layer와 관련있고, UIColor는 이 layer안에 있는 색을 채울 때 사용하는 것 같아요.

예를들어 View의 배경이나 그런거요!

그리고 해보다가 알았는데, label이나 button같은것도 layer라는게 있더라구요!!!

예를한번 들어볼게요!

자 제가 View의 IBOutlet을 땄어요.

먼저, CGColor는 layer와 관련이 있는 것 같다...고 말씀드렸죠!

지금 저 프로젝트를 실행해보면, 화면에 아무것도 없는 것 처럼 보일거에요. 

View가 있긴하지만, 배경색상도, 테두리 색깔도 없으니까요!

일단 테두리색상을 지정해주려면,  layer라는 아이에게 먼저 접근해야한답니다. 

그리고 

myView.layer.borderColor = UIColor.black.cgColor

이렇게 UIColor로 색상을 지정해준 뒤에!!! 그 색상을 CGColor로 변경해줘야한답니다. 

왜냐하면, 저 borderColor가

open class CALayer : NSObject, NSCoding, CAMediaTiming {
.
.
open var borderColor: CGColor?
.
.
}

layer가 상속받는 CALayer의 프로퍼티이기 때문이죠. borderColor는 CGColor를 상속받는 것을 볼 수 있습니다. 

그러니까!!! 무슨색이 되었든, 그 색은 CGColor타입이어야한다는 것이죠.

제가 잘 모르는건지..CGColor로만 색상을 지정해주는 방법은 정말 모르겠네요 ㅠㅠ

CGColor에 있는 

이 메소드를 쓰면 될 것 같은데..저거는 안보이고 밑에 두개만 뜹니다 ㅠㅠ

혹시 아신다면 댓글주세요!

자 아무튼.. UIColor로만 일단 해봅시다.

하지만, borderColor만 지정해주면, 아무것도 안바뀌는데요!!

borderWidth를 같이 지정해줘야 한답니다.

그러니까!

myView.layer.borderColor = UIColor.black.cgColor
myView.layer.borderWidth = 1.0

이렇게 해주면!

저렇게 View에 테두리가 생긴 것을 볼 수 있죠.

cgcolor를 빼는 순간,

이렇게 CGColor타입에 UIColor를 넣을 수 없다고 에러가 뜨게 됩니다.

제가 위에서 label과 button도 layer가 있다고 그랬죠?

둘다에게 borderColor와 borderWidth를 줘볼게요!

짠!! 이렇게 borderColor가 잘들어간 것을 볼 수 있죠?

자, 이제 layer와 관련있지 않은 배경색상이나, label과 button의 텍스트색상 같은건 UIColor를 줘야한댔죠?

먼저 View의 배경색상을 건들여봅시다. View의 backgroundColor는 

CALayer의 프로퍼티가 아닌, UIView의 프로퍼티네요! 그것도 UIColor타입이요!

그럼 이번엔 CGColor로 변환해줄 필요가 없겠죠?

myView.backgroundColor = UIColor.yellow

를 해주면,

짠! 배경색상이 잘 적용된 것을 볼 수 있어요.

이 배경색상을 CGColor로 변환해주는 순간 위와같이 UIColor에는 CGColor를 넣어줄 수 없다는 에러가 뜨게됩니다. 

자!! CGColor와 UIColor의 차이점을 조금 아시겠나요?

이 궁금증은 풀렸네요 이제 :)

하지만, 글을 쓰면서 궁금증이 하나 생겼는데!!! 정말 모르곘어요 ㅠㅠ

myLabel.layer.backgroundColor = UIColor.cyan.cgColor
myLabel.backgroundColor = UIColor.brown

이렇게 코드를 주면, 밑에 코드인 UIColor색상만 먹게되는데, 

(만약 저 myLabel.backgroundColor = UIColor.brown가 myLabel.layer.backgroundColor = UIColor.blue.cgColor코드 위로 가도, myLabel.backgroundColor = UIColor.brown것만 적용이 됩니다.)

하지만, myLabel.backgroundColor = UIColor.brown코드를 빼버리고 myLabel.layer.backgroundColor = UIColor.blue.cgColor만 넣어주면,

또 잘 적용이 됩니다. 

그리고, layer의 배경색상임에도 불구하고 그냥 View의 배경색상처럼 색상이 들어가요.

그러니까!! 제 궁금증을 정리하면, 

myLabel.layer.backgroundColor = UIColor.blue.cgColor
myLabel.backgroundColor = UIColor.brown
//라벨 배경색 : Brown

myLabel.backgroundColor = UIColor.brown
myLabel.layer.backgroundColor = UIColor.blue.cgColor
//라벨 배경색 : Brown (layer 배경색상을 나중에 했음에도 불구하고!)

myLabel.layer.backgroundColor = UIColor.blue.cgColor
//라벨 배경색 : blue

입니다...

흐음..위에대한 대답을 혹시 아신다면 댓글이나 PC화면 오른쪽 하단에서 볼 수 있는 채널서비스를 통해 메세지 주시면 감사하겠습니다 :)

아무튼 이 글을 통해 조금이나마 CGColor와 UIColor의 차이점을 아셨으면 좋겠네요 XD..