Written by doremin
on June 19, 2025

CPU Based Animation vs GPU Based Animation

1. 문제의식: iOS앱에서 애니메이션을 구현할 때 CPU를 써야 할까, GPU를 써야 할까?

UIKit에서 애니메이션을 만들 때 UIView.animate나 CABasicAnimation을 쓰면 부드럽게 동작한다.
하지만 실시간 제어가 필요한 경우엔 CADisplayLink로 직접 위치를 계산해야 할 때도 있다.
그렇다면 다음과 같은 질문이 생긴다.

애니메이션을 구현할 때 CPU기반으로 구현하는 것과 GPU 기반으로 구현하는 것이 무슨 차이일까?

이 질문을 검증하기 위해 태양-지구-달의 공전 구조를 가진 태양계 모델을 구현해보고,
CADisplayLink 기반 애니메이션과 Core Animation 기반 애니메이션을 각각 실험했다.

2. 실험 구성: 태양계 모델로 비교해보자

2.1 태양계 구조

태양(sun): 고정된 중심
지구(earth): 태양을 중심으로 공전, 자전
달(moon): 지구를 중심으로 공전, 자전

2.2 Graphics 관점의 모델링

컴퓨터 그래픽스에서 이러한 계층 구조는 transform matrix의 곱셈으로 표현된다.

$$ M_{\text{earth}} = M_{\text{sun}} \cdot T(r_{\text{earth}}) \cdot R_{\text{earth}} \cdot x_{\text{earth}} \\ $$ $$ M_{\text{moon}} = M_{\text{earth}} \cdot T(r_{\text{moon}}) \cdot R_{\text{moon}} \cdot x_{\text{moon}} $$

자전은 이동(T) 공전 구조는 회전(R) 으로 구현.

T: Translation Matrix
R: Rotation Matrix
M: Model Matrix r: 반지름

3. 실험 A: CPU 기반 (CADisplayLink) 구현

CADisplayLink는 화면 주기에 맞춰 매 프레임마다 특정 메서드를 호출해주는 타이머다.
이 메서드 안에서 sin, cos 연산으로 지구와 달의 위치를 매번 수치 계산해서 뷰의 위치를 갱신한다.

@objc private func updateOrbit() {
    let earthSpeed: CGFloat = .pi / 180
    let moonSpeed: CGFloat = .pi / 90

    earthAngle += earthSpeed
    moonAngle += moonSpeed

    let earthRadius: CGFloat = 120
    let moonRadius: CGFloat = 40

    let earthX = cos(earthAngle) * earthRadius
    let earthY = sin(earthAngle) * earthRadius

    let earthTransform = CGAffineTransform.identity
        .rotated(by: earthAngle)
        .translatedBy(x: earthX, y: earthY)
    earthView.transform = earthTransform

    let moonX = cos(moonAngle) * moonRadius
    let moonY = sin(moonAngle) * moonRadius

    let moonTransform = earthTransform
        .rotated(by: moonAngle)
        .translatedBy(x: moonX, y: moonY)
    moonView.transform = moonTransform
}

✅ 정밀한 제어 가능 (실시간 위치, 속도, 제스처 연동 등)
❌ 매 프레임마다 계산이 필요해서 CPU 부하가 높아짐
❌ 메인 스레드에서 행렬 계산 및 적용 -> 메인 스레드 부하

UIKit

4. 실험 B: GPU 기반 (Core Animation) 구현

CABasicAnimation을 이용해 회전 애니메이션을 GPU에 위임할 수 있다.
레이어 계층을 구성하여, earthView.layer를 orbitLayer 안에 두고,
orbitLayer에 회전 애니메이션을 주면 결과적으로 지구가 태양을 중심으로 회전하는 것처럼 보인다.

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = Double.pi * 2
animation.duration = 10
animation.repeatCount = .infinity
orbitLayer.add(animation, forKey: "earthOrbit")

✅ GPU가 애니메이션을 관리 → CPU 부하 없음
✅ 코드가 간결하고 반복 애니메이션에 적합
❌ 실시간 제어 어려움 (위치 변경, 속도 조절, 인터랙션 연동 복잡)

5. CPU vs GPU 비교 정리

항목	`CADisplayLink` (CPU)	`Core Animation` (GPU)
제어 유연성	✅ 높음 (실시간 제어 가능)	❌ 제한적 (duration, timingFunction 중심)
성능 부하	❌ CPU 계산 지속	✅ GPU 위임
배터리 효율	❌ 낮음	✅ 높음
인터랙션 대응	✅ 쉬움	❌ 어려움
적합한 상황	제스처 연동 애니메이션	반복 애니메이션

6. CPU vs GPU 성능 비교

사진이 잘 안보이지만 CPU 기반은 지속적으로 3~10% 의 resource를 차지하지만, GPU 기반은 CPU 사용이 0%에 가까운 모습이다.

7. 결론: 어떤 방식을 언제 선택할 것인가?

UIKit 애니메이션에서는 “CPU를 쓸지, GPU에 맡길지”를 상황에 따라 구분해야 한다.

실시간 제어, 유저 인터랙션 요소가 있는 경우 → CADisplayLink
반복 애니메이션, 간단한 움직임, 배터리 효율이 중요한 경우 → Core Animation

특히 iOS 앱은 메인 스레드를 가볍게 유지하는 것이 성능 유지의 핵심이기 때문에,
가능한 한 GPU에 위임하고, CPU 연산은 백그라운드에서 처리하거나 최소화하는 것이 좋다.

전체 코드: 깃허브

← → Top