디자이너 없이 안드로이드 앱 디자인 할 수 있는 몇 가지 방법



구글의 머트리얼 디자인 발표 후 안드로이드 앱의 디자인이 한결 깔끔하고 심플하게 변했습니다. 다양한 컬러와 복잡한 패턴을 사용하던 앱의 UI가 하나의 컬러와 도형으로 훨씬 심플해졌습니다. 이렇게 심플해진 UI로 인해 디자이너의 역할은 어느 때 보다 줄어들었습니다. 또한 구글의 머트리얼 디자인 가이드, 디자인 라이브러리, UI 툴이 한몫을 했다고 생각합니다.

개발자가 디자이너 없이도 안드로이드 앱 UI 디자인을 하기 위한 몇 가지 방법을 소개합니다.

 

1. 레이아웃
앱의 정보를 어떻게 배치하며 색상과 크기는 어떻게 지정할지에 대해서 많은 고민이 필요합니다. 머트리얼 디자인 가이드를 통해 UI 요소별 배치방법 및 스타일 가이드를 이용하면 훌륭하게 앱 디자인을 할 수 있습니다. 사용자가 편하게 볼 수 있도록 리스트뷰 행의 높이나 여백 등의 기정된 가이드라인에 따라 레이아웃에 적용만 하면 됩니다. 마진, 패딩은 8dp단위로 사용하면 훨씬더 깔끔하고 정돈된 디자인이 됩니다.

b879ecdd355781d2bfd5d26ea11aa1f6

안드로이드 디자인 서포트 라이브러리를 사용하면 가이드된 UI를 사용할 수 있습니다. 개발자가 직접 포토샵으로 리소스를 만들어 추출할 필요가 전혀 없습니다. 디자인 서포트 라이브러리를 통해 UI를 사용하고 가이드를 통해 여백이나 사이즈 등 수치만 잡아주시면 됩니다. 디자인 라이브러리 외 다양한 오픈소스를 활용하시면 됩니다.

 

2. 컬러 값
디자이너 없이 개발자가 좋은 컬러 값을 추출하기란 힘듭니다. 하지만 머트리얼 디자인 가이드에 플랫 하며 아름다운 색상이 이미 추출되어 있습니다. 개발자는 앱의 BI에 맞는 색상을 한 가지 선택해 추천하는 비슷한 톤의 컬러를 앱에서 사용하면 이질감 없이 통일된 UI를 구현할 수 있습니다.

5508a9714614b5de3ad9ff5163acb97d


 

3. 아이콘
구글이 공개한 저작권 없는 수백가지의 머트리얼 아이콘을 사용하면 됩니다. 웬만한 액션의 아이콘을 지원하고 계속 추가되고 있기 때문에 지속적으로 사용 가능합니다. 또한 dpi별로 추출 가능하며, 백터 Drawable을 사용하기 위한 SVG로도 추출 가능합니다.

머트리얼 아이콘은 안드로이드 스튜디오에서 New – Image(Vector) Asset메뉴를 통해서 쉽게 추가 가능합니다.

a1dd532e9beab8d56ed4a77f9fe41187


 

4. 런처 아이콘 만들기
앱의 아이콘은 앱의 가장 중요한 요소입니다. 사용자들이 앱 설치 전 UI의 느낌을 암시해주는 중요한 역할을 합니다. 앱의 아이콘에 따라 사용자가 설치할지 말지를 고민하게 할 수도 있는 큰역할을 합니다. romannurik가 만든 AndroidAssetStudioLauncher Icon Generator를 이용하면 손쉽고, 저작권에도 걸리지 않는 앱을 아주 간단하게 만들 수 있습니다. 최신 안드로이드(Nougat) 런처 스타일의 아이콘으로도 만들 수 있습니다.

c27b15d95c39e1915632cd12a6442177

다양한 설정을 통해 앱의 아이콘을 만들 수 있으며, dpi별로 추출해주기 때문에 편합니다.

 

5. 애니메이션
AndroidIconAnimator와 아이콘 리소스를 통해 간단한 애니메이션도 직접 만들 수 있습니다. SVG아이콘 리소스를 이용하여 아이콘이 애니메이션 하는 백터드로워블을 추출 할 수 있습니다. AndroidIconAnimator를 통해 기존 GIF의 프레임 하나씩 보여주는 방식보다 훌륭한 애니메이션을 만들 수 있습니다.

e7f3d92cf74b599838f70c2feda3ffa5

이렇게 머트리얼 디자인 가이드와 리스소만 잘 활용한다면 디자이너가 없어도 요즘 유행하는 앱 디자인을 갖출 수 있을 것입니다.

 

머트리얼 디자인 가이드를 잘 활용한 앱

a444e587ded8c2b5ef87a2253bc869de

 




안드로이드 머티리얼 디자인 위젯 오픈소스 21가지

안드로이드 롤리팝이 발표 되면서 머티리얼 디자인에 대한 관심과 함께 관련된 위젯이 오픈소스로 많이 공개 되었다. 얼마전까지만 해도 디자인적인 부분만을 고려해서 개발되어 었다면 이제는 성능도 함께 고려하여 성능이 우수한 위젯들이 속속 등장/업데이트 되고 있는 추세다. 자신의 앱을 하위 호환성 까지 유지해가며 머티리얼 디자인으로 바꿀 수 있는 유용한 위젯들을 몇가지 소개한다.

 

 

 

1. MaterialDesignLibrary 머티리얼 관련된 위젯 모음
https://github.com/navasmdc/MaterialDesignLibrary#flat-button

 


2. MaterialEverywhere AppCompat 21 적용 예제 (블로그)
https://github.com/antoniolg/MaterialEverywhere

 

3. MaterialWidget Android 4.0 ~ 4.4에서 사용할 수 있는 머티리얼 관련 위젯 모음
https://github.com/keithellis/MaterialWidget

 

4. MaterialTabs 머티리얼 스타일의 탭바
https://github.com/neokree/MaterialTabs

 

5. material-ripple View에 Ripple 효과
https://github.com/balysv/material-ripple

 

6. RippleEffect View에 Ripple, Zoom 등 다양한 효과 (API 9+)
https://github.com/traex/RippleEffect

 

7. LDrawer Appcompat 21 툴바의 ArrowDrawable
https://github.com/ikimuhendis/LDrawer


8. material-design-icons 구글이 공개한 아이콘 모음
https://github.com/google/material-design-icons

 

9. AndroidMaterialDesignToolbar 머티리얼 디자인의 다양한 위젯을 적용한 예제
https://github.com/tekinarslan/AndroidMaterialDesignToolbar

 

10. MaterialEditText 머티리얼 디자인의 텍스트 입력 위젯
https://github.com/rengwuxian/MaterialEditText

 

11. material-menu Path Animation으로 툴바의 메뉴, 선택, 이전버튼
https://github.com/balysv/material-menu

 

12. material-dialogs Dialog를 상속받아 커스텀 레이아웃으로 구현한 머티리얼 디자인의 다이얼로그
https://github.com/afollestad/material-dialogs

 

13. MaterialNavigationDrawer Navigation Drawer를 쉽게 사용 할 수 있도록 Activity를 구현. 또한 Drawer 내 구현해 놓은 섹션을 쉽게 추가 가능.
https://github.com/neokree/MaterialNavigationDrawer


14. MaterialDialog 머티리얼 디자인의 다이얼로그로 일반 텍스트, 리스트, 입력 텍스트등 다양한 형태 지원(API 8+)
https://github.com/drakeet/MaterialDialog


15. materialish-progress 머티리얼 디자인의 로딩 프로그래스(API 9+)
https://github.com/pnikosis/materialish-progress

 

16. MaterialList CardView를 머티리얼 디자인 가이드라인에 맞는 다양한 형태를 지원
https://github.com/dexafree/MaterialList

687474703a2f2f692e696d6775722e636f6d2f7672347650366f2e706e67 687474703a2f2f692e696d6775722e636f6d2f313978743146582e706e67 0b209906bdd035bfc48e4d0d94214b37

 

17. android-floating-action-button 머티리얼 디자인 가이드의 화면에 떠 있는 원형의 액션 버튼으로 리스트뷰와 리사이클러뷰의 스크롤에 따른 액션 지원액션
https://github.com/futuresimple/android-floating-action-button

 

18. Android-Material-circular-button 원형의 버튼으로 컬러값의 변경시 애니메이션 지원
https://github.com/glomadrian/Android-Material-circular-button

 

19. material-drawer DrawerLayout의 컨텐츠 뷰를 머티리얼 디자인 가이드에 맞게 쉽게 사용가능.
https://github.com/HeinrichReimer/material-drawer

 

20. snackbar 머티리얼 디자인 가이드에서 소개한 스낵바를 사용 할 수 있도록 지원. 토스트와 비슷하며 지속적으로 메시지를 노출 하거나 사용자의 액션을 받을 수 있음.
https://github.com/nispok/snackbar

 

21. material-range-bar 범위를 선택 할 수 있는 SeekBar
https://github.com/oli107/material-range-bar

이 글은 Evernote에서 작성되었습니다. Evernote는 하나의 업무 공간입니다. Evernote를 다운로드하세요.