xml을 이용하여 UI 리소스 줄이기

앱은 무엇보다 빨라야 한다. 나 또한, 모바일 디자인을 하면서 속도의 중요성을 많이 실감하였다.

따라서, 디자이너는 예쁜 앱을 디자인하는 것도 중요하지만 리소스 용량을 어떻게 최소화할 것인지도 중요하게 고려해야 한다.

오늘은 xml을 통해 도형을 제작하여 리소스를 줄이는 방법을 소개하려고 한다.

동그란 딱지나 긴 사각형의 버튼을 디자인하고 우리는 이를 크랍하여 개발자한테 전달하는 경우가 많다.

하지만, 오늘 이 블로그를 보았다면 이제 더 이상 리소스를 전달하지 않아도 된다.

안드로이드 스튜디오를 공부하면서 앱에서 주로 사용하는 원이나 사각형은 xml로 가능한 것을 알 수 있었다.

먼저 우리가 버튼 디자인하면서 많이 사용하는 가로가 긴 사각형을 제작해보았다.

세 개의 사각형을 보면, 안드로이드 스튜디오는 정사각형에서부터 radius를 조절하여 둥근 사각형까지 제작가능한 것을 알 수 있었다. (코드는 corners android:radius="수치dp")

처음 사각형은 radius가 0으로 설정되어있는 정사각형이고, 두 번째는 4dp, 세 번째 사각형은 8dp로 설정되어 있다. 따라서 이와 같은 버튼을 구현하고 싶을 때는 개발자에게 레디어스 값과 도형의 칼라값, 그리고 도형의 세로값, 양쪽 여백 dp 정도를 전달하면 개발상에서 제작할 수 있고 앱 용량을 줄이기엔 더 좋은 방법이다.

다음으로는 정사각형과 점선으로 테투리된 사각형을 소개하겠다.

딱지나 순위(?) 등을 알릴 때 보통 정사각형의 뱃지를 많이 사용하는 것을 볼 수 있다. 앞으로는 정사각형 도형을 사용할 때는 사이즈, 칼라, 라인 두께 등을 개발자에게 전달하면 더 유용할 것 같다. 사이즈 두께는 stroke로 구현이 가능하며, 포토샵 1px 두께를 표현하려면 개발자에게 0.5dp로 전달하면 된다.

점선은 잘 사용되지 않아서 그냥 이런 것도 표현이 되구나~ 하고 알고 있기만 해도 될 것 같다. (ㅎㅎ)

다음으로 앱에서 많이 보이는 도형은 원이 아닐까 싶다.

원은 제작할 때 oval과 ring 두 가지로 표현할 수 있는데, shape:android="ring"보다는 shape:android="oval"로 제작하는게 더 편한것 같다. ring은 stroke가 있는 원으로 판단되는데, oval로도 표현이 가능하기 때문이다.

아차! 사이즈를 전달할때 반지름, 지름 뭐 요런걸로 해야되나?라고 생각할 수도 있는데 그냥 전체 가로/세로 px를 dp단위로 전달하면 포토샵에서 제작한 작업물 그대로 산출이 된다.

앱 디자인 일을 하면서 앱이 점점 느려지는 것에는 리소스의 문제도 있음을 경험하였다. 하루는 수천여개의 리소스를 리사이징하여 앱 용량을 줄인 적이 있는데, 너무 과한 인터렉션이나 쓸데 없이 적용된 리소스들을 최소화하는 것도 앱의 속도를 빠르게 하는데 도움이 되는 것 같다.

오늘 소개한 drawable xml로 리소스를 제작하는 것은 나중에 코딩 수정을 통해 쉽고 빠르게 적용할 수도 있을 뿐만 아니라, 용량을 줄이는 데도 한 몫할 수 있으니 개발자와 협업하여 다음의 코드들만 적용하는 것도 고려하길 바란다.

FIN.