[행사] Naver Tech Concert Day-1 04

Naver Tech Concert Day-1

05. Material Design의 철학과 적용 사례

• 발표자 : 양찬석(구글 코리아 / Partner Developer Advocate) 임성혁 (구글 코리아 / Developer Ecosystem Program Manager)
• 동영상 : https://tv.naver.com/v/4412357/list/272653
• 슬라이드 : https://www.slideshare.net/NaverEngineering/14-material-design
• 세션설명 : Material Design 의 철학과 적용 사례에 대해 발표할 예정입니다.

머티리얼 디자인의 등장

기존 구글에서는 모바일도 웹도 디자인에 그리 신경쓰는 곳은 아니었음.

2011년부터는 홀로테마로 구글 디자인이 개선됨.

사용자에게는 플랫폼과 무관하게 동일하게 기능을 요구하지만 플랫폼 별로 다른 부분은 부담이 됨.

그래서 다양한 플랫폼을 아우르는 일관된 디자인이 필요하게 됨.

현대적이고 개발자가 이해하기 쉬워야 함.

• 아날로그 고유 속성에 중점
  • 물리적 속성
  • 형태 변환
  • 움직임
  • 높이, 음영, 객체 간 계층 구조
• 주요 특성
  • 입체적 표면
  • 의미있는 모션
  • 인쇄물 같은

머티리얼 디자인이 2013, 2014년에 소개되고, 디자인 서포트 라이브러리가 2015년부터 지원됨.

머티리얼 디자인의 아쉬운 점

• 부족한 엔지니어링 리소스
  • 라이브러리 한계 (네비게이션 드로우, 플로팅 액션 버튼 등)
  • 디자인과 개발 프로세스 간 연결이 자연스럽지 않음
• 비주얼 표현의 제약
  • 앱들 간의 차이를 나타내는데 제약
  • 모바일(안드로이드)를 위한 디자인으로 간주됨

새로운 머티리얼 디자인

추가된 주요 특성

• 유연한 기반
• 크로스 플랫폼

머티리얼 파운데이션

머티리얼 디자인 기반으로 좋은 디자인을 제안하며 생각보다 유연함.

기존에는 높이와 그림자에서 상관관계가 까다로웠으나,

머티리얼 파운데이션에서는 계층을 표현하기 위한 높이와 그림자 쓸 뿐이며, 그림자 색대비 등을 사용자가 표현할 수 있음.

하지만 색대비나 외곽선, 그림자 등을 통해서 서피스를 구분할 수는 있어야 함.

구글에서는 머티리얼 파운데이션을 활용한 프로토 앱을 사례로 만들었음.

예로 Basil 이라는 앱에서 예로 TAB의 변경을 확인할 수 있음.

역시 네비게이션 드로우도 재해석하여 완전히 변형해서 사용할 수 있음.

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

Material Theming

훨씬 많은 자유도와 독창적인 심벌을 지원하기 위해 나옴.

• 컬러테마 : 컬러 선택시 레이어 등에 색상, 농도 등을 추천함.
• Typography : 기존 Roboto만 지원했으나, 다른 폰트 특히 한글 폰트도 크기에 맞춰서 나옴.
• Iconography : 5가지의 타입으로 아이콘 지원.
• Motion : 애니메이션 등이 지원됨.

Tools

• Theme Editor : 디자인 작업이 이루어지는 곳, 스케치에 플러그인으로 들어가 있음.
• Gallery : 디자인 결과물을 볼 수 있는 곳

Components

기존 한국의 쇼핑 앱의 경우 머티리얼이 온전히 지원 못하였으나 이제 지원 가능함.

• Bottom App Bar
• Banner
• Extended FAB (기존 FAB에 텍스트가 들어간 엄청 큰 FAB로 보면 됨)
• Chips
• Image Lists
• Text Fields 2가지 제공
• Backdrop (Front 레이어와 Back 레이어로 나뉘어 구현.)

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

material compnents Android 깃허브 레파지토리에서 확인 가능.

https://github.com/material-components/material-components-android

완전한 오픈 소스는 아니고 구글 내부에서 어느정도 개발 완료되면 푸시 됨.

Dependencies

dependencies {
    implementation 'com.google.android.material:material:1.0.0'
    // Other dependencies
}
...
// androidx 사용 전이라면 support 28버전 이상 사용
dependencies {
    implementation 'com.google.android.support:design:28.0.0'
    implementation 'com.google.android.support:support-v4:28.0.0'
    // Other dependencies
}

직접 Material components 빌드하여 사용하기(포함된 샘플 앱은 빌드 안됨;)

git clone https://github.com/material-components/material-components-android.git

./gradlew uploadArchives -PmavenRepoUrl="file://localhost/<path_to_aars>"

즉 커스텀이 가능함.

커스텀 뷰, 커스텀 스타일, 헬퍼 등으로 구성됨.

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

결론

Material Design이 빡빡한 컨셉에서 유연하고 유저 커스텀이 가능해졌음.