# Fluent Design System — 디자인 스타일 가이드

## 기본 정보
- **ID**: fluent-design
- **카테고리**: design-language
- **연도**: 2017
- **제작자**: Microsoft

## 설명
마이크로소프트의 디자인 언어로, 빛, 깊이, 모션, 재료, 스케일의 5가지 요소를 강조합니다.

## 역사·배경
2017년 Build 컨퍼런스에서 발표. Windows 10 대비 더욱 입체적이고 반응형인 경험을 목표로 설계되었으며, 현재 Windows 11의 기반 디자인 언어.

## 핵심 원칙
- 빛 (Light)
- 깊이 (Depth)
- 모션 (Motion)
- 재료 (Material)
- 스케일 (Scale)

## 주요 특징
- Acrylic 재질 (반투명 효과)
- 부드러운 애니메이션
- 연결된 애니메이션과 전환
- 깊이감 있는 레이어링
- 적응형 디자인

## 색상 팔레트
- Blue 600 (#0078D4): Primary — 주요 브랜드 색상
- Blue 700 (#106EBE): Primary Hover
- Gold (#FFB900): Accent — 강조 요소
- Light Gray (#F3F2F1): Background
- White (#FFFFFF): Surface — 카드·패널
- Gray 130 (#323130): 텍스트 Primary
- Gray 90 (#605E5C): 텍스트 Secondary
- Gray 30 (#EDEBE9): Border

## 사용 사례
- Windows 11 앱
- Microsoft 365 제품군
- 기업용 SaaS 대시보드
- 데스크톱 및 태블릿 앱

## 추천 프로젝트 유형
- Windows 데스크톱 앱
- Microsoft 생태계 제품
- 기업용 SaaS
- 태블릿 UI

## 장점
- Acrylic 효과로 독특한 시각적 깊이 구현
- Windows 생태계와 완벽 통합
- 다크/라이트 테마 모두 우수
- WinUI 3 공식 지원

## 단점·한계
- Acrylic 효과는 GPU 성능 소모
- 웹에서 완전 구현 어려움
- Apple HIG 대비 소비자 인지도 낮음

## 실제 사용 제품·서비스
- Windows 11 UI
- Microsoft Teams
- Outlook
- Visual Studio Code

## 접근성
고대비 테마 내장. 키보드 포커스 표시, 내레이터(스크린 리더) 완전 지원.

## 관련 스타일
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [human-interface-guidelines](https://ui.buildersgate.com/styles/human-interface-guidelines)
- [metro-design](https://ui.buildersgate.com/styles/metro-design)

## 디자인 토큰

### 색상
- primary: #0078D4
- secondary: #005A9E
- accent: #00BCF2
- background: #F3F3F3
- surface: rgba(243, 243, 243, 0.9)
- text: #323130
- textSecondary: #605E5C
- border: #EDEBE9

### 헤더
- background: linear-gradient(135deg, rgba(0, 120, 212, 0.95) 0%, rgba(0, 90, 158, 0.95) 100%)
- textColor: #FFFFFF
- accentColor: #00BCF2

### 타이포그래피
- fontFamily: 'Segoe UI', 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 1.6px 3.6px rgba(0,0,0,0.13), 0 0.3px 0.9px rgba(0,0,0,0.11)
- md: 0 6.4px 14.4px rgba(0,0,0,0.13), 0 1.2px 3.6px rgba(0,0,0,0.11)
- lg: 0 25.6px 57.6px rgba(0,0,0,0.22), 0 4.8px 14.4px rgba(0,0,0,0.18)
- xl: 0 51.2px 115.2px rgba(0,0,0,0.25), 0 9.6px 28.8px rgba(0,0,0,0.22)

### Border Radius
- none: 0
- sm: 2px
- md: 4px
- lg: 8px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #EDEBE9

### 이펙트
- blur: 30px
- opacity: 0.9
- transition: all 0.2s cubic-bezier(0.1, 0.9, 0.2, 1)

### 애니메이션
- duration: 200ms
- easing: cubic-bezier(0.1, 0.9, 0.2, 1)

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=filled / focusEffect=ring
- 배지: shape=rounded / style=solid
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=20

### 레이아웃
- containerStyle: fluid
- sectionSpacing: normal

### 특수 효과
- glassmorphism: true
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=fluent-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=fluent-design&merged=true
← 홈으로 돌아가기

Fluent Design System

마이크로소프트의 디자인 언어로, 빛, 깊이, 모션, 재료, 스케일의 5가지 요소를 강조합니다.

연도

2017

제작자

Microsoft

2017년 Build 컨퍼런스에서 발표. Windows 10 대비 더욱 입체적이고 반응형인 경험을 목표로 설계되었으며, 현재 Windows 11의 기반 디자인 언어.

#0078D4

색상 팔레트

Blue 600

#0078D4

Primary — 주요 브랜드 색상

Blue 700

#106EBE

Primary Hover

Gold

#FFB900

Accent — 강조 요소

Light Gray

#F3F2F1

Background

White

#FFFFFF

Surface — 카드·패널

Gray 130

#323130

텍스트 Primary

Gray 90

#605E5C

텍스트 Secondary

Gray 30

#EDEBE9

Border

핵심 원칙

1

빛 (Light)

2

깊이 (Depth)

3

모션 (Motion)

4

재료 (Material)

5

스케일 (Scale)

주요 특징

  • Acrylic 재질 (반투명 효과)
  • 부드러운 애니메이션
  • 연결된 애니메이션과 전환
  • 깊이감 있는 레이어링
  • 적응형 디자인

장단점

장점

  • +Acrylic 효과로 독특한 시각적 깊이 구현
  • +Windows 생태계와 완벽 통합
  • +다크/라이트 테마 모두 우수
  • +WinUI 3 공식 지원

단점 / 한계

  • −Acrylic 효과는 GPU 성능 소모
  • −웹에서 완전 구현 어려움
  • −Apple HIG 대비 소비자 인지도 낮음

적합한 사용처

사용 사례

  • Windows 11 앱
  • Microsoft 365 제품군
  • 기업용 SaaS 대시보드
  • 데스크톱 및 태블릿 앱

이런 프로젝트에 추천

Windows 데스크톱 앱Microsoft 생태계 제품기업용 SaaS태블릿 UI
접근성

고대비 테마 내장. 키보드 포커스 표시, 내레이터(스크린 리더) 완전 지원.

실제 사용 예시

Windows 11 UIMicrosoft TeamsOutlookVisual Studio Code

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Acrylic Material

Fluent Design의 특징인 아크릴 재질 효과

Acrylic Card

반투명 효과와 블러로 빛과 깊이를 표현합니다.

Dark Acrylic

어두운 배경에서도 우아한 아크릴 효과를 제공합니다.

Reveal Highlight

마우스 위치를 따라 빛나는 효과

💡

Reveal

호버 시 빛이 드러납니다

✨

Light

빛의 방향을 표현합니다

🎨

Depth

깊이를 인식시킵니다

Connected Animations

부드러운 전환 애니메이션

Depth and Layers

레이어를 통한 깊이 표현

Layered Depth

여러 레이어로 깊이를 표현

Fluent Style Buttons

Fluent Design 스타일의 버튼

Fluent Input Fields

Fluent Design의 입력 필드 — 아랫줄 강조와 부드러운 포커스 전환

Fluent Typography

Segoe UI 기반의 명확하고 적응형 타이포그래피 계층

Display (68px)

Fluent Design

Title Large (40px)

빛, 깊이, 모션

Title (28px)

자연스럽고 적응형인 경험

Subtitle (20px)

Fluent는 Windows의 디자인 언어입니다

Body (14px)

Fluent Design System은 마이크로소프트가 빛, 깊이, 모션, 재료, 스케일의 다섯 가지 원칙을 바탕으로 설계한 디자인 언어입니다. Windows 11과 Microsoft 365 전반에 적용됩니다.

Caption (12px)

Microsoft © 2017 Fluent Design System · Windows 11

관련 스타일 탐색

Material Design

구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.

Human Interface Guidelines (HIG)

애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다.

Metro Design

마이크로소프트의 타일 기반 디자인 언어로, 타이포그래피와 콘텐츠 중심의 심플한 인터페이스를 추구합니다.