Support Library 28.0.0 alpha1에 추가된 BottomAppBar

지난 주 Google은 Android P 프리뷰를 발표하면서 디자인 서포트 라이브러리도 새로운 알파버전(com.android.support:design:28.0.0-alpha1)을 공개하였습니다. 이 새로운 버전의 라이브러리에는 MaterialButton, MaterialCardView, Chips 및 BottomAppBar에 대한 레이아웃이 포함되어있습니다.

툴바를 확장한 BottomAppBar는 큰기기의 화면을때 사용자가 엄지손가락으로 버튼에 접근하지 못하는것에 대한 절충안으로 자용자에게 편의성을 제공하기위해 3가지의 방법을 지원합니다.

FloatingActionButton의 app:fabCradleVerticalOffset 속성을 이용하면 반원을 배치 시킬 수 있습니다. app:fabAlignmentMode 속성을 이용하여 CENTER 또는 END로 위치를 변경 할 수 있습니다. 런타임시 이 두개의 속성을 변경하면 멋진 애니메이션으로 위치를 변경해줍니다.

아주 쉽게 사용할 수 있습니다. CoordinatorLayout에 BottomAppBar와 FloatingActionButton을 배치하고 FloatingActionButton의 layout_anchor 속성을 BottomAppBar의 참조 ID로 지정하면 됩니다.

 

몇가지 주의 사항:

  • Toolbar를 확장하여 BottomAppBar를 구현하였지만 setSupportActionBar()를 호출하면 중단됩니다.
  • 배경식을 변경하기위해 android:background대신 app:backgroundTint를 호출 해야 합니다.
  • setTitle, setSubTitle은 재정의되고 비어있기때문에 아무런 작동을 하지 않습니다.

 

Android P 프리뷰를 발표하면서 공개한 알파버전의 라이브러리인 만큼 아직 바뀔 부분이 많습니다. 뭔가 좀 어색해 보이면서도 안드로이드 스럽지않지 않지만 사용자의 접근성을 개선하기에는 좋아 보입니다. 앞으로 어떻게 바껴갈지 지켜볼만 하네요.

 

그리고 알파버전에 들어 있는 추가 레이아웃에 대해 간단하게 언급 하자면..

Chip, ChipGroup

키워드나 태그를 하나씩 보여주는 태그뷰이며 그룹으로 관리가 가능하며 다양한 스타일(Action, Filfer, Choice)를 기본으로 제공합니다. singleSelection속성을 이용하면 그룹중에 하나만 선택 할 수있는 기능도 지원합니다.

MaterialCardView

CardView의 확장버전이며 strokeColor/StrokeWidth 속성이 추가 되었습니다.

MaterialButton

기본 Button에서 cornerRadius를 지원하여 라운드 처리가 가능하며 아이콘을 추가 할 수 있는 속성이 추가 되었습니다.

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

구글의 머트리얼 디자인 발표 후 안드로이드 앱의 디자인이 한결 깔끔하고 심플하게 변했습니다. 다양한 컬러와 복잡한 패턴을 사용하던 앱의 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