플루언트 디자인 시스템
[image]
Fluent Design System 소개페이지
'''Fluent Design System'''
마이크로소프트가 2017년 5월 11일 Build 컨퍼런스에서 공개하고 Windows 10 버전 1709부터 도입된 차세대 UI 디자인 언어. 개발 과정에서는 프로젝트 네온이라는 개발명으로 불렸으며, Windows Vista/7에서 제공하던 Windows Aero를 대체할 UI 컨셉트이다.
스마트폰, 데스크탑, 태블릿, 홀로렌즈 등 다양한 폼팩터에서 동일한 사용자 경험을 제공하는 데 초점을 맞춘 Windows 10의 개발 방향에 맞춰 새로 정의된 디자인 언어다. 계보상으로는 Windows 8에 적용된 MDL(Microsoft Design Language)의 후속 버전인 MDL 2에 해당한다.
플루언트 디자인 시스템이 명목상 MDL(Microsoft Design Language, 舊 메트로)의 후계 디자인이지만, MDL의 근간이 되는 MS의 플랫 디자인은 2002년 10월 29일에 출시된 Windows XP 미디어 센터 에디션의 내비게이션 시스템이 애니메이션이 있는 UI 디자인으로써 시초라고 볼 수 있다. 간결하면서도 세련된 디자인으로 평가받은 덕분인지 2004년에 출시된 포터블 미디어 센터, 2006년에 출시된 MP3 플레이어였던 Zune에도 적용되었다. 2005년에 출시된 Xbox 360의 대시보드도 형태는 다르지만 지금 봐도 '간결하면서도 세련된 디자인'이라는 공통점을 가지고 있다.
계속해서 2009년에 출시된 Zune HD에서 순수 타이포그래피와 애니메이션 강화로, 2010년에 Windows Phone 7에서 라이브 타일까지 적용된 메트로 디자인 언어로 발전되었으며, 2012년 Windows 8에서 라이브 '''타일'''의 개량판(스'''타일''')이 반영된 MDL로 발전되었다. 타사에서도 마찬가지로 스큐어모피즘 디자인을 고수했던 애플의 iOS가 2013년 iOS 7부터 플랫 디자인으로, 구글의 안드로이드 OS가 2014년 안드로이드 5.0부터 머티리얼 디자인으로 변경할 정도로 오늘날 UI 디자인 트렌드로 이끌어왔다.
플루언트 디자인 시스템은 빛(Light), 깊이(Depth), 움직임(Motion), 재질(Material), 규모(Scale)라는 5대 구성요소로 이루어져 있다.
전체적은 특징은 강화된 깊이감, 다시 살아난 재질감과 광원 효과. 깊이감은 창 테두리에 그림자 효과가 좀 더 강조되면서 바탕화면 위에 창이 놓여진 느낌보다는 공중에 띄운 느낌인데, 이미 안드로이드 5.0의 머티리얼 디자인의 그림자 효과와 유사하고 Windows 10 초기 빌드 버전에도 있던 그림자 효과보다 더 강조된 느낌이다. 광원 효과는 에어로 테마만큼 화려하지 않지만 MDL의 명료한 느낌을 해치지 않는 범위에서 재현되었다. 재질감은 대부분 유광 느낌이었던 에어로 테마와는 다르게 무광 느낌이 강하며, 대부분 반투명에 비금속성 느낌이 강한 맵시를 보여주고 있는데 iOS 7에서 강조했던 뿌연 배경 효과와 비슷한 느낌을 준다.
2017년 10월 17일 Windows 10 버전 1709(RS3)부터 제공되며, 개별 애플리케이션 차원으로는 2017년 상반기부터 일부 퍼스트파티 애플리케이션에 부분적으로 도입되었을 뿐 운영체제 자체의 UI는 바뀌지 않았었다. 하단에 영상에 보이는 시작메뉴 플루언트 디자인 시스템 도입은 버전 1803(RS4)부터 이루어졌다. 개발자들은 별도의 개발환경을 준비하지 않고도 기존의 C\#이나 XAML과 같은 익숙한 개발환경을 이용하여 Windows.UI.XAML.Controls 네임 스페이스 바탕으로 관련 SDK를 이용하여 플루언트 디자인 시스템을 사용한 애플리케이션을 개발할 수 있다.
디자인 컨셉은 좋은데, 문제는 윈도우에 실제 적용되는 속도가 정말 하품날 정도로 느리다. 물론 레거시의 지원을 중요시하는 윈도우의 특성상 업데이트가 느릴 수 밖에 없다고는 하지만 프로그램을 뜯어고치는 것도 아닌 단순히 아이콘만 바꾸는 일인데도 너무 느리다. 2020년 9월 현재까지도 일부 어플리케이션에만 적용되어 있을 뿐이다. 심지어 같은 마이크로소프트에서 낸 어플리케이션끼리도 적용되는 타이밍이 죄다 제각각이다. 즉 어떤 어플은 기존 윈도우 비스타, 스타일 UI 디자인이고 어떤 어플은 플루언트 디자인이 적용된 채 있는 것. 여러가지 스타일의 아이콘이 뒤섞인 채 10년도 넘게 짬뽕 상태인지라 윈도우의 디자인 일관성을 해치는 데 한몫하고 있다.
심지어 기존의 윈도우 8 부터 도입된 스타일(메트로) 아이콘은 고사하고 2006년에 나온 윈도우 비스타 시절의 Windows Aero 아이콘을 아직도 사용하는 기본 어플리케이션이 널렸다는 걸 생각해보면 언제쯤 이 플루언트 디자인이 시스템 전반에 걸쳐 적용될지 기약이 없다.[1]
사실상 베이퍼웨어나 다름없는게 현실. 특히 윈도우 새 버전 출시때마다 판매하던 시절과 달리 윈도우10에 공들여봐야 수익은 거기서 거기이기때문에 손을 놔버렸다는 시각이 지배적이나, 야금야금 20H2까지 앱업데이트와 빌드 업데이트를 통해 꾸준히 도입되고있는 중이다. 그리고 21H2에서 대대적인 UI 개편이 예고된만큼 아예 손을 놓은건 아닌 모양이다.
Fluent Design System 소개페이지
'''An eloquent design system for a complex world'''
'''복잡한 세계를 위한 설득력 있는 디자인 시스템'''
'''Fluent Design System'''
1. 개요
마이크로소프트가 2017년 5월 11일 Build 컨퍼런스에서 공개하고 Windows 10 버전 1709부터 도입된 차세대 UI 디자인 언어. 개발 과정에서는 프로젝트 네온이라는 개발명으로 불렸으며, Windows Vista/7에서 제공하던 Windows Aero를 대체할 UI 컨셉트이다.
스마트폰, 데스크탑, 태블릿, 홀로렌즈 등 다양한 폼팩터에서 동일한 사용자 경험을 제공하는 데 초점을 맞춘 Windows 10의 개발 방향에 맞춰 새로 정의된 디자인 언어다. 계보상으로는 Windows 8에 적용된 MDL(Microsoft Design Language)의 후속 버전인 MDL 2에 해당한다.
2. 상세
2.1. 전신
플루언트 디자인 시스템이 명목상 MDL(Microsoft Design Language, 舊 메트로)의 후계 디자인이지만, MDL의 근간이 되는 MS의 플랫 디자인은 2002년 10월 29일에 출시된 Windows XP 미디어 센터 에디션의 내비게이션 시스템이 애니메이션이 있는 UI 디자인으로써 시초라고 볼 수 있다. 간결하면서도 세련된 디자인으로 평가받은 덕분인지 2004년에 출시된 포터블 미디어 센터, 2006년에 출시된 MP3 플레이어였던 Zune에도 적용되었다. 2005년에 출시된 Xbox 360의 대시보드도 형태는 다르지만 지금 봐도 '간결하면서도 세련된 디자인'이라는 공통점을 가지고 있다.
계속해서 2009년에 출시된 Zune HD에서 순수 타이포그래피와 애니메이션 강화로, 2010년에 Windows Phone 7에서 라이브 타일까지 적용된 메트로 디자인 언어로 발전되었으며, 2012년 Windows 8에서 라이브 '''타일'''의 개량판(스'''타일''')이 반영된 MDL로 발전되었다. 타사에서도 마찬가지로 스큐어모피즘 디자인을 고수했던 애플의 iOS가 2013년 iOS 7부터 플랫 디자인으로, 구글의 안드로이드 OS가 2014년 안드로이드 5.0부터 머티리얼 디자인으로 변경할 정도로 오늘날 UI 디자인 트렌드로 이끌어왔다.
2.2. 구성 요소
플루언트 디자인 시스템은 빛(Light), 깊이(Depth), 움직임(Motion), 재질(Material), 규모(Scale)라는 5대 구성요소로 이루어져 있다.
- 빛
분위기와 장소감을 이끌어내는 요소다. 플루언트 디자인 시스템이 적용된 애플리케이션은 마우스 커서나 펜 커서를 탭에 가까이 할 경우 커서를 중심으로 원형의 빛의 무리가 발생하며 탭 위에 커서가 올라갈 경우 해당 탭 위 아래의 탭들도 미세한 빛을 띄며 반응을 하게 된다. 이러한 플루언트 디자인 시스템의 빛 요소는 정보를 조명하는 목적을 가지고 있다.
- 깊이
기존 플랫 디자인 UX로는 표현할 수 없는 3차원적인 공간감을 2차원 환경인 모니터 상에서 표현할 수 있게 해주는 요소다. 플루언트 디자인 시스템이 적용된 애플리케이션은 겉으로 보기에는 평면적인 환경이지만 스크롤을 할 경우 텍스트 등과 같이 주요 정보가 담긴 최상단의 레이어는 스크롤 속도에 맞춰 이동하고 하단의 배경 레이어들은 그보다 느리게 움직임으로서 3차원적인 원근감을 느끼게 해 준다. 이를 통해 시각적인 미려함을 제공함과 동시에 더 다양한 방법으로 정보를 제공할 수 있게 된다.
- 움직임
기존의 기계적이고 딱딱한 반응을 보여주었던 인터페이스와 달리 마치 한 편의 영화와 같이 유기적이고 끊김없는 전환을 시각적으로 제공하는 요소다. 이를 통해 플루언트 디자인 시스템이 적용된 애플리케이션들은 자연스러운 애니메이션 효과들로 사용자들이 애플리케이션이 제공하는 정보에 보다 더 자연스럽게 몰입할 수 있게 도와주고 기계적인 반응에서 벗어나 더 자연스럽고 친근하게 다가갈 수 있게 도와준다.
- 재질
현실 세계에 존재하는 물질적 특성을 디지털 환경으로 옮기는 역할을 하는 요소다. 플루언트 디자인 시스템이 적용된 애플리케이션들은 애플리케이션 뒷편의 배경이 흐릿하면서도 은은하게 비쳐보이며 사용자들로 하여금 플루언트 디자인 시스템이 적용된 애플리케이션을 더 현실적이고 자연스럽게 느끼게 하여 더 쉽게 접근할 수 있도록 유도한다.
- 규모
데스크탑이나 랩탑과 같은 2D 인터페이스를 사용하는 기존 컴퓨팅 환경에 국한되지 않고 가상현실과 증강현실을 이용하는 홀로렌즈와 같은 3D 인터페이스를 사용하는 차세대 컴퓨팅 환경에서도 일관적인 사용자 경험을 제공하기 위해 도입된 플루언트 디자인 시스템의 핵심 요소다. 플루언트 디자인 시스템이 적용된 애플리케이션은 이러한 3D 환경에서 사용자가 디지털 환경에서 실제와 같은 규모감을 느낄 수 있게 도와준다.
뭔가 거창하게 표현된 것 같지만, 이미 iOS나 안드로이드 등 기타 운영체제에서 도입된 것들로부터 크게 새로울 것이 없다. 하지만 플루언트 디자인 시스템의 핵심 목적은 본래 Windows 10의 궁극적인 개발 목표인 '''다양한 형태의 디바이스에서 통일된 사용자경험을 제공하는 것'''을 충족시키기 위한 새로운 디자인 언어의 개발로, 5대 구성요소는 이러한 개발 목표를 달성하기 위해 서로 상호작용을 한다는 설명이다. Windows 8에 도입된 MDL이 다른 요소들이 배제된 순수 플랫 디자인에 가까워서 개성 있는 맵시 표현에 제약이 있을 수밖에 없었고, 과도한 시각 정보를 줄여 간결하게 보이는 것까지는 장점인데 보는 사람에 따라 너무 밋밋하거나 심심해 보여서 금방 질리는 디자인으로 보일 수 있는 단점이 있었기 때문이다. MS도 이를 의식하고 있었는지 이전에 사용된 Windows Aero 테마에서 볼 수 있었던 특성을 다시 가져와서 현세대 디자인 트렌드에 맞게 접목시켜 재해석한 것이 MDL 2, 다시 말해서 플루언트 디자인 시스템의 탄생 배경이다.전체적은 특징은 강화된 깊이감, 다시 살아난 재질감과 광원 효과. 깊이감은 창 테두리에 그림자 효과가 좀 더 강조되면서 바탕화면 위에 창이 놓여진 느낌보다는 공중에 띄운 느낌인데, 이미 안드로이드 5.0의 머티리얼 디자인의 그림자 효과와 유사하고 Windows 10 초기 빌드 버전에도 있던 그림자 효과보다 더 강조된 느낌이다. 광원 효과는 에어로 테마만큼 화려하지 않지만 MDL의 명료한 느낌을 해치지 않는 범위에서 재현되었다. 재질감은 대부분 유광 느낌이었던 에어로 테마와는 다르게 무광 느낌이 강하며, 대부분 반투명에 비금속성 느낌이 강한 맵시를 보여주고 있는데 iOS 7에서 강조했던 뿌연 배경 효과와 비슷한 느낌을 준다.
2017년 10월 17일 Windows 10 버전 1709(RS3)부터 제공되며, 개별 애플리케이션 차원으로는 2017년 상반기부터 일부 퍼스트파티 애플리케이션에 부분적으로 도입되었을 뿐 운영체제 자체의 UI는 바뀌지 않았었다. 하단에 영상에 보이는 시작메뉴 플루언트 디자인 시스템 도입은 버전 1803(RS4)부터 이루어졌다. 개발자들은 별도의 개발환경을 준비하지 않고도 기존의 C\#이나 XAML과 같은 익숙한 개발환경을 이용하여 Windows.UI.XAML.Controls 네임 스페이스 바탕으로 관련 SDK를 이용하여 플루언트 디자인 시스템을 사용한 애플리케이션을 개발할 수 있다.
3. 문제점
디자인 컨셉은 좋은데, 문제는 윈도우에 실제 적용되는 속도가 정말 하품날 정도로 느리다. 물론 레거시의 지원을 중요시하는 윈도우의 특성상 업데이트가 느릴 수 밖에 없다고는 하지만 프로그램을 뜯어고치는 것도 아닌 단순히 아이콘만 바꾸는 일인데도 너무 느리다. 2020년 9월 현재까지도 일부 어플리케이션에만 적용되어 있을 뿐이다. 심지어 같은 마이크로소프트에서 낸 어플리케이션끼리도 적용되는 타이밍이 죄다 제각각이다. 즉 어떤 어플은 기존 윈도우 비스타, 스타일 UI 디자인이고 어떤 어플은 플루언트 디자인이 적용된 채 있는 것. 여러가지 스타일의 아이콘이 뒤섞인 채 10년도 넘게 짬뽕 상태인지라 윈도우의 디자인 일관성을 해치는 데 한몫하고 있다.
심지어 기존의 윈도우 8 부터 도입된 스타일(메트로) 아이콘은 고사하고 2006년에 나온 윈도우 비스타 시절의 Windows Aero 아이콘을 아직도 사용하는 기본 어플리케이션이 널렸다는 걸 생각해보면 언제쯤 이 플루언트 디자인이 시스템 전반에 걸쳐 적용될지 기약이 없다.[1]
사실상 베이퍼웨어나 다름없는게 현실. 특히 윈도우 새 버전 출시때마다 판매하던 시절과 달리 윈도우10에 공들여봐야 수익은 거기서 거기이기때문에 손을 놔버렸다는 시각이 지배적이나, 야금야금 20H2까지 앱업데이트와 빌드 업데이트를 통해 꾸준히 도입되고있는 중이다. 그리고 21H2에서 대대적인 UI 개편이 예고된만큼 아예 손을 놓은건 아닌 모양이다.
4. 관련 영상
[1] 당장 메모장. 그림판, 워드패드 등의 Windows 보조프로그램을 보면 2020년 기준으로도 아직도 나온 지 14년된 비스타 시절 도입된 아이콘을 우려먹고 있다. 하지만 해당 프로그램은 아예 빼버리려고 시도하다 취소한 전적이 있는 만큼 지원을 포기했을 가능성이 있다.