Fluent Design, 2017 Microsoft의 빛, 움직임, 깊이

한 줄로

마이크로소프트의 디자인 언어입니다. Metro의 평면성을 버리고 다시 깊이와 질감을 도입한 2017년 발표작입니다.

어디서 왔나

2017년 5월, Microsoft Build 컨퍼런스에서 발표됐습니다. 이전 디자인 언어 Metro (2010 Windows Phone 7부터, 후에 Modern UI로 개명)는 극단적 평면성과 큰 타이포그래피가 특징이었습니다. 미니멀리즘의 정점이었습니다.

그런데 사용자들의 피드백은 평면성이 차갑다는 것이었습니다. Fluent Design은 이 비판에 답하면서 다시 깊이와 질감을 살린 시스템입니다.

5가지 핵심 요소입니다.

1. Light (빛): 호버 시 빛이 따라옵니다 (Acrylic 효과).
2. Depth (깊이): elevation을 그림자가 아니라 흐림(blur) 효과로 표현합니다.
3. Motion (모션): 자연스러운 가속, 감속.
4. Material (재료): Acrylic, Mica, Smoke 같은 반투명 재질.
5. Scale (규모): 작은 폰부터 큰 디스플레이까지 적응.

가장 특징적인 효과는 Acrylic입니다. 반투명 + 흐림 + 노이즈가 결합된 유리 같은 표면입니다. Windows 11(2021)에서 본격 도입됐습니다.

Glassmorphism과의 관계

Fluent Design의 Acrylic은 사실 glassmorphism의 직접적 원형 중 하나입니다. macOS Big Sur(2020)가 비슷한 효과를 들여오면서 glassmorphism이 트렌드 용어로 굳어졌습니다.

Windows 11과 Office

• Windows 11 (2021): 둥근 모서리, Mica 배경, 새 시작 메뉴.
• Office 365: 자연스러운 색, 둥근 입력 필드.
• Edge 브라우저: 시스템 통합된 Fluent 룩.

바이브 메이커가 챙길 한 가지

Fluent Design의 핵심 교훈은 "평면이 항상 좋은 것은 아니다"입니다. 정보가 많은 화면에서 미묘한 깊이는 사용자가 정보의 위계를 파악하는 데 도움을 줍니다. 다만 반투명, 흐림 효과는 성능 비용이 있습니다. 저사양 기기에서는 비활성화 옵션을 줘야 합니다.

관련

Glassmorphism · Material Design · Skeuomorphism