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

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

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

 

1. 레이아웃

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

b879ecdd355781d2bfd5d26ea11aa1f6

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

2. 컬러 값

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

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

3가지 메소드로 끝내는 안드로이드 마시멜로 권한 획득

안드로이드 마시멜로부터 권한획득이 변경되었다. 기존의 안드로이드 Manifest에 권한을 선언 해두기만 하면 되었다. 사용자 입장에서는 설치시 해당 권한을 확인 할뿐 설치 후 앱을 사용하면서 해당 권한을 언제 사용하는지 알 수 없다. 구글은 이러한 보안적인 문제점을 해결 하기 위해 권한획득의 시점을 변경 하였다. 관련된 API를 사용하기전 권한을 획득 하는 방식으로 변경하여 사용자는 언제 어느시점에 권한이 필요한지 인지 할 수 있으며 보안적인 문제점을 좀 더 보완할 수 있다는 점이다. 마시멜로 권한 획득 어떻게 대응하는지 알아보자.

권한 획득은 3가지의 지원되는 메소드만 이용하면 간단하게 대응 할 수 있다.

ContextCompat.checkSelfPermission(Context context, String permission)

해당 퍼미션의 상태를 체크한다. 메소드를 이용하여 퍼미션이 허용되었는지 거부된 퍼미션인지 체크 할 수 있다. 단, 마시멜로 이전 버전으로 빌드된 앱이 마시멜로를 타겟으로 빌드된 앱으로 업데이트 설치된 사용자의경우 기존의 모든 퍼미션은 허용되어 있다.

Manifest.permission.*에 모든 퍼미션이 정의되어 있으며, PERMISSION_GRANTED(허용된 퍼미션), PERMISSION_DENIED(거부된 퍼미션)으로 결과값이 리턴된다.

ActivityCompat.shouldShowRequestPermissionRationale(Context context, String permission)

사용자가 권한 요청을 한번이라도 거부한 경우를 알 수 있다. 사용자가 권한에 대한 의심으로 인해 거부하는 경우 좀더 상세한 안내를 표시 해줄 수 있다. 최초 퍼미션 요청시에는 false를 리턴한다.

ActivityCompat.requestPermissions(Activity activity, Stringp[] permission, int requestCode)

Callback
onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults)

퍼미션을 요청한다. 퍼미션을 퍼미션 그룹을 통해 한번에 간소화된 다이얼로그로 창이 뜬다. onRequestPermissionsResult()를 통해 결과값이 Callback된다.

정리

1) ContextCompat.checkSelfPermission()
– 해당권한이 허용되 있는지 체크한다.

2) ActivityCompat.shouldShowRequestPermissionRationale()
– 이미 한번 이라도 거부한 경우 좀 더 상세한 안내페이지를 표시해준다.
– 다시 묻지 않기를 선택 후 거부한 사용자를 위해 안내페이지에 설정으로 바로가는 액션을 준비 해둔다.

3) ActivityCompat.requestPermissions()
– 퍼미션을 요청한 후 Callback되었을때 결과값 또는 checkSelfPermission()을 통해 해당 퍼미션 권한을 획득하면 다음 단계를 실행 한다.

TIP!

퍼미션 권한 획득 후 획득된 퍼미션 그룹과 동일한 퍼미션이 추가 되는 경우
퍼미션이 추가 된 경우 해당 그룹에서 이미 권한을 획득한 사항이라면 requestPermissions()을 호출 하면 아무런 UI없이 onRequestPermissionsResult()를 통해 자동으로 권한이 획득된다.

다시 묻지않기 선택 후 거부시 requestPermissions()을 요청하는 경우
더이상 다이얼로그를 통해 해당 퍼미션의 권한을 요청 할수 없는 상태임으로 안내페이지를 통해 앱 정보->권한에서 해당 권한을 받도록 유도한다.
권한으로 바로가는 링크는 없으며, ACTION_APPLICATION_DETAILS_SETTINGS 액션을 통해 앱 정보페이지로 연결 해주는 정도가 최선이다.

Intent i = new Intent();
i.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
i.addCategory(Intent.CATEGORY_DEFAULT);
i.setData(Uri.parse("package:" + context.getPackageName()));
i.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
i.addFlags(Intent.FLAG_ACTIVITY_NO_HISTORY);
i.addFlags(Intent.FLAG_ACTIVITY_EXCLUDE_FROM_RECENTS);
context.startActivityForResult(i, REQUEST_CODE_SETTING_ACTIVITY);


권한 안내 가이드는 아래 구글 머티리얼 디자인 사이트를 참조하자.

https://www.google.com/design/spec/patterns/permissions.html#permissions-request-patterns

 

추가 참고:
http://googledevkr.blogspot.kr/2015/09/android60runtimepermission.html

http://developer.android.com/intl/ko/guide/topics/security/permissions.html#normal-dangerous

 

안드로이드 머티리얼 디자인 위젯 오픈소스 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

 

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

 

 

더 많은 UI는 아래 사이트 참고:
https://kmshack.github.io/AndroidUICollection

Awesome Android Design

GDG Sydney에서 발표한 Awesome Android Design 주제에 대한 정리입니다.

브랜드와 정말 중요로 하는 컨텐츠에 대해서는 컬러를 통일감 있게 사용해라. 다양한 색상으로 사용자의 집중도를 떨어 뜨리지 말고 정말로 핵심적인 요소에만 컬러를 주어 강조하는게 좋을듯 하다.

Normal과 Pressed 버튼에 대해 너무 대조적인 색상은 표현을 피하라. 허니컴버전으로 오면서 이렇게 쓰라고 해놓고 이제와서는 쓰지 말란다. 너무 과도한 반전색상보다 어느정도 눌렸다는 것만 인지 할 수준으로 만들어도 괜찮을 듯 하다.

각각의 View들의 Hold 스타일에 맞는 리소스만들기가 디자이너입장에서는 좀 귀찮아 할 수 있는데, android-holo-colors.com에 접속해서 Color값을 입력하면 관련 리소스이미지는 물론 Style도 만들어 준다.

actionbarstylegenerator.com에 접속 하면 ActionBar의 Style도 만들어 준다. 액션바, 팝업컬러등 정보를 넣으면 자동으로 Style을 만들어 주기 때문에 유용하다.

Holo Style은 허니컴(안드로이드 3.0) API 11이상부터 지원한다. 그렇기 때문에 하위버전은 AppCompat를 이용해서 Style을 구성해야 하며, res/values를 통해 API버전별로 테마를 나누어 사용해야 한다.

안드로이드의 내부에 정의된 스타일 리소스를 사용 할 수도있다. ?adnroid:attr/로 접근 할 수 있다. 하지만 제조사마다 커스텀할 수 있기 때문에 모든 폰에서 100%똑같은 디자인이 나오지는 않는다. 만약 모든폰에서 똑같은 디자인과 색상을 원한다면 안드로이드 내부 리소스를 쓰기보다 커스텀해서 만들어 쓰길 권한다.

Header Section의 스타일도 정의 되어 있있다.

텍스트 Appearance도 정의 되어 있다. Medium같은 경우 18sp로 정의되어 있으며, ImageView를 쓸때 borderlessButtonStyle을 적용 해주면 Pressed이미지가 버튼처럼 된다. 이것은 Holo스타일에 맞지 않게 잘못 사용하고 있다.

좀 더 Holo스타일처럼 바꾸기위해 LinearLayout의 divider를 통해 dividerHorizontal스타일을 주어 사용해야한다.

버튼도 Holo Style에 맞는 DrawableState를 스타일로 제공하고 있다.

기본적으로 제공하는 스타일을 Holo 스타일에 맞게 잘 사용하면 좋겠다. 위의 이미지 처럼 어떤 레이아웃에 어떻게 배치하느냐에 따라 차이를 보이게 된다. 왼쪽보다 오른쪽이 깔끔하고, 보기도 좋다,

액션바에 로딩 인디케이터을 띄우기 위해서는 setProgressBarIndenerminateVisisility()를 사용하면된다.

style을 통해 커스텀 할 수도있다.

액션바가 오버레이 모드일 경우 맵의 아이콘이 액션바에 가려 질 수있다. 그래서 액션바의 높이를 알 필요가 있다.

이런식으로 액션바의 높이를 구해서 구글맵의 패딩을 줌으로써 버튼이 액션바에 가려지지 않게 된다.

다양한 기기들의 지원

폰전용으로 만든앱은 테블릿에서 사용하면 당연히 사용성은 떨어진다. 화면은 크지만 콘텐츠들의 배치가 폰전용 이기때문에 화면의 낭비가 많아진다.

폰에서는 화면을 새롭게 교체하는 방식을 사용하고, 테블릿에서는 여러개의 화면을 분할 해서 한쪽에서만 화면을 교체하는 방식으로 화면을 넓게 사용할 수 있다.

이렇게 폰과 테블릿의 레이아웃을 분기 해야 하는데, 리소스 layout을 통해 분기할 수 있다.

조각된 화면을 그대로 유지 하고, 전체적인 화면을 구성하는 레이아웃만 분기하면된다.

activity가 전체적인 화면이고 fragment가 조각된 화면들이다. 테블릿의 경우 sw720dp(small width 720dp)즉 최소 가로가 720dp이면 layout-sw720dp라는 디렉토리의 레아웃이 읽히고, 폰의 경우는 layout의 디렉토리의 레이아웃이 읽히게 된다.

폰의 경우에는 fragment를 하나씩 쌓는 방식이고, 테블릿의 경우는 2개의 화면을 펼쳐지게 레이아웃을 구성을 해두었다. 그렇기 때문에 위와 같이 화면들을 구성 할 수있다.

SlidingPaneLayout을 사용해서 테블릿의 activity레이아웃을 구성하면 된다.  가로/세로 모드를 쉽게 관리 할 수있다. 가로일때는 펼쳐져 보이겠고, 세로모드일때는 왼쪽 슬라이드를 통해 화면이 보이는 구조가 된다.

세로모드일 경우 left pane은 뒤로 숨겨지게되고 right pane은 화면이 꽉차게 된다. 그래서 left pane은 보이지 않게 되지만, 슬라이드를 통해 위로 나타나게 된다.

레이아웃변형과 조각되는 화면들로 구성하기 힘들다면 이렇게 리스트뷰와 그리드뷰로 화면을 구성하는 방법도 있다. 폰일때는 가로로 1개씩 아이템을 배치한다면 테블릿일때는 가로로 2개씩 아이템을 배치함으로써 큰화면에 많은 콘텐츠를 보여 줄 수있다.

ListView의 Adapter의 getView()에서 화면의 크기때 따른 레이아웃을 배치 할 수 있다. 예를 들어 폰에서는 가로로 최적화되게 레이아웃을 구성했다면 테블릿일경우 이미지도 좀 더 크고 텍스트위치 세로로 배치하는등 작업을 해서 테블릿에 맞도록 레이아웃을 최적화 시키면된다.

핀터레스트에서 처음으로 들고나온 리스트뷰이다. 기기에 최적화된 아이템의 가로 갯수로 화면을 구성하고 세로간의 아이템 간격이 비대칭이다. E-Trending이라는 앱을 만든 회사에서 AndroidStaggerGrid 뷰를 오픈소스로 공개했다.

기기마다 다른 아이템의 레이아웃

테블릿에 맞도록 레이아웃뿐만 아니라 폰트의 크기등 다양한 단위를 dimens를 통해 정의 할 수 있다.

MaxWidthLinerLayout을 이용하면 child의 크기에 따라 레이아웃 크기가 변경된다. 이 레이아웃을 통해서 나머지 공간에 대한 처리를 쉽게 할 수 있다.

이미지가 많은 앱의경우 모든크기를 다 보여 주기가 힘든경우가 많다. 이럴 경우 특정영역만 보여이기위해 자를수 밖에 없는데, scaleType를 통해서 쉽게 잘려질지와 잘려진다면 영역은 어떻게 할지에 대해 지정 할 수 있다.

다양한 기기지원을 위해서 레이아웃 분할을 통해 구현할 수 있으며, 레이아웃 뿐만아니라 drawable, color, dimensions등 다양하게 분할이 가능하다.

안드로이드 디자인 관련 작업 좀더 쉽게 하기

안드로이드는 디자인은 개발에 있어서 또는 디자인에 있어서 많이 복잡하고 까다로운건 사실이다. 다양한 DPI에 맞는 사이즈를 제작해야되며, 디자이너들에게는 생소한 나인패치라는것도 해봐야 한다.

안드로이드 디자인을 처음으로 하거나 아직 미숙한 디자이너들에게 도움될 만한 사이트를 소개하겠다. 안드로이드 SDK에 나인패치 툴이 있긴 하지만 설치하는 번거로움을 피할수 있고, 즉각적인 이미지를 확인 할 수 있다.

Simple Nine-patch Generator

이 외에도 얼마전 Navigation Drawer의 표준가이드가 생기면서 이에 맞는 인디케이터 아이콘도 생성할 수도 있다. (Navigation Drawer Indicator Generator)

노티케이션 아이콘도 API11 전후로 표준 가이드가 바꼈는데, 이에 맞게 아이콘을 변형해준다. (Notification Icon Generator)

이외 아래 다양한 디자인 관련 작업들이 가능하다. (참고로 크롬브라우저에서만 작동한다.)

Icon generators

Launcher icons
Action bar and tab icons
Notification icons
Navigation drawer indicator
Generic icons
Tab icons (pre-Android 3.0)
Menu icons (pre-Android 3.0)

Other generators

Device frame generator (or see the official version for Nexus devices)
Simple nine-patch generator

Community tools

Android Action Bar Style Generator by Jeff Gilfelt
Android Holo Colors Generator by Jérôme Van Der Linden

안드로이드 앱 개발자가 제안하는 디자인 방법론 – 2. 나인패치(Nine-patch) 실습

안드로이드 나인패치에 대한 두번째 시간으로 나인패치를 개발자가 어떻게 레이아웃을 잡아서 사용 하는지에 대해 알아보겠다.

나인패치에 대해 기억이 안난다면 이전 글을 다시 보고 이 글을 보도록 하자.

2013/02/28 – [개발관련/Android] – 안드로이드 앱 개발자가 제안하는 디자인 방법론 – 1. 나인패치(Nine-patch) 개념

저번 시간 마지막중에 4가지의 나인패치 이미지 예제를 주었다. 대표적으로 쓰이는 이미지로 어떤식으로 적용 되는지 하나하나씩 보자.

 

상단 타이틀이나 내용부분에 그라데이션을 주기 위해서 흔하게 쓰이는 이미지이다.

나인패치를 보면 상단좌측부분은 1px만큼 잡아 주었고, 하단우측부븐은 Full로 나인패치를 잡아 주었다.

<Textview 
  android:layout_width="100dip" 
  android:layout_height="100dip" 
  android:text="Contents" 
  android:textcolor="@android:color/black">

위의 이미지는 나인패치를 가로 세로 100dip으로 강제로 늘린 것이다. Padding영역을 모두 잡아 주었기 때문에 앞으로 상단위쪽부분으로 Content 가 붙어 있는것을 볼 수 있다.

<Textview 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:text="Contents" 
  android:textcolor="@android:color/black">

다음 이미지는 가로 세로 Content 크이게 맞게 늘어 나도록 적용되어 있다. 크기에 맞게끔 늘어 난것을 볼 수있다.

<Textview 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:text="Contents" 
  android:textcolor="@android:color/black">

가장 중요한 부분이다. 흔히들 나인패치를 잡을때 하는 실수..

이 부분도 역시 가로세로 Content 사이즈에 맞게 늘어 나도록 적용하였다. 하지만 Content 를 세로로 길게 넣었다.

자세히 보면 가로로 Content 크기에 맞지 않게끔 늘어 난(빨강색 부분) 것을 볼 수 있다. 왜이렇게 되었을까?

 정답은 상단 나인패치 부분에 있다. 현재 점으로 하나만 잡고 양 옆으로 영역이 남아 있다. 이 부분이으로 인해 좀 더 늘어 난것이다. 정확하게 맞추기 위해서는 나인패치를 Full로 잡거나 1px로 최대한 작게 변경 하면 된다.