모바일 앱에서 Layer — 개념, 유형 및 작동 방식

모바일 그래픽에서 Layer란 무엇인가?

Layer는 화면 조각의 비트맵 이미지를 저장하고 위치, 크기, 회전, 불투명도, 그림자 및 색상과 같은 시각적 속성을 관리하는 저수준 그래픽 시스템 객체입니다. iOS에서 각 UIView에는 layer 속성을 통해 액세스할 수 있는 내장 CALayer가 있습니다. 개발자는 UIView를 거치지 않고 레이어로 직접 작업하여 세밀한 렌더링 제어를 할 수 있습니다.

레이어 아키텍처는 Model-View-Controller 패턴을 따르며, CALayer가 Model 역할을 합니다. 시각적 속성의 상태를 저장합니다. Core Animation은 상태 간 애니메이션 전환을 관리하는 Controller입니다. View(UIView)는 터치 처리 및 Auto Layout 참여를 추가하는 선택적 래퍼입니다.

Apple WWDC 2024에 따르면, 최신 iOS 렌더링 파이프라인은 레이어 합성에 Metal을 사용합니다. 각 CALayer는 별도의 버퍼로 렌더링된 후 Core Animation이 불투명도와 블렌딩 모드를 고려하여 모든 버퍼를 최종 이미지로 합성합니다.

Android에서 레이어의 유사체는 View와 배경 Drawable이지만, 그래픽 레이어로 직접 작업하는 것은 Android 10+의 Canvas와 RenderNode를 통해 가능합니다. 두 플랫폼 모두에서 렌더링을 최적화하려면 레이어 개념을 이해하는 것이 중요합니다.

Layer와 View의 차이점

주요 차이점은 책임 영역에 있습니다. View는 사용자 입력(터치, 제스처), 위치 지정(Auto Layout, frame) 및 생명 주기를 처리합니다. Layer는 시각적 표현(콘텐츠 렌더링, 속성 애니메이션 및 다른 레이어와의 합성)만을 전담합니다.

이러한 분리를 통해 View와 독립적으로 레이어의 비트맵 표현을 캐시할 수 있습니다. 레이어가 변경되지 않으면 Core Animation은 drawRect를 호출하지 않고 캐시된 프레임을 사용합니다. 정적 요소의 경우 코드 변경 없이 상당한 성능 향상을 제공합니다.

iOS와 Android의 주요 레이어 유형

iOS는 CALayer에서 파생된 풍부한 클래스 계층 구조를 제공합니다. 각 하위 클래스는 특정 시나리오(텍스트 표시, 벡터 그래픽, 그라데이션 또는 3D 변환)에 최적화되어 있습니다. 올바른 레이어 유형 선택은 렌더링 성능에 직접적인 영향을 미칩니다.

• CALayer — 배경색, 테두리 및 그림자가 있는 직사각형 영역의 기본 레이어.
• CAShapeLayer — CGPath를 통해 벡터 모양을 렌더링하는 레이어. 별도의 버퍼를 만들지 않고 GPU에서 렌더링됩니다.
• CATextLayer — 서브픽셀 렌더링 및 글리프 캐싱으로 텍스트를 표시하는 레이어.
• CAGradientLayer — 하드웨어 가속으로 선형 및 방사형 그라데이션을 위한 레이어.
• CAReplicatorLayer — 지정된 오프셋으로 하위 레이어의 복사본을 자동으로 생성하는 레이어.

Android에서 레이어 개념은 RenderNode, ViewLayer 및 HardwareRenderer를 통해 구현됩니다. Android 5.0(API 21)부터 각 View는 자체 하드웨어 가속 레이어로 렌더링되어 onDraw를 호출하지 않고 애니메이션을 실행할 수 있습니다.

iOS의 추가적인 유연성은 CAReplicatorLayer와 CAEmitterLayer에 의해 제공됩니다. 전자는 반복 패턴 생성에, 후자는 입자 시스템에 사용됩니다. 둘 다 GPU에서만 실행되어 성능 저하 없이 복잡한 시각 효과를 만들 수 있습니다.

레이어 계층 구조와 장면 합성

iOS의 레이어 계층 구조는 트리 구조를 따릅니다. 각 CALayer는 여러 하위 서브레이어를 포함할 수 있습니다. 상위 레이어에 적용된 모든 변환(크기 조절, 회전, 이동)은 자동으로 하위 요소에 적용되어 애니메이션 중 시각적 일관성을 보장합니다.

장면 합성은 Core Animation에 의해 다음 순서로 수행됩니다. 먼저 배경이 렌더링된 다음 각 하위 레이어가 아래에서 위로 순서대로 렌더링됩니다. 각 레이어에 대해 Core Animation은 불투명도, 마스크 및 블렌딩 모드 속성을 확인한 후 최종 프레임으로 합성합니다.

Apple Documentation에 따르면, opaque = true이고 알파 채널이 없는 레이어의 합성은 추가 패스 없이 수행됩니다. GPU는 단순히 이전 레이어 위에 픽셀을 복사합니다. 레이어에 투명도가 있는 경우 GPU는 알파 블렌딩을 수행하므로 추가 계산 리소스가 필요합니다.

Android에서 레이어 합성은 SurfaceFlinger를 통해 수행됩니다. 이는 각 애플리케이션에서 버퍼를 수신하고 z-순서에 따라 합성하는 시스템 서비스입니다. Android의 각 Window는 여러 그래픽 레이어를 포함할 수 있는 별도의 Surface입니다.

마스크와 레이어 클리핑

CALayer.mask — 레이어에 임의 모양의 마스크를 적용할 수 있는 속성입니다. 마스크는 다른 CALayer(예: 원형 경로가 있는 CAShapeLayer 또는 부드러운 투명도 전환을 위한 CAGradientLayer)일 수 있습니다. 마스크를 사용하면 각 픽셀의 알파 값을 계산하기 위해 추가 렌더링 패스가 필요하므로 GPU 부하가 증가합니다.

간단한 직사각형 클리핑의 경우 cornerRadius와 masksToBounds를 사용하는 것이 좋습니다. mask 속성을 통한 마스크와 달리 cornerRadius는 래스터화 단계에서 하드웨어에 의해 처리되며 추가 패스가 필요하지 않습니다.

레이어 성능: 렌더링 및 캐싱

shouldRasterize는 성능 최적화를 위한 핵심 CALayer 속성입니다. shouldRasterize를 true로 설정하면 Core Animation이 레이어와 모든 서브레이어를 별도의 오프스크린 버퍼로 렌더링합니다. 후속 프레임에서는 다시 렌더링하는 대신 캐시된 비트맵 이미지를 사용합니다.

캐싱은 정적이거나 거의 변경되지 않는 레이어(그림자, 그라데이션, 둥근 모서리의 텍스트)에 효과적입니다. 그러나 자주 업데이트되는 레이어(애니메이션, 비디오, 스크롤)의 경우 각 프레임에서 캐시 재생성이 필요하므로 래스터화가 성능을 저하시킬 수 있습니다.

Objc.io의 연구에 따르면, iPad Pro에서 shouldRasterize를 올바르게 사용하면 복잡한 화면의 렌더링 시간이 25ms에서 8ms로 3배 이상 감소합니다. 핵심 조건은 레이어가 3~5프레임에 한 번 이상 변경되지 않아야 한다는 것입니다.

• Opaque = true — 레이어가 불투명함을 Core Animation에 알려 알파 블렌딩을 제거합니다.
• drawsAsynchronously — 메인 스레드를 차단하지 않고 복잡한 레이어의 비동기 렌더링을 활성화합니다.
• allowsEdgeAntialiasing — 변환된 레이어의 가장자리 앤티앨리어싱을 활성화하지만 GPU 부하를 증가시킵니다.
• allowsGroupOpacity — 하위 레이어의 그룹 불투명도를 제어합니다.

Swift와 Kotlin에서 레이어 작업 예제

첫 번째 예제는 Swift에서 CALayer의 기본 시각적 속성(모서리 둥글림, 그림자 및 테두리) 설정을 보여줍니다:

import UIKit

class StyledView: UIView {
    override func awakeFromNib() {
        super.awakeFromNib()
        layer.cornerRadius = 12
        layer.masksToBounds = false
        layer.shadowColor = UIColor.darkGray.cgColor
        layer.shadowOpacity = 0.3
        layer.shadowOffset = CGSize(width: 0, height: 4)
        layer.shadowRadius = 8
    }
}

두 번째 예제 — CABasicAnimation을 사용하여 Swift에서 레이어 애니메이션 만들기. UIView의 개입 없이 position 속성이 애니메이션됩니다:

let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = NSValue(cgPoint: CGPoint(x: 0, y: 0))
animation.toValue = NSValue(cgPoint: CGPoint(x: 150, y: 300))
animation.duration = 1.0
animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
targetLayer.add(animation, forKey: "moveAnimation")

세 번째 예제 — Android에서 Kotlin의 RenderNode 작업. RenderNode는 CALayer의 직접적인 유사체로, Canvas 수준에서 그래픽 레이어를 조작할 수 있습니다:

import android.graphics.renderer.RenderNode

fun createLayer(): RenderNode {
    val node = RenderNode("customLayer")
    node.setPosition(0, 0, 300, 200)
    node.setScaleX(1.5f)
    node.setScaleY(1.5f)
    val canvas = node.beginRecording()
    canvas.drawColor(android.graphics.Color.BLUE)
    node.endRecording()
    return node
}