사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
Fluent Design System vs Human Interface Guidelines (HIG)
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — Fluent Design System 0, Human Interface Guidelines (HIG) -1. 온도감 — Fluent Design System -1, Human Interface Guidelines (HIG) 0. 시대감 — Fluent Design System 1, Human Interface Guidelines (HIG) 0. 격식 — Fluent Design System 1, Human Interface Guidelines (HIG) 1.
나란히 놓고 보기
Fluent Design System
- YEAR
- 2017
- BY
- Microsoft
- MOOD
- 테크·미래적 · 신뢰감
Human Interface Guidelines (HIG)
- YEAR
- 1987
- BY
- Apple
- MOOD
- 미니멀 · 신뢰감
주요 특징
Fluent Design System
- Acrylic 재질 (반투명 효과)
- 부드러운 애니메이션
- 연결된 애니메이션과 전환
- 깊이감 있는 레이어링
- 적응형 디자인
Human Interface Guidelines (HIG)
- 명료한 계층 구조
- 부드러운 애니메이션
- SF 폰트 사용
- 네이티브 컨트롤
- 일관된 내비게이션
장점과 한계
Fluent Design System
장점
- Acrylic 효과로 독특한 시각적 깊이 구현
- Windows 생태계와 완벽 통합
- 다크/라이트 테마 모두 우수
- WinUI 3 공식 지원
한계
- Acrylic 효과는 GPU 성능 소모
- 웹에서 완전 구현 어려움
- Apple HIG 대비 소비자 인지도 낮음
Human Interface Guidelines (HIG)
장점
- 전 세계 iPhone 사용자에게 친숙한 UX
- 시스템과 깊이 통합된 자연스러운 경험
- 고급스럽고 프리미엄한 이미지
- SwiftUI로 빠른 구현 가능
한계
- Apple 플랫폼에 한정
- 웹에서 그대로 구현 어려움
- 엄격한 가이드라인으로 커스터마이징 제한
역사와 배경
Fluent Design System
2017년 Build 컨퍼런스에서 발표. Windows 10 대비 더욱 입체적이고 반응형인 경험을 목표로 설계되었으며, 현재 Windows 11의 기반 디자인 언어.
Human Interface Guidelines (HIG)
1987년 Mac용 첫 가이드라인 발행. 이후 iOS, iPadOS, macOS, watchOS, tvOS로 범위를 넓히며 세계에서 가장 영향력 있는 디자인 가이드라인으로 발전.
접근성
Fluent Design System
고대비 테마 내장. 키보드 포커스 표시, 내레이터(스크린 리더) 완전 지원.
Human Interface Guidelines (HIG)
Dynamic Type(텍스트 크기 자동 조정), VoiceOver, Switch Control 등 접근성 기능이 시스템 레벨에서 강력하게 지원됨.
자주 묻는 질문
Fluent Design System vs Human Interface Guidelines (HIG), 무엇이 다른가요?
Fluent Design System — 마이크로소프트의 디자인 언어로, 빛, 깊이, 모션, 재료, 스케일의 5가지 요소를 강조합니다. Human Interface Guidelines (HIG) — 애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다. 무드 좌표에서 가장 벌어지는 축은 밀도입니다 — Fluent Design System 쪽은 중간 쪽에, Human Interface Guidelines (HIG) 쪽은 여백 쪽에 서 있습니다.
언제 Fluent Design System 쪽, 언제 Human Interface Guidelines (HIG) 쪽을 골라야 하나요?
Windows 데스크톱 앱 · Microsoft 생태계 제품 · 기업용 SaaS 같은 화면이라면 Fluent Design System 쪽이 오래 버팁니다. 반대로 iOS 앱 · macOS 앱 · Apple 생태계 서비스 쪽 그림이라면 Human Interface Guidelines (HIG) 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
Fluent Design System vs Human Interface Guidelines (HIG), 장단점은 어떻게 갈리나요?
Fluent Design System 쪽 — 강점은 Acrylic 효과로 독특한 시각적 깊이 구현 · Windows 생태계와 완벽 통합, 짚고 갈 한계는 Acrylic 효과는 GPU 성능 소모 · 웹에서 완전 구현 어려움입니다. Human Interface Guidelines (HIG) 쪽 — 강점은 전 세계 iPhone 사용자에게 친숙한 UX · 시스템과 깊이 통합된 자연스러운 경험, 짚고 갈 한계는 Apple 플랫폼에 한정 · 웹에서 그대로 구현 어려움입니다.