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

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

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

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

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

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

## 컬러 시스템 가이드
브랜드 파란색(Fluent Blue) 기반 2-tone 시스템. 밝은 Acrylic 레이어가 색조를 보조

### 색상 역할
- primary: 링크, 강조 버튼, 포커스 인디케이터
- background: 흰색(라이트) 또는 짙은 회색(다크) — Acrylic 효과의 기반
- surface: 반투명 Acrylic 레이어 — background를 흐리게 비춤
- neutral: 회색 계열 — 텍스트, 비활성 상태, 구분선
- accent: 시스템 accent color — 사용자가 OS에서 변경 가능

### 색상 제약 조건
- Acrylic 사용 시 배경이 없으면 fallback solid color 반드시 준비
- primary 계열 외 vivid color 추가 사용 자제
- 라이트/다크 두 테마 모두 지원 필수

### 다크모드 전략
배경 어두운 계열로 전환, Acrylic 투명도 조정. neutral 텍스트 밝게 반전. primary 색상은 약간 밝게 조정

### 대비 요구사항
WCAG AA (4.5:1) 기본. Windows 고대비 테마 호환성 고려

## 타이포그래피 가이드
- **폰트 성격**: 휴머니스트 산세리프. Windows 환경에서는 Segoe UI 계열이 표준이나 비Windows 환경에서는 동급 폰트 대체 가능
- **권장 폰트 수**: 최대 1개
- **타입 스케일**: 1.2 (Minor Third) — Windows UI의 절제된 타이포 리듬

### 타이포그래피 제약
- Segoe UI 또는 Segoe UI Variable 대체 시 동일한 x-height 비율 유지
- heading과 body의 weight 차이는 100~200 수준으로 온화하게
- letter-spacing은 기본값 유지 — 가독성 우선

## 하면 안 되는 것 (안티패턴)
- Acrylic 없이 단순 투명도만으로 glass 흉내 금지
- hard shadow 사용 금지 — 부드러운 그림자 또는 없음
- 컬러풀한 배경 사용 자제 — 중립적 흰색/회색 기반

## 반드시 포함해야 하는 것
- Reveal Highlight — 마우스 근접 시 테두리/배경 빛나는 효과
- Connected Animation — 화면 전환 시 공유 요소 연결 모션
- 라이트/다크 모드 두 가지 모두 지원

## 모션 가이드
Connected Animation으로 화면 간 맥락 유지. 표준 이징 cubic-bezier(0,0,0,1) 사용. 빠르고 목적 있는 모션 — 장식용 애니메이션 배제.

## 사용 사례
- 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

## 자주 묻는 질문 (FAQ)

### Q: Fluent Design System이란 무엇인가요?
A: 마이크로소프트의 디자인 언어로, 빛, 깊이, 모션, 재료, 스케일의 5가지 요소를 강조합니다. 2017년 Build 컨퍼런스에서 발표. Windows 10 대비 더욱 입체적이고 반응형인 경험을 목표로 설계되었으며, 현재 Windows 11의 기반 디자인 언어.

### Q: Fluent Design System의 핵심 디자인 원칙은 무엇인가요?
A: Fluent Design System의 핵심 원칙은 빛 (Light), 깊이 (Depth), 모션 (Motion), 재료 (Material), 스케일 (Scale)입니다.

### Q: Fluent Design System은 어떤 프로젝트에 적합한가요?
A: Fluent Design System은 Windows 11 앱, Microsoft 365 제품군, 기업용 SaaS 대시보드, 데스크톱 및 태블릿 앱, Windows 데스크톱 앱, Microsoft 생태계 제품, 기업용 SaaS, 태블릿 UI 등의 프로젝트에 적합합니다.

### Q: Fluent Design System의 장단점은 무엇인가요?
A: 장점으로는 Acrylic 효과로 독특한 시각적 깊이 구현, Windows 생태계와 완벽 통합, 다크/라이트 테마 모두 우수, WinUI 3 공식 지원이 있습니다. 단점으로는 Acrylic 효과는 GPU 성능 소모, 웹에서 완전 구현 어려움, Apple HIG 대비 소비자 인지도 낮음이 있습니다.

### Q: Fluent Design System에서 색상은 어떻게 사용하나요?
A: 브랜드 파란색(Fluent Blue) 기반 2-tone 시스템. 밝은 Acrylic 레이어가 색조를 보조 색상 역할은 primary: 링크, 강조 버튼, 포커스 인디케이터, background: 흰색(라이트) 또는 짙은 회색(다크) — Acrylic 효과의 기반, surface: 반투명 Acrylic 레이어 — background를 흐리게 비춤입니다. 주의사항: Acrylic 사용 시 배경이 없으면 fallback solid color 반드시 준비, primary 계열 외 vivid color 추가 사용 자제.

### Q: Fluent Design System에 어울리는 폰트 스타일은 무엇인가요?
A: Fluent Design System에는 휴머니스트 산세리프. Windows 환경에서는 Segoe UI 계열이 표준이나 비Windows 환경에서는 동급 폰트 대체 가능 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: Segoe UI 또는 Segoe UI Variable 대체 시 동일한 x-height 비율 유지, heading과 body의 weight 차이는 100~200 수준으로 온화하게.

### Q: Fluent Design System 디자인에서 하면 안 되는 것은 무엇인가요?
A: Fluent Design System에서 피해야 할 것: Acrylic 없이 단순 투명도만으로 glass 흉내 금지, hard shadow 사용 금지 — 부드러운 그림자 또는 없음, 컬러풀한 배경 사용 자제 — 중립적 흰색/회색 기반.

### Q: Fluent Design System을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Fluent Design System을 적용한 대표적인 제품·서비스로는 Windows 11 UI, Microsoft Teams, Outlook, Visual Studio Code 등이 있습니다.

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

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Fluent Design System

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

연도

2017

제작자

Microsoft

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

#0078D4

핵심 원칙

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

자주 묻는 질문

Fluent Design System이란 무엇인가요?
마이크로소프트의 디자인 언어로, 빛, 깊이, 모션, 재료, 스케일의 5가지 요소를 강조합니다. 2017년 Build 컨퍼런스에서 발표. Windows 10 대비 더욱 입체적이고 반응형인 경험을 목표로 설계되었으며, 현재 Windows 11의 기반 디자인 언어.
Fluent Design System의 핵심 디자인 원칙은 무엇인가요?
Fluent Design System의 핵심 원칙은 빛 (Light), 깊이 (Depth), 모션 (Motion), 재료 (Material), 스케일 (Scale)입니다.
Fluent Design System은 어떤 프로젝트에 적합한가요?
Fluent Design System은 Windows 11 앱, Microsoft 365 제품군, 기업용 SaaS 대시보드, 데스크톱 및 태블릿 앱, Windows 데스크톱 앱, Microsoft 생태계 제품, 기업용 SaaS, 태블릿 UI 등의 프로젝트에 적합합니다.
Fluent Design System의 장단점은 무엇인가요?
장점으로는 Acrylic 효과로 독특한 시각적 깊이 구현, Windows 생태계와 완벽 통합, 다크/라이트 테마 모두 우수, WinUI 3 공식 지원이 있습니다. 단점으로는 Acrylic 효과는 GPU 성능 소모, 웹에서 완전 구현 어려움, Apple HIG 대비 소비자 인지도 낮음이 있습니다.
Fluent Design System에서 색상은 어떻게 사용하나요?
브랜드 파란색(Fluent Blue) 기반 2-tone 시스템. 밝은 Acrylic 레이어가 색조를 보조 색상 역할은 primary: 링크, 강조 버튼, 포커스 인디케이터, background: 흰색(라이트) 또는 짙은 회색(다크) — Acrylic 효과의 기반, surface: 반투명 Acrylic 레이어 — background를 흐리게 비춤입니다. 주의사항: Acrylic 사용 시 배경이 없으면 fallback solid color 반드시 준비, primary 계열 외 vivid color 추가 사용 자제.
Fluent Design System에 어울리는 폰트 스타일은 무엇인가요?
Fluent Design System에는 휴머니스트 산세리프. Windows 환경에서는 Segoe UI 계열이 표준이나 비Windows 환경에서는 동급 폰트 대체 가능 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: Segoe UI 또는 Segoe UI Variable 대체 시 동일한 x-height 비율 유지, heading과 body의 weight 차이는 100~200 수준으로 온화하게.
Fluent Design System 디자인에서 하면 안 되는 것은 무엇인가요?
Fluent Design System에서 피해야 할 것: Acrylic 없이 단순 투명도만으로 glass 흉내 금지, hard shadow 사용 금지 — 부드러운 그림자 또는 없음, 컬러풀한 배경 사용 자제 — 중립적 흰색/회색 기반.
Fluent Design System을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Fluent Design System을 적용한 대표적인 제품·서비스로는 Windows 11 UI, Microsoft Teams, Outlook, Visual Studio Code 등이 있습니다.

관련 스타일 탐색

Material Design

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

Human Interface Guidelines (HIG)

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

Metro Design

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