Material Design 의 철학과 적용 사례 양찬석 구글 코리아 / Partner Developer Advocate 구글 파트너 Developer Advocate 양찬석입니다. 한국의 앱 개발사들의 구글의 기술과 제품을 이용해 더 좋은 앱과 서비스를 만들 수 있도록 돕는 일을 하고 있습니다. 임성혁 구글 코리아 / Developer Ecosystem Program Manager 구글 내 개발자 생태계 팀에서 한국 지역장을 맡고 있는 임성혁입니다. 개발자 생태계 팀은 전세계 개발자들이 구글의 모든 기술을 보다 쉽게 배우고 편리하게 사용할 수 있도록 프로그램을 기획/운영하고, 이에 근간이 되는 개발자 커뮤니티를 관리/지원하는 것 등을 주요 업무로 담당하고 있습니다. 구글 개발자 생태계 팀의 활동 영역은 developers.google.com에 게재되어 있습니다.

2. 머티리얼 디자인의 철학과 적용 사례
구글, 양찬석 / 임성혁

3. 이미 익숙한 아날로그 UX를 디지털로 이동

5. 물리적 속성 형태 변환 움직임
아날로그 고유 속성에 중점

6. 높이 음영 객체 간 계층구조
아날로그 고유 속성에 중점

7. 입체적 표면 의미있는 모션 인쇄물 같은
머티리얼 디자인의 주요 특성

8. 다량의 우수한 머티리얼 디자인 앱이 등장

9. Happy Ending?

10. 부족한 엔지니어링 리소스
● 제공되는 라이브러리의 한계
● 디자인과 개발 프로세스 간의 연결이 자연스럽지 않음

11. 비주얼 표현의 제약
● 앱들간의 차이를 나타내는데 제약
● 모바일, 특히 안드로이드를 위한
디자인으로 간주됨

12. 새로운
머티리얼 디자인
둘러보기

13. 머티리얼 디자인
● 머티리얼 디자인이란?
● 머티리얼 디자인의 목표
● 머티리얼 디자인 원칙
Material System
Material Foundation
Material
Guideline

14. Create,
Unify,
Customize

15. 입체적 표면 의미있는 모션 인쇄물 같은
머티리얼 디자인의 주요 특성

16. 유연한 기반 크로스 플랫폼
머티리얼 디자인의 추가된 주요 특성

17. 머티리얼 파운데이션
● 머티리얼 디자인의 기반
● “좋은 디자인이란?” 질문에 대한 머티리얼 디자인의 제안
○ Environment, Layout, Navigation, Color, Typography, Iconography,
Shape, Motion, Interaction, Communication
● 유연함 (생각보다)

18. 머티리얼 파운데이션 - 높이와 그림자
● 모든 표면은 높이 값을 갖는다.
● 높이는 계층을 표현할 수 있다.
● 같은 계층에 속한 아이템은 동일한
높이 값을 갖는다.
● 사용자가 서로 다른 높이 값을 구분 할
수 있도록 테두리나 그 외 다른 시각적
요소가 사용되어야 한다.

19. 머티리얼 파운데이션 - 높이와 그림자

20. 머티리얼 파운데이션 - 높이와 그림자

21. 머티리얼
디자인
가이드라인

22. Resources,
Tools,
Components

23. Material Theming

25. 컬러 테마

26. 머티리얼 컬러 시스템

27. 컬러 접근성

28. Typography

29. Iconography

30. Motion

31. Tools

32. EXPERIMENT
Theme Editor
ITERATE & HAND-OFF
Gallery

33. Theme Editor

36. Gallery

37. Gallery

38. Components

39. Material Components

40. Bottom App Bar

41. Banner

42. Extended FAB

43. Chips

44. Image Lists

45. Filled Text Fields

46. Outlined Text Fields

47. Backdrop

48. 안드로이드에서
Material Design Components
사용하기

49. Material Design - Develop

50. Material Components Android

51. Dependencies
dependencies {
implementation 'com.google.android.material:material:1.0.0'
// Other dependencies
}

52. Dependencies
dependencies {
implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:support-v4:28.0.0'
// Other dependencies
}

53. Building from Source
git clone
https://github.com/material-components/material-components-android.git
./gradlew uploadArchives -PmavenRepoUrl="file://localhost/<path_to_aars>"
Clone the repository:
Build the library AAR:

54. MDC for Android = Custom View + Custom Style
● appbar/
● bottomnavigation/
● button/
● chip/
● card/
● checkbox/
● ...

55. Custom Style?
● 머티리얼 테마에서 정의된 내용
● 개별 컴포넌트에서 지원되는 스타일
속성 확인 가능

56. Material Button
<Button
android:id="@+id/material_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cat_button_label_enabled"/>
<Button
android:id="@+id/material_icon_button"
style="@style/Widget.MaterialComponents.Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cat_button_label_enabled"
app:icon="@drawable/ic_dialogs_24px"/>

57. Style 계층
View
Style
Default Style
Theme

58. Style 계층
View
Style
Default Style
Theme <manifest ... >
<application ... >
<activity android:theme="@style/Theme.AppCompat.Light" ... >
</activity>
</application>
</manifest>
<!-- Widget styles -->
<item name="actionBarStyle">@style/Widget.MaterialComponents.ActionBar.Solid</item>
<item name="actionOverflowMenuStyle">@style/Widget.MaterialComponents.PopupMenu.Overflow</item>
<item name="borderlessButtonStyle">@style/Widget.MaterialComponents.Button.TextButton</item>
<item name="bottomAppBarStyle">@style/Widget.MaterialComponents.BottomAppBar</item>
<item name="checkboxStyle">@style/Widget.MaterialComponents.CompoundButton.CheckBox</item>
<item name="chipStyle">@style/Widget.MaterialComponents.Chip.Action</item>
<item name="chipGroupStyle">@style/Widget.MaterialComponents.ChipGroup</item>
<item name="chipStandaloneStyle">@style/Widget.MaterialComponents.Chip.Entry</item>
<item name="materialButtonStyle">@style/Widget.MaterialComponents.Button</item>
...

59. 머티리얼
디자인
연구사례

60. Basil Crane Fortnightly Owl
Rally Reply Shrine

61. Basil

62. Basil

63. Fortnightly

64. Fortnightly

65. 감사합니다.