#04. Flat Design 2.0
플랫 디자인의 진화
#04. Flat Design 2.0
# 스큐어모피즘에서 미니멀리즘으로
요즘 가장 대세인 디자인 트렌드는 플랫 디자인(Flat Design) 일 것이다.
플랫 디자인은 미니멀리즘을 추구하는 디자인 스타일 중 하나로 그림자, 그라데이션, 텍스쳐 같은 장식적 요소들과 3차원 효과를 사용하지 않는 것을 특징으로 한다. 이는 아날로그를 디지털로 그대로 옮겨 놓은 듯 한 디자인인 스큐어모피즘(skeuomorphism)과 상반된다.
스큐어모피즘 VS 플랫 디자인현재 플랫 디자인의 표본이라고 할 수 있는 애플과 안드로이드는 각각 iOS 7(2013년)과 롤리팝(2014년)을 통해 변화한 UI를 선보였다.(구글의 material design이 제대로 적용이 된 것은 롤리팝이지만, 구글은 2011년부터 구글 웹서비스인 gmail, 캘린더 등을 통해 플랫 디자인으로 전환하고 있었다.)하지만 이에 앞서 플랫 디자인을 운영체제의 UI에 적용한 기업은 2012년 윈도우8을 출시한 마이크로소프트.
Flat Design을 적용한 OS UI플랫 디자인이 IT 영역의 대세가 된 것은 단지 단순함이 아름답다는 미적인 가치 때문만이 아니다.
오히려 미적인 측면보다는 더 빨리 데이터를 로딩할 수 있고, 여러 디바이스와의 연동을 유연하게 하기 위한(카드형 레이아웃이 많이 활용되는 것도 이 때문.) 디지털 환경의 속성에 더 적합하기 때문에 플랫 디자인이 더 각광을 받고 있는 것이다. 또한 플랫 디자인은 콘텐츠의 형식보다 내용에 집중하도록 한다는 점에서 좀 더 사용자 중심의 UI를 추구하는 디자인 스타일이라고 할 수 있며 무엇보다 작은 모바일 화면에 적합한 최적의 스타일이라고 할 수 있다.
# Flat에서 Flat 2.0으로
UI에 있어 (특히 모바일) 대세는 Flat Design 쪽으로 기운듯하다.
아니, 지금은 Flat을 넘어 Flat 2.0으로 진화하고 있다.
아래는 UI/UX 디자이너 Ryan Allen이 Flat Design과 Flat 2.0 Design의 차이를 그린 그림!
Flat VS Flat 2.0 (출처: http://articles.dappergentlemen.com/)Flat vs Flat 2.0
1. Highlight: 하이라이트 된 (좌)모자와 (우)안경
2. Multiple Values: 다양한 속성값을 갖고 있는 (좌)주근깨, 보우 타이
3. Gradient Shadow: 그래디언트 된 섀도우가 생긴 (좌)모자, 보우 타이, (우)모자
4. Dropshadow: 단색 섀도우가 생긴 (좌)눈, (우)눈
이렇게 기존의 절대 평면 Flat Design에 살짝 스큐어모피즘적 특성들이 가미된 것이 Flat 2.0이라고 할 수 있다.
# Flat 2.0의 핵심은 "레이어 된 레이아웃(Layered Layout)"
단순할수록 좋다면 왜 굳이 Flat에 그림자나 하이라이트 같은 요소들을 추가하는 것인가?
디자인에 답은 없지만 그럼에도 불구하고 Flat 2.0이 UI적인 측면에서 더 적합한 이유는 구글의 Material Design의 핵심이기도 한 "레이어 된 레이아웃(Layered Layout)"에 있다.
구글 Material Design(google.com/design)에 의하면 각각의 material 들은 계층을 갖는데 계층을 표현하기 위한 가장 효과적인 수단이 바로 그림자인 것이다.
구글에서 제시하는 material의 층위구조아래 그림에서 material들(혹은 "tactile surface"라고도 불림)이 어떤 층위 구조를 이루고 있는지 살펴보자.
출처: google.com/design이 경우 상위층부터 나열을 한다면 (상단 status bar와 하단 navigation bar제외),
Navigation Drawer - Floating Action Button - App bar 순이다.
Navigation Drawer 아래로 Gradient Shadow가 생김과 동시에 하부 층위 들이 overlaid 된 것을 알 수 있다.
Material Design Guide는 섀도우를 어떻게 줘야 할지에 대해서도 친절하게 알려준다.
출처: google.com/design1. 층이 여러 개 일 때 섀도우를 사용하지 않는 것은 피할 것.
2. 층이 3개 이상이면 층마다 다른 섀도우를 사용할 것:상위층일수록 더 부드럽고 큰 섀도우
# 왜 Layered Layout이며, 왜 Flat 2.0인가?
어떤 Flat Design을 추구할 것인지에 답은 없으며
지금까지 내용의 대부분인 구글의 Material Design이 정답은 아니다.
애플 역시 플랫 디자인으로 가고 있지만 iOS는 다른 방식의 Flat Design을 추구한다.
iOS9 Search와 Google Now 화면검색 서비스인 iOS Search와 Google Now의 화면을 보면 안드로이드는 옅은 회색 배경 위에 흰색 카드가 레이어드 된 형태로 글자가 굉장히 눈에 잘 들어오는 반면, iOS는 원래 배경에 불투명한 유리를 얹은듯한 느낌의 아름다운 레이어 위에 흰색 글자를 사용하는 것을 알 수 있다.
내용은 Google Now가 더 잘 들어오지만.. 이건 애플 감성의 승리라고 할 수밖에..
하지만 방식이야 어떻든 두 OS 모두 페이지의 층위를 표현할 수 있는 UI를 구현하고 있다.
(iOS 디자인 가이드라인에서 제시하는 기준인 Deference, Clarity, Depth)
Apple iOS Design Guidelines (출처: https://developer.apple.com/)이렇게 Layered Layout을 사용하는 이유는 사용자가 있는 위치를 알려줌으로써 내비게이션을 돕기 위함이다. 이전에 내가 있었던 페이지가 어디이고 현재 내가 있는 페이지가 어디인지를 쉽게 인식함으로써 좀 더 seamless 한 내비게이션이 가능하다.
#
Flat Design은 미적인 요소보다는 모바일 이라는 환경에서 트렌드가 된 스타일로 보는 것이 적절하다.
더불어 Clever Typography(크고 잘 읽히는 타이포그래피의 사용)나 Big Image(전면에 이미지를 배치하고 간결한 타이포를 사용), Ghost Button과 같은 디자인이 유행하는 것도 이런 특징들이 플랫한 디자인과 잘 맞기 때문이다.
디자인 트렌드는 항상 변하지며 답이 정해져 있는 것도 아니지만 그래도 모바일 퍼스트 시대의 흐름은 플랫 디자인이 아닐까?
