모바일 개발에서의 그래픽 및 렌더링: 개념, 프로세스 작동 방식 및 동작 원리

그래픽 및 렌더링: CPU와 GPU 기초

렌더링은 데이터(정점, 텍스처, 셰이더)를 화면의 이미지로 변환하는 프로세스입니다. 모바일 기기에서는 CPU(중앙 프로세서) 또는 GPU(그래픽 프로세서)에서 렌더링을 수행할 수 있습니다. 선택은 그래픽 유형과 필요한 성능에 따라 달라집니다.

CPU vs GPU Rendering

CPU Rendering — 순차적 처리. 각 명령어는 하나씩 차례로 실행됩니다. CPU는 로직 및 분기에 최적화되어 있습니다. Canvas (Android), Core Graphics (iOS)는 CPU에서 작동합니다. 장점: 정밀도, 복잡한 알고리즘 지원. 단점: 그래픽 요소가 많으면 느림. GPU Rendering — 병렬 처리. 수천 개의 GPU 코어가 정점과 픽셀을 동시에 처리합니다. Metal (iOS), Vulkan (Android), OpenGL ES (두 플랫폼 모두)는 GPU를 사용합니다. 3D, 60 FPS 애니메이션 및 복잡한 효과에는 GPU Rendering이 필수입니다. 최신 UI 프레임워크 (SwiftUI, Jetpack Compose, Flutter)는 기본적으로 GPU를 사용합니다.

셰이더 (Vertex, Fragment)

셰이더는 GPU에서 실행되는 프로그램입니다. 화면에서 각 객체가 어떻게 보일지 결정합니다. 그래픽 파이프라인은 여러 단계로 구성되지만, 두 가지 주요 셰이더인 Vertex Shader와 Fragment Shader가 99%의 경우에 사용됩니다. 셰이더는 GLSL (OpenGL), MSL (Metal) 또는 HLSL (DirectX)로 작성됩니다.

Vertex Shader — 3D 모델의 정점을 처리합니다. 입력: 정점 위치, 법선, UV 좌표. 출력: 변환된 위치 (모델 → 뷰 → 프로젝션). Vertex Shader는 정점을 생성하거나 삭제할 수 없으며 변환만 가능합니다. Fragment Shader — 래스터화된 삼각형의 각 픽셀(프래그먼트) 색상을 계산합니다. 입력: Vertex Shader에서 보간된 데이터 (UV, 법선). 출력: RGBA 색상. Fragment Shader는 텍스처링, 조명 (Phong, PBR) 및 후처리 효과를 담당합니다. 최신 엔진 (Unity, Unreal)은 셰이더를 자동으로 생성하지만, 최적화를 위해서는 파이프라인 이해가 필요합니다.

Offscreen Rendering — 화면이 아닌 임시 버퍼로 렌더링. 용도: 1) 효과 (blur, shadow), 2) 텍스처로 렌더링, 3) 프레임 사전 계산. Offscreen Rendering은 비용이 높습니다: 컨텍스트 전환 및 추가 렌더링 패스. iOS는 그림자 및 cornerRadius에 대해 자동으로 Offscreen Rendering을 활성화합니다. 래스터화 — 벡터 데이터 (정점 + 셰이더)를 픽셀로 변환. 래스터라이저는 어떤 프래그먼트가 삼각형에 속하는지 결정하고 Fragment Shader를 호출합니다. 합성 — 최종 이미지로 레이어 조립. Core Animation은 CALayer를 합성하고, Android는 SurfaceFlinger 레이어를 합성합니다.

CPU — 로직 및 Canvas용. GPU — 그래픽 및 애니메이션용. IT Sectr는 움직이는 콘텐츠 (애니메이션, 전환, 스크롤)에 GPU 렌더링 사용을 권장합니다 — 안정적인 60 FPS를 보장합니다.

Core Animation (CALayer, CAShapeLayer)

Core Animation — Apple의 GPU 가속 애니메이션 렌더링 프레임워크. 기본 요소는 CALayer: 콘텐츠 (이미지, 색상, 텍스트)가 있는 직사각형 영역. CALayer는 위치, 크기, 배경색, 테두리, 그림자, cornerRadius 및 변환 (2D 및 3D)을 관리합니다. Core Animation은 GPU에서 레이어를 자동으로 합성합니다 — 개발자가 그래픽 코드를 작성할 필요가 없습니다.

CALayer

CALayer — 콘텐츠 비트맵을 포함하는 경량 객체 (뷰 아님). UIButton, UILabel, UIImageView — 모두 내부적으로 CALayer를 사용합니다. 속성: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. CALayer 속성의 애니메이션은 GPU에서 발생합니다 — 이것이 Core Animation의 주요 장점입니다. CALayer.shouldRasterize — 복잡한 그래픽을 캐싱하기 위해 레이어의 래스터화를 활성화합니다. CAShapeLayer — 벡터 그래픽용 서브클래스: GPU에서 패스를 그립니다. 진행률 표시줄, 차트, 마스크 및 셰이프 애니메이션에 사용됩니다. CAShapeLayer.path — 애니메이션 가능 속성 (셰이프 모핑 애니메이션).

합성은 Core Animation에서 — 최종 프레임으로 CALayer를 조립하는 프로세스입니다. 각 CALayer는 GPU의 개별 텍스처입니다. 합성은 Render Server (별도 프로세스)에서 발생합니다. 합성이 필요한 속성: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. 레이어가 적을수록 합성이 빠릅니다.

최적화 (Overdraw, Offscreen Rendering)

Overdraw — 하나의 프레임에서 동일한 픽셀이 여러 번 칠해지는 상황. 예: 빨간 배경 → 파란 직사각형 → 텍스트. 중앙 픽셀이 3번 그려집니다. Overdraw는 특히 오래된 기기에서 UI 지연의 주요 원인입니다. iOS: Debug Color Blended Layers (Xcode) — 빨간 영역 = 혼합 (overdraw). Android: Debug GPU Overdraw (개발자 옵션) — 파란색 (1x)에서 빨간색 (3x+)까지 색상.

Overdraw

Overdraw 줄이는 방법: 1) 불투명 뷰에 opaque = true 사용 (iOS). 2) Android — android:windowBackground를 한 번만 사용. 3) 보이지 않는 레이어 제거. 4) 계층형 아키텍처 사용: 배경 (1패스) → 콘텐츠 (2패스). 5) 불필요한 clipChildren 및 clipToPadding 피하기. Offscreen Rendering — 화면 전에 버퍼로 렌더링. 트리거: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — 노란 영역 = offscreen. Android: profile GPU rendering — 막대 길이 확인.

벡터 그래픽 (SVG, Vector Drawable)

벡터 그래픽 — 수학 공식 (패스, 곡선, 채우기)으로 설명된 이미지. 확대해도 품질이 손실되지 않아 모바일 앱의 아이콘 및 일러스트레이션에 이상적입니다.

SVG (Scalable Vector Graphics) — W3C 표준. 모바일 OS에서 직접 지원되지 않음. 변환: iOS — PDF 벡터 에셋 (Xcode 12+), Android — Vector Drawable XML로 변환. Vector Drawable — Android 형식. XML로 정의: <vector>와 <path> 및 <group>. AnimatedVectorDrawable을 통한 애니메이션 지원. PDF Vector Assets (iOS) — Assets.xcassets의 벡터 PDF. Xcode가 GPU 최적화 텍스처로 컴파일합니다. SVG 및 Vector Drawable은 복잡한 효과 (blur, gradient mesh)를 지원하지 않습니다. 사진 및 그라데이션에는 래스터 PNG/WebP를 사용하세요.