Vector Drawable

Drawable이란?

단어 뜻으로는 "그릴 수 있는" 이며, drawable 폴더는 이미지 파일(jpg, png 등)뿐만 아니라 그래픽을 어떻게 표현할 지를 xml파일을 통해 만들 수 있다.

이런 xml파일을 통해 여러 표현이 가능한데, StateList Drawable : 어떤 상태에 따라 이미지를 바꾸거나 Shape Drawable : 어떤 모양(도형)을 그리거나 Vector Drawable : 아이콘이나 애니메이션으로 표현이 가능하다.

이 중 VectorDrawable은 XML 파일에서 연관된 색상 정보와 함께 점, 선, 곡선의 조합으로 정의되는 벡터 그래픽

• 

• 벡터 그래픽은 path 및 group 개체로 구성되는 트리 계층 구조로 정의됨 - 각 path에는 객체 윤곽선의 도형이 포함되고 group에는 변환에 관한 세부 정보가 포함됩니다. - 모든 경로는 XML 파일에 표시된 순서대로 그린다.

• 화면 품질이 손상되지 않고 크기를 조정

1) 비트맵 이미지와 기본 구조의 차이

BitMap 이미지

• 픽셀이라는 작은 점들의 격자로 구성

• 각 픽셀마다 색상 정보를 개별적으로 저장

• JPG, PNG, GIF 등의 형식으로 저장

VectorDrawable

• 수학적 함수와 알고리즘으로 이미지를 정의

• 점, 선, 곡선의 위치와 속성을 수식으로 저장

• SVG, AI 등의 형식으로 저장

2) 이미지 저장, 표현 방식의 차이

1. 크기 변경 시 품질

• 비트맵: 확대 시 픽셀이 커지면서 이미지가 깨짐

• 벡터: 수학적 계산으로 그려지므로 어떤 크기로 변경해도 선명함 유지

2. 파일 크기와 성능

• 비트맵: 모든 픽셀의 정보를 저장하므로 파일 크기가 큼

• 벡터: 수식만 저장하므로 파일 크기가 작음

3. 적합한 사용 사례

• 비트맵: 사진처럼 복잡하고 섬세한 이미지에 적합

• 벡터: 로고, 아이콘처럼 단순한 도형과 선으로 구성된 이미지에 적합

3) 안드로이드에서의 활용

BitMap

• 실제 사진이나 복잡한 이미지 표현 필요할 때

• 높은 수준의 디테일이 필요한 경우

VectorDrawable

• 앱 아이콘, UI 요소, 단순한 로고

• 여러 화면 밀도에 대응해야 할 때

• APK 크기를 줄이고자 할 때

BitMap은 모든 픽셀 정보를 개별적으로 저장하는 반면, VectorDrawable는 수학적 공식으로 이미지를 정의하기 때문에 더 효율적이고 유연한 확장이 가능합니다.