머티리얼 디자인 가이드, UI 라이브러리와 디자인 도구를 활용하면 개발자도 일관성 있는 Android 앱 화면을 구성할 수 있다. 레이아웃, 색상, 아이콘과 타이포그래피를 정할 때 참고할 만한 몇 가지 방법을 소개한다.
1. 레이아웃
앱의 정보를 어떻게 배치하며 색상과 크기는 어떻게 지정할지에 대해서 많은 고민이 필요합니다. 머티리얼 디자인 가이드를 통해 UI 요소별 배치 방법 및 스타일 가이드를 이용하면 훌륭하게 앱 디자인을 할 수 있습니다. 사용자가 편하게 볼 수 있도록 리스트뷰 행의 높이나 여백 등의 규정된 가이드라인에 따라 레이아웃에 적용만 하면 됩니다. 마진, 패딩은 8dp 단위로 사용하면 훨씬 더 깔끔하고 정돈된 디자인이 됩니다.
안드로이드 디자인 서포트 라이브러리를 사용하면 가이드된 UI를 사용할 수 있습니다. 개발자가 직접 포토샵으로 리소스를 만들어 추출할 필요가 전혀 없습니다. 디자인 서포트 라이브러리를 통해 UI를 사용하고 가이드를 통해 여백이나 사이즈 등 수치만 잡아주시면 됩니다. 디자인 라이브러리 외 다양한 오픈소스를 활용하시면 됩니다.
2. 컬러 값
디자이너 없이 개발자가 좋은 컬러 값을 추출하기란 힘듭니다. 하지만 머티리얼 디자인 가이드에 플랫 하며 아름다운 색상이 이미 추출되어 있습니다. 개발자는 앱의 BI에 맞는 색상을 한 가지 선택해 추천하는 비슷한 톤의 컬러를 앱에서 사용하면 이질감 없이 통일된 UI를 구현할 수 있습니다. 색상 값을 미리보고 추출해주는 MaterialPalette사이트를 추천합니다.
3. 아이콘
구글이 공개한 저작권 없는 수백 가지의 머티리얼 아이콘을 사용하면 됩니다. 웬만한 액션의 아이콘을 지원하고 계속 추가되고 있기 때문에 지속적으로 사용 가능합니다. 또한 dpi별로 추출 가능하며, 벡터 Drawable을 사용하기 위한 SVG로도 추출 가능합니다.
머티리얼 아이콘은 안드로이드 스튜디오에서 New – Image(Vector) Asset메뉴를 통해서 쉽게 추가 가능합니다.
4. 런처 아이콘 만들기
앱의 아이콘은 앱의 가장 중요한 요소입니다. 사용자들이 앱 설치 전 UI의 느낌을 암시해주는 중요한 역할을 합니다. 앱의 아이콘에 따라 사용자가 설치할지 말지를 고민하게 할 수도 있는 큰역할을 합니다. romannurik가 만든 AndroidAssetStudio의 Launcher Icon Generator를 이용하면 손쉽고, 저작권에도 걸리지 않는 앱을 아주 간단하게 만들 수 있습니다. 최신 안드로이드(Nougat) 런처 스타일의 아이콘으로도 만들 수 있습니다.
다양한 설정을 통해 앱의 아이콘을 만들 수 있으며, dpi별로 추출해주기 때문에 편합니다.
5. 애니메이션
AndroidIconAnimator와 아이콘 리소스를 통해 간단한 애니메이션도 직접 만들 수 있습니다. SVG아이콘 리소스를 이용하여 아이콘이 애니메이션 하는 벡터드로워블을 추출 할 수 있습니다. AndroidIconAnimator를 통해 기존 GIF의 프레임 하나씩 보여주는 방식보다 훌륭한 애니메이션을 만들 수 있습니다.
이렇게 머티리얼 디자인 가이드와 리소스만 잘 활용한다면 디자이너가 없어도 요즘 유행하는 앱 디자인을 갖출 수 있을 것입니다.