구글은 지난 9월 안드로이드 10(Android 10)을 정식 공개했습니다. 현재는 최신 플래그십 스마트폰 일부에서만 만나볼 수 있지만, 앞으로 수많은 제조사가 자사의 최신 기기에 안드로이드 10 업데이트를 순차적으로 배포할 것으로 예상됩니다.
관련 글: 그래픽 디자인에 최적화된 컴퓨터 추천
안드로이드 10은 시스템 전체 다크 모드(Dark Mode)를 비롯한 다양한 신기능을 선보였지만, 정작 UI 자체의 변화는 크지 않았습니다. 구글은 머티리얼 디자인(Material Design)이 여전히 뛰어난 완성도를 보여준다고 판단해 이를 그대로 유지하고 있기 때문에, 이 가이드는 오레오(Oreo), 파이(Pie) 등 이전 버전의 안드로이드에도 동일하게 적용할 수 있습니다.
머티리얼 디자인 규격에 맞는 UI 요소를 제대로 디자인하는 법을 익혀 두면, 안드로이드 기기에서 안정적으로 작동하는 앱 개발부터 삼성 테마 스토어(Samsung Theme Store)에 커스텀 테마를 등록하는 일까지 여러 분야에서 큰 도움이 됩니다.
Appuals에서 다룬 아래 주제들도 함께 참고하시면 이 글의 내용을 더 깊이 이해하는 데 도움이 됩니다.
- 안드로이드 앱에 다크 테마 적용하는 방법
- Visual Studio 2017로 안드로이드 앱 개발 시작하기
- AOSP(Android Open Source Project) 기반 커스텀 ROM 빌드하기 | 2부
- 안드로이드 시스템 UI 수동으로 테마 입히기 (일부 단계는 안드로이드 9·10에서 달라졌을 수 있지만, 전반적인 정보는 지금도 충분히 유용합니다.)
머티리얼 디자인 개요
머티리얼 디자인은 몇 가지 핵심 요소를 중심으로 구성됩니다. 바로 색상 팔레트, 반응형 그리드 레이아웃, 그리고 테마를 만든다면 안드로이드 시스템 UI에 대한 이해입니다. 앱을 개발하는 경우라면 여기에 더해, 앱이 사용자의 저장소나 카메라 등에 접근할 때 필요한 안드로이드 런타임 권한(Runtime Permissions) 처리 방법도 알아 두어야 합니다.
안드로이드 공식 개발자 문서에는 안드로이드 10에서 앱 개발자가 반드시 알아야 할 프라이버시 및 권한 관련 변경 사항이 훨씬 자세히 정리되어 있습니다. 다만 이 글에서는 실제 앱 개발보다 테마 디자인에 초점을 맞추어 설명하겠습니다.
색상 팔레트
머티리얼 디자인의 색상 팔레트에서 구글은 '두 가지 기본 색상 + 변형(variants)' 체계를 선호합니다.
예를 들어 위 이미지처럼 기본색(primary color)을 보라색으로, 보조색(secondary color)을 청록색(cyan)으로 정했다면, UI의 나머지 요소에는 이 두 색상의 명도·채도 변형을 활용해 전체가 하나로 어우러지도록 구성합니다.
Material Design 공식 에디터는 이런 색상 조합을 손쉽게 만들 수 있는 매우 유용한 도구입니다. 여기에 Clay 같은 전문 UI/UX 디자인 에이전시의 작업물이나 2019년 평가가 좋았던 웹 디자인 회사 목록에서 영감을 얻는 것도 좋은 방법입니다.
반응형 그리드 레이아웃
반응형 그리드 레이아웃을 이해하려면 픽셀 밀도(pixel density)와 화면 자동 적응 방식을 먼저 파악해야 합니다. 일반적인 안드로이드 스마트폰의 DPI는 대체로 300~480 DPI 사이에 분포합니다.
이를 감안하면 300 DPI 화면은 보통 최대 4개의 열(column)까지 표시할 수 있습니다.
반면 600 DPI 화면이라면 최대 8개의 열까지 표시됩니다.
각 열 사이에는 '거터(gutter)', 즉 열과 열을 구분하는 여백 영역이 존재합니다. 예를 들어 360dp 폭의 모바일 화면에서는 각 거터가 약 16dp로 설정됩니다.
화면 DPI 이해하기
UI를 디자인할 때는 시스템 UI든 앱 UI든, 기기마다 다른 픽셀 밀도를 반드시 고려해야 합니다. 아래는 가장 널리 쓰이는 화면 해상도와 픽셀 밀도를 정리한 차트입니다.
경험상, 특정 기기 한 종류가 아니라 '범용' 테마나 앱을 만들 때는 가장 낮은 밀도(1x)부터 디자인을 시작하는 것이 좋습니다. 1x 기준으로 시작하면 픽셀 단위로 치수를 잡기만 하면 되고, 그 값이 모든 DP(density pixel)에서 그대로 유지되기 때문입니다.
반대로 3.5x 기준으로 디자인하면 다른 밀도에 맞출 때마다 모든 값을 3.5로 나누어야 하므로, 여러 DP 값을 일일이 계산하는 번거로움이 생깁니다.
안드로이드 10 UI/UX 디자인 추가 팁
라디오 버튼, 버튼, 체크박스 같은 테마 구성요소에 커스텀 색상을 적용해야 한다면, 각 상태(선택됨, 클릭됨 등)를 drawable로 표현하는 방식은 피하는 것이 좋습니다. drawable을 사용하면 구글이 안드로이드 9와 10에서 대폭 개선한 리플(ripple) 효과 같은 네이티브 머티리얼 디자인 효과를 잃어버리기 때문입니다.
머티리얼 디자인으로 작업할 때는 구글이 기본 제공하는 다양한 내장 요소를 적극 활용하세요. 이렇게 하면 UI/UX와 훨씬 자연스럽게 어우러집니다.
예를 들어 아래 키워드들을 사용해 내장 머티리얼 디자인 요소로 구성요소에 색상을 입히면, 앱이나 UI/UX가 네이티브 시스템 동작과 UI 상태를 그대로 유지할 수 있습니다.
커스텀 색상 버튼(Button)
android:backgroundTint="@color/red"
-----
커스텀 색상 라디오 버튼(Radio Button)
android:buttonTint="@color/red"
-----
이미지 & 아이콘(Icons)
android:drawableTint="@color/red"
-----
커스텀 색상 ProgressBar
android:progressTint="@color/red"
카드뷰(cardview)처럼 구성요소 아래에 간단한 그림자를 표시하고 싶다면 elevation 속성만 사용하면 됩니다.
android:elevation="1dp"
<merge> 태그 병합과 parent 속성을 잘 활용하면 XML 파일을 더 깔끔하게 관리하고 제어할 수 있어 매우 유용합니다.
<LinearLayout>
<include layout="@layout/light_expanded_card" />
<include layout="@layout/light_collapsed_card" />
<include layout="@layout/color_indicator_strip" />
</LinearLayout>
레이아웃 변경 애니메이션은 UX를 한층 끌어올릴 수 있으며, 거의 모든 ViewGroup이 이를 지원합니다. 뷰 계층 구조에 변화가 생길 때마다 자동으로 애니메이션이 적용됩니다. 약간의 노하우만 더하면 커스텀 전환(transition) 효과까지 디자인할 수 있습니다.
android:animateLayoutChanges="true"