플랫 디자인이란?


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


우선 플랫 디자인은 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

황금비율은 자연이 우리에게 선사해 준 가장 아름다운 비율입니다. 조개의 껍질, 꽃잎 등 자연에서 뿐만아니라 모나리자피라미드 등 역사적인 건축물이나 예술작품에서도 황금비율을 찾아볼 수 있는데요, 이러한 황금비율을 우리가 하는 디자인에 어떻게 적용할 수 있을까요? 디자인에서 황금비율을 이용할 수 있는 팁을 소개합니다.  





두 변의 길이가 황금 비율인 1:1.61을 사각형에 적용한 것이 아래의 황금사각형입니다. A4용지, 신용카드나 신분증(8.5cm, 세로 5.4cm, = 1.574) 등 주위에서 흔히 이 황금사각형을 발견할 수 있는데요, 우리의 눈엔 단순히 직사각형으로 인식되었던 이러한 것들이 인간이 보기에 가장 편안하고 안정적인 형태입니다. (2016.01.14 수정)





황금비율을 가장 간단하게 적용하는 방법은 화면이나 종이를 구성하는 그리드를 황금비율로 나누는 것입니다. 특히 단 구분이 중요한 웹디자인에서는 더 유용하게 쓰일 수 있는데요, 가로 960픽셀의 화면을 1.6:1의 비율로 나누게 된다면 각각 594픽셀, 366픽셀로 나눌 수 있습니다. 메인 영역과 사이드 영역의 구분이 안정되어 보입니다. 





메인과 서브의 영역이 황금비율과 거의 유사한 비율로 나뉘어 깔끔하고 정돈된 느낌을 주는 내셔널 지오그래피의 웹사이트입니다. 





화면을 가로로 구분할 때에도 역시 황금비율을 이용할 수 있습니다. 원페이지로 화면을 구성할 때에, 메인 영역과 사이드 혹은 푸터 영역을 황금비율로 구성할 수 있을 것입니다. 






피보나치 수열로 만들어진 황금나선을 이용하는 방법도 있습니다. 디자인 스튜디오 Moodley가 디자인 한 아트페스티벌의 브로셔는 로고와 이미지가 충분한 여백과 함께 황금나선을 따라 적절히 배치되어 시각적인 안정감을 줍니다.





트위터의 웹 화면 또한 나선형 그리드로 화면이 구성되어 있습니다. 메인 콘텐츠 영역과 좌측 사이드의 각 영역이 황금비율로 나누어져 중요도에 따라 사용자의 시각적인 흐름을 유도합니다. 





이 외에 2/3법칙(Rule of thirds)은 황금비율과 유사하며 쉽게 그리드를 나눌 수 있는 방법입니다. 이는 화면을 가로 3등분, 세로3등분으로 동일하게 분할하는 것인데요, 카메라로 사진을 찍을 때 이 그리드 안에서 피사체를 중앙의 코너에 배치하는 이유 또한 유사한 원리라고 할 수 있습니다. 





여백과 이미지, 그래픽 요소가 9등분 안에서 조화롭게 배치된 표지 디자인입니다. 정중앙에 배치된 타이틀과 중앙을 향한 모델의 시선은 시각적인 균형감과 안정감을 줍니다.





웹디자인에서도 같은 원리를 이용할 수 있습니다.  화면을 응시할 때 우리의 눈은 왼쪽에서 오른쪽, 위에서 아래의 방향으로 시선이 이동한다고 합니다. 일반적으로 로고가 상단 좌측에 위치하는 것은 바로 이런 이유입니다. 9개의 영역에서 헤더와 푸터, 메인 콘텐츠와 서브 콘텐츠를 이 원리에 따라 적절히 구성하면 좋습니다.





 

폰트 크기를 적용할 때에도 황금비율을 이용할 수 있는데요, 타이틀과 서브타이틀, 그리고 본문의 글자 크기를 정할 때 황금비율을 이용한다면 시각적으로 균형된 문단을 구성할 수 있습니다. 웹에서의 텍스트 크기를 황금비율로 구성해주는 사이트(http://www.pearsonified.com/typography/)를 이용해도 좋습니다. 본문의 텍스트 크기를 입력하면 이에 맞는 타이틀, 서브타이틀 등의 크기를 보여줍니다.

 




황금비율은 어디까지나 참고사항입니다. 모든 디자인에 이 황금비율을 적용할 필요는 없지만, 오랜 시간동안 우리의 눈에 가장 익숙하고 역사적으로 검증된 자연의 산물인 황금비율을 디자인에 이용해 보는 건 어떨까 싶습니다.



출처 : canvafastcodesign, tutsplus, creativebloq

by 소금쟁이 발자국



(광고)


Posted by slowalk

흰 종이에 줄을 맞춰 글자를 쓰기란 생각보다 힘이 듭니다. 그렇지만 종이에 일정한 간격의 수평선이 그어져 있다면 보다 쉽고 깔끔하게 글을 쓸 수 있습니다. 우리가 흔히 사용하는 유선노트와 같이, 그리드(grid)는 더 나은 문서를 만들 수 있게 해줍니다.


그리드 시스템을 사용하면 정보에 질서와 구조를 부여할 수 있습니다. 의미 있고 논리적으로 콘텐츠를 구성할 수 있도록 도와줍니다. 편집 디자인에서 주로 다루던 그리드를 이제는 웹과 모바일 앱에서도 당연하게 사용합니다. 그리드 시스템은 어떻게 만들어야 할까요? 영국의 디자이너 Tom Newton이 말하는 그리드 시스템 가이드를 소개합니다.





1. 고려 사항

그리드를 고려할 때는 첫 번째로 문제 해결, 두 번째로 미학에 초점을 맞추어야 합니다. 그리드는 요소들의 디자인과 배치에 도움을 주는 프레임 워크이지만, 모든 것에 두루 적용되지는 않습니다. 기본적으로 내용 구성에 있어서 풀어야 할 문제를 먼저 생각해야 합니다.  


기술적인 제약 및 지침

구글의 Material Design을 보면, 어플리케이션 디자인에서 8dp의 사각형 격자를 기준으로 하는 그리드 시스템을 사용하지만, 타입과 툴 바의 아이콘에는 4dp 사각형 격자 기준의 그리드를 적용합니다. 



웹에서는 그리드 규칙에 더 많은 와일드 카드가 있지만, 반응형 웹에서 그리드가 어떻게 반영되어야 할지도 고민해봐야 합니다.


비즈니스 제약

브랜딩은 주요한 제약 조건입니다. 그리드에 브랜드 자산을 맞춰보았을 때 규칙에 벗어나는 그리드를 만드는 것은 아무 소용이 없습니다. 대부분의 브랜드는 특정한 간격이나 사용 규칙이 있는 로고를 갖고 있는데, 이를 그리드의 유닛에 적용할 수 있습니다. 


콘텐츠 제약

그리드 작업에 앞서, 어떤 콘텐츠가 담기는지 고려해야 합니다. 그 내용이 기사인지, 쇼핑몰인지에 따라 그리드를 다르게 설계해야 합니다. 또한 고정된 광고 영역이 있는지, 요소들의 크기가 변경될 수 있는지 생각해봐야 합니다.

처음에는 이러한 제약 사항들이 귀찮을 수도 있지만, 이것으로 더 쉽게 그리드 시스템을 구축할 수 있습니다. 제약 사항이 곧 그리드의 기준이 될 수 있기 때문입니다. 



2. 그리드 용어

그리드는 칼럼, 베이스 라인처럼 간단하지 않습니다. 사실, 같은 주제를 다루는 많은 책에서 용어의 차이가 있지만, 전반적으로 동일한 것을 설명하고 있습니다.


유닛 (UNITS)

유닛은 페이지에서 가장 작은 수직적 구분으로, 대개 어떤 의미 있는 콘텐츠를 수용하기에는 작지만 그리드를 구축하기 위한 가장 기본적인 그리드입니다.




칼럼, 열 (COLUMNS)

칼럼은 그룹으로 묶인 유닛의 집합입니다. 예를 들어, 기본 12개 유닛의 그리드 시스템에서 6개 씩 2열로 묶거나 4개 씩 3열, 또는 2개 씩 6열로 묶어 나눌 수 있습니다. 칼럼의 크기가 작을수록 다양한 측정이 가능합니다.




영역 (REGIONS)

영역은 페이지 레이아웃의 기초를 형성하는 칼럼의 그룹입니다. 예를 들어, 8개의 칼럼으로 구분된 16 유닛 그리드 시스템은 6개의 칼럼과 2개의 칼럼, 두 영역으로 나눌 수 있습니다. 이렇게 하여 본문과 사이드 영역이 있는 기본적인 페이지 레이아웃을 구성할 수 있습니다.




베이스 라인 (BASELINE)

베이스 라인은 서체가 놓이는 수평선을 가리키는 타이포그래피 시스템입니다. 콘텐츠에 수직 방향의 리듬감을 주며, 그리드에 포함되는 유용한 도구입니다. 




필드 (FIELDS)

필드는 페이지를 수평으로 분할한 것입니다. 요소를 수직적으로 배치하고 섹션을 동일하게 분할하는 기준으로 베이스 라인 그리드를 사용합니다.




거터 (GUTTERS)

거터는 요소 사이의 빈 공간, 유닛과 칼럼, 영역 사이의 수직적 빈 공간, 필드 사이의 수평적 공간을 말합니다. 



3. 그리드를 그리는 방법

이 방법은 최종 개발 단계 보다, 포토샵/스케치에서 그리드를 만드는데 적합합니다. 

첫 번째로 제약 조건을 따져봅니다. 페이지 한 켠에 구글 애드센스의 큰 유닛(336px X 280px)이 있는 블로그의 그리드를 생성하는 예를 들어보겠습니다. 앞서 말한 바와 같이, 이 제약 조건은 그리드 시스템을 만드는데 좋은 출발점이 됩니다. 이 광고 유닛을 중심으로 그리드를 생성합니다. 

모바일보다도 오히려 최대 너비의 디바이스를 기준으로 두는 것이 좋습니다. 보통, 모바일에서는 하나의 컬럼에 콘텐츠를 쌓는 구조로 만들기 때문에, 보다 그리드를 고민해야하 하는 큰 디바이스에 콘텐츠를 배치하는 것이 좋습니다. 


이번 예에서는 사이트의 컨테이너 폭을 표준 모니터 크기(1280px * 1024px)에 적절하고 기수 4로 잘 분할할 수 있는 크기인 1200px로 가정해보겠습니다.

기수 4는 사이트에 사용되는 모든 계산에서 16px(4 * 4 = 16)의 표준 em 크기로 나눌 수 있어야 한다는 디자인 개념입니다. 예를 들면, 1em(16px)인 글꼴의 line height는 글꼴 크기의 150%인 24px(4*6=24)이어야 한다는 규칙이 있습니다.


1200은 기수 4로 아주 깔끔하게 나뉩니다 :  


1200/4 = 300, 1200/8 = 150, 1200/12 = 100, 1200/16 = 75 


유닛의 가로폭 계산을 위해 간단한 공식을 사용할 수 있습니다.


(전체 페이지 너비 / 유닛의 수) - 거터 폭 = 합

((합 * 유닛의 수) - 거터 폭) / 유닛의 수 = 유닛의 폭


8개의 유닛으로 나뉘고 16px의 거터로 구성된 전체 1200px 너비의 페이지를 예로 들면,  다음처럼 계산할 수 있습니다 : 


(1200 / 8) - 16 = 134


최종적으로 유닛의 폭을 구하려면 유닛의 수로 합계를 나눠야 합니다. 유닛의 폭은 132px인 것을 알 수 있습니다.


((134 * 8) - 16) / 8 = 132


이제 페이지에 고정된 제약 요건인 광고 유닛을 16px의 거터와 4개의 컬럼을 사용하는 가장 기본적인 그리드에 배치할 수 있습니다.



두 개의 칼럼 영역에 광고 배너가 자리잡았습니다.  그러나 두 개의 칼럼을 합친 영역 너비와 실제 광고 영역의 너비가 맞지 않아 여백이 많이 생기게 됩니다. 이 그리드를 8개의 칼럼, 12개의 칼럼으로 바꿔봅시다. 




12개로 변경한 결과, 유닛의 폭이 소수점으로 떨어집니다. 이럴 때는 거터를 16px에서 12px로 줄여 유닛의 가로폭을 정수로 얻을 수 있습니다. 

더 균형 있는 모습을 위해 유닛들을 크게 3개의 칼럼으로 나눠 칼럼 2개는 본문 영역으로, 나머지 칼럼은 aside로 사용할 수 있습니다. 


목표는, 가능한 가장 간단한 그리드(가장 적은 수의 유닛 / 칼럼 / 영역)를 사용하여 그리드를 만드는 것입니다. 우리는 16/20/24 등으로 유닛을 늘릴 수 있지만, 콘텐츠를 배치할 때 너무 많은 경우의 수를 주는 것이 오히려 함정이 될 수 도 있습니다. 디자인에서 말하는 less is more는 여기에서도 적용됩니다. 



4. 그리드 생성을 돕는 도구 

웹 페이지의 그리드 생성을 돕는 도구도 있습니다. 수식 계산이 필요 없이 간단하게 원하는 너비와 칼럼 수로 그리드를 만들어줍니다.



Grid.guide는 그리드 생성을 돕는 좋은 온라인 리소스입니다. 단순히 전체 폭과 열의 수를 입력하면 자동적으로 거터 너비 별로 그리드의 수치를 계산하여 보여줍니다. 





Guide Guide는 포토샵 익스텐션으로, 원하는 다양한 설정으로 포토샵에서 그리드를 쉽게 생성할 수 있습니다.


그리드를 생성하는 방식이 다소 복잡해 보일 수도 있지만, 충분히 고민해 볼 부분입니다. 디자인 초기 단계에서 그리드 시스템을 사용한다면, 보다 일관되고 정보 전달에 효과적인 레이아웃을 설계할 수 있으며, 웹 페이지 제작을 빠르고 쉽게 할 수 있습니다.



출처 : Tom Newton Blog


by 비숑 발자국

Posted by slowalk