2018년 올 한해를 되돌아보며 UI 디자인 트렌드를 정리

해마다 이곳저곳에 올라오는 디자인 트렌드를 챙겨본다. 그러나 정작 따져보면 50%이상은 공감도 안되며 기억에 남지도 않는다. 개인적으로 왜 그런지 고민해보면 일반적으로 그래픽 스타일에 관한 이야기가 주를 이뤄서라고 생각한다.
누군가의 완성도 있는 작업물이 올라오고 반응이 좋으면 몇 일 뒤 우르르 비슷한 스타일이 보이기 시작한다. 이를 디자이너들 사이에서 트렌드라고 부르는 경우도 봤다. 그러나, 디자인 전공자가 아닌 지인에게 보여줬을 때 쉽게 공감을 못해 의아해 한 적이 있다.

마치 피카소의 작품이 나중에 돼서야 인정받은 것처럼 일반인보다 디자이너의 감각이 훨씬 뛰어나 트렌드를 이끌어가는 디자인을 하고 있거나, 디자인이라는 울타리 속에서 자화자찬하는 우리만의 리그이거나…

트렌드라고 기록하기 전에 중점을 둔 조건은 2가지다.

  1. 일반인의 눈높이에서 볼 것
  2. 시장 점유율이 높은 것

이 둘은 생각보다 중요하다. 트렌드는 점유율과 분리할 수 없다. 많은 사람들이 아이폰을 사용하고, 삼성 갤럭시를 사용하고, 윈도우를 사용한다. 앱으로도 인스타그램, 페이스북, 트위터, 유튜브, 카카오톡 등 자주사용하는 앱은 정해져있다. 이 OS들이, 이 앱들이 트렌드일 수 밖에 없다. 사업적인 접근이 아닌 UI로 접근하면 우위를 정하기 어렵다. 다 비슷하게 생겨서…

Behance에서 실험적인 그리드 시스템을 통한 탈그리드 레이아웃으로 디자이너들 사이에서 박수받아도 일반사용자들은 낯설고 어려움을 느낄 수 있다. 보통은 본인에게 가장 익숙한 레이아웃을 선호한다.

참고 : https://uxdesign.cc/ever-wonder-why-the-most-popular-apps-are-starting-to-look-the-same-it-might-be-a-good-thing-e54aadd50fd5

서론이 길었다.

그래서 오늘 정리한 트렌드의 중점은 그런 스타일만 얘기할 것이 아니라 현재 우리가 자주 사용하는 서비스 혹은 제품, 플랫폼 등의 회사에서 밀고 있는 디자인을  정리했다.

올 한해 디자인 트렌드 3가지
Fluent, One UI, Fluid Interfaces

01. 마이크로소프트 Fluent Design – 사용자 경험 통일

© Microsoft

© Microsoft

누구나 컴퓨터를 사용해봤을 회사 마이크로소프트. 2017년에 Fluent 디자인 시스템을 알렸으며 이후 많은 관련 글들이 나오고 있다. Fluent의 핵심 3가지는 적응형, 공감, 아름다움이다.

Fluent 디자인 요약

  1. PC, Tablet, Xbox 등 각 기기마다 Fluent 디자인을 적용해 사용자가 자연스럽게 적응할 수 있다.
  2. Fluent는 직관적이다. 동작이나 의도에 대한 반응을 예상하며 작동한다.
  3. 매력적이도 몰입도가 높다. 조명, 그림자, 동작, 깊이, 질감 등을 사용하여 UI의 완성도가 높아졌다.

디자인적으로 봤을 때 애플 OS처럼 앞과 뒤의 요소를 블러를 통해 구분했으며 z축을 더해 깊이감을 더했다. 최근 MS Office에도 Fluent 디자인을 적용시켜 전반적으로 사용자 경험을 통일하려는 노력을 하고 있다.

© Microsoft Fluent Design

© Microsoft Fluent Design

02. 삼성 One UI – 중요한 것에 집중

© Microsoft

© Samsung

갈수록 얇아지는 베젤, 그리고 9:16 비율을 깨버린 큰 디스플레이에 맞는 UI 디자인 스타일로 전체적으로 통일시켰다. 메일, 달력, 알람, 앨범 등의 기본적인 앱에는 One UI가 적용되어있지만 아직 삼성 멤버스나 기타 삼성 앱에는 적용이 안되어있다. 삼성 멤버스 커뮤니티에서 해당 앱도 One UI 스타일로 바꿔달라는 니즈가 있는 것을 보면 전반적으로 통일성을 원하며 One UI의 평이 좋다.

삼성 One UI 요약

  1. 지금 중요한 것에 더 집중할 수 있도록 불필요한 요소를 제거했다.
  2. 손가락 닿기 쉬운  범위, 한손 사용 등의 기본적인 사용성을 감안하여 UI 재배치했다.
  3. 낮과 밤의 물리적 조도에 따라 눈부심 방지용 나이트 모드 사용자 설정 가능 – 밤에 사용하는 사용자를 위한 모드 제공한다.

03. 애플 Fluid Interfaces – 동시에, 그리고 일관되게

© Apple Fluid Interfaces

© Apple Fluid Interfaces

애플은 디자인 뿐만 아니라 사업에서도 항상 선두에 있는 기업이기에 트렌드라고 설명하기엔 너무 당연하다. 그러나 애플 디자이너들은 어떤 방식으로 생각하며 디자인하는지 자세히 알 수 없었다. 최근 WWDC18에서 한 강연을 통해 iPhone X에 적용된 UI 디자인을 어떻게 했는지에 대해 심층적으로 알아볼 수 있었다.

결론부터 말하자면, 물리적으로나 심리적으로 가장 빠르게 유동적으로 느낄 수 있도록 설계했다. 손 끝의 감각의 미세한 움직임까지 잡아내어 마치 스마트폰을 사용자가 완벽하게 컨트롤하는 느낌이 들도록 했다.

© Apple Fluid Interfaces

© Apple Fluid Interfaces

예를 들어, 앱을 실행시키는 도중에 다시 닫을 수 있으며, 앱을 여는 과정에도 스크롤이 적용된다. 더는 초 단위의 싸움이 아니다. 이제는 무언가 켜지기까지 기다리는 0.3초까지 추가 행위 가능해졌다. 자세한 내용은 꼭 하단 참조 링크를 통해 영상으로 보는걸 추천한다.

애플 Fluid Interfaces 요약

  1. Redirectable – 동시에 행동함에 집중했다. 즉각적인 반응을 유동적으로 인식하여 더 빠르게 느낄 수 있다.
  2. 버벅임을 인지할 수 없는 빠른 속도까지 신경 썼다. – 앱 실행시키는 0.3초에도 추가 행위 가능
  3. Maintain spatial Consistency – 일관성있게 적용
  4. 특정 행동(터치, 스크롤, 스와이프 등)에 따른 인터렉션에 들어가는 애니메이션에도 적합한 텐션과 효과(힌팅, 모션 블러, 모션 스트레치)를 적용함
  5. 상황에 따른 중량감 적용 – 사진 앱 내 사진 좌우로 넘기는데 들어가는 마찰력과 앱에서 다른 앱으로 넘기는데 들어가는 마찰력의 차이 존재

디바이스의 속도 걱정보단 얼마나 자연스러운 작동 흐름인가를 고민해야 할 때

기술은 발전하며 내부 스펙은 웬만한 PC에 견줄만한 능력을 갖췄고 더는 하드웨어적인 제약으로 느림을 걱정하지 않아도 된다. 대신 움직임에 대한 고찰과 그 움직임을 인식하는 기술들을 활용해 사용성을 높이는 것에 집중한다.

표면적으로 “예쁘다, 예쁘지 않다”의 판단은 소비자가 할 것이며, 디자이너인 내가 공부해야 할 방향은 저러한 깊이 있는 고민이다.

중요한 것은 그래픽 스타일이 아니라 왜 그렇게 디자인했는지에 대한 고민과 그 고민을 통해 나온 근거를 기반으로 디자인 시스템을 세우는 일이다.

참조

마이크로소프트 – Fluent Design
https://www.microsoft.com/design/fluent/

https://medium.com/microsoft-design/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-91d72608ee8f
https://www.youtube.com/watch?v=vcBGj4R7Fo0

삼성 – One UI

https://www.samsung.com/sec/apps/one-ui/
https://www.samsung.com/global/galaxy/apps/one-ui/

애플 – Fluid Interfaces
https://developer.apple.com/videos/play/wwdc2018/803/

#2018#Design#Trend#UI#UX#디자인#사용성#사용자 경험#트렌드

신연석

UI DesignerSeoul, South Korea

가치 중심적인 디자인을 추구하는 디자이너입니다. 현재 Cheil Pengtai에 재직 중이며, 웹·앱 UI 디자인, 일러스트레이션, 모션 그래픽 작업을 주로 하고 있습니다.