디자인 트랜드의 변화, 플랫디자인

최근 웹뿐만 아니라 모바일 전반을 아우르며 UI 디자인 패러다임이 변화하고 있다. 사실적이고 3차원적인 디자인(스큐어모픽)에서 심플한 2차원적인 플랫디자인 형태로 급변하고 있는 것이다. 이러한 갑작스러운 UI 환경 변화의 중심에 ‘플랫디자인’이 있다. 지금부터 디자인 최신 트랜드 플랫디자인에 관한 내용을 알아보도록 하자.

실제로 존재하는 오브젝트의 특징을 기반으로 하는 스큐어모픽 디자인은 사실적이고 현대적인 사용자 중심의 디자인 특징을 보였다. 이러한 스큐어모픽 디자인은 컴퓨터 제품 초기부터 GUI(Graphic User Interface)로 적용하여 애플의 애플리케이션에서 사용해왔다.

스큐어모피즘의 어원은 (*스큐어모피즘(skeuomorphism): 그리스어로 ‘skeuo’는 도구, ‘morphe’는 형태를 의미하는 것으로 ‘원래 도구의 형태를 그대로 따라가는 양식’으로 풀이되고 실제 모습 또는 재질감 등을 다른 매체에 그대로 구현하는 방식을 일컫는다.

예를 들어 나무 책장과 흡사한 디자인의 뉴스 가판대 앱과 문구점에서 쉽게 접할 수 있는 노란색 노트 느낌을 그대로 적용한 메모 앱을 들 수 있다.

하지만 스큐어모피즘은 다양한 해상도의 기기들에서 일관된 느낌을 전달하기가 힘들고 콘텐츠를 보여주기에 효율적이 않다. 또한, 그래픽요소가 많이 들어가기 때문에 비용이 많이 든다 점 등 이유로 대안이 필요하게 되었다.

디지털 분야에서 스큐어모픽 디자인을 선도하며 고유 아이덴티티처럼 고수해 온 애플이 플랫 디자인으로 급진적 변화를 시작했다. iOS 7 발표로 애플의 GUI(Graphic User Interface) 디자인이 앞으로 플랫디자인에 초점을 맞추기 시작했다는 것을 알 수 있다.

하지만 2차원적인 평면 디자인이 적용된 플랫 UI는 애플보다(다소 특성상 차이는 있지만) 구글과 MS가 한발 앞서 서로 주도하려는 노력을 기울여 왔다. MS는 타이포그래피 기반의 윈도우 8에 모던 UI를 적용했다. 구글은 2011년부터 시작한 구글 사이언스 페어 사이트를 통해 플랫 UI를 선보이며, 점진적으로 구글 웹 서비스와 모바일 앱 스토어인 구글 플레이 스토어 등으로 플랫디자인과 플랫 UI를 주도했다고 볼 수 있다.

플랫디자인의 ‘Flat’의 사전적 정의는 ‘평평한, 고른’이다. 입체감을 주는 디자인이 아니라 평평한 느낌을 주는 깔끔한 인터페이스와 단순화되고 심플한 디자인을 플랫디자인이라고 보면 된다.

플랫디자인은 디자인의 입체적인 기능(drop shadow, bevel, gradient) 같은 복잡한 요소를 배제하고 기본적인 요소들인 레이아웃, 대비, 색상, 폰트 등을 이용해 디자인한 것이다.

플랫디자인의 차별화된 디자인적 특징은 다음과 같이 다섯 가지로 요약해 볼 수 있다.

첫째, 심플한 아이콘

플랫디자인에서 주로 차지하는 버튼 및 아이콘은 가장 단순하고 간단한 모양으로 이루어져 있다. 사각형, 원과 같은 기본적인 도형의 형태에서 배치, 컬러, 형태의 변화 정도로만 디자인을 구성한다. 사용자가 시각적으로 볼 때 UI 요소를 쉽게 이용할 수 있어야 한다. 그래서 최소한의 아이콘으로 심플한 디자인을 연출해야 한다. 하지만 단순한 요소를 사용한다고 해서 기획이 쉬운 것은 절대 아니다. 오히려 최대한 배제된 아이콘을 활용해서 디자인을 구사하는 것이 더 어렵다.

둘째, 배제된 효과

플랫디자인은 아이콘에 화려한 디자인 효과를 뺀 콘셉트로 되어있다. 그래서 이미지 프레임이나 아이콘 등 모든 요소에 그림자, 입체감, 그라데이션 등 깊이감을 나타내는 디자인 효과를 쓰지 않는다. 이 점이 현실감 있어 보이게 하는 3D처럼 보이는 스큐모픽디자인과의 큰 차이점이라고 생각한다. 또한, 모바일 디자인 구성에서 작은 화면에서 버튼이나 옵션을 쉽고 직관적으로 사용할 수 있기 때문에 트랜드에 더 부합하는 디자인이라고 할 수 있다.

셋째, 타이포그래피

심플함이 특징인 플랫디자인에서 타이포그래피는 매우 중요한 위치를 차지한다. 화려한 폰트나 플랫 디자인에 적합하지 않은 폰트를 사용할 경우, 디자인이 매우 조잡하고 이상하게 보일 수 있다. 하나의 디자인 콘셉트로 이루어진 비주얼과 대담하고 간단한 스타일을 가지고 있는 폰트를 사용할 경우 가장 효과적인 플랫 디자인이 표현될 수 있을 것이다. 참고로 변화와 굵기가 다양한 산세리프형 폰트(자획 끝 부분에 돌출 선이 없는 글자나 숫자)를 참고하면 플랫디자인의 타이포그래피에 대해 이해하기 쉬울 것으로 생각한다.

넷째, 단순한 컬러

색상은 플랫디자인에서 가장 중요한 요소라고 할 수 있다. 다른 디자인과 비교했을 때 2~3가지의 색을 활용해 단순함을 줄 수도 있지만 5~6가지 색상 등을 활용해 다양한 색을 연출할 수도 있다. 색을 과감하게 사용해 상대적으로 색감이 더 밝고 화려해 보인다. 최근 플랫디자인의 트랜드는 핑크, 그린, 블루 등의 톤 다운 컬러를 선호한다.

다섯째, 미니멀리즘

플랫디자인의 본질이 미니멀리즘과 부합한다고 볼 수 있다. 플랫디자인은 본질적으로 간단하고 심플할 때 더 잘 표현되기 때문이다. 화려한 디자인 요소를 최소화함으로 사용자의 인지를 집중할 수 있어 활용성이 높다. 또한, 미니멀리즘적의 유연한 특성으로 다양한 웹, 모바일 환경에서 쉽게 적용할 수 있다.

그리고 플랫디자인에는 두 가지 종류의 디자인이 존재한다. 오로지 컬러와 형태, 레이아웃, 타입만을 이용하는 ‘real flat’ 디자인이 있고, 컬러, 형태, 레이아웃, 타입을 이용하지만 외곽라인이나 약간의 텍스쳐 혹은 효과를 준 ‘almost flat’ 디자인으로 나눠볼 수 있다.

<real flat design의 예>

<almost flat의 예>

 나는 스큐어피즘 디자인처럼 복잡하고 사실적인 이미지보다 개인적으로 플랫디자인의 심플하고 명료한 이미지를 선호한다.웹이나 모바일 디자인의 빠른 변화처럼 최근의 디자인은 소비자들이 이미지를 볼 때 더 빠르게 이해하는 방향으로 흘러가는 것 같다. 웹 환경에서의 빠른 반응속도, 작은 화면에도 콘텐츠에집중할 수 있는 세련된 디자인이 요구되는 현 시점에서는 플랫 디자인이 최적격인 듯 싶다.

단순한 형태임에도 그 안에서 컬러, 타이포그래피, 레이아웃, 이미지 효과 등을 통해 다양한 형태를 추구하는 플랫디자인. 그 끝은 어딜까.

에스코토스 이승은 디자이너