Vector Drawable: 개념, XML 형식 및 작동 방식

Vector Drawable이란?

Vector Drawable은 SVG(Scalable Vector Graphics) 사양을 기반으로 XML 형식으로 벡터 이미지를 표현하는 Android 리소스입니다. Google은 이 형식을 Android 5.0(API 21)에서 아이콘, 일러스트레이션 및 기타 그래픽 UI 요소를 위한 래스터 이미지의 대안으로 도입했습니다.

이미지가 고정 크기 픽셀 배열로 저장되는 PNG와 달리, Vector Drawable은 점 좌표, 베지어 곡선, 채우기 및 선을 통해 수학적으로 모양을 설명합니다. 즉, 단일 벡터 이미지가 다양한 화면 밀도(mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi)에 대해 최대 6개의 PNG 파일을 대체할 수 있어 그래픽 리소스 유지 관리가 획기적으로 간소화됩니다.

이 형식은 정적 이미지뿐만 아니라 AnimatedVectorDrawable을 통한 애니메이션, 테마 속성을 통한 다크 테마 적응 및 사용자 정의 색상도 지원합니다. Android 7.0(API 24)부터 Vector Drawable은 그래디언트 채우기와 복잡한 클립 작업(clipPath)도 지원하여 디자인 가능성을 확장합니다.

Vector Drawable의 주요 구성 요소

각 Vector Drawable에는 너비, 높이 및 뷰포트(모양이 그려지는 가상 좌표계) 매개변수가 있는 루트 vector 요소가 포함됩니다. 내부에는 그룹(group)과 경로(path)가 있으며, path는 일련의 명령어(M(moveTo), L(lineTo), C(cubicTo), Z(close) 등)를 통해 기하학을 정의합니다. 각 path는 고유한 fillColor와 strokeColor를 가질 수 있으며, 테마 리소스를 참조할 수 있습니다.

추가 요소에는 클리핑용 clip-path, 그래디언트 전환용 gradient, android:theme 속성을 통한 다크 테마 적응 속성이 포함됩니다. Vector Drawable의 모든 색상은 테마 속성(예: ?attr/colorPrimary)에 대한 참조로 지정될 수 있어, 리소스를 중복하지 않고 테마 전환 시 아이콘 모양을 변경할 수 있습니다.

Vector Drawable 형식: XML 구조

Vector Drawable XML 파일은 res/drawable/ 디렉토리에 배치되며 루트 요소로 를 가집니다. 내부에는 계층 구조 구성을 위한 중첩된 요소와 윤곽선 설명을 위한 요소가 있을 수 있습니다. 각 path에는 pathData 속성(SVG 경로 형식의 그리기 명령어 문자열)이 포함됩니다.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@color/ic_launcher_background"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:strokeWidth="1"
        android:strokeColor="#333333"/>

</vector>

예제에서는 24×24 뷰포트에서 반경 10단위의 원이 설명됩니다. fillColor 매개변수는 색상 리소스를 참조하고, strokeWidth와 strokeColor는 선을 정의합니다. width와 height는 dp로 지정되며, 추가 변환 없이 다양한 픽셀 밀도의 화면에서 올바른 확장을 보장합니다.

그룹화 및 변환

group 요소를 사용하면 여러 경로를 그룹화하고 회전, 이동(translateX, translateY) 및 확장/축소(scaleX, scaleY)와 같은 공통 변환을 적용할 수 있습니다. 그룹은 중첩될 수 있어 성능 저하 없이 수백 개의 요소로 구성된 복잡한 계층 구조를 만들 수 있습니다.

<vector ...>
    <group android:name="arrow_group"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="90">
        <path .../>
    </group>
</vector>

pivotX/pivotY 속성을 사용한 그룹화는 애니메이션에 사용됩니다. 다른 요소와 독립적으로 이미지의 일부를 회전하거나 확대/축소할 수 있어, 애니메이션 상태 아이콘(예: 로딩 → 성공)을 만드는 데 특히 유용합니다.

Vector Drawable vs 래스터 그래픽

벡터와 래스터 그래픽 사이의 선택은 사용 사례에 따라 다릅니다. Vector Drawable은 아이콘, 일러스트레이션 및 세부 정보가 적은 UI 요소에 이상적이며, 수천 가지 색상의 사진과 복잡한 이미지는 래스터 형식이 적합합니다.

Android Performance Patterns(Google I/O 2016)에 따르면, PNG 아이콘을 Vector Drawable로 대체하면 그래픽 리소스가 많은 애플리케이션의 APK 크기가 40~60% 감소합니다. 그러나 수백 개의 경로가 있는 복잡한 벡터를 렌더링할 때 CPU 부하가 증가하므로, 애니메이션 및 빈번한 다시 그리기의 경우 사전 캐시된 래스터를 사용하는 것이 좋습니다.

Vector Drawable을 선택해야 하는 경우

Vector Drawable은 인터페이스 아이콘(툴바, 내비게이션, 상태), 로고, 간단한 일러스트레이션 및 애니메이션 요소에 최적입니다. 이 형식은 여러 화면을 지원할 때 특히 유리합니다. 6가지 밀도에 대해 PNG를 생성하는 대신 하나의 XML 파일로 충분합니다. 이는 디자인 유지 관리를 간소화하고 크기 불일치 오류를 제거합니다. 사진 및 사실적인 그래디언트 이미지의 경우 WebP 압축을 사용하는 래스터 형식이 계속 사용됩니다.

Vector Drawable 애니메이션

Android는 두 가지 메커니즘을 통해 Vector Drawable 애니메이션을 지원합니다: AnimatedVectorDrawable(API 21부터 사용 가능)과 AnimatedStateListDrawable입니다. 전자는 경로 속성(회전, 이동, 색상 변경 및 모양 변형)을 애니메이션화할 수 있습니다. 후자는 부드러운 전환으로 다양한 상태(누름, 강조)를 전환합니다.

AnimatedVectorDrawable은 세 개의 XML 파일을 사용합니다: Vector Drawable 자체, 애니메이션을 설명하는 ObjectAnimator, 대상(그룹 또는 경로 이름)을 애니메이터에 연결하는 바인딩 AnimatedVectorDrawable입니다. 애니메이션은 fillColor, strokeColor, rotation, translateX/Y, scaleX/Y 및 pathData(한 모양을 다른 모양으로 부드럽게 변형하는 모핑)까지 변경할 수 있습니다.

모핑 애니메이션 예제

더하기 아이콘이 닫기 아이콘으로 변하는 애니메이션을 생각해 보겠습니다. 주요 제한 사항: 초기 상태와 최종 상태에서 pathData 명령어의 수가 일치해야 합니다. 그렇지 않으면 애니메이션이 작동하지 않습니다.

<!-- res/drawable/anim_plus_to_close.xml -->
<animated-vector xmlns:android="...">
    <target
        android:name="plus_path"
        android:animation="@anim/plus_to_close"/>
</animated-vector>

ObjectAnimator plus_to_close는 300밀리초 동안 pathData 속성을 원래 더하기 모양에서 닫기 모양으로 변경합니다. 시스템은 두 SVG 경로 명령어 세트 사이의 좌표를 자동으로 보간합니다. 이러한 유형의 애니메이션은 Material Design에서 버튼 및 아이콘 상태 전환을 부드럽게 하기 위해 널리 사용됩니다.

Vector Drawable 코드 예제

다크 테마를 지원하는 뒤로 가기 화살표 아이콘의 전체 XML 벡터 예제를 살펴보겠습니다. 색상은 테마 속성에 대한 참조를 통해 설정되며, 리소스를 중복하지 않고 밝은 테마와 어두운 테마 간 전환 시 아이콘 색상이 자동으로 변경됩니다.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">

    <group android:name="arrow">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
    </group>

</vector>

android:tint 매개변수 값 ?attr/colorControlNormal은 시스템 제어 색상(밝은 테마에서는 진한 회색, 어두운 테마에서는 흰색)을 자동으로 적용합니다. arrow라는 이름의 그룹은 AnimatedVectorDrawable을 통해 이 아이콘을 애니메이션화할 수 있게 합니다.

코드에서 Vector Drawable 로드

Android에서 프로그래밍 방식으로 Vector Drawable을 로드하려면 AppCompatResources.getDrawable() 클래스 또는 ContextCompat.getDrawable() 메서드를 사용합니다. 최신 Jetpack Compose 프로젝트에서는 래스터 및 벡터 Drawable이 painterResource를 통해 로드되며, 리소스 형식을 자동으로 결정합니다.

import androidx.appcompat.content.res.AppCompatResources

val vectorDrawable = AppCompatResources.getDrawable(
    context,
    R.drawable.ic_arrow_back
)

// Jetpack Compose
Icon(
    painter = painterResource(R.drawable.ic_arrow_back),
    contentDescription = "Back",
    tint = MaterialTheme.colorScheme.onSurface
)

AppCompatResources.getDrawable()을 사용할 때 AppCompat 라이브러리는 API 수준에 따라 자동으로 올바른 drawable 버전을 선택합니다: Android 5.0(API 21) 이전 기기에서는 래스터 폴백이 사용될 수 있으며, 최신 기기에서는 Vector Drawable이 사용됩니다. Jetpack Compose에서는 painterResource가 이 호환성을 자동으로 처리합니다.