Vector Drawable Image만들기
SVG 아이콘 생성부터 XML추출까지
SVG(Scalable Vector Graphics)는 XML(Extensible Markup Language)기반의 그래픽 요소이다. 그러나 안드로이드에서는 SVG를 바로 사용할 수 없다. SVG아이콘을 만들었다면 XML로 변환하여 사용해야 한다. XML이 Android의 VectorDrawable을 지원하기 때문이다. VectorDrawable은 안드로이드에서 제공하는 클래스를 말하는데, 자세한 속성들은 아래 Docs에서 명시해주고 있다.
샘플로 좋아요 버튼을 만들어 보았다. 아래 소스코드를 보면 명확한 차이를 보이고 있다. SVG를 XML로 변환했을 때 Vector drawable의 속성들을 갖는 것을 확인할 수 있다.
SVG(또는 PSD)를 XML로 변환하려면 Android Studio의 Asset Studio를 이용한다. Android Studio는 아래 경로에서 다운로드 받을 수 있다. 설치 방법은 그냥 계속해서 Next 버튼을 누르고 Finish버튼을 누르는 것으로 끝낼 수 있다.
일단 안드로이드 스튜디오 설치가 완료되면 새 프로젝트를 만든다. 그러면 아래의 폴더 구조가 생성된 것을 확인할 수 있다.
새 프로젝트의 build를 모두 끝내고 나면 res > drawable 폴더 안에서 새로운 Vector Asset을 만들 수 있다. 이때 아이콘의 오리지널 사이즈로 추출 하려면 Override를 체크한다.
SVG 아이콘을 내보낼 때는 Fill의 설정이 중요하다. Android 에서는 Fill 설정으로 Non-zero, Even-Odd의 두 가지를 제공한다. 이것은 Path Fill-Rule에 따른 설정인데, 요구하는 기본 옵션은 Non zero 이다. Even-Odd로 설정하면 복잡한 구성의 경우 잘못 그려지기 때문에 Shape가 꼬일 수 있다. 나의 경우 일러스트레이터로 아이콘을 배포하면서 Shape꼬임 현상을 종종 경험하였다. 일러스트레이터는 Fill-Rule 옵션을 지원하지 않는다.
그래서 일러스트로 아이콘을 만들더라도 최종 배포는 Sketch로 해서 오류를 줄였다. 최근들어 Even-Odd로 설정한 쉐입도 엉키지 않는 것 같다. 뭔가 안드로이드 업데이트가 된 것인가. 쉐입은 Asset Studio에서 제대로 보이면 정상적으로 만들어진 것이다.
SVG 생성부터 XML추출까지 알아보았다. 회사에서 만든 프로덕트의 아이콘 개수는 200개가 넘었고 오류도 많았다. 개발자와 협의한 끝에 디자인팀에서 XML추출을 하게 되었다. 덕분에 SVG를 정확하게 배포하는 방법, 안드로이드 스튜디오 사용법을 알게 되었고, 안드로이드 개발 언어를 보면서도 경계를 하지 않게 되었다.
입사 5년이 다 되어가는 동안 계속해서 GUI 개선 작업을 하면서 PNG 히스토리가 쌓여왔다. 그만큼 벡터화는 시도하기 힘든 부분이었다. 드디어 불필요한 리소스를 제거하고 거의 전면적인 벡터화를 도입, 실제로 진행해 상용 배포했을 때의 쾌감은 이루 말할 수 없다.
