Fluent Design System

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

YEAR: 2017
BY: Microsoft
MOOD: 테크·미래적 · 신뢰감

표본

이 스타일의 기본형

버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.

입력

PRIMARY#0078D4
SECONDARY#005A9E
ACCENT#00BCF2
BG#F3F3F3
SURFACE

취급 표시

살짝 둥근 모서리
가는 테두리
가는 아이콘 선

표본

이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.

버튼

입력과 토글

이메일

배지

중립강조긍정

탭

스탯과 차트

2,480주간 방문+12%

1.8%이탈률-0.4%p

여덟 달의 지표 흐름을 담은 표본 차트입니다.

아바타와 아이콘

김서이하박지윤채+1

카드

기본 카드

서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.

강조 카드

강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.

LUMA루마구독하기

COFFEE SUBSCRIPTION

매주 새로 볶는 커피 구독

로스팅한 지 사흘 안 된 원두만 담습니다. 취향을 고르면 매주 목요일에 도착합니다.

4,200구독 중인 가정

72시간로스팅 후 배송까지

12종싱글 오리진 원두

루마의 원칙

한 잔의 기준을 정해두고, 매주 그 기준대로 보냅니다.

사흘 이내 로스팅

주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.

취향 진단

다섯 가지 질문으로 산미와 바디를 맞춰 원두를 고릅니다.

산지 직거래

에티오피아와 콜롬비아 농장에서 직접 계약해 들여옵니다.

커핑 기록 동봉

그 주 배치의 커핑 노트와 로스팅 프로파일을 함께 보냅니다.

나눠 받는 계정

한 구독으로 두 가지 원두를 나눠 받을 수 있습니다.

언제든 일시정지

여행이나 출장 주간은 구독 관리에서 한 번에 건너뜁니다.

구독 플랜

원두 양과 주기만 고르면 됩니다. 약정 기간은 없습니다.

Solo

12,900원주 1회

200g 원두 한 봉
분쇄도 선택 가능
배송비 포함
언제든 일시정지

Duo

22,900원주 1회

Solo의 모든 항목
200g 두 종 또는 400g 한 종
커핑 노트 카드 동봉
한정 로스팅 우선 배정

House

39,000원주 1회

Duo의 모든 항목
1kg 업소용 팩
드립백 20개 추가
담당자 상담 연결

첫 주는 취향 진단용 샘플 세 종으로 시작합니다.

브랜드 랜딩 데모 크게 보기

LUMA Studio

주문 검색

구독 운영 현황

이번 주 로스팅과 발송 일정을 한 화면에서 봅니다.

1,284활성 구독+4.2%

312kg이번 주 로스팅+18kg

2.1%해지율-0.3%p

96%정시 출고변동 없음

월별 발송량

1월–12월

최근 12개월 발송 봉 수

원두별 소진

하우스 · 예가체페 · 우일라 · 안티구아 · 키암부 · 만델링

이번 주 생두 소진량, 단위 kg

플랜 구성

Solo · Duo · House

활성 구독의 플랜 비율

최근 주문

목요일 발송분 기준으로 정렬했습니다.

주문번호	고객	플랜	로스팅	금액	상태
LM-2418	김서김서연	Duo	미디엄	22,900원	출고 완료
LM-2417	정도정도현	Solo	라이트	12,900원	로스팅 중
LM-2416	한유한유진	House	다크	39,000원	포장 대기
LM-2415	오세오세훈	Duo	미디엄	22,900원	배송 중
LM-2414	문지문지아	Solo	미디엄	12,900원	일시정지
LM-2413	배승배승우	Duo	라이트	22,900원	출고 완료
LM-2412	신가신가온	House	미디엄	39,000원	결제 대기
LM-2411	류하류하람	Solo	다크	12,900원	출고 완료

로스팅 팀

이번 주 배치를 맡은 인원입니다.

박지이하최민윤채+1

박지훈헤드 로스터
이하늘품질 관리
최민서생두 구매
윤채원포장과 발송
강태오고객 응대

알림 설정

운영 알림을 어디까지 받을지 정합니다.

남은 생두가 20kg 아래로 내려가면 알립니다.

매일 아침 여덟 시에 그날 배치 목록을 보냅니다.

두 주 연속 배송을 건너뛴 구독자를 표시합니다.

SaaS 대시보드 데모 크게 보기

무드와 이웃

밀도여백빽빽

온도감차가움따뜻함

시대감레트로미래적

격식자유분방격식

테크·미래적
신뢰감

Human Interface Guidelines (HIG)애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다.Human Interface Guidelines (HIG)와 비교하기

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

어디에 쓰나

실제로 쓰는 곳

Windows 11 UI
Microsoft Teams
Outlook
Visual Studio Code

사용 사례

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

이런 프로젝트에 맞습니다

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

더 읽기

원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.

역사와 배경

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

핵심 원칙

빛 (Light)
깊이 (Depth)
모션 (Motion)
재료 (Material)
스케일 (Scale)

주요 특징

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

장점과 한계

장점

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

한계

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

컬러 시스템

브랜드 파란색(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은 기본값 유지 — 가독성 우선

설계 제약

반드시 포함

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

하지 말 것

Acrylic 없이 단순 투명도만으로 glass 흉내 금지
hard shadow 사용 금지 — 부드러운 그림자 또는 없음
컬러풀한 배경 사용 자제 — 중립적 흰색/회색 기반

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

접근성

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

자주 묻는 질문

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 등이 있습니다.

이 스타일로 만들어야 한다면

빌더스게이트가 디자인부터 개발까지 맡습니다.

담아두면 브리프에 그대로 실립니다

제작 문의