CALayer: 개념, 핵심 원리 및 레이어 렌더링

CALayer란?

CALayer는 QuartzCore 프레임워크의 클래스로, 화면의 직사각형 영역 비트맵 이미지를 관리합니다. frame, backgroundColor, opacity, shadow, border, transform 등의 시각적 속성을 저장합니다. UIView와 달리 CALayer는 터치 이벤트를 처리하지 않으며, Auto Layout에 참여하지 않고, view controller 수명 주기가 없습니다.

아키텍처적으로 CALayer는 Core Animation 컨텍스트에서 Model 패턴을 구현합니다. 레이어는 시각적 속성의 상태를 저장하고, Core Animation은 애니메이션 중 상태 간 보간을 관리합니다. 이러한 분리를 통해 drawRect를 통해 콘텐츠를 다시 그릴 필요 없이 레이어 속성을 애니메이션화할 수 있습니다.

Apple WWDC 2024에 따르면 CALayer는 Metal을 통해 작동하도록 다시 작성되었습니다. 최신 렌더링 파이프라인에는 Commit(CPU에서 속성 업데이트), Render(CPU에서 GPU 명령 생성), Composite(GPU에서 명령 실행)의 세 단계가 포함됩니다. CALayer는 세 단계 모두에 참여하여 각 단계에 데이터를 제공합니다.

각 레이어에는 sublayers(상위 레이어 위에 렌더링되는 하위 레이어)가 포함될 수 있습니다. 레이어 계층 구조는 UIView 계층 구조를 반영하지만 독립적으로 존재할 수 있습니다. 개발자는 CALayer()를 통해 UIView와 독립적으로 레이어를 만들고 addSublayer를 통해 계층 구조에 추가할 수 있습니다.

CALayer와 UIView의 차이점

UIView는 CALayer를 래핑하여 UIResponder를 통한 터치 처리, Auto Layout 참여, storyboard 표현 및 UIViewController 통합을 추가합니다. CALayer는 순수하게 시각적 요소를 위해 UIView 없이 사용할 수 있는 경량 객체입니다.

실제로 요소에 터치 처리나 레이아웃이 필요하지 않은 경우 CALayer로 구현할 수 있습니다. 예를 들어 배경 애니메이션, 로딩 표시기, 장식 요소 등은 UIView 오버헤드를 피하면서 CALayer를 통해 더 효율적으로 구현할 수 있습니다.

CALayer의 주요 속성

기본 속성에는 프레임, 위치 지정, 표시 및 시각 효과가 포함됩니다. frame은 상위 좌표에서 레이어의 직사각형 영역을 정의하고, bounds는 내부 좌표를 정의하며, position은 레이어의 중심을 정의합니다. position 변경은 기본적으로 암시적 애니메이션을 통해 애니메이션화됩니다.

• backgroundColor — 레이어의 배경색(CGColor). opaque = true로 불투명 색상을 설정하면 알파 블렌딩이 필요하지 않습니다.
• cornerRadius — 모서리 둥글림. 추가 렌더링 패스 없이 하드웨어 처리됩니다.
• borderWidth 및 borderColor — 레이어 테두리. GPU에서 렌더링되며 drawRect가 필요하지 않습니다.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — 그림자. 명시적 shadowPath는 렌더링을 크게 가속화합니다.
• opacity — 레이어 투명도(0.0~1.0). drawRect를 호출하지 않고 애니메이션화됩니다.
• transform — 2D 및 3D 변환을 위한 CATransform3D. 원근 왜곡을 지원합니다.

contents 속성을 사용하면 비트맵 콘텐츠를 직접 설정할 수 있습니다(CGImage 또는 CIImage를 통해). 이는 drawRect를 통한 그리기의 대안입니다. 이미지가 이미 준비된 경우 contents에 전달하면 Core Animation이 추가 처리 없이 렌더링합니다.

애니메이션에는 CABasicAnimation, CAKeyframeAnimation 및 CATransition이 사용됩니다. 이러한 모든 클래스는 CALayer 속성 키 경로를 통해 작동하여 position부터 transform.rotation.z까지 거의 모든 속성을 애니메이션화할 수 있습니다.

CALayer 하위 클래스 및 목적

Apple은 각각 특정 작업을 해결하는 여러 특수 CALayer 하위 클래스를 제공합니다. 기본 CALayer 대신 적절한 하위 클래스를 선택하면 하드웨어 가속을 통해 상당한 성능 향상을 얻을 수 있습니다.

• CAShapeLayer — GPU에서 벡터 모양(CGPath)을 렌더링합니다. 별도의 버퍼가 필요하지 않으며, 상위 레이어 합성의 일부로 렌더링됩니다.
• CATextLayer — 서브픽셀 앤티앨리어싱을 사용한 텍스트 렌더링. 글리프를 캐시하여 반복 텍스트 표시를 가속화합니다.
• CAGradientLayer — 선형 및 방사형 그래디언트. 중간 이미지 생성 없이 하드웨어 렌더링.
• CAEmitterLayer — GPU의 입자 시스템. 각 입자는 CPU 개입 없이 별도의 요소로 렌더링됩니다.
• CAReplicatorLayer — 위치, 색상 및 시간에 구성 가능한 오프셋으로 하위 레이어 복사본을 자동 생성합니다.
• CATiledLayer — 타일별 대형 이미지 렌더링. 보이는 부분만 로드하여 표시합니다.

CAReplicatorLayer는 코드 중복 없이 반복 패턴을 만드는 데 특히 유용합니다. 예를 들어 10개의 점이 있는 로딩 표시기는 instanceCount = 10 및 애니메이션 시간 오프셋 instanceDelay를 사용하는 하나의 CAReplicatorLayer로 구현됩니다.

CALayer 렌더링 및 합성

CALayer 렌더링은 세 단계로 진행됩니다. Commit — 레이어 속성이 변경되면 CPU에서 변경 배치가 형성됩니다. Render — Core Animation이 레이어 속성에 기반하여 CPU에서 Metal 명령을 생성합니다. Composite — GPU가 명령을 실행하고 프레임을 화면에 출력합니다. 전체 프로세스는 디스플레이 새로 고침 빈도와 동기화됩니다.

여러 레이어의 합성 중에 GPU는 투명도, 마스크 및 블렌딩 모드를 고려하여 최종 이미지로 병합합니다. 레이어에 opaque = true가 있으면 Core Animation이 합성을 최적화하여 알파 블렌딩 대신 단순 픽셀 교체를 수행하므로 훨씬 빠릅니다.

Apple Performance Guidelines에 따르면 CALayer 렌더링을 저하시키는 주요 요인은 복잡한 sublayer 계층 구조(화면에 30개 이상의 레이어), 마스크 사용(mask 속성), shadowPath 없는 자동 그림자 계산, 동적 레이어에 shouldRasterize의 과도한 사용입니다.

XCode의 Core Animation Instrument를 사용하면 각 레이어의 렌더링 시간, 오프스크린 버퍼 수 및 drawRect 호출 빈도를 모니터링할 수 있습니다. 60 FPS를 위한 최적 렌더링 시간은 CPU에서 8ms, GPU에서 8ms를 초과하지 않습니다.

오프스크린 렌더링 및 그 영향

오프스크린 렌더링은 화면에 표시하기 전에 중간 버퍼에 레이어를 렌더링하는 것입니다. 콘텐츠와 함께 cornerRadius + masksToBounds, 그룹 불투명도, 마스크 및 shouldRasterize를 사용할 때 발생합니다. 각 오프스크린 패스는 2~5ms가 소요되므로 과도한 오프스크린 렌더링은 성능에 심각한 영향을 미칩니다.

오프스크린 렌더링을 진단하려면 Core Animation Instrument에서 Color Offscreen-Rendered 도구를 사용하세요. 노란색 레이어는 오프스크린, 파란색은 직접 화면 렌더링입니다. 오프스크린 패스를 최소화하는 것이 iOS의 주요 최적화 기술입니다.

코드 예제: Swift에서 CALayer 작업

첫 번째 예제는 그림자 생성, 모서리 둥글림 및 테두리가 포함된 기본 CALayer 설정을 보여줍니다. 렌더링 속도를 높이기 위해 shadowPath가 명시적으로 지정되었습니다:

import UIKit

func configureLayer(_ view: UIView) {
    let layer = view.layer
    layer.cornerRadius = 16
    layer.borderWidth = 2
    layer.borderColor = UIColor.systemBlue.cgColor
    layer.backgroundColor = UIColor.white.cgColor

    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOpacity = 0.2
    layer.shadowOffset = CGSize(width: 0, height: 4)
    layer.shadowRadius = 8
    layer.shadowPath = UIBezierPath(
        roundedRect: view.bounds,
        cornerRadius: layer.cornerRadius
    ).cgPath
}

두 번째 예제는 원근 3D 변환이 포함된 CABasicAnimation을 통한 transform 애니메이션을 보여줍니다. Y축 회전 애니메이션은 카드 뒤집기 효과를 만듭니다:

let flipAnimation = CABasicAnimation(keyPath: "transform")
var transform = CATransform3DIdentity
transform.m34 = -1.0 / 500.0
transform = CATransform3DRotate(transform, .pi, 0, 1, 0)
flipAnimation.toValue = NSValue(caTransform3D: transform)
flipAnimation.duration = 0.8
flipAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
cardLayer.add(flipAnimation, forKey: "flip")

세 번째 예제는 배경 그래디언트를 만들기 위한 CAGradientLayer 사용을 보여줍니다. 그래디언트는 GPU에서 렌더링되며 크기 조정 시 추가 리소스가 필요하지 않습니다:

func addGradient(to view: UIView, colors: [UIColor]) {
    let gradient = CAGradientLayer()
    gradient.colors = colors.map { $0.cgColor }
    gradient.locations = [0.0, 0.5, 1.0]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradient.frame = view.bounds
    view.layer.insertSublayer(gradient, at: 0)
}