[Compose][Image] 이미지 표시, ImageBitmap vs ImageVector, Material icons

 

 

이 포스팅은 공식문서 를 보고 이해한 내용을 정리 및 번역한 글입니다. 

 

 

 

---

 

Jetpack Compose에서 이미지 나타내기

 

1. 기본 이미지 로딩

• Image 컴포저블 : 화면에 이미지 리소스를 표시함
  • painterResource : painterResource는 이미지 리소스를 불러오기 위해 사용하는 함수
    • 이 함수는 리소스 ID를 받아 Painter 객체를 반환합니다. 이를 Image 컴포넌트에 전달하여 이미지를 화면에 표시할 수 있습니다.
    • 디스크에서 이미지(예: PNG, JPEG, WEBP) 또는 벡터 리소스를 로드하려면, 이미지 참조와 함께 painterResource API를 사용합니다.
    • 이미지 리소스 유형을 알 필요는 없습니다. 
    • Image 또는 paint 수정자에서 painterResource를 사용하면 됩니다.
    • painterResource()는
      (VectorDrawables를 VectorPainter에 로드 / BitmapDrawables를 BitmapPainter에 로드)하는 작업을 처리
  • contentDescription : 화면의 시각적 요소에 접근성을 추가하려면 contentDescription을 명시해야함
    • 화면의 시각적 요소가 순수하게 시각적 장식용인 경우 contentDescription을 null로 설정하여 무시합니다.

 

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

 

 

 

1-1. 하위 수준의 ImageBitmap 관련 기능이 필요한 경우 

• ImageBitmap.imageResource()를 사용하여 비트맵을 로드할 수 있습니다.

@Composable
fun DisplayBitmapImage() {
    val imageBitmap: ImageBitmap = ImageBitmap.imageResource(id = R.drawable.my_image)
    Canvas(modifier = Modifier.fillMaxSize()) {
        drawImage(imageBitmap)
    }
}

painterResource가 지원하는 Drawable 유형 AnimatedVectorDrawable BitmapDrawable(PNG, JPG, WEBP) ColorDrawable VectorDrawable

👉 Bitmap은 저수준에서 이미지 데이터를 직접 다루는 반면, Drawable은 다양한 그래픽 요소를 추상화하여 쉽게 사용할 수 있게 합니다.

Bitmap

• 정의: Bitmap은 픽셀 기반의 이미지로, 안드로이드에서 가장 기본적인 이미지 표현 방식입니다.
• 특징:
  • 메모리에 직접 픽셀 데이터를 저장하여 처리.
  • 다양한 파일 형식(PNG, JPEG 등)을 지원.
  • BitmapFactory를 통해 디코딩 및 인코딩 가능.
    
    

val bitmap = BitmapFactory.decodeResource(resources, R.drawable.my_image)
imageView.setImageBitmap(bitmap)

Drawable

• 정의: Drawable은 안드로이드에서 화면에 그릴 수 있는 그래픽을 나타내는 추상 클래스입니다.
• 특징:
  • Bitmap을 포함하여 여러 종류의 그래픽(벡터, 색상, 상태 리스트 등)을 표현 가능.
  • XML 리소스 파일로 정의할 수 있음.
  • 다양한 서브클래스(BitmapDrawable, VectorDrawable 등)가 있음.
  • Drawable은 더 높은 추상화 수준에서 그래픽을 다루는 개념으로, Bitmap을 포함할 수 있습니다.
    
    • BitmapDrawable은 Drawable의 서브클래스로, Bitmap 객체를 내부적으로 관리합니다.

val drawable = ContextCompat.getDrawable(context, R.drawable.my_image)
imageView.setImageDrawable(drawable)

 

 

 

---

 

2. 이미지 로딩 라이브러리 사용 (=인터넷에서 이미지 로드)

• `이미지 로드 라이브러리`를 사용
  • 이미지를 다운로드하여 화면에 표시하기 위해 캐싱(이미지를 여러 번 다운로드하지 않아도 됨) 및 네트워킹 로직 등 여러 까다로운 작업을  모두 처리함
    
    • 1. Glide : 부드러운 스크롤에 중점을 두었으며 빠르고 효율적인 Android용 이미지 로드 라이브러리(Google)
    • 2. Coil : Kotlin 코루틴에서 지원하는 이미지 로드 라이브러리(Instacart)
      • ex) Instacart에서 Coil로 이미지를 로드하려면 라이브러리를 gradle 파일에 추가하고, AsyncImage를 사용하여 URL에서 이미지를 로드합니다.👇

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)

 

 

---

 

 래스터 이미지(Raster images) vs 벡터 이미지(Vector images)

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

 

래스터 이미지(Rasterimages, = Bitmap이라고도 함)

래스터 그래픽 형식은 픽셀을 포함합니다.

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

그림 1 : JPEG 파일 예

ImageBitmap

Compose에서는 래스터 이미지를 `ImageBitmap` 인스턴스에 로드함

• `BitmapPainter`는 화면에 비트맵을 그리는 역할을 합니다.
• 사용) ImageBitmap 생성을 처리하고 Painter 객체(이 경우 BitmapPainter)를 반환하는 painterResource()를 사용함 👇
• Image(     painter = painterResource(id = R.drawable.dog),     contentDescription = stringResource(id = R.string.dog_content_description) )

• 추가적으로 커스텀설정이 필요하여 (예: 맞춤 페인터 구현) ImageBitmap 자체에 액세스해야 하는 경우, `ImageBitmap.imageResource(R.drawable.dog)`과 같이 사용함 👇
• val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)

 

---

 

벡터 이미지(Vector images)

벡터 이미지는 화면에 표시되는 시각적 요소의 확장 가능한 수학적 표현입니다.

• 벡터 : 선, 점, 채우기 등 화면에 이미지를 그리는 방법을 설명하는 명령어 집합입니다.
• 화면에서 벡터를 조정할 때는 수학 수식이 여러 명령어 간의 관계를 유지하므로 품질이 저하되지 않습니다.
• ImageVector의 좋은 예) Material Symbols입니다. (모두 수학 수식으로 정의할 수 있기 때문)

 

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

 

---

 

ImageVector

Compose에서는 벡터 이미지를 `ImageVector` 인스턴스에 로드함

• `VectorPainter`는 ImageVector를 화면에 그리는 역할
• ImageVector는 SVG 명령어의 하위 집합을 지원합니다. 모든 이미지를 벡터로 표현할 수 있는 것은 아닙니다.
  (예를 들어 카메라로 촬영한 사진은 벡터로 변환할 수 없습니다.)
• 사용) ImageBitmap 생성을 처리하고 Painter 객체(이 경우 VectorPainter)를 반환하는 painterResource()를 사용함 👇
  (위 ImageBitmap 클래스에서 작동하는 것과 동일한 방식)
• Image(     painter = painterResource(id = R.drawable.baseline_shopping_cart_24),     contentDescription = stringResource(id = R.string.shopping_cart_content_desc) )

 

• 추가적으로 커스텀설정이 필요하여 ImageVector 자체에 액세스해야 하는 경우,
  `ImageVector.vectorResource(id)`과 같이 사용함 👇
• val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)

 

 

 

 

---

Material icons

`Icon 컴포저블`

• Material Design 가이드라인을 따르는 단일 색상의 아이콘을 화면에 그리는 컴포저블
• Material기본값으로 로드하고 싶은 벡터 드로어블이 있다면 사용
• Compose Material 라이브러리(또는 Compose Material 3 라이브러리)를 포함해야 합니다.
• 사용ex)

Icon(
    painter = painterResource(R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description)
)

 

 

• Icon 컴포저블은 디폴트설정으로 LocalContentColor.current로 색조가 조정되며, 크기는 24.dp
• tint 색상 매개변수를 노출합니다(색조 조정에 이미지 색조 섹션에 설명된 것과 동일한 메커니즘 활용). 
• 작은 아이콘 요소에 사용하기 위한 용도입니다. (더 많은 맞춤설정 옵션이 필요한 경우 Image 컴포저블을 사용해야 함)
  
  
• 머티리얼 아이콘 라이브러리에는 SVG를 수동으로 가져오지 않고도 Compose에서 사용할 수 있는 Icons 집합이 사전 정의되어 있습니다. (아이콘 문서)

Icon(
    Icons.Rounded.ShoppingCart,
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)

 

 

그림 1 : 아이콘을 사용한 장바구니 벡터

• Icon을 사용하여 화면에 VectorDrawable을 렌더링할 필요가 없으며,
  내부적으로 Icon은 Modifier.paint(painterResource(R.drawable.ic_bus_stop))을 사용하여 화면에 Icon을 그릴 필요가 없습니다.

 

 

 

 

 

 

 

 

 

---

출처

- https://developer.android.com/develop/ui/compose/graphics/images/loading?_gl=1*14v79ny*_up*MQ..*_ga*MTIwNTIxOTMwNC4xNzE3MTQ3ODQy*_ga_6HH9YJMN9M*MTcxNzE0Nzg0MS4xLjAuMTcxNzE0Nzg0MS4wLjAuMA..

이미지 로드  |  Jetpack Compose  |  Android Developers

- https://developer.android.com/develop/ui/compose/graphics/images/compare?_gl=1*1isiei3*_up*MQ..*_ga*MTIwNTIxOTMwNC4xNzE3MTQ3ODQy*_ga_6HH9YJMN9M*MTcxNzMwNTQ0OC4yLjAuMTcxNzMwNTQ0OC4wLjAuMA..

ImageBitmap과 ImageVector 비교  |  Jetpack Compose  |  Android Developers

 

- https://developer.android.com/develop/ui/compose/graphics/images/material?_gl=1*1ubaow5*_up*MQ..*_ga*MTIwNTIxOTMwNC4xNzE3MTQ3ODQy*_ga_6HH9YJMN9M*MTcxNzMwNTQ0OC4yLjAuMTcxNzMwNTQ0OC4wLjAuMA..

머티리얼 아이콘  |  Jetpack Compose  |  Android Developers