brunch

매거진 UX 디자인의 모든 것

라이킷 48 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Aug 29. 2016

Complexion Reduction

UX 디자인 배우기 #20

Today UX 아티클

2016년 7월 1일 SWARM에 게재된 Michael Horton의 글 Complexion Reduction: A New Trend InMobile Design를 소개하고자 합니다.

한동안 우리는 ‘깔끔함과 미니멀함’의 세상에 살았다고 합니다. 이 글에서는 그럼 그다음은 무엇일까라는 질문을 던집니다.

지난 몇 달 동안 혁신적인 디자인 리더들 중 일부가 ‘미니멀 디자인’을 다음 단계로 끌어올렸고, 페이스북, 에어비엔비, 애플 등에서 자사 디자인에 이 새로운 트렌드인 ‘Complexion Reduction’를 반영하고 있다고 합니다. 문자 그대로 보자면 complexion은 양상, 외관, 형세 정도로 해석되고 reduction은 축소, 감소, 단순화 정도가 될 것 같습니다.

‘Complexion Reduction’이란 무엇인가?

아마 이 용어가 낯설 겁니다. 이 글을 쓴 Michael Horton이 글을 쓰며 만들어낸 용어이기 때문입니다. Michael은 최근 플랫 디자인이나 미니멀 디자인을 넘어 디자인이 더 단순화되고 있음을 발견했다고 합니다.

그는 최근 실리콘밸리를 휩쓸고 있는 이 새로운 트렌드의 특징을 다음과 같이 정의합니다:

더 크고 굵어진 헤드라인

더 간단하고 보편적인 아이콘

색상 제거

그 결과 일부 인기 앱의 인터페이스는 점점 더 마치 한 브랜드에서 만든 것처럼 보인다고 하면서 몇 가지 증거를 제시합니다.

인스타그램

지난 5월 인스타그램에서 새롭게 디자인한 UI를 내놓았습니다. 앞서 말했던 특징대로 파란색과 어두운 회색을 제거하였고, 헤드라인은 더 굵게 만들었으며 하단의 내비게이션과 아이콘을 간소화하였습니다. 그 결과 굵은 헤드라인을 가진 검은색과 하얀색 UI만 남아 이제 콘텐츠가 더 빛을 발하고 기능성도 분명해졌다고 합니다. 미디엄(Medium)도 2012년도에 만들어진 이래로 이런 트렌드를 잘 반영하여 발전하고 있다고 합니다.

에어비엔비

그다음은 에어비엔비입니다. Michael은 에어비엔비에서도 많은 부분에 있어서 이 트렌드를 따르고 있다고 합니다. 역시 앞서 언급했던 대로, 더 크고 굵은 헤드라인을 넣고, 불필요한 이미지와 색상은 제거하였으며, 아이콘을 간소화하여 보다 보편적으로 인식 가능하게 만들었다고 합니다. 그 결과 인스타그램과 마찬가지로 검은색과 하얀색 UI만 남아 이제 콘텐츠가 더 빛을 발하고 기능성도 분명해졌다고 합니다.

애플 뮤직

애플 뮤직은 Complexion Reduction 움직임을 반영한 최신 사례라고 합니다. 지난 6월 애플은 WWDC에서 흥미로운 발표를 많이 했는데, 글쓴이는 중 애플 뮤직의 새로운 디자인에 눈길이 갔다고 합니다. 애플 뮤직의 새로운 모습에 대해 Caitlin McGarry라는 기자는 이렇게 말했다고 합니다. “완전히 새로운 모습이다. 큰 카드를 사용하였고, 폰트는 더 커지고 굵어졌으며, 깔끔하고 하얀 배경은 앨범 아트가 빛을 발할 수 있게 해준다” 즉, 여기서도 앞서 말했던 Complexion Reduction의 특징인 크고 굵은 헤드라인과 흑백 UI로 바뀐 것입니다.

이런 트렌드는 무엇을 의미할까?

결국 Michael은 이런 트렌드로 인해 점점 더 많은 앱이 비슷한 모양을 갖춰갈 것이라고 말합니다. 새로운 디자인이 전반적으로 좋은 평을 받고 있기 때문에 점점 더 많은 곳에서 이 트렌드를 따를 것이라고 전망하고 있습니다. 일부는 개성이 없어지고 있다고 불만을 표하지만, 결국 앱을 여는 이유는 앱의 개성이 아니라 기능성이기 때문에 곧 익숙해질 것이라고 합니다.

여러분이 이런 유행에 동의 거나 말거나 이는 분명한 발전의 신호라고 합니다. 오늘날 UX와 UI 디자이너의 경계가 희미해짐에 따라 디자이너는 예쁘게 만들어야 한다는 특정 업무에 대한 걱정은 덜 하게 되고, 유저를 위한 최고의 제품 만들기라는 궁극적인 목표에 집중하게 되고 있다고 합니다.

이 글에서는 Complexion Reduction을 적용할 수 있는 몇 가지 가이드라인을 제시하고 있습니다.

색을 제거한다. 한 가지 정도의 색상만 가지고 최대한 절약하여 액션을 표시하는 데만 이용하고 나머지는 전부 흑백으로 처리하라고 합니다.

헤드라인은 더 크게, 더 굵게, 더 어둡게 쓴다. 헤드라인은 20에서 30 픽셀 정도로 키우고 무겁게 만들라고 합니다.

간단하고, 얇고, 인식 가능한 아이콘을 만든다. 아이콘은 보편적이면서도 색상을 쓰지 않아야 한다고 합니다. 또한 아이콘을 배치할 때 왼쪽부터 오른쪽까지 홈, 검색, 주요 액션, 부수적인 액션, 프로필 순으로 만들면 좋다고 합니다.

흰 공간을 2배, 아니 3배로 늘린다. 심지어 4배로 늘려도 된다고 합니다.

앱 아이콘을 밝게 만든다. 바로 앱 아이콘이 개성과 브랜드를 담을 수 있는 공간이라고 합니다. 앱 아이콘은 눈에 확 띄게 만들어야 한다고 합니다.