구글 Material 디자인 – 새로운 웹 디자인 트랜드

최근 플러그인을 만들어 사이트에 적용하면서 Material 디자인을 적용해보았습니다. HwangC 홈 화면이나 카테고리를 보면 카드 형식으로 포스트가 나열되는 것이 바로 Material 디자인을 적용한 것입니다. 요즘 앱이나 웹사이트에서 많이들 사용하고 있는 디자인이죠.
material-design-2

Material 디자인

material-design-5
Apple에서 flat 디자인이 한참 주목을 받을 때는 3D를 최대한 배제하자는 것이었는데 구글의 Material은 오히려 우리의 삶이 3D이듯 디자인에도 3D를 적용하자는 것 같네요. 그동안 3D 디자인이라고 하면 너무 많은 효과를 주어 오히려 거부감이 느껴지는 디자인으로 생각되어졌는데 구글의 Material 디자인은 절제의 미를 더해 자연스러운 UI(사용자 인터페이스)를 추구합니다.

Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. – http://www.google.com/design/spec/material-design/introduction.html

자세히 보기

Material 디자인 따라 하기

이런 디자인 가이드가 있어도 실제 웹에 적용하기 위해서는 html, css, 그리고 js를 만들어야 하는데 우리는 … 시간이 … 없습니다. 😉 그래서 우리는 다른 멋진 사람이 근사하게 만들어 놓은 Material 디자인을 감사하게 사용하면 되겠습니다.

Materializecss

material-design-7
Bootstrap이 인기를 얻으면서 front-end 프레임워크계의 대부가 되었듯이 Material 디자인에서도 현재 가장 각광을 받고 있는 프레임워크입니다.


Material UI

material-design-6


Bootswatch

material-design-8

자세히 보기


Material Design for Bootstrap

material-design-10


MUI

material-design-11


마치며

앞으로 Material 디자인이 어떻게 발전하게 될 지 궁금하네요. 전 세계 웹을 진두지휘하다시피 하는 구글에서 내놓은 디자인 가이드라인이라 그 영향력은 꽤 크지 않을까 싶습니다. 여러분도 위의 프레임워크를 활용해서 멋진 Material 디자인을 적용해보세요. 그럼 오늘도 즐거운 블로깅 하세요!

글쓴이

HwangC

안녕하세요! 여러분의 편안한 워드프레스 안내자 황씨입니다.

“구글 Material 디자인 – 새로운 웹 디자인 트랜드”에 대한 1개의 생각

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.