Vector Asset

Raster: 🤨 Vector: 🤓

Android는 매우 다양한 크기의 기기들이 존재하기 때문에 화면 사이즈에 대응하기 위해 mdpi, hdip 등 다양한 dpi resource를 관리해야 했다. 이렇게 하지 않을 경우 확대 시 이미지가 깨지는 현상이 발생할 수도 있는데, 이건 이미지를 나타내는 방식이  Raster 이기 때문이다.

 Raster  형식 이미지는 특정 해상도에서 정의되어 각 픽셀의 색상 정보만 알고 있기 때문에 확대를 할 경우 누락된 픽셀이 생겨 이미지가 위처럼 깨져 보일 수 있다.

이에 대응하기 위한 방식이  Vector 다. vector는 점과 점을 연결해 수학적 원리로 이미지를 표현하는 방식이기 때문에 크기를 늘리거나 줄여도 이미지에 손상이 없다. 그렇기 때문에 래스터 방식에 비해 기존 dpi 별로 이미지를 가지고 있을 필요 없이 XML 하나로 여러 사이즈 대응이 가능하고, 애니메이션 구현에도 유용하다는 장점도 있다. (Animated Vector)

Vector Asset

Android 5.0(API 21) 이상 버전부터는 XML 형태로 이미지에 대한 정보를 설명하는 Vector Asset(Vector Drawable)을 사용할 수 있다.

Vector Asset을 사용하기 위해선 API 20 위 버전이 필요한데 min sdk 버전이 그 이하로 설정되어 있을 경우에는 대응이 필요하다.

두 가지 옵션이 있다.

• png 파일 생성
• support library 사용

SVG 

vector 이미지를 표현하기 위한 포맷으로 w3c에서 만든 vector 이미지 표준

Android Vector Asset Studio에서는 vector를 편리하게 생성하기 위해 svg를 Vector Drawable 코드를 포함한 xml로 변환한다. (psd도 지원 가능)

svg 더 알아보기

 

SVG 파일 Vector Drawable로 변환 ( feat. Zeplin🎶)

1. zeplin에서 svg를 원하는 폴더로 내보낸다. 

1. Exporting to에서 경로 설정

2. SVG 다운로드 아이콘 클릭

 

 

 

 

 

 

2. drawable -> new -> Vector Asset

1. 새로운 벡터 에셋을 생성할 때, 에셋 타입으로 Local File을 선택

2. path에 zeplin에서 내보낸 svg 파일을 찾아 넣어준다.

3. Next 클릭