iOS 디자인과 안드로이드 머티리얼 디자인 가이드의 특징

iOS 디자인의 간단한 변천사와 플랫 디자인의 특징, 안드로이드 구글 머티리얼 디자인 가이드의 특징에 대해 요약해보았습니다.

 

본격적인 디자인을 제작하기에 앞서, 지금까지의 UIUX 디자인 종류는 어떤 것이 있었는지 앞으로 어떤 디자인을 추구해야할지 정리해보는 시간을 가져보겠습니다.

이전에는 iOS와 안드로이드 이 두가지 모바일 운영 체제에 의해 모바일 UIUX 디자인이 양분화되었었습니다.

 

이에 따라서, 모바일 콘텐츠를 만들때 그 운영체제가 가이드하는 디자인을 따르는 식이었죠.

 

그러나 이제는 각 운영체제별로 확연히 구분되기 보다는, 각자의 장점을 차용한 디자인이 발전되고 있습니다.

 

각각의 디자인 가이드에는 장단점이 있으므로, 살펴보신 후 표현하려고 하는 서비스의 상황에 따라서 유동적으로 사용하는 것이 좋겠습니다.

 

상단

 

1. iOS 디자인 (애플 휴먼 인터페이스 가이드)

 

 iOS는 스큐어 모픽에서 플랫 디자인, 나아가 머티리얼 디자인의 장점을 차용하는 등 변화가 있었습니다.

 

스큐어 모픽 디자인

 

스큐어 모픽 디자인은 현실의 객체를 사실적인 3차원으로 구현한 디자인입니다. 애플의 초창기 UIUX 디자인이 스큐어 모픽이었습니다.

 

저장 아이콘이 플로피 디스크 모양이듯이 현실의 물체를 모방하기 때문에, 사용자에게 친숙함을 줄 수 있었고 스마트폰을 처음 사용하는 사용자도 이해하기가 쉬웠습니다.

 

그러나 콘텐츠에 집중하기가 어렵고, 그래픽에 투자하는 성능이 과다했기 때문에 효율적이지 않다는 단점이 있었습니다. 따라서 애플은 더이상 이 디자인 방식을 사용하지 않습니다.

 

 

플랫 디자인

 

플랫 디자인은 단순한 그래픽 구성&컬러를 사용해서, 직관적으로 인식할 수 있게 하는 2차원 평면 디자인입니다. 

 

그리드 레이아웃을 기반으로 해서 규칙적으로 구성된다는 특징이 있고, 윈도우의 시작 화면이 대표적인 플랫 ui입니다. 

애플도 iOS 7부터 플렛 디자인으로 전환을 했습니다. 

 

플랫 디자인은 다음과 같은 장점이 있습니다.

 

• 단순한 면 분할
• 대비가 높은 색상
• 가독성 높은 타이프 그래픽
• 반응형 디자인 전환에 유리함
• 로딩이 빠름

그래픽 자체에 치중하기 보다는, 기능과 가독성에 중점을 두고 콘텐츠에 집중할 수 있게 하는 디자인이라고 할 수 있습니다.

 

플랫 디자인의 단점은 다음과 같습니다.

 

• 직관적으로 알아보기 어려울 수 있음
• 중요한 요소를 파악하기 어려움
• 어떠한 기능이 있는지 파악하기 어려움
• 탭 할 수 있는 영역의 구분하기 어려움

 

초기에는 그리드 기반으로 콘텐츠 분할, 산세리프 폰트, 유사한 컬러를 사용하는 플랫 디자인이 많았습니다.

 

이에 따라 처음에는 개성 있고 세련돼 보였던 디자인이 점차 유사한 스타일로 양산되면서, 개성을 찾아보기 어렵게 되었습니다.

 

 

플랫 2.0(딥 플랫)

그래서 양산된 스타일과 차별점을 주기 위해, 그라디언트나 블러 처리로 요소 간의 우선순위를 표현하는 딥 플랫 방식으로 변화하였습니다.

애플의 휴먼 인터페이스 가이드 페이지를 보면 애플의 현재 플랫 디자인이 형성되기까지의 변화를 살펴볼 수 있습니다. 

중간

 

2. 안드로이드 디자인 (구글 머티리얼 디자인)

안드로이드는 제조사가 상당히 많기 때문에 표준이 되는 디자인 가이드가 필요했습니다.

그래서 안드로이드 롤리팝 버전부터 구글 머터리얼 디자인 가이드가 안드로이드 UIUX 디자인의 표준이 되었습니다.

머티리얼 디자인은 물체의 질감 광원 효과, 그림자 효과를 통해 디자인의 깊이감을 더한 디자인입니다.

플레이트 디자인과 유사해 보이지만, 높이 두께의 높낮이나 그림자를 그림자 질감을 적용한다는 점이 다릅니다.

도식 간의 우선순위를 그림자를 통해 나타냄으로써, 정보 구조를 표현하기가 적합한 디자인 방식입니다. 

구글 머티리얼 디자인 가이드 페이지를 보면 최근 메터리얼 디자인 3으로 업데이트한 내용을 살펴볼 수 있습니다.

 

 

이상으로 iOS 디자인의 간략한 변천사와 안드로이드 디자인 가이드에 해당하는 구글 머티리얼 디자인에 대해 정리해보았습니다. 읽어주셔서 감사합니다.