CG, Core Graphics

안녕하세요. iOS에서 뷰를 다룰 때 자주 등장하는 CGFloat, CGRect, CGPoint 등등... CG 패밀리들을 많아 보셨을텐데요, 

이때 CG는 Core Graphics 의 약자입니다. 오늘은 이녀석이 뭔지 초심자의 입장에서 아주 가볍게 알아보겠습니다.

 

---

Core Graphics ?

Core Graphics 코어 그래픽스(이하 CG)는 2D 렌더링, 즉 2차원에서 그리는 작업 위해 사용되는 개념입니다.

공식문서를 보면 Quartz 기술을 사용해서 가볍고 정확하게 그릴 수 있다고 나오는데요, 
보면 드로잉, 그라데이션, 색상, PDF 등등 다양하고도 폭넓게 사용된다고 해요!

깊게 알면 좋겠으나 다음 기회로 넘기고 CG는 2차원을 위해 사용되는 개념이구나, iOS에서 CG가 붙은 애들은 2차원 좌표계를 그리기 위해 사용되는 애들이겠구나, 라는 정도만 알아두고 넘어갑시다!

 

CG 필수 자료구조

기본적으로 CG가 붙은 자료구조들에 대해 알아보겠습니다. 급한데 간략하게 보고 싶으시다면 제 예전 글도 참고해주세요.

4가지를 알아볼거에요. CGFloat, CGPoint, CGSize, CGRect

CGFloat

뷰를 그리는 작업은 부동 소수점 숫자를 좌표로 하는 시스템에서 이루어집니다. 뷰의 좌표 시스템에서는 정수나 Double, Float이 아닌 CGFloat이 기본 좌표값이 됩니다. 물론 CGFloat에 여러 initializer가 있어서 Double 이나 Float 으로 CGFloat을 만들 수 있습니다.

let cgf = CGFloat(aDouble)

CGPoint

CGFloat 타입인 변수 x, y 가 들어있는 구조체 입니다.

CGSize

CGFloat 타입의 높이, 너비가 들어있는 구조체 입니다.

CGRect

CGPoint와 CGSize를 결합한 구조체 입니다. CGRect는 직사각형을 뜻합니다. 뷰를 이루는 기본 단위라고 생각하시면 되는데 많은 init과 메소드를 가지고 있습니다.

struct CGRect {
  var origin: CGPoint
  var size: CGSize
}

// example
var minY: CGFloat  // 왼쪽 위 모서리
var midY: CGFloat  // 수직 중간 값
intersects(CGRect) -> Bool  // 다른 직사각형과 겹치는지 확인
intersect(CGRect)  // 두 직사각형이 겹치는 부분을 리턴
contains(CGPoint) -> Bool  // 해당 점이 포함되는지 확인

 

좌표 시스템

좌표 시스템이란 뷰가 그려지는 2차원 평면공간을 의미합니다.
수학에서 나오는 그 좌표공간, 모눈종이. 네 맞습니다 바로 그거에요. 

iOS 에서 좌표계는 왼쪽 위 (0, 0) 을 시작점으로 합니다.

아이폰 앱의 화면을 생각하면 왼쪽 위 모서리를 (0, 0)으로 생각할 수 있겠네요.
하지만 더 세부적으로 보면 그 안에 있는 뷰 각각도 자신의 왼쪽 위 모서리를 기준으로 생각할 수 있습니다. 
따라서 각각의 뷰들은 각각 자신의 좌표 시스템을 가지고 있습니다.

 

CGRect 구조체를 보면 var origin: CGPoint 라는 변수를 가지고 있습니다. 뷰의 기준점? 정도로 생각하시면 될 것 같아요.

뷰에서 origin이라 함은 기준이 되는 왼쪽 상단을 뜻합니다.
앞서 말씀드린 대로 각각의 뷰는 자신의 좌표 시스템을 가지고 있으므로 당연히 자신의 기준점인 origin도 갖게 됩니다.

 

단위는 points, not pixels

좌표계의 단위는 포인트 points 라고 합니다.
주의할 점은 포인트 == 픽셀 이 아니라는거에요. 픽셀 pixels 과는 다른 개념입니다.

좌표계에서 (0,0), (1, 5) 같은 각 점을 포인트라고 한다면,
픽셀은 그 포인트 마다 그려낼 수 있는 점들을 뜻하며
한 포인트 당 픽셀이 얼마나 많냐에 따라 해상도가 결정됩니다.

픽셀은 스크린을 구성하고 있는 작은 점으로 레티나 디스플레이 같은 화면에는 픽셀이 많아 해상도가 높습니다.
픽셀이 많으면 좋은 이유는 포인트의 경계를 그릴 때 더 세세하게 그릴 수 있기 때문입니다.
(0,1) 포인트에서 (0, 2) 포인트로 옮겨간다고 할때, 저 해상도에서는 픽셀을 하나씩 찍는다고 한다면 고해상도에서는 픽셀이 더 많아서 27.2, 27.5 등 더 세세하게 그릴 수 있습니다. 당연히 더 매끄럽게 그릴 수 있겠죠.

 

bounds 와 frame

bounds는 뷰가 가지고 있는 CGRect 타입의 변수 입니다. 계속해서 말씀드리지만 뷰는 각각 자신의 좌표계를 가지고 있습니다.
bounds 는 자기 자신에 대한 좌표계 정보입니다. 즉, 기본적으로 bounds의 origin은 항상 (0, 0)이 되고 자신의 너비와 높이를 가지고 있습니다. 따라서 뷰를 그릴 때는 bounds를 사용합니다.

이와는 다르게 frame 변수도 있는데, frame은 드로잉과는 전혀 관계가 없습니다. frame도 CGRect 타입이지만 슈퍼 뷰에서 자신이 어디 있는지를 나타냅니다. frame은 자신의 좌표계가 아니라 슈퍼 뷰의 좌표계를 말합니다.

또 비슷하게 center 또한 지금 드로잉하는 영역의 중심이 아니라 슈퍼 뷰의 입장에서 본 해당 뷰의 중심을 의미합니다.

즉 frame과 center는 지금 어디서 그리고 있는지에 대한 위치 정보를 나타내고, bounds는 지금 그리는 곳에 대한 드로잉 정보를 나타냅니다.

frame과 bounds의 높이와 너비가 같다고 생각할 수 있는데, 같을 필요가 없고 항상 같지도 않습니다.

뷰를 회전한다고 생각하면 뷰 자체의 높이와 너비는 변하지 않기 때문에 bounds는 그대로겠지만,
회전하는 영역을 모두 감싸야 하기 때문에 frame은 더 커집니다.

 

이상 간단하게 CG가 무엇인지 CG가 사용되는 2차원 좌표 시스템과 관련된 간단한 개념에 대해 알아봤습니다. 
iOS를 하면서 반드시 알아야 되는 개념이고 잘 아는 개념이지만, 제대로 모르면 자주 헷갈리는 개념들이기도 합니다. 
저도 정리하면서 대충 알고 있거나 제대로 모르고 있었던 내용들도 꽤 있었네요.

조금이라도 도움이 되셨으면 좋겠습니다! 감사합니다 :)