안드로이드 머티리얼 디자인, iOS 휴먼 인터페이스 가이드라인 한 번에 이해하기

 

플랫폼별 UI 설계 기준을 이해하고 싶은 디자이너·기획자를 위한 가이드입니다.

안드로이드 머티리얼 디자인과 iOS 휴먼 인터페이스 가이드라인의 차이를 디자인 철학, 시각적 표현, UX 관점에서 비교 정리했습니다. 

---

모바일 앱 UI 디자인을 공부하다 보면 반드시 마주하게 되는 두 가지 기준이 있다. 바로 **안드로이드의 머티리얼 디자인 가이드라인(Material Design)**과 **iOS의 휴먼 인터페이스 가이드라인(Human Interface Guidelines)**이다.
겉으로 보면 비슷해 보일 수 있지만, 이 두 가이드는 출발점부터 철학, 그리고 사용자를 바라보는 관점까지 꽤나 다르다.

---

안드로이드 머티리얼 디자인 가이드라인

안드로이드의 가장 큰 특징이자 취약점은 자신들만의 고유 디바이스가 없다는 점이다.
물론 픽셀폰이 존재하긴 하지만, 삼성·LG·샤오미 등 수많은 제조사의 다양한 디바이스 환경을 모두 고려해야 한다. 이 말은 곧, 특정 기기에 최적화된 디자인을 만들기보다는 어떤 디바이스에서도 일관되게 작동하는 디자인 시스템이 필요하다는 의미다.

 

안드로이드의 목표는 국가, 언어, 디바이스 크기와 상관없이 전 세계 누구나 직관적으로 사용할 수 있는 디자인을 만드는 것이다.
이 고민의 결과로 등장한 것이 바로 **머티리얼 디자인(Material Design)**이다.

 

머티리얼 디자인은 “현실 세계와 같은 방식으로 표현하면 누구나 쉽게 이해하지 않을까?”라는 질문에서 출발했다.
여기서 말하는 현실 세계는 단순한 사실적 묘사가 아니라, **종이(Material)**라는 개념이다.

디지털 화면이지만 이를 여러 장의 색종이가 겹쳐진 구조로 이해한다.
새로운 화면이 등장하면 기존 화면 위에 종이가 한 장 더 올라가는 느낌이고, 가장 위에 떠 있는 종이가 사용자의 인터랙션 대상이 된다.

그래서 머티리얼 디자인의 기본 전제는 **“안드로이드 유저는 본능적으로 가장 위에 있는 종이를 누른다”**라는 것이다.

위에 떠 있는 종이는 채도가 높고 선명하며, 아래에 있는 종이는 멀리 있는 것처럼 채도가 낮고 그림자가 깔린다.
사용자가 반드시 눌러야 하거나 시선을 유도해야 하는 버튼은 더 쨍하고, 더 또렷하며, 더 위에 떠 있는 것처럼 표현된다.

아이콘 또한 색종이를 접어 만든 듯한 형태를 기반으로 한다.

명확한 컬러 사용, 비교적 강한 그림자, 물리적인 레이어 개념이 머티리얼 디자인의 핵심 시각 요소다.

머티리얼 디자인 가이드라인의 또 다른 특징은 매우 구체적인 수치 제공이다.

마진, 패딩, 버튼 높이, 그림자 깊이까지 세세하게 정의되어 있어 UX/UI에 대한 전문 지식이 없는 사람도 가이드라인만 따라가면 일정 수준 이상의 앱을 만들 수 있다.

플랫폼이나 디바이스 크기가 달라도 동일한 앱이라면 사용 방법이 같도록 권장하는 이유도 여기에 있다.

---

iOS 휴먼 인터페이스 가이드라인

애플은 구글보다 훨씬 이전부터 터치 인터페이스에 대해 고민해온 회사다.
아이폰 이전에 이미 아이팟을 통해 터치 기반 UI를 실험했고, 초창기에는 현실 세계와 거의 동일한 디자인을 사용했다.

마이크, 계산기처럼 실제 사물을 그대로 옮긴 스큐어모피즘(Skeuomorphism) 디자인이 대표적이다.

현실과 똑같은 디자인은 학습 비용이 낮다는 장점이 있지만, 화면 공간 활용이 비효율적이라는 단점이 있었다.

 

그래서 점차 현실을 그대로 모사하기보다는 추상적인 개념으로 정제된 UI가 필요해졌다.

 

아이폰 1세대 시절의 핵심 전제는
**“유저는 볼록 튀어나와 있는 것을 누른다”**였다.

 

하지만 현재 iOS 디자인의 전제는 다르다.
이제는 **“아이폰 유저는 빛을 누르고 싶어 한다”**로 바뀌었다.

 

이 때문에 iOS UI는 완전한 단색을 잘 사용하지 않는다.
미묘한 그라데이션, 빛이 퍼지는 효과, 반투명 레이어를 적극 활용하며 이러한 표현은 특히 다크 모드에서 더 강하게 드러난다.

VR이나 공간 컴퓨팅 환경에서도 빛은 중요한 인터랙션 요소로 작용한다.

 

애플의 아이콘은 선명한 색을 사용하지만, 머티리얼 디자인처럼 종이 느낌보다는 빛이 확산되는 느낌에 가깝다.

애플이 강점을 가지는 이유는 아이폰, 아이패드, 아이맥 등 하드웨어와 소프트웨어를 모두 직접 설계하기 때문이다.

이 덕분에 디바이스별로 최적화된 디자인 가이드라인을 유지하면서도 높은 심미성을 지킬 수 있다.

 

가로 모드, 세로 모드에 따른 레이아웃 가이드는 물론,
시리 연동, 카메라 기능, 센서 활용 등 하드웨어의 장점을 UI에 적극적으로 녹여낸다.

 

아이폰 X 이후 등장한 둥근 모서리 디스플레이 또한 중요한 변화다.
이로 인해 탑 바 영역은 시각적으로는 버튼처럼 보이지만 실제로는 터치가 불가능한 영역이 생겼고,
따라서 디자인 시 탑 바 높이를 충분히 확보해야 한다는 가이드가 추가되었다.

---

시각적 관점에서 본 안드로이드와 iOS의 차이

• iOS: 백 블러(Background Blur)를 활용해 레이어를 구분
• Android: 검은색 반투명 + 그림자로 종이의 층을 표현

---

안드로이드와 iOS의 공통점

1. 메인 컬러를 UI 요소로 활용

과거에는 버튼을 인지시키기 위해 박스를 치거나 밑줄을 그었지만,
이제는 브랜드 컬러가 적용된 텍스트나 아이콘만으로도 버튼으로 인식한다.
컬러 자체가 인터랙션의 신호가 되는 것이다.

2. 그림자 사용을 점점 줄이는 추세

특히 썸네일이 나열되는 화면에서는 그림자를 최소화하는 것이 좋다.
썸네일은 레이어 최하단에 해당하기 때문에 그림자를 넣으면
상·하단 탭이나 FAB처럼 더 위에 떠 있어야 할 요소에 과도한 그림자가 필요해지기 때문이다.

---

마무리하며

폰트 가이드는 단순히 수치를 그대로 따라 하기보다는 전체적인 심미성과 맥락을 함께 고려해야 한다.
머티리얼 디자인과 휴먼 인터페이스 가이드라인은 단순한 UI 규칙 모음이 아니라,
각 플랫폼이 사용자를 어떻게 바라보고 있는지를 보여주는 디자인 철학의 결과물이다.