최근 수정 시각 : 2024-11-26 16:48:39

Microsoft Windows/디자인

Windows Aero에서 넘어옴

파일:상위 문서 아이콘.svg   상위 문서: Microsoft Windows
파일:Microsoft 로고.svg파일:Microsoft 로고 화이트.svg
{{{#!wiki style="margin:0 -10px -5px; min-height:calc(1.5em + 5px); word-break:keep-all"
{{{#!folding [ 펼치기 · 접기 ]
{{{#!wiki style="margin:-6px -1px -11px"
<colbgcolor=#393939,#737373><colcolor=#fff>제품군
하드​웨어Surface · Xbox · HoloLens · PixelSense · Zune · Pluton · IVAS
소프트​웨어Windows · Office · Edge · Media Player · Hyper-V · Defender · Visual Studio Code · Visual Studio · Windows Terminal · Microsoft Store · Xbox App · PowerToys · Internet Explorer · MS-DOS · Windows Movie Maker · Autoruns · Clipchamp
서비스Microsoft Azure · OneDrive · Microsoft Copilot · Bing · LinkedIn · Microsoft Docs · Skype · MSN · 정품인증 · Xbox Game Pass · Xbox Cloud Gaming · Xbox network
관련 기술ASF · ASP · Blazor · COM · DCOM · DirectX · 파일 시스템(FAT · NTFS · ReFS) · MFC · .NET(.NET Core · .NET Standard · C# · F# · Visual Basic .NET · Windows Forms · WPF · UWP · .NET MAUI · ASP.NET · ML.NET) · OLE · Q# · Silverlight · Visual Basic · VBA · WASAPI · Windows 커널 · Windows 디자인 · Windows API · Windows Runtime(UWP · WinUI 3) · WMA · WMV · Xamarin · XNA · 하복 엔진 · SAMI · PowerShell · Windows Modern Standby
산하 계열사 및 사업부GitHub · .NET Foundation · Microsoft Gaming · LinkedIn
관련 인물빌 게이츠(은퇴) · 폴 앨런(은퇴) · 스티브 발머(퇴사) · 게이브 뉴웰(퇴사) · 마이크 이바라(퇴사)
사티아 나델라 · 필 스펜서 · 브래드 스미스
기타제니맥스 미디어 인수 · 액티비전 블리자드 인수 · 시작 메뉴 · 빌 게이츠의 굴욕
관련 틀365 제품군 · 하드웨어 제품군 · Surface 제품군 · Windows 제품군}}}}}}}}}

1. 개요2. Windows 1.x~3.x, NT 3.x (1983~1995)3. Windows 9x, NT 4.0~2000 (1993~2010)4. Visual Style (2000~)
4.1. Luna4.2. Windows Basic
5. Windows Aero (2005~2012)
5.1. 역사5.2. 기능5.3. 요구사항5.4. 기타
6. Style UI (2012~2017)7. Fluent Design System (2017~)
7.1. 구성 요소
7.1.1. Acrylic7.1.2. Mica7.1.3. Mica Alt7.1.4. Smoke
7.2. 문제점
7.2.1. 개선의 움직임
7.3. 관련 영상
8. 여담

1. 개요

Microsoft Windows의 UI와 디자인에 대하여 정리한 문서.

2. Windows 1.x~3.x, NT 3.x (1983~1995)

파일:/pds/200807/21/70/b0005670_48848e97c009a.jpg
한글 윈도우 3.1
당시에는 작업 표시줄과 시작 메뉴가 존재하지 않았으며, 창 모양은 왼쪽에는 ― 기호의 조절 메뉴가 있고, 오른쪽에는 ▲ 모양의 '전체 화면 표시'(지금의 최대화)와 ▼ 모양의 '아이콘 표시'(지금의 최소화) 버튼이 있다. '아이콘 표시'라고 되어 있는 이유는, 작업 표시줄이 아직 없던 당시엔 바탕 화면 아래쪽에 왼쪽에서 오른쪽 방향으로 아이콘화되어 쌓이게 만들어져서이다. ― 기호의 조절 메뉴는 후에 나온 Windows에서는 창의 맨 왼쪽에 있는 프로그램 아이콘을 누르면 나타나며, 없는 경우에는 그냥 프로그램 창의 맨 왼쪽 위 꼭짓점 근처를 클릭하면 된다. 이 기능은 Windows 스타일 앱 한정으로 사라졌다.

Windows 3.1의 자습서에서는 창을 닫을 때 조절 메뉴를 더블 클릭하라고 가르치며, 이렇게 닫는 방법은 2020년대 현역 운영체제에서도 32비트/64비트 무관하게 가능하다. 어떻게 보면 가장 오래된 레거시 지원이래도 될 정도이다. 다만 Windows 11 들어서 Win UI 3으로 새로 디자인된 앱들에선 작동되지 않는다.

XP의 루나 테마와 뒷 버전들의 비주얼 스타일과 다르게 사용자 모드 API에서 바로 렌더링하기 때문에 속도가 빠르다.

3. Windows 9x, NT 4.0~2000 (1993~2010)

파일:VirtualBox_Windows Me_12_09_2021_14_48_33.png
Windows Me의 메인 화면[1]

Windows 고전

Windows 95 초창기 빌드부터 Windows Me까지 기본으로 적용된 테마이다. 색 구성표를 선택하거나 사용자가 직접 변경할 수 있고, 기본값은 'Windows 표준'으로 되어 있지만, Windows 2000에서 기본 색 구성표가 바뀌었고, Windows 98 Second Edition까지 사용된 색 구성표는 'Windows 고전'으로 바뀌어서 들어갔다. Windows XP부터는 시각 스타일을 'Windows 고전'으로 설정하면 활성화되며, 색 구성표는 기존과 같이 사용할 수 있지만, Windows Vista에서 XP까지 있는 색 구성표 중 대부분이 삭제되었다. Windows 7에서는 시각 스타일과 색 구성표가 개인 설정의 '테마'로 통합되었다.

3D 입체 효과가 적용되었으며, 최대화·최소화 버튼의 디자인이 바뀌고 닫기 버튼이 추가되었다. 최소화는 기존의 ▼ 모양에서 _ 모양으로 바뀌었으며, 최대화는 기존의 ▲ 모양에서 □ 모양으로 바뀌었다. 조절 메뉴는 ― 기호 대신은 프로그램 아이콘이 뜬다.

Windows 95와 Windows NT 4.0에는 제목 표시줄과 시작 메뉴에 그라데이션이 없지만, Windows 98부터 디스플레이 설정이 하이 컬러 이상일 때 쓸 수 있다. 또 Windows 9x 계열의 경우 디스플레이 설정에서 16색이나 256색으로 변경했다가 하이 컬러 이상으로 다시 변경하고 시스템을 다시 시작하지 않으면 제목 표시줄의 그라데이션이 돌아오지 않는 버그가 있는데, 이를 응용해서 제목 표시줄의 그라데이션 효과를 일부러 없앨 수도 있다.

Windows XP에서도 설정하면 이 고전 테마로 바꿀 수 있으며, 서버 2008 R2와 Windows 7까지 이 테마가 남아 있다. Windows 서버 시리즈에는 성능을 위해 조금 더 오랫동안 기본으로 적용되었는데, 마지막으로 적용된 빌드가 Windows Server 2012 빌드 7850[2]이다.

제목 표시줄의 닫기, 최대화, 최소화 단추의 기호는 비트맵 이미지가 아니라 Marlett라는 글꼴[3]이 적용된 글자이다.

XP의 루나 테마와 뒷 버전들의 비주얼 스타일과 다르게 사용자 모드 API에서 바로 렌더링하기 때문에 속도가 빠르다.

4. Visual Style (2000~)

Visual style[4]
Windows XP, Windows Server 2003에 기본으로 적용된 테마. 창을 더 디테일하게 꾸밀 수 있다.

홈 에디션, 프로페셔널에는 루나 테마가, 미디어 센터 에디션 2005, 태블릿 PC 에디션 2005에는 로열 테마가 기본으로 적용되었다.

4.1. Luna

파일:Windows XP Luna.png
Windows XP의 메인 화면 (루나 테마)
파일:상세 내용 아이콘.svg   자세한 내용은 루나(Windows XP) 문서
번 문단을
부분을
참고하십시오.
루나 테마는 파란색 제목·작업 표시줄, 빨간색 닫기 버튼, 녹색 시작 버튼으로 되어 있다.

4.2. Windows Basic

파일:Windows 7 Visual Style.png
Windows 7의 베이직 테마
Windows Vista, Windows 7에는 'Windows Basic'이라는 이름으로 남아 있다. Windows Aero가 적용되지 않아 창 투명화 효과 등이 없는 기본적인 테마이다.

Windows Basic 테마는 Windows Vista에서는 'Windows Vista 기본', Windows 7에서는 'Windows 7 Basic K'[5]로 부른다. Windows 8/8.1이나 Windows 10에서도 MDI 인터페이스를 사용하는 프로그램에서 Basic 테마를 볼 수 있다. Edge 한정으로 전체 화면을 해제하면 일시적으로 볼 수 있다. DWM을 강제 비활성화해도 볼 수 있다. 다만 이렇게 하면 메트로 앱이 작동하지 않으며, 1809는 아예 화면이 검정이 되며 아무것도 할 수 없게 된다.

Windows Vista나 7에서 Windows Aero를 꺼둔다는 말은, Windows 고전 테마로 바꿔두는 경우를 제외하면 이 테마로 바꿔둔다는 말과 같다.

일부 응용 프로그램은 호환성 문제로 인해 실행할 때 자동으로 Windows Basic 테마로 바뀌는 경우가 있다. 그 밖에도 호환성 모드 설정에서 '데스크톱 컴퍼지션 사용 안 함'(Vista)/'바탕 화면 구성 사용 안 함'(7)에 체크하면 해당 프로그램 실행 중에는 자동으로 Windows Basic 테마로 바뀐다.

윈도10에서도 가끔 이 테마 스타일이 보일 때가 있다. 대표적으로 오페라에서 전체 화면 해제하였을 때이다.

5. Windows Aero (2005~2012)

파일:maxresdefault-vista.jpg
Windows Vista
파일:Windows 7 DWM.png
Windows 7

Windows UI에 유리 질감의 반투명 및 흐림 효과를 주는 기능이다. 각 글자에 "Authentic, Energetic, Reflective, Open"이라는 역두문자어가 붙었다.

5.1. 역사

Windows Longhorn에 처음으로 도입되었으며 5048 빌드에서 처음 적용되었다. 당시에는 기본 적용은 아니었고 레지스트리를 건드려야 활성화 가능했다. 이전 버전에는 에어로는 없었고 Plex, Jade, Slate 테마가 있다.

정확히는 빌드 4015부터 '투명한 창틀'이라는 이름으로 적용되었지만, 이때는 따로 패치를 해야 볼 수 있으며, 4039 전까지는 일반적으로 DCE를 켜면 창 전체가 반투명해진다. 다만 3683 빌드에는 '바탕 화면 구성 엔진(DCE)'라는 창 전체를 반투명하게 만드는 기능이 있으나 실제 하드웨어에서만 작동한다는 말이 있고 바탕 화면이 사라진다.[6] 빌드 3706부터 4001까지는 창을 닫을 때 창이 회전하면서 작아지는 등의 애니메이션이 추가되고 바탕 화면이 없어지는 버그가 고쳐졌다. Lab06 랩에서 컴파일한 빌드 4015와 4018은 DCE에 창을 옮기면 창이 흔들리는 등의 더 화려한 애니메이션이 추가되었다. main 랩에서 컴파일한 빌드 4015는 애니메이션이 전부 삭제되었다.

롱혼 4074 빌드에서 Jade 테마가 도입되었는데, 이것이 Windows Basic 테마의 전신이다. 그리고 Windows Vista에 정식으로 도입되었으며 시작 메뉴와 창 제목 표시줄 등에 적용되어 당시 Vista의 상징으로 취급되기도 했다. 이때는 최대화를 하면 최대화된 창과 작업 표시줄이 불투명하고 어둡게 변했는데, 이는 성능 저하를 줄이는 기능과 열려 있는 작업에 더 잘 집중할 수 있게 하는 기능을 동시에 수행한다. 기본 하늘색 기준으로 약간 푸른빛 도는 검은색에 가깝다.

Windows 7에서는 창을 최대화해도 투명도가 유지되도록 변경되었으며, 기능이 조금 더 추가되었다.

Windows 8에서는 태블릿 지원 때문에 창 제목이 가운데로 오고 작업 표시줄을 제외한 투명 효과가 삭제되었으나 Aero Glass와 Aero Flip을 제외한 기능은 여전히 지원한다.

그러다가 Windows 10에서 창 제목이 롤백되고 일부 UI에서 투명 효과가 부활했다. 여전히 창 투명은 없다. 이후 Fluent Design System으로 배턴을 넘겨줬다.

Windows 11에서 드디어 창 투명 효과가 부활했다. 다만 동작 원리는 Windows Aero와 상당히 다른데, 아래 참고.

5.2. 기능

Aero 테마에서 지원하는 기능들은 다음과 같다.
  • Aero Glass
    창이 투명해보이며 질감이 유리처럼 매끈해진다. 창의 색상 역시 마음대로 바꿀 수 있다. 다만 Windows Vista Home Basic은 투명 효과를 지원하지 않으며, 창 모양만 지원한다. Windows 7 Home Basic은 Windows Vista Home Basic보다도 제약이 심해져서 창 색상 변경조차도 불가능하다. Windows 7 Starter는 기본 상태에서는 Aero를 켤 수 없으며 별도의 툴로 개인 설정을 해금해야 사용 가능하다.
  • Aero Flip
    Windows + Tab 키를 누르면 창 전환을 3D 효과로 할 수 있다. 작업 표시줄에 있는 '창 간 전환' 아이콘을 클릭해도 된다.
  • 창 미리보기
    작업 표시줄에 있는 프로그램에 마우스 포인터를 올리면 단순한 텍스트 대신 미리 보기를 띄워 준다.

Windows 7에서는 아래의 기능들이 추가되었다.
  • Aero Peek
    작업 표시줄의 실행 중인 프로그램 위에 마우스 포인터를 올리면 미리 보기 창이 뜨는데, 그 위에 다시 마우스 포인터를 올리면 해당 프로그램만 화면 위에 띄워 준다. 또 화면 오른쪽 하단의 바탕 화면 보기 버튼에 마우스 포인터를 올리면 바탕 화면만 보여 준다. 참고로 이때 Aero Glass 효과는 잠시 비활성화된다.
  • Aero Shake
    창을 흔들면 그 창을 제외한 모든 창이 내려간다.
  • Aero Snap
    화면 가장자리 쪽에 창이 자석처럼 붙어서 자동으로 크기가 맞춰진다. Windows 10부터는 기존 2분할에서 4분할로 가능하며 창 한 개를 붙이면 반대쪽에 띄울 프로그램을 클릭해서 바로 띄울 수 있게 기능이 추가되었다.

나머지는 한국어 위키백과의 윈도우 에어로 문서에 있다.

Aero Glass, Aero Flip을 제외한 기능들은 하술된 Style UI에서도 이어졌지만 'Aero' 이름이 빠졌다.

5.3. 요구사항

  • Windows VistaWindows 7, Home Premium 이상 에디션
  • DirectX 9.0 이상과 WDDM을 지원하는 그래픽 카드
  • 32비트 트루 컬러 색상을 지원하는 모니터

Starter는 아예 지원하지 않으며 Home Basic은 투명 효과는 지원하지 않고 테마만 지원한다. 이마저도 Windows 7은 창 색상이 기본값으로 고정되어 있다. 또한 이 둘 공통으로 Aero Flip은 지원하지 않는다.

Windows 8 베타 빌드 7880[7]부터는 요구 사항을 충족하지 않아도 소프트웨어 렌더링 모드로 작동한다.[8] 빌드 7880 이전부터 레드필을 통해 메트로 UI가 내장되었는데[9], 메트로 UI가 에어로가 없으면 정상적으로 작동하지 않아서 그런 듯하다. Windows 10 역시 소프트웨어 렌더링을 하는지 3D 지원이 꺼져 있어도 나온다.

5.4. 기타

Windows Aero가 실행되어 있을 때 창 모드로 실행된 DirectX 기반 프로그램이 데스크톱 창 관리자(DWM)를 거쳐서 출력되기 때문에 약간의 딜레이가 생긴다. 이 때문에 미세하게나마 인풋랙을 겪는 사용자들이 있으며 게임할 때 일부러 Basic이나 고전 테마로 바꾸는 등 에어로를 꺼두는 사용자들도 존재한다.

Windows 8에서는 투명 효과가 삭제되었지만 데스크톱 창 관리자(DWM)는 항상 동작하며 끌 수 없도록 바뀌었기 때문에 무조건 딜레이가 생긴다. 만약 딜레이에 민감한 사람이라고 하면 그냥 전체 화면으로 바꾸는 것밖에는 답이 없다.

Windows 10의 경우, 일부 그래픽 카드 혹은 게임에서 전체 화면으로 전환해도 강제로 수직 동기화가 걸리거나 화면이 깨지는 경우가 있다. 이 문제는 게임 실행 파일 속성으로 들어가서 호환성 탭에서 '전체 화면 최적화 사용 중지'에 체크하면 해결된다.

컴퓨터 사양이 좋지 않은 경우 에어로 때문에 반응 속도가 느려지기도 한다. 물론 에어로가 사용하는 리소스는 그리 크지 않지만 내장 그래픽(인텔 (U)HD 그래픽스, AMD/APU 등)과 같이 시스템 리소스를 공유하는 경우에는 저하 폭이 더욱 크기 때문에 반응 속도가 더더욱 느리다고 느껴지는 듯하다.

화면 배색 창에서는 에어로 테마를 보여주지 않는다. 에어로를 골라도 베이직 테마가 미리 보기된다.

Windows Vista, 7, 8, 8.1, 10 초기 버전의 베타 버전[10]에는 Ctrl+Shift+F9로 에어로를 끄거나 켤 수 있는 단축키가 존재한다. 다만 레드필된 Windows 8 베타 버전이나 Windows 8.1~10 베타 버전은 메트로나 UWP가 바탕 화면 구성(DWM)을 요구하므로 여기에서 Ctrl+Shift+F9를 누르면 UI가 깨지거나 검은 화면이 나온다. 디버그용 기능이기 때문에 정식 버전이나 공식적으로 릴리즈된 베타 빌드에는 빠져있다.

Windows 8, 10, 11을 USB로 부팅 파일을 만들어서 부팅될 때 Aero Basic을 사용한다.[11]

Windows 7 베타 빌드 6730에서는 투명 효과에 버그가 있어서 뒤에 비치는 부분과 색의 혼합이 과하게 되어 포토샾에서 색상 닷지 기능을 사용한 듯한 효과가 나왔다. 이후 빌드에서 고쳐졌다. 다만 RTM에서도 레지스트리 수정을 통해 비슷한 효과를 구현할 수 있다.

Windows 8 초기 베타 버전[12]에서 레지스트리 수정으로 흐림(블러) 효과를 끌 수 있다.


파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 문서의 r26에서 가져왔습니다. 이전 역사 보러 가기
파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.
[ 펼치기 · 접기 ]
문서의 r26 (이전 역사)
문서의 r15 (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

6. Style UI (2012~2017)

파일:223-2236424_baixar-o-windows-8-64-bits-portugues.jpg
Windows 8.1에서의 Style UI
파일:Windows_8_Live_Tiles.gif
Windows 8의 라이브 타일

Windows 8부터 Windows 10 Redstone 2까지 쓰여 있던 디자인으로, 'MDL(Microsoft Design Language)'이라고도 한다. 플랫 디자인에 기반한 아이콘과 애니메이션 등으로 생동감 있는 UI가 특징이다. 이 UI는 Xbox 360 Dashboard에도 도입되었다.

MDL의 근간이 된 MS의 플랫 디자인은 2002년 10월 29일에 출시된 Windows Media Center의 내비게이션 시스템이 애니메이션이 있는 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년 안드로이드 롤리팝부터 머티리얼 디자인으로 바꾸었을 정도로 오늘날 UI 디자인 트렌드로 이끌어왔다. 단, iOS는 조너선 아이브의 영향도 컸다.

원래 이름은 'Metro UI'였으나, 기존 상표명과 충돌한 문제로 이름을 바꾸었다. 예전 이름에서도 알 수 있듯이 지하철 표지판에서 영감을 얻었으며, 이 UI와 연동되는 라이브 타일과 함께 Windows Phone 7에서 처음으로 선보였다. 반응이 제법 괜찮자 데스크탑-모바일 통합의 일환으로 Windows 8에도 야심차게 도입했으나 결과는 좋지 않았다.

기존 Aero보다 호불호가 상당히 갈린 편인데, 디자인적으로 심플함을 추구한다면서 아이콘 같은 경우는 Windows 7의 것을 그대로 갖고온 것이 많아 일관성도 떨어졌다. 이 문제는 아래 7.2 문단의 내용과도 직결된다. 또 좋은 평가를 받았던 비스타와 7의 상징인 에어로 글래스도 없고, 창의 그림자 크기도 매우 작아서 거의 안 보인다(아예 없어진 건 아니다). 이 변경사항들은 에어로 글래스를 빼면 10에서 대부분 폐기되었다. 삽질임을 인정한 셈.

7. Fluent Design System (2017~)

파일:fluentdesign_header.png
Fluent Design System 소개페이지
An eloquent design system for a complex world
복잡한 세계를 위한 설득력 있는 디자인 시스템
플루언트 디자인 시스템(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 디자인으로써 시초라고 볼 수 있다. 자세한 내용은 바로 위의 Style UI 문단 참고.

7.1. 구성 요소

플루언트 디자인 시스템은 빛(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, 다시 말해서 플루언트 디자인 시스템의 탄생 배경이다.

전체적은 특징은 강화된 깊이감, 다시 살아난 재질감과 광원 효과이다. 깊이감은 창 테두리에 그림자 효과가 좀 더 강조되면서 바탕 화면 위에 창이 놓여진 느낌보다는 공중에 띄운 느낌인데, 이미 안드로이드 롤리팝의 머티리얼 디자인의 그림자 효과와 유사하고 Windows 10 초기 빌드 버전에도 있던 그림자 효과보다 더 강조된 느낌이다. 광원 효과는 에어로 테마만큼 화려하지 않지만 MDL의 명료한 느낌을 해치지 않는 범위에서 재현되었다. 재질감은 대부분 유광 느낌이었던 에어로 테마와는 다르게 무광 느낌이 강하며, 대부분 반투명에 비금속성 느낌이 강한 맵시를 보여주고 있는데 iOS 7에서 강조했던 뿌연 배경 효과와 비슷한 느낌을 준다.

2017년 10월 17일 Windows 10 버전 1709(RS3)부터 제공되며, 개별 애플리케이션 차원으로는 2017년 상반기부터 일부 퍼스트파티 애플리케이션에 부분적으로 도입되었을 뿐 운영 체제 자체의 UI는 바뀌지 않았었다. 하단의 영상에 보이는 시작 메뉴 플루언트 디자인 시스템 도입은 버전 1803(RS4)부터 이루어졌다. 개발자들은 별도의 개발 환경을 준비하지 않고도 기존의 C#이나 XAML과 같은 익숙한 개발 환경을 이용하여 Windows.UI.XAML.Controls 네임스페이스를 바탕으로 관련 SDK를 이용하여 플루언트 디자인 시스템을 사용한 애플리케이션을 개발할 수 있다.

7.1.1. Acrylic

파일:windows10aero2.png
Acrylic Material

Windows 10에 추가된 재질. Windows Vista, Windows 7의 Aero Glass에서 보이는 투명한 배경을 생각하면 된다. 다만 Aero Glass는 Windows 8의 메트로 디자인이 도입되면서 삭제되었기에 기존 Aero 관련 API를 사용한 프로그램들은 여전히 불투명한 상태로 동작한다.

Aero Glass의 경우 창의 테두리로만 나타나지만, 다이얼로그 창이 뜰 때 부모 창에 Acrylic이 적용되어 창의 포커스를 시각적으로 보여주는 등으로 UI 전역에서 사용할 수 있다.

또한 Aero Glass의 경우는 창의 활성화 유무와 관계 없이 항상 투명한 상태를 유지하나, Acrylic은 활성화된 창에만 투명 효과가 적용되는 식으로 시각적 피드백을 주며, Aero Glass는 시스템 전역의 색상이 사용되지만 개별적으로 색상과 투명도를 조절할 수 있기에 다크 모드 등에도 적응할 수 있다.

7.1.2. Mica


파일:MicaDifference.png[13]

Windows 11부터 적용되는 새로운 UI 재질. 바탕 화면의 배경색에 맞춰져 창 색이 미세하게 달라지는 게 특징이다. Windows 10의 Fluent Design에서 사용되던 Acrylic 언어를 대체했다.

Aero Glass처럼 둥근 모서리를 기반으로 하며, 바탕 화면의 배경 이미지를 창에 씌우기 때문에 밑에 창이 몇 겹이 쌓여있든 상관없이 마치 창 하나만 켜져 있는 것처럼 빛이 투과해 비친다. 그리고 다시 제목 표시줄이 투명해진다![14]

그렇다 해도 Aero Glass처럼 게이밍에 방해가 되냐고 묻는다면 그건 또 아니다. 정확히 말하면 발상을 바꾼 것으로, "뒤가 비치게 창을 투명하게 만든다"가 아닌 "창 뒤에 배경화면 이미지만 비치는 것처럼 만든다"로 개발 방향성이 바뀐 것. 유리 질감 렌더링까지 할 필요없이 단순히 이미지 1장을 띄우는 것과 비슷하기 때문에 시스템 자원을 훨씬 덜 잡아먹는다.

Acrylic보다 Mica는 시스템 부하가 적은 편이지만 아예 없는 것은 아니므로 랩탑과 같은 환경에서 배터리로 동작하거나 사양이 부족한 환경에서는 투명 기능이 해제되고 불투명 모드로 동작한다.

7.1.3. Mica Alt

Windows 11 빌드 22523부터[15] 추가된 새로운 UI 요소이다. 코드네임은 Tabbed. Mica는 바탕화면 색에 맞춰서 색이 설정되는 반면 Mica Alt는 바탕화면 배경을 흐리게 처리하여 색을 입히는 원리로 작동된다.(성능은 챙겼지만 어떻게 보면 꼼수에 가까운 방법이다 보니 창 여러개를 겹치면 Aero와 비교 시 확실히 차이를 느낄 수 있다.) 현재 이 효과를 메모장파일 탐색기 제목 표시줄에서 확인할 수 있다.

MicaForEveryone을 사용하면 이 효과를 강제로 활성화할 수 있다.

파일:micaandtabbed.gif

7.1.4. Smoke

다이얼로그가 표시될 때 그 외 주변 요소들을 어둡게 처리해 해당 다이얼로그에만 집중할 수 있도록 해준다.

7.2. 문제점

Windows에 실제 적용되는 속도가 정말 하품날 정도로 느린데, 단순히 아이콘을 바꾸고 메뉴를 고치는 일인데도 너무 느리다. 2022년 1월 기준으로 UWP 앱들에는 적용되었지만, 대부분의 Win32 앱은 아이콘만 바뀌었거나 일부 Win32 앱에는 아예 적용되지 않았다. 심지어 같은 마이크로소프트에서 낸 앱끼리도 적용되는 타이밍이 죄다 제각각이다. 곧 어떤 앱은 기존 Windows Aero, 스타일 UI 디자인이고 어떤 앱은 플루언트 디자인이 적용된 채로 있는 것이다. 여러 가지 스타일의 아이콘이 뒤섞인 채 10년도 넘게 짬뽕 상태인지라 윈도우의 디자인 일관성을 해치는 데 한몫하고 있다.

심지어 기존의 Windows 8부터 도입된 스타일(메트로) 아이콘은 고사하고 2006년에 나온 Windows Vista 시절의 Windows Aero 아이콘을 아직도 사용하는 기본 애플리케이션이 널렸다는 걸 생각해보면 언제쯤 이 플루언트 디자인이 시스템 전반에 걸쳐 적용될지 기약이 없다. 당장 워드패드 등의 Windows 보조 프로그램을 보면 2023년 기준으로 아직도 나온 지 16년 된 비스타 시절 아이콘을 우려먹고 있다. 하지만 몇몇 프로그램은 지원 중단된 상태고 몇몇 프로그램은 아예 빼버리려고 시도하다 취소한 전적이 있는 만큼 지원을 포기했을 가능성이 있다.

7.2.1. 개선의 움직임

Windows 11에서 꾸준한 응용 프로그램 업데이트와 빌드 업데이트를 통해 이 문제를 개선하기 시작했다. 매 업데이트때마다 윈도우 시스템에 대한 대대적인 최적화와 함께 적용되고 있으며, Windows 10에 비교당하며 비판받던 Windows 11의 셀링 포인트로 여겨지고 있다. 심지어 시스템 깊숙히 존재하는 Windows 95 시절의 아이콘도 변경한다고 한다.[16] Windows 11 티저에 따르면 Windows 7에서 사용된 보조 프로그램들이 전부 플루언트 디자인으로 변경된 것을 보이는데, 이렇게 계속된다면 미래에는 디자인 일관성 문제가 깔끔히 해결될 것으로 보인다. 아직도 Windows Tools에 포함된 프로그램들은 아직도 Windows Vista에서 쓰인 디자인이나, 심하면 Windows XP의 디자인을 사용하고 있지만, 22H2에 들어서 많은 레거시 부분(로그인 화면 등)을 개선해나가는 것으로 보아, 이 부분도 조만간 해결될 것으로 예상된다. Windows 11 초기 빌드(21H2)에서는 Windows 7의 요소(화상 키보드 등)와 Windows 8.1의 요소(접근성 on/off), Windows 10의 요소(음악 재생 Flyout 등)가 뒤섞여서 상당히 혼란스러웠다.

또한 원래라면 Windows 10 이후의 디자인 언어인 Acrylic과 Mica와 같은 UWP의 인터페이스를 사용하기 위해서는 Windows RT의 일부인 XAML을 사용해야 했고, 전통적인 Win32 프로그램들에서 이러한 위젯들을 사용하기 위한 WinUI 라이브러리가 제공될 따름이었다. 심지어 이걸 쓰려면 스토어 등에서 사용되는 컨테이너화된 MSIX로 패키징된 프로그램에서만 가능하고 일반적인 Win32 프로그램을 실행하듯이 *.exe 파일 식으로 배포되는 방법으로는 지원되지 않았지만, 이것도 해결에 나선 모양인지 MSIX 없이 컴파일을 지원하는 SDK가 현재 테스트 중이다.[17]

다만 이런 변화가 긍정적이기는 하지만, 일단 출시해놓고 천천히 고치고 있다는 점에서 여전히 비판받고 있다. 23h2부터 외형은 비스타의 잔재는 거의 지운 상태이다. 그러나 관리도구 쪽을 들여다보면 제어판의 잔재 때문인지 여전히 제법 짙게 남아있다.

7.3. 관련 영상

8. 여담

  • Windows XP에서는 클래식 테마가 아닌 Luna 테마나 그 다른 테마들을 적용했어도, 명령 프롬프트창에는 여전히 클래식 테마가 적용된다. 무슨 테마인지 모른다면 안전 모드로 부팅했을때 창을 생각해보자.
    이유는 테마를 사용하지 않는 csrss을 이용하여 창을 표시하기 때문이다.
    파일:cmd_windows_xp.png
  • Windows Vista에서는 마찬가지로 Basic 테마를 사용하면 클래식 테마가 적용되지만, Aero를 사용하면 명령 프롬프트도 Aero 테마로 바뀐다. Vista에서는 Aero를 사용했을 때 csrss가 아닌 DWM을 이용하여 창을 표시하기 때문이다.
    파일:cmd_windows_vista_with_aero.png
[18]
  • Windows 7부터는 명령 프롬프트 창이 개인 설정에서 적용한 테마를 따라간다.
    Windows 7부터는 명령 프롬프트를 conhost로 창을 표시하기 때문이다.


[1] Windows Me는 Windows 고전 테마가 기본으로 적용된 마지막 버전이다. Windows 2000도 같은 테마를 사용한다. Windows 98 Second Edition 및 이전 버전에 비해 아이콘 몇개가 달라졌을 뿐, 기본적인 틀은 거의 똑같다.[2] 2010년 9월 22일 컴파일[3] 일반적인 글자나 영어 알파벳이 아닌, 닫기 등의 단추의 기호 등이 들어 있다.[4] 베타위키에서는 Aero 이후 테마를 전부 Visual Style로 분류하고 있다.[5] 대한민국 한정, 다른 언어에서는 'Windows 7 Basic'으로 뜬다.[6] Desktop Composition #2 | Longhorn 3683[7] 이때는 투명 효과를 포함하여 Windows 7과 동일한 에어로를 사용했다.[8] 정확히는 DWM 자체가 아니라 기본 비디오 드라이버에서 소프트웨어 3D 렌더링을 지원하게 수정되었다.[9] 레드필을 활성화해야 나오며 기본 상태로는 윈도우 7과 별 차이가 없다.[10] 모든 빌드에 해당하지는 않는다.[11] 이때 wim을 추출해서 테마를 조금이라도 건드리고 다시 압축한 다음 부팅을 시도하면 고전 테마가 나타난다.[12] Windows 7의 에어로를 사용하는 버전[13] 왼쪽에 있는 파란색은 파란색 계열을 띄고, 오른쪽에 있는 보라색은 보라색 계열을 띈다. 이 운모 효과를 좀 더 선명하게 보려면 다크 모드에서는 어두운 계열 색, 라이트 모드에서는 밝은 계열 색을 골라야 한다.[14] Mica로 작동되고, 역시 Aero보단 시스템 자원을 덜 잡아먹는다. 그러나 일부 앱에서는 Mica Alt로 작동된다.[15] 정확히는 22H2 대규모 업데이트부터 추가된다.[16] Microsoft Is Finally Ready to Let Go of Windows 95-Era Icons[17] Microsoft release Windows App SDK 1.0 Preview 3 with support for WinUI 3 apps without MSIX[18] 다만 스크롤바는 csrss로 렌더링되어 클래식 테마로 나타난다,

파일:CC-white.svg 이 문서의 내용 중 전체 또는 일부는 문서의 r60에서 가져왔습니다. 이전 역사 보러 가기
파일:CC-white.svg 이 문서의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.
[ 펼치기 · 접기 ]
문서의 r60 (이전 역사)
문서의 r48 (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)

문서의 r (이전 역사)