우리는 꽤 오랫동안 '깔끔하고 미니멀한' 디자인을 추구해 왔습니다. 이제 다음 차례는 무엇일까?
지난 수 개월 동안, 혁신적 디자인의 리더들은 '미니멀 디자인'을 다음 단계로서 채용했습니다. 페이스북Facebook, 에어비앤비Airbnb, 애플Apple은 자신들의 제품을 단순화하기 위해 모바일 디자인의 새로운 트렌드인 '컴플렉션 리덕션Complexion Reduction'를 반영하는 비슷한 청사진을 따랐습니다.
컴플렉션 리덕션이 도대체 뭐야?
'컴플렉션 리덕션Complexion Reduction'이라는 말을 들어본 적 없으시죠? 제가 지어낸 용어거든요. 요즘들어 플랫 디자인flat design, 미니멀 디자인minimal design, 프로그레시브 리덕션progressive reduction의 독립을 넘어선 새로운 트렌드를 감지했습니다. 누군가는 모바일 영역 안으로 추가된 미니멀 디자인의 다음 단계에 불가하다고 말하기도 합니다. 하지만 뚜렷한 차이가 분명히 있음을 말하고 싶습니다. 거기에는 새로운 트렌드를 정의할 유사성과 특징들이 있습니다. 그래서 저는 거기에 이름을 붙여보았습니다.
무서운 속도로 실리콘 밸리를 쓸어내리는 새로운 트렌드의 특징들을 정의내려 보자면:
1. 더 크고 두꺼운 헤드라인
2. 더 단순하고 보편적인 아이콘
3. 컬러 추출
그 결과? 앱의 유저 인터페이스가 점차 하나의 같은 브랜드 아래 속해있는것 같아 보이기 시작했습니다.
비교 분석
저는 인스타그램Instagram이 지난 5월초 UI를 리디자인 했을 때, 새로운 트렌드를 처음으로 감지하기 시작했습니다.
인스타그램의 변화는 앱 전반적으로 파란색과 회색을 제거한 것과 헤드라인을 더 두껍게 했고, 아래 내비게이션과 아이콘을 단순화 했습니다. 이런 변화로 남겨진 것은 블랙 앤 화이트 UI에 강조된 헤드라인으로, 콘텐츠와 기능이 강조되고 분명해졌습니다.
인터페이스에 잡동사니를 줄인 것은 미디엄Medium을 생각나게 합니다. 미디엄은 2012년 오픈할때부터 블랙 앤 화이트를 강조했으며, 매 번 리디자인을 할 때마다 잡동사니들을 제거해 나갔습니다. 미디엄이야말로 컴플렉션 리덕션의 원조로서 그들은 컴플렉션 리덕션을 알기도 전에 이미 적용해 왔던겁니다.
인스타그램의 리디자인을 본 후, 에어비앤비Airbnb 앱을 열어보면 디자인이 친숙하니 끌립니다. 에어비앤비가 지난 4월에 리디자인을 한 후 처음으로 둘러보는건데요, 아직도 그 때 봤던 그 느낌입니다.
에어비앤비의 리디자인된 UI는 한달 뒤에 리디자인 되어 나온 인스타그램의 매스컴 보도량 근처에도 미치지 못했습니다. 하지만 이 둘은 같은 소비자 조사 전략을 많이 따랐습니다.
모바일 리디자인은 헤드라인을 더 크고 굵게 하고, 불필요한 이미지와 색감을 제거했으며, 아이콘을 단순화시켜 보편적으로 알아챌 수 있도록 했습니다. 이런 변화로 남겨진 것은 블랙 앤 화이트 UI에 강조된 헤드라인으로, 콘텐츠와 기능이 강조되고 분명해졌습니다.
마지막으로 애플Apple은 컴플렉션 리덕션 현상을 가지고 디자이너들을 완전히 매혹시켰습니다. 지난 6월초에 애플의 WWDC에서 소비자들이 학수고대하고 있던 것들을 선보였는데요, iOS 10을 선보이면서 이와 같은 말을 했습니다, "지금까지 보지 못한 가장 최고의 iOS가 나왔습니다!" (최소한 IOS 8부터 항상 "지금까지 보지 못한 가장 최고의 iOS가 나왔습니다!"라고 말하고 있지요.)
발표 내용 중 한가지가 제 눈을 사로잡았습니다. 그건 바로 애플 뮤직Apple Music의 리디자인이었죠. 리디자인의 가장 중요한 측면은 UX 개선과 기능 추가임에도 불구하고, 미학적 측면이 가장 먼저 눈에 들어왔습니다. 맥월드Macworld의 작가인 케이틀린 맥게리Caitlin McGarry는 업데이트된 디자인을 이렇게 기술했습니다. "이번건 완전히 새로운 모습으로 큰 사이즈의 카드, 더 크고 두꺼운 폰트, 깔끔하고 흰 배경을 사용하여 앨범 커버를 더욱 눈부시게 만들어주고 있다."
어디서 많이 들은거 같다구요? 디자인이 위에 인스타그램과 에어비앤비가 제시한 청사진과 아주 흡사합니다. 하지만 핵심 요소는 바로 이겁니다: 크고 두꺼운 헤드라인, 블랙 앤 화이트 UI.
이것은 무엇을 의미하는걸까?
처음에 얘기한 것처럼, 이 의미는 더욱 더 다른 무언가로 보이기 시작하려는 것입니다. 왜 그러냐구요? 그건 NFL처럼 테크는 카피캣 리그와도 같습니다. 이러한 리디자인은 일반적으로 긍정적인 리뷰를 얻게 됩니다. (몇몇 사람들은 새로운 블랙 앤 화이트 UI에서 보이는 '개성이 부족함'에 불평하기도 합니다. 그러나 금방 잊게 될 겁니다. 앱을 열어보면 그건 기능성을 위한 것이지, 개성을 위한게 아니거든요.) 그래서 새로운 앱이든 이전 앱이든 모두 소비자 조사 전략에서 우세한 쪽으로 붙게될 것입니다.
이제 단색의 미니멀한 유행을 선호하든 싫어하든, 이것은 의심할 여지없는 발전의 신호입니다. 오늘날 UX와 UI 디자이너간의 경계가 모호해짐에 따라 디자이너는 예쁘게 만들어야 한다는 책임감의 부담을 줄게 되었고, 사용자를 위한 최고의 제품을 만드는 것을 궁극의 목표로 삼게 되었습니다.
컴플렉션 리덕션을 위한 가이드
1. 색상 제거하기
하나의 컬러만 가지는 겁니다. 그 컬러는 액션이 있음을 알리는 데에만 제한적으로 사용해야 합니다. 그 외의 모든 것은 블랙 앤 화이트로 가는게 좋습니다. 그 외의 컬러는 콘텐츠에서 자연스럽게 오도록 합니다.
2. 더 크고, 두껍고, 검은 헤드라인
위에 헤드라인들 보셨죠? 20에서 30픽셀에 두껍게 해줍니다.
3. 심플하고 얇은, 쉽게 알아볼 수 있는 아이콘
보편적인 형태의 아이콘일수록 더 좋으며, 역시 여기에도 컬러는 없는게 좋습니다.
4. 여백을 2배, 아니 3배 더 주기
여백을 넉넉히 많이 주세요. 절대 잘못될 일 없습니다.
5. 앱 아이콘은 눈에 띄게 하기
앱 아이콘은 정체성과 브랜드를 넣어주어야 할 곳입니다. 눈에 띄게 만드세요.
원문: complexion reduction: a new brand in mobile design
Refresh Studio
해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.
'Web + Mobile' 카테고리의 다른 글
직사각형을 벗어난 헤더 디자인 모음 (0) | 2017.01.24 |
---|---|
2017년 웹 디자인 트렌드 전망과 예측 (0) | 2016.12.29 |
항공사 메신저 챗봇 서비스 사례 (0) | 2016.12.22 |
모바일 환경을 위한 디자인 (0) | 2016.12.15 |
사용자 친화적인 아이콘 만들기: UI 디자인 사용성 가이드 (0) | 2016.12.08 |
웹,모바일 UI 디자인 패턴을 모아놓은 참고 사이트 7 (1) | 2016.11.25 |
디자인이 형편없는데 왜 이렇게 인기있는거야? (0) | 2016.11.10 |
2016 가장 혁신적인 해외 앱 리스트 (0) | 2016.10.07 |
웹 디자인에서의 미니멀리즘이란 (0) | 2016.02.01 |
플로팅 액션 버튼은 새로운 햄버거 메뉴인가? (2) | 2015.12.06 |