📚 머티리얼 디자인(Material Design) 사이트 정리

 

머티리얼 디자인이란?

머티리얼 디자인(Material Design)은 모바일, 데스크톱 등 다양한 디바이스들을 아우르는 하나의 일관된 구글의 디자인 가이드라인이다. 

2014년, 구글이 스마트폰에 적용하면서 널리 퍼지기 시작했다. 

 

빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리는 디자인 방식 채택했는데, 현대적인 출판물 디자인 원칙이 반영되어 다른 부가요소보다 컨텐츠 자체가 강조된다.

 

 

디자인 특징

머티리얼 디자인은 다음과 같은 슬로건을 내세운다.

"Build beautiful products, faster."
"Material is a design system – backed by open-source code – that helps teams build high-quality digital experiences."

이에 따라 다음과 같은 디자인적 특징이 있다.

1. 질감이 느껴지는 표면 (tactile surfaces)
2. 대담하고 선명한 그래픽 디자인 (bold graphic design)
3. 아름답고 직관적인 사용자 경험을 위한 자연스러운 애니메이션

 

 

프레임워크

반응형 웹 개발을 위한 부트스트랩 + 머티리얼 디자인을 적용을 돕는 프레임워크를 모아보았다.

 

MDB (Material Design for Bootstrap)

데모 페이지에서 모든 요소를 볼 수 있음

GitHub - FezVrasta/bootstrap-material-design: Redirect repository

 

https://github.com/mdbootstrap/mdb-ui-kit

GitHub - mdbootstrap/mdb-ui-kit: Bootstrap 5 & Material Design 2.0 UI KIT

 

Material Design Lite

구글이 출시한 프론트엔드 라이브러리

Material Design Lite

 

Materialize

반응형 프론트엔드 프레임워크

Documentation - Materialize

 

Material UI

풍부한 리액트 컴포넌트 제공
다크 테마 / 라이트 테마 선택 가능

MUI: The React component library you always wanted

---

Reference

https://365kim.tistory.com/26