[ Android ] PNG와 SVG

dp, dpi등에 대한 글을 읽고 보시면 더 좋을 것 같아요!

 

개발을 할 때 사용하는 디자인 포맷의 종류는 png, svg, gif, lottie가 일반적이고, 이미지를 위한 png, svg, 9-patch(나인 패치)와 애니메이션을 위한 lottie로 나누어집니다. 

이번 글에서는 PNG와 SVG에 대해서만 다뤄보겠습니다.

( jpg, gif도 사용하기는 하지만 안드로이드에서는 권장하지 않습니다)

1. PNG

png의 경우 사이즈가 픽셀단위로 정의되기 때문에 해상도에 따라 이미지의 사이즈가 의도와 다르게 바뀔 수 있습니다.

이를 방지하기 위해 안드로이드에서는 drawable 폴더를 각 dpi값에 따라 나누어 놓았는데, 기본 제공되는 dpi는 아래를 참고하시면 될 것 같아요.

안드로이드에서 제공하는 기본 dpi종류

• ldpi : 120dpi
• mdpi : 160dpi (기본)
• hdpi : 240dpi
• xhdpi : 320dpi
• xxhdpi : 480dpi
• xxxhdpi : 640dpi

하지만 안드로이드 디바이스는 다양하기 때문에 이 카테고리 내에 포함되지 않는 경우가 많습니다.

(안드로이드는 너무 다양해요 ㅠㅠ)

 

그래서 따로 drawable 폴더를 만들어야 하는 경우가 많아요!

예를 들어 s9+의 FHD+ 해상도는 420dpi이기 때문에 xxhdpi폴더에 512 x 512px 사이즈의 png를 넣을 경우 448 x 448px로 치환되어 나타나게 됨. (480 : 420 = 512 : 448)

 이를 방지하기 위해서는 개발자가 drawable-420dpi라는 독립된 폴더를 새로 생성하고 해당 이미지를 넣어야 정확히 512px 사이즈로 이미지가 화면에 나타납니다.

 결국 디자이너가 모든 dpi, 해상도별 각기 다른 사이즈로 png를 제공하고 개발자는 각 dpi별 drawable 폴더를 만들어 png를 맞춰서 넣어주어야 합니다.

 

2. SVG

svg를 사용할 경우엔 안드로이드 해상도별로 각각에 맞춰 이미지를 만들 필요가 없습니다.

이것이 가능한 이유는 svg가 벡터 이미지이기 때문에 크기를 줄이거나 늘려도 전혀 깨짐이 없기 때문입니다.

또한, 비트맵 이미지들(PNG, JPEG) 같은 경우 파일 크기를 결정하는 주요 요소는 바로 ‘해상도’ 입니다. 예를 들어 5000x5000 픽셀 이미지는 항상 500x500보다 파일 사이즈가 큽니다.

 

반면, SVG 그래픽 같은 경우 파일 크기를 결정하는 주요 요소는 바로 ‘복잡도’ 입니다. Path가 비교적 적은 간단한 이미지는 PNG, JPEG 보다 파일 사이즈가 적을수도 있지만, 이미지를 구성하는 요소의 복잡도 (레이어가 많다든지, 특정 효과가 많다든지)에 따라 파일 사이즈가 커집니다.

하지만 이런 용량문제는 SVG Optimizing을 하게되면 나름 해결됩니다.

작은 파일 사이즈로 인해 로딩 시간도 훨씬 더 줄어든다는 장점 또한 있습니다.

 

안드로이드 개발자에게 넘기기 전에 SVG 파일이 문제가 있는지 가볍게 확인 하고 싶은 경우 아래와 같은 사이트를 추천합니다.

inloop.github.io/svg2android/

Android SVG to VectorDrawable

3. PNG vs SVG

우선 png와 svg는 구성요소가 다릅니다. 위의 설명에서도 나왔지만 png는 픽셀 기반이고 svg는 벡터 기반이죠.

 

비트맵 그래픽: Raster Graphics (픽셀 기반)

대표적인 포맷은 JPEG, PNG 입니다. 이들은 픽셀로 구성되어 있습니다. 예를 들어 2x2 픽셀인 비트맵 이미지는 총 4px로 구성되어 있습니다.

개개인에 대한 픽셀들은 자유자재로 바꿀수가 없고 움직일수도 없습니다. 그렇기 때문에 100% 이상으로 이미지를 확대하면 Pixelate가 됩니다.

 

SVG 그래픽: 벡터 기반

픽셀로 구성되어 있지 않고 작업하고 있는 그래픽에 대한 정보로 구성되어 있습니다. 그렇기 때문에 어떤 사이즈로든 자유자재로 늘어나는 것이 가능합니다. 이러한 이유들로 인해 코드로 쉽게 적용된 스타일을 수정할 수 있습니다. 예를 들어 동그라미의 보더값을 6에서 8로 바꾼다 / 색상을 그레이에서 블랙으로 바꾼다 / 사이즈를 40x40에서 80x80을 바꾼다 등

 

그렇다면 무엇을 써야 할까요?

정해진 답은 없습니다. 각자의 입맛에 맞게 사용하는 것이 위의 질문에 올바른 답이라고 생각이 들어요.

하지만 저는 svg를 선호하는 편입니다!

 

 

4. SVG 아이콘 가져오기

혼자 개발을 할 때는 직접 아이콘들을 가져와야 되기 때문에 몇 가지 사이트들을 추천할게요.

 

1) Flaticon

회원가입을 하면 무료로 아이콘을 다운받을 수 있고 png, svg 중 사용할 포맷에 따라 다운받을 수 있습니다.

(아이콘이 부분 유료라서 저 Filters에서 Free만 선택하시면 됩니다.)

이런 식으로 색상도 변경이 가능합니다.

제가 자주 쓰는 사이트에요!

 

2) IconFinder

이 사이트도 마찬가지로 부분 유료인 아이콘이 있지만 무료도 많습니다! 위의 사이트 처럼 png와 svg모두 지원하구요.

보통 첫 번째 사이트에서 원하는 이미지가 없으면 이곳에서 찾곤해요.

 

3) Material.io

구글에서 제공되는 사이트입니다. 

 

 

 

 

참고

[디자인] 안드로이드 앱 SVG 아이콘 적용기 — 왜 SVG로 갈아탔는가?

 

[Android] Glide 삽질 과정