간단히 정리해드립니다!
최신 Android 개발에 관한 MAD Skills 영상 및 기사 시리즈의 세 번째 주제가 완료되었습니다. 이번에는 머티리얼 디자인 구성요소(Material Design Components, 줄여서 MDC라고 함)를 다루었습니다. 이 라이브러리는 머티리얼 구성요소를 Android 위젯으로 제공하고 Material Theming, Dark Theme, Motion과 같은 material.io에서 보이는 디자인 패턴을 쉽게 구현할 수 있게 해줍니다.
아래의 에피소드와 링크를 확인해 어떤 내용을 다루었는지 살펴보세요. 다양한 방식으로 콘텐츠를 접할 수 있도록 기존 샘플 앱 및 코드랩 뿐 아니라 최신 MDC 기사 시리즈의 내용을 충실히 반영된 영상도 함께 시청해보세요. MDC 팀의 엔지니어들이 출연하는 Q&A 에피소드도 준비했습니다!
1화: MDC를 사용하는 이유가 뭘까요?
Nick Butcher의 첫 번째 에피소드는 MDC를 추천하는 이유를 비롯하여 MAD Skills 시리즈 전체 내용을 담은 개요 동영상으로, Material Theming, Dark Theme, Motion에 대해 자세히 살펴봅니다. 또한 MDC와 Jetpack Compose의 상호 운용성(interop) 그리고 MDC 및 테마/스타일 모범 사례를 포함하는 Android Studio 템플릿에 대한 업데이트도 다룹니다.
또는 아래의 게시글로도 확인하실 수 있습니다.
https://medium.com/androiddevelopers/we-recommend-material-design-components-81e6d165c2dd
2화: Material Theming
Nick Rout가 진행한 두 번째 에피소드에서는 Material Theming을 다루고 MDC를 사용해 Android에서 이를 구현하는 방법을 살펴봅니다. 주요 주제로 'Theme.MaterialComponents.*' 앱 테마, 색상, 유형 및 모양 속성 선택 (material.io에 대한 도구를 사용함), 그리고 마지막으로 테마에 이들을 추가해 위젯이 자동으로 반응해 UI를 조정하는 방식을 다룹니다. 또한 테마 색상 속성을 확인하거나 이미지에 모양을 적용하는 것과 같이, 특정한 상황에 맞춰 MDC가 제공하는 간편한 유틸리티 클래스도 다룹니다.
https://youtu.be/QDp8X43oFy8
또는 아래의 Medium 기사를 통해서도 확인하실 수 있습니다.
https://medium.com/androiddevelopers/material-theming-with-mdc-color-860dbba8ce2f
https://medium.com/androiddevelopers/material-theming-with-mdc-type-8c2013430247
https://medium.com/androiddevelopers/material-theming-with-mdc-shape-126c4e5cd7b4
3화: Dark Theme
Chris Banes이 진행하는 이 에피소드에서는 MDC를 사용하여 Android 앱에 대해 Dark Theme를 구현하는 과정을 안내합니다. 이번 에피소드에서는 “어두운 테마 강제 설정(force dark)” 사용해 빠르게 변환하는 방법과 (위 설정에서 뷰를 제외하는 방법도 포함), '.DayNight' MDC 앱 테마와 '.PrimarySurface' MDC 위젯 스타일로 디자인을 선택하여 수동으로 Dark Theme를 만드는 방법과 시스템 UI 처리 방법도 함께 다룹니다.
https://www.youtube.com/watch?v=4OO_Evk0jHI&feature=youtu.be
또는 아래의 게시글로도 확인하실 수 있습니다.
https://medium.com/androiddevelopers/dark-theme-with-mdc-4c6fc357d956
4화: Material Motion
Nick Rout가 진행하는 네 번째 에피소드에서는 Material의 모션 시스템에 대해 알아봅니다. 기존의 “Android용 Material Motion으로 최적의 전환 만들기” 코드랩에 나와 있는 단계를 철저히 따릅니다. Reply 샘플 앱을 사용해 더욱 자연스럽고 이해하기 쉬운 사용자 환경을 위해 container transform, shared axis, fade through, fade와 같은 전환 패턴을 사용하는 방법을 보여줍니다. (Navigation 구성요소를 포함한) Fragment, Activity, View와 관련된 시나리오를 진행하며, 이전에 AndroidX와 플랫폼 전환 프레임워크를 사용해본 적이 있으면 익숙할 것입니다.
https://youtu.be/xiNtXsWRD3g
또는 아래의 Medium 게시물을 통해서도 확인 가능합니다.
https://medium.com/androiddevelopers/material-motion-with-mdc-c1f09bb90bf9
5화: 라이브 Q&A
지금까지 다룬 내용을 요약하기 위해, Chet Haase가 MDC 엔지니어링 팀원인 Dan Nizri, Connie Shi와 함께하는 Q&A 세션을 주최했습니다. 이번 에피소드에서는 개발자가 Twitter와 YouTube에 남긴 다양한 질문에 답한 답변이 담겨있습니다.
https://youtu.be/OblMUJWJIf4
(이 동영상에 해당하는 문서는 따로 없습니다. 위의 링크를 따라 동영상을 시청해주세요.)
샘플 앱
시리즈 중에 우리는 두 가지 다른 샘플 앱을 사용해 MDC를 보여주었습니다.
“Material 테마 구축”(MaterialThemeBuilder라고도 함)는 색상, 타이포그래피, 모양에 대한 값을 사용자 지정하여 자체적인 Material 테마를 만들 수 있는 대화식 프로젝트입니다.
Reply는 Material 연구 중 하나로, Material Design 구성요소와 Material Theming을 사용하여 브랜드 이미지에 들어맞는 커뮤니케이션 환경을 만드는 이메일 앱입니다.
이 두 가지 샘플 앱은 모두 MDC 예제 GitHub 저장소에서 또 다른 Material 연구용 샘플 앱인 Owl과 함께 찾아볼 수 있습니다.
https://github.com/material-components/material-components-android-examples
