ImageBitmap과 ImageVector 비교

가장 일반적인 이미지 형식 두 가지는 래스터 이미지와 벡터 이미지입니다.

래스터 그래픽 형식은 픽셀을 포함합니다. 픽셀은 색상(빨간색, 녹색, 파란색, 알파 값으로 구성됨)이 포함된 작은 개별 정사각형입니다. 다량의 픽셀을 함께 배치하면 사진과 같은 매우 상세한 이미지를 형성할 수 있습니다. 래스터 그래픽의 해상도는 고정(고정된 픽셀 수)되어 있습니다. 즉, 이미지 크기를 늘리면 세부 사항이 손실되고 모자이크 현상이 발생할 수 있습니다. 래스터 그래픽 형식의 예로는 JPEG, PNG, WEBP가 있습니다.

그림 1: JPEG 파일 예

반면 벡터 이미지는 화면에 표시되는 시각적 요소의 확장 가능한 수학적 표현입니다. 벡터는 선, 점, 채우기 등 화면에 이미지를 그리는 방법을 설명하는 명령어 집합입니다. 화면에서 벡터를 조정할 때는 수학 수식이 여러 명령어 간의 관계를 유지하므로 품질이 저하되지 않습니다. ImageVector의 좋은 예는 Material 기호입니다. 모두 수학 수식으로 정의할 수 있기 때문입니다.

그림 2: 벡터 예(파일 확장자는 .xml이거나 Kotlin 코드로 정의됨)

ImageBitmap

Compose에서 래스터 이미지(Bitmap이라고도 함)는 ImageBitmap 인스턴스에 로드할 수 있으며 BitmapPainter는 화면에 비트맵을 그리는 역할을 합니다.

간단한 사용 사례에서는 ImageBitmap 생성을 처리하고 Painter 객체(이 경우 BitmapPainter)를 반환하는 painterResource()를 사용할 수 있습니다.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)
VectorVsBitmapSnippets.kt

추가 맞춤설정이 필요하고(예: 맞춤 페인터 구현) ImageBitmap 자체에 액세스해야 하는 경우 다음과 같은 방법으로 로드할 수 있습니다.

val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)
VectorVsBitmapSnippets.kt

ImageVector

VectorPainter는 ImageVector를 화면에 그리는 역할을 합니다. ImageVector는 SVG 명령어의 하위 집합을 지원합니다. 모든 이미지를 벡터로 표현할 수 있는 것은 아닙니다. 예를 들어 카메라로 촬영한 사진은 벡터로 변환할 수 없습니다.

기존 벡터 드로어블 XML 파일(가져오기 도구를 사용하여 Android 스튜디오로 가져옴)을 가져오거나 클래스를 구현하고 경로 명령어를 수동으로 실행하여 맞춤 ImageVector를 만들 수 있습니다.

간단한 사용 사례에서는 painterResource()가 ImageBitmap 클래스에서 작동하는 것과 동일한 방식으로 ImageVectors에도 작동하여 VectorPainter를 결과로 반환합니다. painterResource()는 VectorDrawables 및 BitmapDrawables를 각각 VectorPainter 및 BitmapPainter에 로드하는 작업을 처리합니다. VectorDrawable을 이미지에 로드하려면 다음을 사용하세요.

Image(
    painter = painterResource(id = R.drawable.baseline_shopping_cart_24),
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)
VectorVsBitmapSnippets.kt

추가 맞춤설정이 필요하고 ImageVector 자체에 액세스해야 하는 경우 다음과 같은 방법으로 로드할 수 있습니다.

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
VectorVsBitmapSnippets.kt