[Android] Very Long Vector Path 해결

안녕하세요 점냥입니다 :)

 

 

최근 Vector 이미지 파일에서 Lint 경고를 내보내는 케이스를 발견하게 되었어요. Deprecated 등 코드 레벨에서 발생하는 Lint의 경우보다 쉽게 Lint를 제거할 수 있었는데요. Vector는 path를 어떻게 수정해야 할지 감이 안 오더라고요. path를 마음대로 수정했다가는 원본 이미지와 전혀 다른 결과가 나올 수가 있으니까요. 그래서 한번 찾아보았습니다 :0

 

 

Vector

Vector는 점과 선, 그리고 색상 정보 등을 포함한 집합을 의미해요. 점과 선에 대한 정보로 그린 이미지는 화면 해상도와 상관없이 동일한 결과를 제공해주기 때문에 Android에서는 21 버전부터 Vector를 사용하면서 이미지를 표현하는 것을 추천하고 있다고 하네요.  

 

반대로 픽셀 방식의 이미지의 경우 해상도를 늘릴 시 흐리게 보이는 현상이 있어 해상도별로 이미지 파일을 여러 개 저장하고 있어야 하고 이로 인해 APK의 용량이 늘어나게 돼요. Vector 이미지의 경우에는 하나의 파일로 모든 해상도를 대응할 수 있다 보니 훨씬 유지보수가 쉽고, 용량도 적어 좋다고 해요 

(하지만 App Bundle을 사용하게 된 지금은 기기의 해상도 별로 리소스들이 걸러지기 때문에 앞서 소개한 단점이 줄어들었다고 알고 있어요!) 

 

 

 

Lint가 뜨는 이유는?

 

VectorPathDetector 파일의 코드를 살펴보면 Very Long vector path Lint 경고의 기준을 확인할 수 있어요. Vector를 구성하는 각 Path의 길이가 800 길이보다 커지게 되면 Lint가 발생하네요. 그렇다면 Lint의 해결 방법은 path의 길이를 800 미만으로 수정하는 것인데요. 무작정 줄인다면 이미지의 형태가 깨져버리게 되죠. 이런 문제를 해결하기 위해 Vector path를 최적화해주는 프로그램들을 사용해야 합니다.

 

 

Vector 최적화 프로그램

SVGOMG

 

Jake Archibald라는 개인 개발자분이 만들어주신 웹 사이트로 SVG를 등록해 설정한 옵션으로 SVG의 용량을 줄일 수 있어요! 사이트에 들어가게 되면 최적화를 위한 여러 가지 옵션을 제공해 주는데 여러 조작들을 해보면서 용량을 줄이고 다운로드하면 돼요. (옵션들을 설명해주지 못해서 미안해요 ㅎ )

 

개인적인 경험으로  기본 설정을 사용하면서 Number precision의 값을 2로 설정하는 방법이 괜찮았어요!

 

주의

1. 이미지의 형태를 완벽히 유지하면서 용량을 줄일 수 없어요. 따라서 적절한 최적화 옵션을 찾는 것이 중요해요.

2. Vector Lint의 경고 기준은 path의 길이가 800 btye를 넘지 않는 거예요. 따라서 MARKUP 탭으로 코드의 길이를 확인해보세요.

 

 

 

AVOCADO

npm install -g avocado

AVOCADO는 Vector 파일들을 최적화해 주는 자동화 툴이에요. 하지만 아쉽게도 SVGOMG처럼 웹 사이트로 제공해주지 않기 때문에 NPM으로 프로그램을 설치해줘야 하는 번거로움이 있어요 ㅠㅠ. 터미널이 편하신 분들에게는 좋겠네요.

 

avocado (파일 경로)[파일 이름].xml

프로그램 실행하는 방법은 간단하네요. 파일 경로를 써주지 않으려면 해당 폴더까지 이동시켜줘야 합니다 :)
추가로 단일 파일이 아니라 해당 경로에 있는 모든 xml 파일을 대상으로 하려면 *.xml 이렇게 적어주시면 돼요

 

17%가 줄어들었군요.

 

 

avocado가 제공해 주는 여러 옵션을 사용하지는 않았어요. path의 구조가 조금(?) 간단하게 줄어들었고 이미지 형태도 깨지지 않았지만 Lint를 여전히 남아있네요.

 

마무리

저는 최근까지 복잡한 이미지 혹은 글자가 표현되어 있는 이미지가 아닐 경우 SVG로 이미지를 저장했는데요.  App Bundle로 사용자들 기기에 맞는 리소스들이 제공이 되면서 png도 꽤 쓰는 분위기가 된 것 같네요. 그래도 화면 해상도, 적은 용량 등 SVG가 가진 장점은 아직 남아있으니 그때그때 상황에 맞게 고려해서 사용하면 좋을 것 같네요!

 

 

참고

- “Very Long Vector Path” issues… and where to find them. | by Claudia Luque Fernández | Medium

- https://vishal-jha.medium.com/optimize-svgs-remove-lint-warning-of-the-long-vector-path-fe0b34f80782