UIView 🆚 CALayer 차이점

안녕하세요~ 릴리이입니다😃

오늘은 비슷한 역할을 하는 것 같지만, 다른 UIView와 CALayer의 특징들과 차이점에 대해 공부해보겠습니다.

CALayer 어디서 봤더라?

UIView의 그림자(shadow)나 경계선(border)을 설정할 때, layer프로퍼티를 통해 설정했던 경험 한 번씩은 있으실 것 같습니다.

 var cellContainerView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.pink
        // 그림자
        view.layer.shadowColor = UIColor.grey.cgColor
        view.layer.shadowOpacity = Float(1)
        view.layer.shadowOffset = CGSize(width: 0, height: 1)
        view.layer.shadowRadius = CGFloat(0.5)
        // 코너 직경
        view.layer.cornerRadius = CGFloat(6)
        return view
    }()

뷰의 그림자와 테두리를 그리는데 layer를 거쳐야한다는 걸 보니,
보여지는 부분과 관련된 객체인 것 같고, 포토샵을 할 때 사용하는 layer와 비슷한 역할을 할 것 같습니다🧐

UIView, CALayer의 근본

UIView의 layer 프로퍼티는 CALayer라는 타입입니다.

var layer: CALayer { get }

CALayer는 CoreAnimation 프레임워크에 속한 객체입니다.
반면, UIView는 UIKit 프레임워크 소속이지요.

이 둘은 사실 같은 뿌리에서 파생된 객체들이라고 볼 수 있습니다.

OpenGL은 Graphic Hardware를 통해 그래픽 작업을 할 수 있는 API로, 그래픽 하드웨어에 빠르게 접근할 수 있습니다. iOS8이후로는 OpenGL대신 Metal을 사용한다. 하지만 저수준이기 때문에 단순한 작업에도 많은 코드를 필요로한다는 단점이 있지요.

그래서 등장한 것이 CoreGraphics라는 프레임워크이고,
CoreGraphics 또한 저수준이기 때문에 더 쉽게 사용할 수 있도록 CoreAnimation이라는 프레임워크가 만들어졌다고 합니다.

CoreAnimation에 그래픽을 구현하기 위한 고급 기능들이 포함되어 있었고, 모바일 어플리케이션을 만들기 쉽도록 간단하게 탄생한 프레임워크가 바로, UIKit인 것입니다.

같은 뿌리에서 컨텐츠를 보여주기위해 탄생했기 때문에 많은 공통점을 지니고 있었던 것이었군요!

주요 역할과 비슷한 점

애플 공식문서에서 소개하는 API들을 살펴보면, 제공하는 기능들이 매우 비슷한 걸 확인할 수 있었습니다.

UIView

• 사각형 영역(CGRect)안에서 컨텐츠를 관리
• 1️⃣ Drawing and animation
  • 컨텐츠를 UIKit이나 Core Graphics을 사용해서 사각 영역안에 그린다.
  • 뷰의 프로퍼티를 새로운 값을 줌으로써 애니메이션 효과를 줄 수 있다.
• 2️⃣ Layout and subview management
  • View는 0개 이상의 subview를 담을 수 있다.
  • View는 자신의 subview의 사이즈와 위치를 조정할 수 있다.
  • 오토레이아웃을 사용해서 뷰 계층구조 변화에 대응하기 위해 뷰의 resizing, repositioning 규칙을 정의할 수 있다.
• 3️⃣ Event Handling
  • UIResponder의 서브클래스이므로 터치나 다른 타입의 이벤트에 대해 응답할 수 있다.
  • gesture recognizer를 설치 할 수 있다.
• view에 변경 사항이 생기면 draw()를 호출하는데, 이 작업은 CPU의 main thread에서 일어나므로 비용이 비싸다

CALayer

• 이미지 기반의 컨텐츠를 관리
• 컨텐츠를 캡처한 비트맵을 backingstore에 캐싱한다
• 캐시된 비트맵과 관련 상태 정보를 그래픽 하드웨어에 전달한다. 그래픽 하드웨어는 새로운 상태 정보로 비트맵을 렌더링한다. 하드웨어이므로 소프트웨어보다 훨씬 빠르다
• 레이어 자체에 시각적 프로퍼티(backgroudColor, border, shadow...) 설정 할 수 있다
• 좌표적 프로퍼티(position, size, transform)설정 할 수 있다.
• 프로퍼티의 값을 변경해 애니메이션을 구현 할 수도 있다

큰 역할들에 따라 API를 한 번 비교해보았습니다.

보여지는 컨텐츠의 특성 설정

UIView	CALayer

UIView와 CALayer 모두 backgroundColor나 opaque 속성과 같이 시각적 특성, 좌표계 특성(frame, bounds...)을 설정할 수 있습니다.

그런데 CALayer가 border,shadow, anitaliasing 같이 더 많은 시각적 속성들을 조작할 수 있네요.

계층구조

UIView와 CALayer는 공통적으로 계층구조를 형성합니다.

UIView	CALayer

UIView는 superview와 subview,
CALayer는 superlayer와 sublayer로 계층구조를 정의하죠.

그리고 이런 계층구조를 관리하는 API들이 제공되고 있습니다.

디스플레이

UIView	CALayer

공통적으로 디스플레이를 업데이트하는 메서드가 제공됩니다.

레이아웃

위치와 사이즈를 결정하는 레이아웃 관련 메서드들도 제공됩니다.
두 객체 모두 constraints(제약)을 사용해 상위 객체와의 관계를 기반으로 레이아웃을 결정할 수 있습니다.
(UIKit -> NSLayoutConstraints / CALayer -> CAConstraints)
하지만, CAConstraints는 iOS를 지원하지 않습니다.

UIView	CALayer

UIView에서 autoLayout과 관련된 훨씬 많은 API들이 제공되고 있는 것을 확인할 수 있었습니다.
뿐만 아니라 CALayer에는 없는 safeArea, margin과 같은 레이아웃 가이드를 추가적으로 제공하고 있습니다.

애니메이션

공통적으로 animatable한 property(frame,bounds, alpha...)의 값을 변경시켜서 애니메이션을 구현할 수 있습니다.

UIView의 애니메이션 또한 실제로는 CoreAnimation에 의해 작동합니다.
UIView에서 제공하는 애니메이션 관련 API는 CoreAnimation의 wrapper라고 볼 수 있습니다.

UIView	CALayer

다양한 종류의 CALayer의 서브클래스

UIView가 UITextView, UIStackView, UIScrollView 등 다양한 서브클래스를 가지는 것 처럼, CALayer에도 다양한 종류의 서브클래스가 있습니다.

• CATextLayer
  string 또는 atttributed string의 간단한 텍스트 레이아웃 및 렌더링을 제공하는 레이어
• CAShapeLayer
  좌표 공간에서 cubic Bezier spline을 그리는 레이어
• CAGradientLayer
  배경색윝에 그라디언트로 모양을 채우는 레이어
• CAEmitterLayer
  작은 조각을 내뿜고, 움직이고, 렌더링하는 레이어
• CAScrollLayer
  bounds보다 큰 크기의 스크롤 할 수 있는 컨텐츠를 보여주는 레이어
• CATiledLayer
  컨텐츠의 타일을 비동기식으로 제공하는 방법을 제공, 여러 수준의 세부 정보를 캐싱하는 레이어
• CATransformLayer
  진짜 3D 레이어 계층을 만드는데 사용되는 레이어
• CAReplicatorLayer
  기하, 시간, 색상의 변화를 가진 sublayer의 복사본을 다량 생산하는 레이어
• CAMetalLayer
  Metal이 렌더링할 수 있는 Core Animation 레이어로, 일반적으로 화면에 표시됨

차이점

위에서 잠깐 언급한 것처럼 UIView는 컨텐츠의 드로잉과 애니메이션을 직접 수행하지 않고, CoreAnimation에게 위임합니다. 컨텐츠의 조작과 관련된 API들을 제공하지만 CoreAnimation을 이용하는 것이죠.

그 중 CALayer는 컨텐츠를 캡처하여 비트맵으로 backing store에 캐싱합니다. 이때 레이어의 프로퍼티에 변경이 생기면 Core Animation은 해당 레이어의 비트맵과 상태정보를 GPU로 보내고, GPU가 이 정보를 바탕으로 새로운 비트맵을 그립니다(렌더링). View의 draw(_:)가 메인스레드의 CPU를 사용하는 것과는 다르게, CPU에 부담을 주지 않는 결과를 야기합니다.

GPU 🆚 CPU

• CALayer는 GPU를 사용해 렌더링을 수행하기 때문에 CPU의 메인스레드에 부하를 주지 않습니다.
• 따라서 앱의 반응성을 저해하지 않으면서, 고주사율의 부드러운 애니메이션을 제공합니다.
• CALayer는 UIView보다 가볍기 때문에 성능상의 이점을 얻을 수 있습니다.

따라서 렌더링 성능을 높이기 위한 프로퍼티도 제공합니다.

• shouldRasterize
• drawAsynchronously

UIView는 CALayer의 delegate이다

UIView는 렌더링을 위한 rootlayer를 프로퍼티로 갖습니다.

var layer: CALayer { get }

그리고 UIView가 layer의 델리게이트CALayerDelegate입니다.

CALayerDelegate는 크게 아래와 같은 역할을 합니다.

• func display(CALayer)
  컨텐츠를 제공하는 역할
• func layoutSublayers(of: CALayer)
  layer의 bouds가 변경될 때, sublayer의 레아아웃 핸들링
• func action(for: CALayer, forKey: String) -> CAAction?
  layer 특성 변화에 따른 커스텀한 액션을 만들 수 있음

Event Handling

@MainActor class UIView : UIResponder

UIKit의 UIView는 CALayer와 달리 UIResponder의 서브클래스이기 때문에 Responder chain내에서 사용자 터치 또는 gesture 이벤트를 쉽게 핸들링 할 수 있습니다.

또한 gestureRecognizer를 사용하여 common gesture를 핸들링할 수 있습니다.

그렇다면 CALayer는 어떨까요?
UIResponder를 상속하지 않기 때문에, 바로 이벤트를 받을 순 없지만, hitTest, contains를 구현하고 있기 때문에, Layer단에서 터치 이벤트를 감지할 수는 있습니다.

기타 기능

위에서 언급한 차이점 외에도 각 객체는 아래와 같은 추가적 기능을 가집니다.

• UIView

  • Accessibility 지원
  • UIMotionEffect
  • font-sizing perferences 등등

• CALayer

  • Layer filter
  • Layer actions 등등

정리

UIView

• CALayer를 사용하는 wrapper, 실제 드로잉과 렌더링은 CoreAnimation에게 위임
• CPU의 메인스레드에서 동작
• 하나의 뷰 컴포넌트로서, 화면 위의 레이아웃, 계층 구조를 설정하기 위한 API 제공 (오토레이아웃, anchor...)
• UIResponder의 서브클래스, Responder Chain에 속하므로 사용자 이벤트 핸들링을 지원

CALayer

• 실제 GPU에서 렌더링되는 컨텐츠를 관리하는 역할
• 높은 frame rate를 유지하며, drawing, animation을 효율적으로 할 수 있음 (UIView보다 가볍고 성능이 좋음)
• 복잡한 애니메이션이나 퍼포먼스가 요구되는 작업에 효율적
• 저수준 프레임워크이므로, UIView에서 제공하지 않는 세밀한 컨텐츠 컨트롤이 가능

UIView는 컨텐츠를 보여주고, 사용자와 인터렉션할 수 있는 사각형틀을 제공하는 기본 UI Component이다.
CALayer는 UIView의 기반을 제공한다. 하지만 CALayer만 사용해서 UI를 구현할 순 없다.

UIView에서 할 수 없는 이미지간 합성, 복잡한 애니메이션, 최적화가 필요하다면, CALayer로 드로잉, 애니메이션을 구현하자

References

옛 애플 공식문서 - CoreAnimation Programming Guide
CALayer Tutorial
CALayer란
iOS) CALayer 제대로 이해하기
TUTORIAL A Beginner’s Guide to CALayer