1. 머터리얼 디자인이 뭘까?
Material is a design system created by Google
머터리얼 디자인은 구글의 디자인 시스템이다.
2. 머터리얼 디자인은 왜 머터리얼이라는 이름을 갖었을까?
Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.
To replicate real products as closely as possible, each study identifies users, displays functional user flows, and applies real-world restrictions.
(추측) 머터리얼 디자인은 물리적 현실을 은유적으로 반영하고 있기 때문에 머터리얼(물질)이라는 일므을 붙인게 아닐까?
3. 머터리얼 디자인으로 무엇을 할 수 있을까?
Material Components are interactive building blocks for creating a user interface
머터리얼 디자인이 제공하는 컴포넌트들을 조립해서 어플리케이션을 만들 수 있다.
4. 머터리얼 디자인으로 무엇을 할 수 있을까?
Display: Placing and organizing content using components like cards, lists, and sheets.
Navigation: Allowing users to move through the product using components like navigation drawers and tabs.
Actions: Allowing users to perform tasks using components such as the floating action button.
Input: Allowing users to enter information or make selections using components like text fields, chips, and selection controls.
Communication: Alerting users to key information and messages using components such as snackbars, banners, and dialogs.
유저에 정보를 정적으로 보여줄 수 있다.
유저에 정보를 동적으로 보여줄 수 있다.
유저가 정보를 입력하게 할 수 있다.
유저가 앱에서 이동하게 할 수 있다.
유저가 앱에서 선택하게 할 수 있다.
생각해보면 이것이 프로그램으로 할 수 있는 모든것이다.
5. 머터리얼 디자인은 무엇으로 구성되어 있을까?
Material’s color system is an organized approach to applying color to a UI.
Important attributes, such as the typeface, font weight, and letter case, can be modified to match your brand and design.
Applying shape styles can help direct attention or identify components, communicate their state, and express your brand.
색깔. 모양. 글자.
별거는 아닌데 디자인을 바라보는 프레임을 장착한 느낌.
6. 머터리얼 디자인이 일관적으로 지키는 원칙은 무엇일까?
Actionable : Bottom app bars highlight important screen actions and raise awareness of the floating action button.
Flexible : A bottom app bar's layout and actions change based on the needs of the screen.
Ergonomic : The bottom app bar is easy to reach from a handheld position on a mobile device.
중요한 것은 강조하고 / 반복되는 것은 재사용할 수 있게 하고 / 유저가 사용하기에 편리한 디자인.
7. 머터리얼 디자인은 디자인 시스템 컴포넌트 설명에 어떤 내용을 정리하고 있나?
Usage / Principles / When to use / Anatomy /
해당 컴포넌트로 뭘 할 수 있는지 (Usage)
해당 컴포넌트의 정적/동적 구성요소에 대한 설명 (Anatomy)
해당 컴포넌트가 활용될 수 있는 상황/없는 상황 (Example)
8. 머터리얼 디자인의 주요 컴포넌트로는 뭐가있나?
-
Navigation : Bottom Navigation
-
Touch : CheckBox, Chip, Picker
-
Keyboard :
-
Information : Card, Chip, Table, Divider
-
Notification : Banner, Dialog
AppBar - Top/Bottom
BackDrop
