[14] Material Design 의 철학과 적용 사례

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

EXPERIMENT
Theme Editor
ITERATE & HAND-OFF
Gallery

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

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

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

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:

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

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

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"/>

Style 계층
View
Style
Default Style
Theme

Style 계층
View
Style
Default Style
Theme <manifest ... >
<application ... >
<activity android:theme="@style/Theme.AppCompat.Light" ... >
</activity>
</application>
</manifest>

<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>
...

머티리얼
디자인
연구사례

Basil Crane Fortnightly Owl
Rally Reply Shrine

[14] Material Design 의 철학과 적용 사례

More Related Content

More from NAVER Engineering (20)

[14] Material Design 의 철학과 적용 사례