플랫 디자인이란?


플랫 디자인. 디자인에 관심이 있거나 종사하는 사람들은 누구나 한 번은 들어봤을 용어입니다. 미니멀리즘에 뿌리를 두고 있는 이 디자인 트렌드는 무엇이 ‘아닌가'에 의해 정의되곤 합니다.


우선 플랫 디자인은 3D가 아닙니다. 플랫이라는 용어 자체가 이차원적 형태를 의미하며, 그림자, 하이라이트, 텍스처 등 심도나 차원을 나타내는 요소는 배제됩니다. 플랫 디자인은 스큐어모픽(skeuomorphic)도 아닙니다. 플랫 디자인은 실제 세계에 존재하는 오브젝트나 프로세스를 구현하는 스큐어모피즘에 대항하여 발생했습니다. 스큐어모피즘에서는 그림자, 텍스처, 반사, 엠보싱 등이 흔하게 사용됩니다.



iOS의 스큐어모픽 디자인(좌)과 플랫 디자인(우)


플랫 디자인은 2012년부터 유행하기 시작했습니다. 특히 Windows8과 iOS7이 보급되면서 그에 대한 모방도 급격히 늘어났습니다.



Window 8.1


이제 플랫 디자인이 유행하기 시작한지 몇 년이 흘렀고 그 경향은 더욱 강해지고 있습니다. 단순히 스쳐가는 유행은 아니라는 것입니다. 오늘 포스팅에서는 플랫 디자인의 장,단점과 그 미래에 대해 이야기하고자 합니다.


플랫 디자인의 장점 

반응형 디자인과의 호환성

마이크로소프트와 애플이 플랫 디자인을 도입하면서 사용자들에게 새로운 경험을 안겨주었습니다. 플랫 디자인은 웹과 모바일 디자인에 좋은 영향을 미치며 발전을 계속하고 있습니다. 플랫 디자인의 기본 원리는 다른 디자인 카테고리에도 적용이 가능하지만, 그리드를 기반으로 레이아웃과 그래픽이 구성되는 웹과 모바일에 특히 적절하기 때문입니다. 다양한 디바이스와 스크린 사이즈에 맞춰 쉽게 사이즈를 조절하거나 배열을 조절할 수 있습니다.

아래 예시를 살펴보면 웹과 모바일 사이에 일관성을 유지하면서 디자인을 단순화하거나 재배치 한 것을 알 수 있습니다.

Sergey Valiukh 플랫 디자인의 웹과 모바일 적용


반면 스큐어모피즘은 그림자나 텍스처 등의 디테일과 함께, 고정된 이미지 사이즈를 가지고 있기 때문에 다양한 보기 방식에 적절한 대응을 하기 힘듭니다. 


유연한 프레임워크

그리드, 카드, 모듈, 블록. 어떻게 불리든지 한결같은 기하학 형태로 구성되어 있습니다. 이런 종류의 레이아웃에서는 각각의 요소가 적절히 배치되어 있고 한 눈에 쉽게 들어옵니다.


그리드의 프레임워크는 매우 유연합니다. 디자이너가 콘텐츠를 보여주기에 가장 적절한 배치를 쉽게 만들 수 있습니다. 예를 들어 그리드를 기반으로 한 아래의 브로슈어 디자인을 살펴보면, 다양한 사이즈의 사각형에 타이포그래피나 아이콘 요소들이 들어가 있습니다. 통일감 있는 색, 블록, 단순한 일러스트레이션이 플랫 효과를 더해주고 있습니다.


Bureau of Betterment

아래의 웹사이트는 메뉴, 직원 프로필, 서비스 리스트 등에 다양한 방법으로 그리드를 적용하고 있습니다.

Teamgeek

깔끔하고 가독성 높은 타이포그래피

플랫 디자인은 디자이너의 타입 선택에도 영향을 미쳤습니다. 크고 현대적인 타이포그래피가 자주 사용되고 있습니다. 그림자와 기타 효과가 없기 때문에 텍스트의 가독성은 높아집니다.


Radium Labs

True Digital  산세리프 타입은 플랫 스타일과 잘 어울리지만, 세리프와 디스플레이 

타입페이스도 헤드라인에 사용하기에 나쁘지 않습니다



플랫 디자인의 단점


사용성과의 타협


플랫 디자인의 깔끔하고 현대적인 특징을 강조하기 위해, 디자이너들은 미적인 외형에 집착하게 되는 덫에 빠지곤 합니다. 그 결과 특히 웹과 모바일의 사용성에 부정적인 영향을 끼치게 됩니다.

어떤 것이 클릭 가능한지 아닌지 구분이 모호하게 되는 경우가 나타납니다. 모든 것이 동일한 바탕 위에 시각적으로 플랫하기 때문입니다. 심플함을 추구하다가 중요한 기능과 액션들은 가려지고 사용자들은 이것들을 놓치게 됩니다. 아래 웹사이트를 살펴봅니다. 모든 박스들을 클릭할 수 있을까요? 몇 개만 가능할까요? 단지 보는 것 만으로는 판단하기 힘듭니다.



Mike Kus 어떤 것을 누를까요?



구별의 모호함


모든 비즈니스, 브랜드, 개인 디자인 프로젝트는 제각각의 개성을 드러냅니다. 웹사이트, 앱, 명함, 포스터 등 종류는 상관이 없습니다. 플랫 디자인의 또 하나의 단점은 단순하고 정제된 비주얼 스타일로 인해 서로가 매우 비슷해진다는 데 있습니다. 순수하게 플랫 스타일로 작업하는 디자이너들은 제한된 원칙과 선택을 바탕으로 작업을 해야 합니다.


예를 들어 서로 다른 디자이너들이 디자인한 아래의 모바일 인터페이스들은 모두 기하학 형태를 바탕으로 흰색의 산세리프 텍스트를 취하고 있습니다. 색상 선택 또한 매우 비슷합니다.


Marco La Mantia & Simone Lippolis (좌) /  Luis Vaz (우) 

하늘 아래 같은 디자인은 없다지만


과도한 유행


플랫 디자인은 그동안 디자인 트렌드 리스트에 지속적으로 등장했습니다. 현재의 테크놀로지를 반영하고 현대적인 느낌의 작업을 하고자 하는 디자이너들에게 끊임없이 인기가 많았습니다. 하지만 트렌드의 문제점은 디자이너들이 그 효용성을 따지지 않고 단순히 대세를 따르게 한다는 것에 있습니다. 이때 아무 목적 없이 디자인을 선택하게 되는데 그 한 예가 ‘긴 그림자’입니다.


아래는 타이포그래피와 아이콘에 자주 사용되는 긴 그림자 유행의 전형적인 예시들입니다. 두 예시는 플랫이라는 새로운 스타일이 유행하기 시작한 2013년에 제작되었습니다. 긴 그림자는 플랫 디자인의 밋밋함을 해소하기 위한 장식 적인 요소로 많은 디자이너들이 (특별한 이유는 없지만) 사용하고 있습니다.

Alexander Lototsky (좌) Erik Malmsköld (우)


앞에서 이야기한 바와 마찬가지로, 깊은 생각 없이 유행하는 스타일을 선택하고 디자인하는 것보다 더욱 위험한 것은 사용성에 부정적인 영향을 끼치는 것입니다. 이것에 대한 또 다른 예시가 바로 아주 얇고 가벼운 타입페이스를 선택해 깔끔하고 미니멀한 디자인을 하는 것입니다. 여기서 가독성은 희생됩니다. 다양한 보기 환경에 따라 최적으로 맞추게 되면, 특히 작은 사이즈에서 얇은 폰트들이 문제가 됩니다.

Olivier Zattoni 작고 얇은 텍스트는 가독성이 떨어집니다



플랫 디자인의 미래: 플랫 2.0


지난 몇 년 간 디자이너들은 플랫 디자인으로 다양한 시도들을 했고, 이미 플랫의 장단점을 파악하고 적절하게 스타일을 발전시켰습니다. 초창기 플랫 디자인이 엄격한 시각 법칙을 따랐다면 최근에는 미적, 기능적 이유로 그림자, 텍스처 등을 적당히 도입하기에 이르렀습니다.

이런 변용의 결과로 나타난 디자인을 ‘플랫 2.0’ 혹은 ‘거의 플랫(almost-flat)’ 이라고 부르곤 합니다. 이 스타일은 좀 더 타협적입니다. 플랫 디자인의 단순함을 유지하면서도 약간의 스큐어모픽 특징을 더해 높은 사용성과 시각적인 다양성을 추구합니다. 그중 하나는 요소들을 배열 할 때 색에 변화를 주거나 그림자를 더함으로써 약간의 깊이감을 더하는 방식입니다. 흔히 사용되는 또 다른 접근법은 플랫 일러스트레이션이나 아이콘 대신 사진을 사용하는 것입니다.

아래의 예시는 플랫 디자인의 그리드 레이아웃과 가독성은 유지하고, 요소들을 배치할 때 텍스처 일러스트레이션을 가미했습니다. 플랫 2.0의 좋은 예시입니다.


Quotes Magazine



머티리얼 디자인 (Material Design)


‘거의 플랫(almost-flat)’ 디자인과 유사점이 많은 머티리얼 디자인은 구글에 의해 개발된 비주얼 언어입니다. 그리드 기반의 레이아웃과 ‘계획적인 색상 설계, 정확히 맞물리는 이미지, 큰 사이즈의 타이포그래피, 의도적인 여백'으로 대담하고 그래픽적인 비주얼을 추구합니다.

Google Material design 


머티리얼 스타일은 ‘시각적인 암시는 실제 세계를 기반으로 한다' ‘익숙한 촉감'을 바탕으로 종이에서 영감을 얻습니다. 스큐어모피즘과 맞닿아 있는 부분입니다.

아래의 UI 콘셉트를 살펴보면 버튼에 섬세한 그림자와 색을 사용해 내비게이션을 선명하게 드러내고 있습니다. 배경의 큰 타입페이스와 표면의 종이 같은 레이어링으로 위계를 설정하고 있습니다.

Violetta for Tubik Studio 머티리얼 디자인이 적용된 웹사이트

Ultralinx 머티리얼 디자인이 적용된 웹사이트가 모션과 결합되면 이렇게 보입니다

머티리얼 디자인은 분명히 플랫 디자인의 요소를 가지고 있지만, 빛과 그림자, 움직임, 기타 다른 디테일들을 사용해 플랫 디자인을 조금 더 유연하고 발전적으로 차용하고 있습니다.


머티리얼 디자인에 대해 좀 더 알고 싶다면? 포스팅 바로가기


구글에서는 디테일한 머티리얼 디자인 가이드를 무료로 제공하고 있으므로, 디자이너들은 이를 바탕으로 다양한 실험과 해석을 시도해 새로운 트렌드를 만들어 볼 수 있습니다. 마이크로소프트,  애플, 구글 같은 큰 브랜드들이 디자인 스타일의 보급에 많은 영향을 끼치고 있기 때문에, 디자이너들은 이를 충분히 이해하고 발전시켜 사용자들에게 제공해야 합니다.


by 돼지발자국


출처: Design School

Posted by slowalk

최근, 구글은 Material Design으로 모바일 친화적인 업데이트를 보여주었습니다. 그에 따라 더 많은 사이트들이 ‘mobile ready’로 움직이며, 반응형 웹 디자인의 인기가 계속되고 있는데요. 작년에 이어 올해에는 어떤 것이 가장 인기가 있을지 AWWWARDS가 소개하는 웹 디자인 트렌드를 전해드립니다.





1. UI 패턴의 증식

반응형 디자인의 부작용 중 하나는 많은 사이트들이 비슷하게 보인다는 것입니다. 하지만 반응형 디자인만의 문제가 아닙니다. 워드프레스 사이트의 대두와 테마 시장의 붐의 영향도 있습니다. 


Cypress North


그러나 비슷하게 보이는 것이 꼭 나쁜 것은 아닙니다. 우리가 웹을 소비하는 방식이 많은 공통 UI 디자인 패턴을 만드는 방식으로 바뀌었기 때문입니다.

즉, 체크아웃은 체크아웃이고 그 자체의 역할을 합니다. 로그인 모델도 마찬가지입니다. 휠 UI를 재발견할 다른 이유는 없습니다. UI 패턴은 매끄러운 경험을 통해 사용자를 안내합니다. 


몇 가지 친숙한 패턴에 대해 살펴보겠습니다. 


햄버거 메뉴 

약간의 비판이 있긴 하지만, 햄버거 메뉴를 광범위하게 사용하면 사용자들이 기능을 쉽게 인식할 수 있다는 것이 분명합니다.


Silenza


계정 등록

사이트에 가입할 때 볼 수 있는 패턴입니다. 정보를 입력하는 부분이나 소셜 계정의 로그인을 이용하는 버튼이 있을 것입니다. 여러 단계로 나눠진 폼 마법사는 필수 항목을 확인하고 다음 단계로 넘어가기 때문에, 사용자가 가입 프로세스를 잘 통과할 수 있도록 만듭니다. 


Typeform


긴 스크롤

대부분의 사람들은 모바일 기기 덕분에 긴 스크롤에 익숙합니다. 이 기술은 스토리텔링을 통해 사용자들을 이끄는 사이트에 특히 잘 어울립니다. 또한 특정 섹션으로의 스크롤로 멀티 페이지 사이트를 흉내 낼 수 있습니다.


Vimeo


카드 레이아웃

핀터레스트가 사용한 카드 패턴은, 정보를 훑어보기에 적절한 크기로 보여주기 때문에 많이 사용됩니다. 각 카드는 하나의 통합된 개념을 나타냅니다. 직사각형 형태의 카드는 '콘텐츠 컨테이너'로서, 너비가 각기 다른 디바이스에 맞춰 쉽게 재배치할 수 있습니다.


TheNextWeb


대표 이미지

시각은 가장 강력한 인간의 감각이기 때문에, 고화질의 대표 이미지는 사용자의 시선을 사로잡는 가장 빠른 방법 중 하나입니다. 대역폭과 데이터 압축 기술의 발전 덕분에 사용자들은 긴 로딩 시간에 고생하지 않아도 됩니다. 스크롤 상단에 대표 이미지가 있고, 그 아래 지그재그 섹션이나 카드를 나열하는 것이 일반적인 레이아웃입니다.


Maaemo



(광고)



2. 풍부한 애니메이션

애니메이션은 사이트의 스토리텔링, 더 많은 상호작용이나 즐거운 경험을 주기 위해 점점 더 많이 사용되고 있습니다. 

하지만 아무 곳에나 애니메이션을 넣을 수는 없습니다. 사이트의 이야기 요소와 특성에 애니메이션을 추가할지의 여부를 신중하게 고려해야 합니다. 애니메이션에 대해 다음의 두 가지 관점으로 생각해볼 수 있습니다.


- 대규모 애니메이션 : 페럴렉스 스크롤링이나 팝업 알림과 같은 효과를 포함하며, 사용자에게 좀 더 영향을 미칠 기본적인 인터렉션 도구로써 사용됩니다. 

- 작은 규모의 애니메이션 : 스피너, hover 도구 및 로딩 바를 포함하며, 사용자 입력이 필요하지 않습니다.


가장 인기 있는 애니메이션에 대해 알아보겠습니다.


로딩 애니메이션

로딩 애니메이션을 보면서 사용자는 즐겁거나 기쁨을 느낄 수도 있고 반대로 지루함을 느낄 수도 있습니다. 로딩 애니메이션은 주로 플랫한 디자인, 미니멀리즘, 포트폴리오나 싱글 페이지 사이트에 사용됩니다.


Slack via Lauren Tan


로딩 애니메이션은 되도록 단순하게 만들고 사운드를 넣지 마세요. 사이트의 특성이나 주요 컬러와도 잘 어울려야 합니다.


네비게이션과 메뉴

숨겨진 네비게이션 메뉴는 화면 공간을 절약할 수 있어서 더욱 더 인기가 많아지고 있습니다. 특정 버튼을 클릭하여 메뉴를 드러낼 때, 어색한 전환을 막기 위해 애니메이션을 사용합니다.


갤러리와 슬라이드쇼

갤러리 및 슬라이드 쇼는 사용자의 과부하 없이 여러 이미지를 보여줄 수 있는 효과적인 방법입니다. 사진 사이트, 제품 쇼케이스, 포트폴리오 사이트에 중요합니다.


Born Fighter


모션 애니메이션 

움직임은 사용자의 주의를 집중시키는 훌륭한 도구입니다. 움직임은 시각적 계층을 만드는데도 효과적이며, 입력 폼과 메뉴, 사용자의 행동을 유도하는 요소에 적용하면 사용자의 눈길을 끌 수 있습니다.


Bugaboo


스크롤

부드러운 스크롤에는 애니메이션이 필요합니다. 사용자의 스크롤 조작으로 애니메이션이 펼쳐지는 속도가 달라질 수 있습니다.


Squarespace


배경 애니메이션/비디오

단순한 애니메이션 배경은 사이트에 가시성을 더할 수 있지만, 산만할 수 있기 때문에 적당히 사용되어야 합니다. 개별 섹션이나 전체 이미지의 부드러운 움직임을 만드는 데에 사용하는 것이 중요합니다.


Dunckelfeld



3. 마이크로 인터렉션(Microinteractions)

휴대전화의 알림을 끄는 것에서부터 페이스북의 고양이 사진에 좋아요를 누르는 것까지, 마이크로 인터렉션은 우리 주변 곳곳에 있습니다. 


Slack


마이크로 인터렉션은 상태나 피드백을 전달하거나 행동의 결과를 보여주고 사용자가 무언가를 조작하는 데에 도움을 줍니다. 마이크로 인터렉션은 모든 어플리케이션에서 중요한 부분입니다.



4. 머터리얼 디자인(Material Design)

구글은 머터리얼 디자인이라는 새로운 스타일의 언어를 출시했습니다. 이는 더 현실적인 디자인을 위해 깊이와 움직임의 개념, 그림자 효과를 사용합니다.


Google Now


머터리얼 디자인의 목표는 UX 중심의 깔끔하고 현대적인 디자인을 만드는 것입니다. 미니멀한 모습에서 다른 트렌드인 플랫 디자인과 공통점이 많아보이지만, 머터리얼 디자인은 순수한 플랫 디자인보다 더 많은 깊이와 그림자를 사용합니다. 

지난 6월 구글은 웹사이트에 적합한 Material Design Lite를 발표했습니다. Lite는 vanilla CSS, HTML, JavaScript 를 사용하며, 웹 사이트에 머터리얼 디자인의 모습과 느낌을 간단하게 추가할 수 있습니다.



5. 반응형 디자인

최근 몇 년 동안 모바일 인터넷 사용의 증가로 반응형 웹 디자인은 여전히 인기를 끌고 있습니다.


UXPin


모든 기능을 갖춘 모바일 친화적인 사이트를 구축하는 것이 비교적 간단하고 저렴할 수 있습니다. 그러나 적절히 수행하지 못할 경우, 퍼포먼스와 관련하여 몇 가지 문제가 있을 수 있습니다. 최상의 반응형 퍼포먼스를 위해 Guy's Pod의 가이드를 참고해보세요.

반응형 디자인은 유용하지만, 좋은 UX를 제공하기 위해 속도를 개선하는 등의 노력과 고민이 필요합니다.



6. 플랫 디자인 (Flat Design)

플랫 디자인은 미니멀리즘, 반응형 웹 디자인, 머터리얼 디자인과 같은 다른 트렌드와 인기를 함께하고 있습니다.


Beoplay


앞으로 플랫 디자인에서는 다음과 같은 트렌드를 볼 수 있습니다.


- 긴 그림자 : 평면 디자인에 깊이를 더해 줄 것입니다.

- 생기가 넘치는 컬러 : 인기있는 UI 프레임워크와 템플릿은 더 생동감 있는 컬러를 사용하고 있습니다. 

- 간결한 타이포그라피 : 플랫 디자인에서 간결한 타입페이스는 텍스트의 가독성을 높여줄 것입니다.

- 고스트 버튼 : UX 측면에서 산만하지 않고, 사용자가 가리켰을 때 클릭할 수 있는 링크를 보여주어 기능을 수행할 수 있도록 합니다.  

- 미니멀리즘 : 신선하고 깔끔한 UI를 위해 요소의 수를 줄이는 시도가 보입니다.



지금까지 2016년의 웹 디자인 동향 6가지를 살펴보았습니다. 2015년과 크게 다른 흐름은 아니지만 그 안의 작은 요소들이 조금씩 변하고 있는 것 같습니다. ‘힙한’ 트렌드라고 무작정 따라하지 마세요. 사용자에게 최선이 무엇인지 먼저 생각해보는 것이 중요합니다.



출처 : AWWWARDSDESIGN.CCIT WORLD


by 비숑 발자국



(광고)


Posted by slowalk