Google for Developers Korea Blog: 머티리얼 디자인 (Material Design) 이란?

Google for Developers Korea Blog

한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.

머티리얼 디자인 (Material Design) 이란?

2014년 7월 18일 금요일

작성자 Nicholas Jitkoff, Designer구글이 처음 모바일 디바이스를 만들었을 때, 모바일에는 부족한 것이 많았습니다. 화면 크기도 작았고, 네트워크 연결 속도도 빠르지 않았고, 기능도 별로 없었습니다. 사용하기에 그다지 편리한 환경은 아니었죠. 하지만, 모바일 디바이스는 빠르게 진화했습니다. 성능은 훨씬 더 강력해졌고, 속도는 빨라졌고, 보다 직관적으로 사용할 수 있도록 발전하였습니다. 이제 모바일 디바이스를 위한 UX를 디자인할 때도 이런한 발전을 염두해 두어야 합니다. 더군다나, 이번 I/O 에서 안드로이드는 새로운 폼팩터를 지원할 수 있도록 확장되었습니다. 이러한 변화에 발맞추어, 구글은 모바일과 데스크탑 그리고 그 외 다양한 디바이스들을 아우르는 하나의 일관된 디자인 가이드라인을 공개하였습니다. 바로 머티리얼 디자인 (material design) 입니다. 머티리얼 디자인은 질감이 느껴지는 표면 (tactile surfaces) 과 대담하고 선명한 그래픽 디자인 (bold graphic design), 그리고 아름답고 직관적인 사용자 경험을 위한 자연스러운 애니메이션을 특징으로 합니다.

머티리얼 디자인에서 표면과 그림자는 물리적인 구조를 형성하여, 사용자들이 화면 상의 어떤 부분을 터치할 수 있고 움직일 수 있는지 쉽게 이해할 수 있도록 돕습니다. 현대적인 출판물 디자인 원칙이 반영되어 다른 부가 요소보다 컨텐츠 자체가 강조됩니다. 모든 움직임에는 의미가 있으며, 화면 요소들 간의 관계를 명확히 하고 세세한 디테일을 통해 사용자에게 이러한 관계를 알려 쥡니다.

구글은 작은 시계부터 커다란 TV까지 다양한 종류의 디바이스와 화면 크기를 아우를 수 있는 디자인이 필요했습니다. 때문에, 다양한 플랫폼에 일관되게 적용될 수 있는 통일된 디자인 가이드라인을 만들었고, 그 결과, 머티리얼 디자인은 안드로이드 웨어 (Android Wear) 와 안드로이드 TV (Android TV) 그리고 안드로이드 오토 (Android Auto) 에 모두 적용되었습니다. 지난 구글 I/O 에서 머티리얼 디자인의 프리뷰라고 할 수 있는 첫번째 버전이 공개되었고, 구글 디자인 사이트를 방문하시면 자세한 내용을 확인해보실 수 있습니다.
안드로이드에서 머리티얼 디자인 적용하기안드로이드 L 개발자 프리뷰 버전의 주요 내용 중 하나는 바로 머티리얼 디자인입니다. 여러분의 앱에 새로운 스타일을 적용할 수 있도록 머티리얼 테마가 추가되었고, 이를 활용해 손쉽게 여러분의 고유한 브랜드 색상을 자연스럽게 앱에 녹여낼 수 있습니다. 또한 새로운 위젯들과 엑티비티 전환 애니매이션을 위한 프레임워크, 움직이는 터치 피드백 기능등도 함께 추가되었습니다. 또한, 각 뷰의 깊이 값 (Elevation) 을 설정할 수 있도록 추가되었는데, 이를 통해 UI 요소들을 화면 상에 띄우고 동적으로 적절한 그림자를 표현할 수 있습니다.

웹에서 머티리얼 디자인 적용하기작년 I/O 에서 구글은 다음 세대의 웹을 위한 UI 툴킷을 노리는 야심찬 폴리머 (Polymer) 프로젝트를 공개했습니다. 개발자 여러분은 폴리머를 이용해 웹상에서도 만질 수 있을 것 같은 디자인 요소들, 과감하고 선명한 그래픽 디자인, 부드러운 애니매이션 효과 등 머티리얼 디자인의 핵심 요소들을 손쉽게 활용하실 수 있습니다.

머티리얼 디자인에 관해 더 궁금한점이 있는 분들은 구글의 머티리얼 디자인 가이드라인을 살펴보시기 바랍니다. 또한, 머티리얼 디자인은 계속해서 발전하고 있기 때문에, 공식 +Google Design 커뮤니티에 가입해 최신 소식이나 정보를 확인하실 수 있습니다.

Contents

ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase

검색

Tag

Archive

2024
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2023
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2022
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2021
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2020
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2019
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2018
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2017
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2016
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2015
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2014
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2013
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2012
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 3월
- 2월
- 1월

2011
- 12월
- 11월

Feed

Google
Privacy
Terms