웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Webdesign Report
HOME WEBDESK Webdesign Report
안드로이드 롤리팝과 Material Design
Posted by kimdirector | 2015.04.08 | Hit : 2223
안드로이드 롤리팝 Material Design
목록보기이전보기
작년 6월 즈음 구글과 애플에서 대세로 밀고 있는 flat 디자인에 대해서 포스팅을 한 적이 있었습니다.(링크)
 
구글에서 안드로이드 롤리팝 버젼을 내면서 Material Design이라는 이름의 디자인이 어떤 스타일의 디자인인지 한번 살펴 보고 몇가지 특징점을 나열해 볼까 합니다.
 
 
특징1. Material Design은 1dp의 통일된 두께를 가집니다.


버튼 / 프레임 / 리스트 등 다양한 종류의 UI 구성요소들이 1dp의 통일된 두께를 가진다는 것은, 플렛 디자인의 '심플함' 을 유지하겠다는 의도로 해석할 수 있습니다. 완벽한 2차원의 플렛에서 3차원의 형태로 변경하긴 했지만, 두께를 제한함으로써 두께의 차이에서 올 수 있는 복잡성을 최대한 배제하겠다는 것이지요.
 
 
특징2. 모든 ui요소는 높이와 그림자를 가집니다.


기존의 Flat디자인이 완전한 평면상에서 색채와 폰트, 폰트 크기만으로 정보를 구별하는데 한계점을 느꼈는지 Material Design에서는 모든 요소에 높이를 부여하고, 이에 따른 그림자를 부여하였습니다. 높이와 그림자를 부여함으로써 아래와 같이 UI각 요소간의 구별성을 확고히 하고 이를 통해 UI의 직관성을 향상시켰습니다.


 
Material 디자인은 Flat디자인의 진화형
 
새로운 Material 디자인은 기존의 Flat디자인과 상반되는 디자인 스타일은 아닙니다. Flat디자인의 단점을 보완하고 발전시킨 디자인이라고 할 수 있습니다. Flat 디자인은 각 요소의 배치, 폰트의 가독성/크기/색상을 중요한 디자인 요소로서 활용합니다.(종이로 출간되는 신문, 잡지를 디자인하는 편집디자인이라고 할 수 있을 것 같습니다.) 기존 종이매체에서 편집디자인은 유용하게 사용되었지만 인터액션이 존재하고 다차원적인 정보와 요소가 혼재되어 있는 스마트 디바이스 환경에서는 2% 부족한 면이 존재합니다.
 
구글은 기존의 편집디자인이 추구하던 정보의 가독성을 유지하면서 다차원적인 정보와 요소들을 효과적으로 보여주기 위해 Flat 디자인에 두께와 높이를 부여하여 Material 디자인으로 발전시켰다고 할 수 있을 것 같습니다.
 
아이폰 4, 5, 5s / 아이패드 2, 미니 / 맥북에어 등을 사용해 본 애플 유저로서 이번 구글의 Material 디자인은 '드디어 구글이 애플보다 한발짝 앞서 가는가!' 라는 생각이 듭니다. 과연 애플은 Flat 디자인을 어떤 식으로 발전 시킬까요 ?
 
 
관련 예전글
 
 
참고자료
 
추천영상

 
Posted by kimdirector | 2015.04.08 | Hit : 2223
Origin http://cuzkus.blog.me/220228472151
Tags 안드로이드 롤리팝 Material Design
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=438

COMMENT
Commented by kimdirector
2015.04.08 12:49:30 X
머트리얼 디자인에 대한 개념과 정의를 나열한 수준입니다. 머트리얼 디자인이 처음 도입되었을 때의 개념적인 정보 수준입니다.
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
한글 개발자 사용자 인터페이스 HTML5 타이포그래피 html 오픈소스 성공 제안서 디자인 Draft 안드로이드 2015 웹사이트 예제 웹 접근성 BIP 혁신 IT 홈페이지 메트로 스타일 노트 웹타이포그래피 Icons UX 브라우저 바이널 X CSS 디자인 한국IDG 벡터 모바일 스티브잡스 프로젝트 폰트 커뮤니티 ColorPicker 이벤트 설명회 Mobile