사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
Human Interface Guidelines (HIG) vs Material Design
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — Human Interface Guidelines (HIG) -1, Material Design 0. 온도감 — Human Interface Guidelines (HIG) 0, Material Design 0. 시대감 — Human Interface Guidelines (HIG) 0, Material Design 0. 격식 — Human Interface Guidelines (HIG) 1, Material Design 1.
나란히 놓고 보기
Human Interface Guidelines (HIG)
- YEAR
- 1987
- BY
- Apple
- MOOD
- 미니멀 · 신뢰감
Material Design
- YEAR
- 2014
- BY
- MOOD
- 신뢰감 · 친근·발랄
주요 특징
Human Interface Guidelines (HIG)
- 명료한 계층 구조
- 부드러운 애니메이션
- SF 폰트 사용
- 네이티브 컨트롤
- 일관된 내비게이션
Material Design
- 그림자와 깊이를 통한 계층 구조
- 대담한 색상과 타이포그래피
- 의미 있는 모션과 애니메이션
- 반응형 그리드 시스템
- 일관된 아이콘과 이미지
장점과 한계
Human Interface Guidelines (HIG)
장점
- 전 세계 iPhone 사용자에게 친숙한 UX
- 시스템과 깊이 통합된 자연스러운 경험
- 고급스럽고 프리미엄한 이미지
- SwiftUI로 빠른 구현 가능
한계
- Apple 플랫폼에 한정
- 웹에서 그대로 구현 어려움
- 엄격한 가이드라인으로 커스터마이징 제한
Material Design
장점
- 전 세계적으로 인지도 높아 학습 비용 낮음
- 풍부한 공식 컴포넌트 라이브러리 (MUI)
- 명확한 가이드라인으로 일관성 유지 쉬움
- 접근성 기본 탑재
한계
- Google 스러운 느낌이 강해 차별화 어려움
- 스큐어모피즘 대비 감성적 깊이 부족
- 고급 브랜드 제품에는 부적합할 수 있음
역사와 배경
Human Interface Guidelines (HIG)
1987년 Mac용 첫 가이드라인 발행. 이후 iOS, iPadOS, macOS, watchOS, tvOS로 범위를 넓히며 세계에서 가장 영향력 있는 디자인 가이드라인으로 발전.
Material Design
2014년 Google I/O에서 공개. '물리적 재료(Material)'를 메타포로 삼아 그림자·깊이·모션을 시스템화한 첫 대형 디자인 시스템.
접근성
Human Interface Guidelines (HIG)
Dynamic Type(텍스트 크기 자동 조정), VoiceOver, Switch Control 등 접근성 기능이 시스템 레벨에서 강력하게 지원됨.
Material Design
WCAG AA 대비율 준수. 색상 대비, 터치 타겟 크기(48dp), 스크린 리더 지원이 기본 사양.
자주 묻는 질문
Human Interface Guidelines (HIG) vs Material Design, 무엇이 다른가요?
Human Interface Guidelines (HIG) — 애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다. Material Design — 구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다. 무드 좌표에서 가장 벌어지는 축은 밀도입니다 — Human Interface Guidelines (HIG) 쪽은 여백 쪽에, Material Design 쪽은 중간 쪽에 서 있습니다.
언제 Human Interface Guidelines (HIG) 쪽, 언제 Material Design 쪽을 골라야 하나요?
iOS 앱 · macOS 앱 · Apple 생태계 서비스 같은 화면이라면 Human Interface Guidelines (HIG) 쪽이 오래 버팁니다. 반대로 Android 앱 개발 · Google 생태계 제품 · 기업용 SaaS 쪽 그림이라면 Material Design 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
Human Interface Guidelines (HIG) vs Material Design, 장단점은 어떻게 갈리나요?
Human Interface Guidelines (HIG) 쪽 — 강점은 전 세계 iPhone 사용자에게 친숙한 UX · 시스템과 깊이 통합된 자연스러운 경험, 짚고 갈 한계는 Apple 플랫폼에 한정 · 웹에서 그대로 구현 어려움입니다. Material Design 쪽 — 강점은 전 세계적으로 인지도 높아 학습 비용 낮음 · 풍부한 공식 컴포넌트 라이브러리 (MUI), 짚고 갈 한계는 Google 스러운 느낌이 강해 차별화 어려움 · 스큐어모피즘 대비 감성적 깊이 부족입니다.