마이크로소프트 플루언트 디자인 시스템(Microsoft Fluent Design System)

플루언트 디자인 시스템 Fluent Design System

마이크로소프트가 2017년에 개발한 디자인 언어이다.

플루언트 디자인은 모든 윈도우10 장치와 플랫폼을 위해 설계되는 소프트웨어에 쓰이는 디자인과

상호작용을 위한 가이드라인을 포함한다.

 

 

시스템은 다섯 가지 주요 구성 요소에 기반을 두고 있다:

빛(Light), 깊이(Depth), 움직임(Motion), 재질(Material), 규모(Scale)

• 빛
  분위기와 장소감을 이끌어내는 요소이다. 플루언트 디자인 시스템이 적용된 애플리케이션은 마우스 커서나 펜 커서를 탭에 가까이 할 경우 커서를 중심으로 원형의 빛의 무리가 발생하며 탭 위에 커서가 올라갈 경우 해당 탭 위 아래의 탭들도 미세한 빛을 띄며 반응을 하게 된다. 이러한 플루언트 디자인 시스템의 빛 요소는 정보를 조명하는 목적을 가지고 있다.

• 깊이
  기존 플랫 디자인 UX로는 표현할 수 없는 3차원적인 공간감을 2차원 환경인 모니터 상에서 표현할 수 있게 해주는 요소이다. 플루언트 디자인 시스템이 적용된 애플리케이션은 겉으로 보기에는 평면적인 환경이지만 스크롤을 할 경우 텍스트 등과 같이 주요 정보가 담긴 최상단의 레이어는 스크롤 속도에 맞춰 이동하고 하단의 배경 레이어들은 그보다 느리게 움직임으로서 3차원적인 원근감을 느끼게 해 준다. 이를 통해 시각적인 미려함을 제공함과 동시에 더 다양한 방법으로 정보를 제공할 수 있게 된다.

• 움직임
  기존의 기계적이고 딱딱한 반응을 보여주었던 인터페이스와 달리 마치 한 편의 영화와 같이 유기적이고 끊김없는 전환을 시각적으로 제공하는 요소이다. 이를 통해 플루언트 디자인 시스템이 적용된 애플리케이션들은 자연스러운 애니메이션 효과들로 사용자들이 애플리케이션이 제공하는 정보에 보다 더 자연스럽게 몰입할 수 있게 도와주고 기계적인 반응에서 벗어나 더 자연스럽고 친근하게 다가갈 수 있게 도와준다.

• 재질
  현실 세계에 존재하는 물질적 특성을 디지털 환경으로 옮기는 역할을 하는 요소이다. 플루언트 디자인 시스템이 적용된 애플리케이션들은 애플리케이션 뒷편의 배경이 흐릿하면서도 은은하게 비쳐보이며 사용자들로 하여금 플루언트 디자인 시스템이 적용된 애플리케이션을 더 현실적이고 자연스럽게 느끼게 하여 더 쉽게 접근할 수 있도록 유도한다.

• 규모
  데스크톱이나 랩톱과 같은 2D 인터페이스를 사용하는 기존 컴퓨팅 환경에 국한되지 않고 가상현실과 증강현실을 이용하는 홀로렌즈와 같은 3D 인터페이스를 사용하는 차세대 컴퓨팅 환경에서도 일관적인 사용자 경험을 제공하기 위해 도입된 플루언트 디자인 시스템의 핵심 요소이다. 플루언트 디자인 시스템이 적용된 애플리케이션은 이러한 3D 환경에서 사용자가 디지털 환경에서 실제와 같은 규모감을 느낄 수 있게 도와준다.

플루언트 디자인 시스템의 핵심 목적은 본래 Windows 10의 궁극적인 개발 목표인 다양한 형태의 디바이스에서 통일된 사용자경험을 제공하는 것을 충족시키기 위한 새로운 디자인 언어의 개발로, 5대 구성 요소는 이러한 개발 목표를 달성하기 위해 서로 상호작용을 한다는 설명이다.

 

마이크로소프트 플루언트 디자인 시스템 소개 페이지

https://www.microsoft.com/design/fluent/#/whatsnew

Microsoft Design

 

 

 

이 중에서도 나는 Typography를 정리한 페이지를 중점적으로 보았다
어떤 경우에 보통 어느 사이즈의 폰트를 사용하는지 알 수 있었다. 

14px 은 명령 및 컨트롤 (탐색, 명령 모음, 확인란, 드롭다운 메뉴, 토글, 라디오 버튼, 버튼 텍스트 및 링크), 파일 또는 문서 제목 및 본문 텍스트로 쓰인다고 한다. 권장 줄 높이까지 써 있는데 14px의 경우 20px 이다. 

https://developer.microsoft.com/en-us/fluentui#/styles/web/typography

Home - Fluent UI