스큐어모피즘과 미니멀리즘은 최근 웹디자인 최근 트렌드를 상징하는 단어이자 격렬하게 충돌하는 디자인 흐름의 상징이다. 실제 사물을 웹으로 재현하는 방식의 스큐어모피즘은 애플이 주도하며 트렌드화하는 데 성공했다. 하지만 최근들어 애플에 변화의 바람이 불기 시작하면서 스큐어모피즘은 서서히 뒤안길로 사라지는 경향이다.
이미 애플은 2013년부터 스큐어모피즘 UI를 걷어내는 데 힘을 쏟아왔다. 올해 세계개발자회의(WWDC)에서도 조너선 아이브의 미니멀리즘 철학은 iOS에 또렷하게 녹아들었다. 구글의 ‘안드로이드L’도 미니멀리즘을 강조한 머티리얼 디자인으로 콘셉트를 변경했다. 미니멀리즘이 웹디자인의 대세로 자리잡으면서 이를 적용하기 위한 시도도 곳곳에서 이어진다.
웹디자인 전문 웹사이트 웹디자이너디포가 소개한 미니멀리즘 디자인을 위한 6단계론이다. 내용 전문을 요약해 번역해 소개한다.
▲플랫 디자인이 적용된 마이크로소프트의 ‘윈도우9′ 소개 페이지.
1. 플랫 디자인을 적용하라
플랫 디자인은 애플식 스큐어모피즘에 대한 디자인계의 응답이었다. 플랫 디자인은 그림자나 3D 효과, 그라디언트 부재를 특징으로 한다. 볼드나 선명한 컬러를 사용함으로써 이용자들의 시선을 사로잡는다. MS는 윈도8에서 인상적인 플랫 디자인을 선보인 바 있다.
2. 백색 여백을 살려라
여백은 이용자의 눈길을 기획자가 의도한 대로 이동시키는 가장 현명한 요소일 뿐만 아니라 미니멀리즘을 위한 기준점이다. 더 많은 사이트들이 여백이 주는 효과를 깨닫고 이러한 기법을 적용하고 있다. 구글 검색 사이트가 대표적이다. 구글 검색의 핵심 목적은 검색을 유도하는 것이다. 구글은 교묘하게 여백을 활용함으로써 그 목적을 달성하고 있다. 백색 여백은 미니멀리즘의 이상적인 사례이다. 단순히 빈공간을 대변하는 것이 아니며 실제로 목적을 수행하기에 가장 빠른 판단을 내려주는 핵심 요소이다.
3. 선택지를 제한하라
e커머스 사이트에서 구매 전환을 유도하기 위한 최상의 룰은 이용자들에게 제시되는 많은 선택지를 제거하는 것이다. 가능한 한 선택 요소를 줄일수록 방문자들이 산만해지는 것을 방지할 수 있고 선택을 지연시키는 걸 막아준다. 선택지가 적어진다는 것은 웹디자인에서 미니멀리즘의 가장 아름다운 사례 중 하나이다.
4. 볼드 타이포그라피에 집중하라
볼드 타이포그라피를 이해하기 위해서는 브라이언 다나허 웹사이트를 방문해 체크해보라. 브라이언 다나허의 사이트는 미니멀리즘을 극단적으로 밀어붙인 사례로 손꼽힌다. 그의 사이트는 도저히 놓칠 수 없는 볼드 타이포그라피와 싱글 칼럼 레이아웃을 활용하고 있다. 극단적인 사례이긴 하지만 두 가지 목표를 충분히 수행하고 있다.
첫 번째는 싱글 칼럼 레이아웃에 배치된 네이게이션 덕에 브라이언이 무엇을 하는지, 누구인지, 사이트 방문자가 그와 접촉하기 위해 어떻게 해야 하는지를 명확하게 전달하고 있다. 두 번째는 폰트 스타일이나 사이즈의 차이만큼 뒷배경 색상과 폰트 색상의 대조 효과를 통해 방문자에게 흥미를 제공하고 있다.
5. 네비게이션을 단순화하라
네비게이션 메뉴는 미니멀리즘을 이야기할 때 종종 간과되기도 한다. 하지만 미니멀리즘으로 사이트를 디자인하려면 이 부분을 빠트리면 안된다. 거슬리지 않고 뒷배경에 자연스럽게 묻어든 네비게이션 메뉴는 사이트를 기능적 수준에서 미니멀하게 만드는 핵심 요소다.
6. 군데군데 컬러를 사용하라
적은 양의 컬러 패치를 사용하게 되면 방문자들이 중요한 요소에 더 집중하는 효과를 얻을 수 있게 된다.
