brunch

매거진 매거진 목요일

라이킷 100 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 티몬 디자인스토리 Jun 23. 2016

xml을 활용한 GUI 리소스 관리

티몬 GUI 스타일 시트 코드 제작기

스타일 코드 탄생 비화

티몬 앱 팝업 스타일

팝업 관련 GUI 개발 가이드를 제작하는 중에 텍스트, 버튼 등 티몬 앱에서 범용으로 쓰이는 디자인 리소스들이 개발 과정에서 중복으로 적용되고 있음을 알게 되었습니다. 리소스의 중복은 앱 용량에도 영향을 미칠 뿐만 아니라, 향후 리소스 관리에 있어서도 문제가 될 수 있는 부분이었습니다.

그래서 저희 UX랩 에서는 안드로이드 스튜디오의 XML 코드를 통해 티몬의 GUI 요소들을 명확하게 규정하고 이를 관리하기로 했습니다.

명확한 네이밍으로 관리하자!

리소스를 관리할 때 중요한 것 중 하나는 네이밍입니다. 컬러나 이미지 리소스들이 이에 해당되는데요. 어떤 부분에 어떤 용도로 사용되는지를 명확하게 반영한 네이밍일수록 더 효율적으로 관리할 수 있습니다.

- 컬러

컬러 네이밍 규칙

우선 컬러는 크게 메인/텍스트/BG와 구분선으로 분류할 수 있으며, 그 안에서 사용 용도에 따라 메인, 포인트 컬러 등으로 나눌 수 있었습니다. 이렇게 용도와 범위에 따른 분류를 한 뒤에 컬러명과 밝기 정도(명도)에 따라 번호를 부여하는 규칙을 만들었습니다.

칼라 분류(좌) 및 xml 코드 작성(우)

이렇게 네이밍된 컬러들을 문서화하면, 용도에 따라 어떤 컬러들이 쓰이고 있는지 파악하기가 쉽고 향후 색상이 변경되거나 추가될 때 해당 영역에서 색상값만 바꿔주면 되기 때문에 지속적으로 관리하기에도 유용합니다.

- 리소스

리소스 또한, 컬러와 같은 맥락으로 관리해야 효율적으로 관리할 수 있는데요.

티몬 앱 공통 리소스 중 화살표 버튼

티몬에서 사용하는 화살표 아이콘만 해도 위의 이미지처럼 유사한 스타일이 많기 때문에

이런 점에서 각각의 리소스를 구분할 수 있는 네이밍이 필요했습니다.

리소스 네이밍 규칙

그래서 저희는 리소스가 버튼인지, 아이콘인지 등의 성격에 따라 컬러와 사이즈를 활용하여 네이밍 규칙을 정했습니다. 이렇게 명확한 네이밍을 가진 리소스들을 개발 프로그램에 저장해두고, 추가 전달없이 기존에 전달한 리소스를 가지고 반복하여 사용하고 있는데요. 작업하면서 중복되는 리소스가 많이 줄어들고 있는 것을 실감하고 있습니다.

코딩으로 불필요한 리소스를 줄이자!

- 티몬 앱 버튼 스타일

하나의 버튼을 제작하면 비활성 상태/활성 상태/프레스 상태 등을 모두 고려해서 제작해야 됩니다.

티몬 버튼 스타일

보통은 나인패치로 제작하는 경우가 많지만, 티몬에서 사용하는 버튼은 대부분 단색 스타일이기 때문에 일일이 나인패치를 만들기보다는 drawable.xml로 제작하는 것이 리소스에 따른 용량 낭비와 유지,보수 관리에서 효율적이라고 판단하였습니다.

xml로 만든 버튼

티몬에서 주로 사용하는 버튼들을 각 상태(활성, 비활성, 프레스 등)에 따라 drawable.xml로 제작하고 이들을 하나의 버튼이 될 수 있도록 코딩 작업을 진행했습니다. 코드로 만들 때, 여러 장점이 있는데요. 그 중 하나는 한 벌의 코드로 다양한 사이즈로 표현이 가능하여 불필요한 리소스를 추가 제작하지 않아도 된다는 점입니다. 개발자분들도 이 작업에 대해서 불필요한 리소스를 줄였다는 점에서 긍정적으로 반응해주셨던 기억이 나네요; ㅎㅎ 이뿐만 아니라, 향후 버튼의 모양이나 컬러가 바뀔 때에도 해당 컬러값과 shape에 대한 코드값만 수정하면 되기 때문에 업무 능률에서도 장점으로 작용합니다.

이처럼 범용적으로 사용하는 GUI 요소들은 xml 스타일 코드로 관리하면 리소스 중복을 피할 수 있으며, 추가 제작없이 수정할 수 있다는 장점이 있습니다. 더 나아가, 불필요한 리소스를 최소화하여 앱 용량을 최적화하는데도 도움이 됩니다.

keyword