[iOS] view.layer의 정체를 찾아서

UIView와 CALayer

진짜 면접에서 자주 받는 질문인 UIVIew와 layer의 차이에 대해서 공식문서를 기반으로 공부해보려고 해요. 왜냐하면 저런 질문을 받았을 때 단 한 번도 명쾌하게 답변을 해본 적이 없는 것 같아서요.. 

 

블로그들을 둘러보면 UIView안에 layer가 속해져있고 이런건 잘 설명되어있는데, 근본적으로 두 개가 어떻게 다른지 와닿는 글이 없어서 공식문서를 파면서 한 번 정리해보려고 합니다. 

 

그럼 시작하겠습니다!

 

view.layer

먼저 UIView가 가지는 프로퍼티인 layer의 공식문서를 들여다볼게요.

오늘도 담백한 공식문서..ㅎㅎ 일단 새로운 키워드인 Core Animation, Rendering 을 체크해두고 디테일한 설명을 한번 확인해보죠.

디테일 하네요..ㅎㅎ 일단 layer 프로퍼티는 절대 nil이 되면 안된다고 합니다. layer 객체의 클래스는 layerClass 프로퍼티에서 반환된 값에 의해 결정되고 view는 이 레이어의 delegate라고 합니다. 일단 무슨 말인지 잘 모르겠는데 모르는 키워드들이 또 나왔어요.

 

먼저 1) layerClass 프로퍼티가 어떤 프로퍼티인지 봐야할 것 같고, 2) view가 layer의 대리자라는 말이 무엇인지 확인해봐야할 것 같아요.

 

경고에는 이렇게 나와있습니다. view는 layer의 대리자이기 때문에 뷰가 다른 CALayer 객체의 대리자가 되면 안되고, layer의 delegate를 다른 객체로 바꾸지 말라고 하네요. 이것도 아직 잘 이해가 안되지만 2번 궁금증에 대한 해답을 찾으면 자연스럽게 해결될 것 같지 않나요?

 

layerClass

먼저 layer 객체의 클래스를 결정한다는 layerClass 프로퍼티부터 확인해봅시다.

UIView 문서를 확인해보면, 이렇게 UIView의 프로퍼티 중에 layerClass라는 타입 프로퍼티가 있는 것을 확인할 수 있었어요. 설명을 읽어보면 이 클래스의 인스턴스에 대한 layer를 만드는 클래스를 반환한다고 합니다.

그리고 실제로 코드로 찍어보면 CALayer라는 값이 출력되는 것 알 수 있었습니다. 아직 잘 이해가 안되니 문서를 더 자세히 읽어봐야겠네요ㅠ

 

줄바꿈 안되어있는거 불편..

문서는 좀 더 자세히 설명해주고 있는데요, 먼저 반환 값은 뷰의 Core Animation layer를 생성하는 클래스를 반환한다고 합니다. 

 

그리고 default로는 CALayer 클래스가 반환되죠. 이 메서드를 오버라이드하면 다른 레이어 클래스를 반환하도록 할 수 있습니다. 예를 들어서 현재 뷰가 큰 스크롤 영역에 대해 타일링을 사용해야 한다면 이 메서드를 오버라이드해서 CATiledLayer를 반환하게 할 수 있습니다!

 

CATiledLayer에 대해서 짧게 찾아봤는데, 우리가 사용하는 지도 앱 같은 경우는 전체 화면을 다 그려놓고 스크롤 시키는 것이 아니라 컨텐츠를 화장실 타일처럼 네모칸으로 나누어두고 각각 lazy하게 로딩 한다고 합니다. 이럴 때 사용하는 layer가 CALayer의 서브 클래스인 CATiledLayer라고 하네요. 결국 어떤 특수한 목적의 레이어가 필요할 때는 오버라이딩으로 해당 레이어가 반환되게 만들면 된다는거죠.

 

그리고 이 메서드는 뷰를 처음 만들 때 뷰에 대응되는 layer 객체를 만들기 위해 한 번 불리는 메서드라고 합니다. 

 

정리 - layerClass

오케이 그럼 지금까지 알아본 내용을 정리해봅시다. 

 

1) UIView는 layer 프로퍼티를 가지고 있다. 

2) layer는 뷰를 만들면서 같이 만들어지고 layerClass 타입 프로퍼티를 통해 어떤 종류의 layer를 생성할지 결정된다. 

3) layerClass는 기본 값으로 CALayer를 가지고 있고, 이 프로퍼티를 오버라이딩하면 원하는 layer를 반환하게 할 수도 있다.

 

view는 layer의 delegate

그럼 이제 두번째 궁금증이었던 view는 layer의 delegate가 어떤 의미인지 알아봅시다!

 

근데 이 문제를 해결하려면 일단 layer가 어떤 녀석인지 부터 알아야할 것 같네요. layer로 잠시 넘어갔다가 이 명제로 돌아오는게 좋을 것 같습니다. 

 

CALayer

아까 layer의 타입이 CALayer였죠? 

그리고 여기서 처음만났던 용어인 Core Animation과 rendering도 이해해보는 것을 목표로 해보자구요. 

 

일단 CALayer의 정의로 넘어가보겠습니다.

일단 NSObject를 상속받고 있으니 최상위 타입이겠네요. 설명을 읽어보면 CALayer는 이미지 기반의 컨텐츠를 관리하고 해당 컨텐츠들에 애니메이션을 적용할 수 있도록 해주는 객체라고 합니다. 역시 이번에도 추상적이에요..

디테일한 설명으로 넘어오겠습니다. 

 

먼저 레이어는 주로 뷰의 backing store를 제공하는 용도로 사용하지만 어떤 경우에는 뷰가 없이도 컨텐츠를 표시하기 위해 사용될 수도 있다고 합니다. 레이어의 주요한 임무는 개발자가 제공하는 시각적인 컨텐츠를 관리하는 것이지만 동시에 레이어 스스로가 가지고 있는 시각적인 속성들도 있어요. 예를 들면 배경색이나 테두리 관련 속성, 그림자 속성 같이요.

 

레이어의 임무가 시각적인 컨텐츠를 관리하는 것이라고 했는데요, 이를 위해서 레이어는 컨텐츠의 위치, 사이즈, 변형 정보들을 보관합니다. 이렇게 레이어가 가지고 있는 정보들을 변경하면 애니메이션을 사용할 수 있게 되죠. 

 

레이어 객체는 레이어의 속도가 애니메이션 시간, 애니메이션 정보를 CAMediaTiming 프로토콜을 채택하는 것으로 캡슐화해요. 이 프로토콜은 레이어가 가지는 시간정보를 사용할 수 있도록 하죠. 

 

레이어 객체가 뷰에 의해 생성되면, 뷰는 자기 자신을 레이어의 대리자로 만들게 됩니다. 그리고 개발자는 이 관계를 절대로 변경하면 안됩니다.

 

만약 레이어를 뷰를 통해서가 아니라 직접 만들었다면 delegate에 어떤 객체를 할당해서 원하는대로 레이어를 조작할 수 있습니다. 

 

마지막으로 레이어는 레이아웃을 관리하는 객체를 layoutManager 프로퍼티에 할당하고 레이어의 하위 뷰들을 별도로 관리하게 할 수도 있습니다.

 

정리 - CALayer  

새로운 정보들이 밀려드는데요.. 정리를 한 번 해봅시다.

 

1) 레이어의 용도는 주로 backing store이지만 뷰 없이 컨텐츠를 그릴 때 사용할 수도 있다.

2) 레이어의 주요한 역할은 시각적인 컨텐츠를 관리하는 것이다. 자체적으로 배경색이나 테두리 같은 시각적인 속성을 가지고 있기도 하다.

3) 레이어는 컨텐츠의 크기, 위치, 변형 정보를 보관한다. 이 값들을 변경하는 것을 통해서 애니메이션이 만들어진다.

4) 뷰는 레이어를 만들면서 자동으로 자기자신을 레이어의 delegate로 할당한다. 그리고 이 관계는 절대로 변경하면 안된다. 

 

layoutManager나 CAMediaTiming 프로토콜은 더 깊게 가지 않고 원래 알고자 했던 CALayer와 view는 layer의 delegate에 집중해보겠습니다. 

 

Core Animation

레이어가 backing store라는 말도 잘 모르겠고, 뷰와의 관계도 확실히 모르겠어서 Core Animation 문서를 들여다보았습니다.

코어 애니메이션은 프레임워크이네요. 코어 애니메이션은 CPU에 부담을 주거나 앱을 느리게 하지 않고 높은 프레임과 부드러운 애니메이션을 제공한다고 합니다. 애니메이션을 사용했을 때 그려지는 각 프레임들을 코어 애니메이션에서 다 해준다고 하네요.

 

개발자가 할 일은 애니메이션이 어느 지점에서 시작해서 어느 지점에서 끝나는지와 같은 파라미터를 정해주는 것이고, 그 외에 모든 일들은 코어 애니메이션에서 대신 해주게 됩니다. 그리고 렌더링을 가속하기 위해서 그래픽 하드웨어(GPU를 말하는 것이겠죠!)를 사용합니다.

 

오키.. 일단 코어 애니메이션은 프레임워크라는 것, 그리고 GPU를 이용해서 렌더링을 가속화하고 부드러운 프레임과 애니메이션을 지원하는 것까지 알게되었습니다. 

 

가이드 문서에서 더 자세히 확인하라고 하니 들어가봅시다.

코어애니메이션에 대해서 더 자세히 설명해주고 있네요! 눈에 띄는 문장이 있는데, 코어 애니메이션은 앱의 뷰를 대체할 수 없다고 합니다. 대신 코어 애니메이션은 뷰가 가진 컨텐츠와 애니메이션을 더 좋은 성능으로 제공하기 위한 기술이라고 해요. 

왜 대체할 수 없는지도 나와있는데요, 레이어는 효과적으로 뷰와 애니메이션을 보여주기 위한 인프라를 제공해주는 것이고 이벤트를 받거나, 직접 컨텐츠를 그리거나, 리스폰더 체인에 참여하는게 불가능해요. 그래서 사용자 인터렉션은 항상 뷰로 받아야하기 때문에 앱에서는 반드시 적어도 한 개 이상의 뷰가 필요한거죠.

 

계속해보면, 더 좋은 성능을 내기 위해서 코어 애니메이션은 뷰가 가지고 있는 컨텐츠들을 비트맵으로 바꿔서 캐싱하고, 비트맵이기 때문에 GPU에서 처리가 가능해집니다. 

 

아하! 아까 backing store가 말이 컨텐츠를 캐싱한다는 의미였군요! 그리고 GPU를 사용하기 위해서 컨텐츠를 비트맵으로 변환하구요. 

 

캐싱된 데이터를 다시 화면에 보여주기 위해서 어떻게 해야할지 고민이 들겠지만 대부분의 경우에는 저희가 인지하지 못할 뿐이지 코어 애니메이션이 모든 것을 다 해주고 있다고 합니다.

 

더 읽어볼게요!

 

우리는 코어 애니메이션을 앱의 뷰나 시각적인 객체들의 변경을 애니메이션으로 만들기 위해 사용해요. 여기서 말하는 변경은 대부분 시각적인 요소들의 프로퍼티를 수정하는 것을 의미해요. 예를 들어서 뷰의 위치, 크기, 투명도를 애니메이션과 함께 변경할 때 코어 애니메이션을 사용할 수 있습니다. 새로운 값을 지정하면 코어 애니메이션이 기존 값과 새로운 값을 가지고 애니메이션을 만들게 됩니다. 

 

만화 앱처럼 1초에 컨텐츠를 60번 변경하는 목적으로 코어애니메이션을 사용하는 것은 적합하지 않아요. 대신 코어 애니메이션을 뷰를 화면 내에서 이동시키거나 페이드 아웃/인 시키는 경우에는 사용할 수 있죠. 

 

일단 뷰의 시각적인 요소들을 변경하면서 애니메이션을 적용할 때 코어 애니메이션을 유용할게 쓸 수 있다고 이해하고 넘어가겠습니다.

 

다음은 레이어에서 컨텐츠를 그리는 것과 관련된 내용이에요. 

 

레이어들은 대부분 실제로 화면을 그리는 일을 담당하지는 않아요. 대신 아까 설명했던 것 처럼 컨텐츠들을 캡쳐하고 이걸 비트맵으로 만들어서 backing store에 캐싱해두죠. 

 

만약 레이어가 가진 프로퍼티에 변경이 생기면 레이어 객체의 상태를 변경하게 됩니다. 그리고 이 변경이 애니메이션을 실행시키게 되면 코어 애니메이션은 해당 레이어의 비트맵과 상태정보를 GPU에 보내고, GPU가 이 정보를 바탕으로 새로운 새로운 비트맵을 그리게 됩니다. 

 

이렇게 그림이 제공되어 있는데요, 앱에 그림이 그려지면 레이어의 backing store에 비트맵으로 캐싱되고, 그림을 회전시키는 애니메이션이 시작되면 비트맵과 상태정보가 코어 애니메이션에서 GPU로 넘어가 GPU는 새롭게 비트맵을 그리게 됩니다. 그리고 이 비트맵이 다시 뷰가 되어서 앱에 보여지게 되는거죠.

비트맵을 다루기 때문에 저희가 일반적으로 생각하는 뷰에서 컨텐츠가 그려지는 것과는 조금 다르겠죠?

 

뷰에서 컨텐츠를 그릴 때는 draw(rect:) 메서드를 호출하게 되는데요, 이때 새롭게 뷰를 그리기 위해서 메인 스레드의 CPU를 사용하게 됩니다. 하지만 코어 애니메이션은 비트맵을 다루기 때문에 GPU에서 처리가 가능하고, 이 때문에 뷰에서 컨텐츠를 그리는 것보다 비용이 더 적게들게 됩니다.

 

정리 - Core Animation

코어 애니메이션에 대해서 기본적인 개념은 잡힌 것 같아서 정리하고 넘어가볼게요.

 

1) 코어 애니메이션이 하는 일은 컨텐츠와 애니메이션을 부드럽게 보여주는 것 

2) backing store에 뷰의 컨텐츠를 비트맵으로 바꿔서 캐싱한다.

3) 애니메이션을 시작할 때는 캐싱해둔 비트맵과 상태를 GPU에 전달하고 GPU가 새로운 비트맵을 만들어낸다.

4) view에서 컨텐츠를 그리면 메인스레드에서 CPU로 draw 메서드를 처리하기 때문에 비용이 크지만 layer는 GPU를 사용하기 때문에 비용이 크지 않다. 

 

 

그래서 view랑 layer랑 무슨 관계냐구..

휴 이제 진짜 마지막으로 view 랑 layer의 관계, delegate가 어떤 의미인지 찾아보겠습니다.

레이어에 컨텐츠를 어떻게 제공하게 되는지에 대한 자료가 있어서 한번 읽어볼게요.

 

어쨌든 실제로 컨텐츠를 보여주고 있는건 앱의 화면이고 레이어는 이 컨텐츠를 비트맵으로 가져야 하죠. 레이어에 비트맵으로 컨텐츠를 제공할 수 있는 방법이 세 가지가 있다고 합니다.

 

1) 레이어 객체의 contents 프로퍼티에 이미지 객체를 할당한다. 만약 레이어가 가진 컨텐츠가 바뀔 일이 별로 없으면 이 방법이 가장 좋다고 하네요.

2) 드디어... 레이어에 delegate 객체를 주어서 해당 객체가 레이어의 컨텐츠를 그리게 할 수 있습니다. 이 방법은 레이어의 컨텐츠들을 주기적으로 바뀌고 뷰와 같은 외부 객체에서 컨텐츠가 제공될 때 사용하기에 좋은 방법이라고 합니다. 

3) 레이어의 서브클래스를 만들고 컨텐츠를 그리는 메서드를 오버라이딩해서 컨텐츠를 제공할 수 있습니다. 이 방법은 레이어의 컨텐츠를 그리는 작업을 변경하고 싶을 때 사용할 수 있다고 합니다. 

 

그리고 뷰에 레이어가 포함되어 있는 경우에는 이런 방법들에 대해서 고민할 필요가 없다고 합니다. 자동적으로 가장 적절한 방법을 사용한다고 하네요.

 

일단 저희가 궁금해하는게 2번째 방법이니까 해당 방법에 대한 구체적인 설명을 확인해볼게요.

 

만약 레이어의 컨텐츠가 자주 바뀐다면 컨텐츠가 바뀔때마다 컨텐츠를 제공해줄 수 있는 객체를 delegate로 만들라고 합니다. 화면에 display되는 시점에 레이어는 새로운 컨텐츠를 얻기 위해 두 메서드를 호출한다고 해요.

 

1) 만약 delegate의 display(layer:) 가 구현되어 있으면, 이 구현은 비트맵을 생성해서 레이어의 contents 프로퍼티에 할당하는 작업을 수행해주어야 한다고 합니다.

 

2) 만약 delegate의 draw(layer: inContext:) 메서드가 구현되어 있으면 코어 애니메이션은 비트맵을 생성하고 비트맵에 그릴 내용(graphics context)들을 생성한 뒤에 이 메서드를 호출해서 비트맵을 채우게 됩니다. 이 메서드에서 구현해야할 내용은 전달받은 graphics context에 컨텐츠를 그리는 것이죠.

Delegate 객체는 반드시 두 메서드 중 하나를 구현하고 있어야 해요. 만약 둘 다 구현되어 있다면 display(layer:)메서드가 사용된다고 합니다.

 

이 delegate는 프로토콜로 정의가 되어있는데요, 

 

앱이 레이어와 관련된 이벤트를 처리할 수 있게하는 메서드들을 담고 있다고 설명하고 있고,

 

여기서도 똑같이 레이어의 컨텐츠를 제공하기 위해서, 하위 레이어를 관리하기 위해서, 그리고 애니메이션을 제공하기 위해서라고 설명하고 있습니다. 이 프로토콜을 채택하고 구현하면 반드시 레이어 객체의 delegate에 할당이 되어야한다고 하니, UIView가 이 프로토콜을 채택하고 있다고 추측해볼 수 있겠네요.

 

역시나! 채택하고 있었습니다. 구현은 아쉽게도 확인할 수가 없네요ㅠ

 

 

아니 그래서 화면은 누가 그리냐고..

자 그럼 이쯤에서 드는 의문.. 애니메이션은 Core Animation이 비트맵으로 하는거 알겠는데 그냥 화면은 누가 그리는건데??

이번엔 View Programming Guide를 열어봤어요. 안에 이런 내용이 있더라구요. 일단 각 뷰들은 자신과 대응되는 레이어들을 하나씩 가지고 있어요. 그리고 이 레이어들은 layer 프로퍼티로 접근할 수 있죠. 그리고 이 레이어에서 화면에 보여지는 비트들이 실제로 렌더링됩니다. 

 

그래서 view에서 화면을 그리는 코드는 최대한 적게 호출되어요. 왜냐하면 Core Animation에서 캐싱해둔 비트맵을 그대로 보여주면 되니까요. 

 

이제 퍼즐이 맞춰지네요! 

 

아까 delegate에서 구현해야할 메서드의 역할이 레이어에 컨텐츠를 제공하는 것이었는데요, 화면에 변경이 있거나 처음 그려질 때 view에서 화면을 그리고, delegate 메서드를 호출해서 CALayer에 컨텐츠를 전달합니다. 그럼 CALayer는 이 컨텐츠를 캐싱해두고 있다가 필요할 때 그대로 사용하는 것이죠. 그래서 매번 뷰의 컨텐츠들을 새로 그려줄 필요가 없게 됩니다.

 

총 정리 

1) UIView는 layer 프로퍼티를 가지고 있다.

2) layer 프로퍼티는 layerClass 타입 프로퍼티에 의해 어떤 레이어가 만들어질지 결정된다.

3) UIView는 CALayerDelegate를 채택하고 있다.

4) 채택한 Delegate의 display나 draw 메서드가 화면을 보여주는 시점에 호출된다.

5) 이 메서드가 호출되면 화면에 보여줄 컨텐츠를 layer에 제공한다.

6) 레이어는 이 컨텐츠를 비트맵으로 캐싱해서 가지고 있는다.

7) 뷰가 다시 그려지거나, 애니메이션을 시작하면 GPU를 통해 캐싱된 비트맵을 사용해 새로운 비트맵을만든다.

 

마무리

사실 완벽한 정보인지 확신이 없긴해요..! 명확하지 않은 정보로 포스팅을 한 것 같아서 조금 걱정은 됩니다ㅠ. 많은 블로그에서 실제로 UIView에서는 화면을 그리지 않고 CALayer에서 모든걸 한다고 설명하곤 하는데, 그럼 "CPU를 사용해서 화면을 그린다"라는 말이 성립하지 않아서요.. 그리고 캐싱된 비트맵을 어떻게 이용하는지에 대한 부분..! CALayer에 대해서 잘 정리된 자료가 있거나 이해하고 계시다면 도와주세요!

 

공식 문서를 타고타면서 정리한 내용이라서 누락된 정보들이 있을 수도 있고 틀린 내용이 있을 수도 있어요. 만약 그렇다면 알려주시면 저도 다시 공부해서 내용을 수정해보도록 하겠습니다!

 

읽어주셔서 감사합니다~!

 

래퍼런스

https://developer.apple.com/documentation/uikit/uiview/1622436-layer

https://developer.apple.com/documentation/uikit/uiview/1622626-layerclass

https://developer.apple.com/documentation/uikit/uiview

https://developer.apple.com/documentation/quartzcore/calayer

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreAnimationBasics/CoreAnimationBasics.html#//apple_ref/doc/uid/TP40004514-CH2-SW3

https://developer.apple.com/documentation/quartzcore/calayerdelegate

https://developer.apple.com/library/archive/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/WindowsandViews/WindowsandViews.html#//apple_ref/doc/uid/TP40009503-CH2-SW9