모바일 UI/UX 디자인의 종류

모바일 UI/UX 디자인의 종류

얼마 전까지 모바일 UI/UX 디자인의 종류는 모바일 운영체제에 의해 결정되었다. 안드로이드에서는 머티리얼 디자인, iOS에서는 플랫 디자인을 주로 사용했다. 전 세계 스마트폰 시장에서 모바일 운영체제의 사용 비중은 안드로이드가 약 88%, iOS가 약 11%이고, 모바일 UI/UX 디자인은 구글의 머티리얼 디자인과 애플의 플랫 디자인으로 양분되어 있다. 그런데 최근에는 플랫 디자인을 고수하던 iOS가 점차 머티리얼 디자인을 받아들이는 추세이다. 플랫 디자인과 머티리얼 디자인은 각각 장단점이 있으므로 유동적으로 사용하는 것이 바람직하다.

1. 스큐어모픽 디자인 Skeuomorphic Design
스큐어모픽 디자인은 현실의 객체를 디지털로 구현한 사실적이고 3차원적인 디자인이다. `skeuomorph`라는 용어는 그리스어 `skeuos`(컨테이너 또는 도구)와 `morph`(형태나 모양)에서 유래한 것으로, 익숙한 소재를 모방해 사용자의 친숙함과 편안함을 일으킨다는 의미이다. 문서 입력 프로그램에서 주로 볼 수 있는 저장 아이콘관 같이 과거에 친숙하게 사용하던 저장 매체인 플로피 디스크의 모양을 그대로 차용한 것으로, 스큐어모픽 디자인의 대표적인 사례이다.
초창기 애플에서는 스큐어모픽 디자인을 활용해 스마트폰에 현실감을 적용했고, 이에 따라 사용자는 터치스크린 환경에 빠르고 친숙하게 적응할 수 있었다. 실제로 애플에서는 섬세한 질감, 색감, 빛, 엠보싱 효과 등을 이용해 화려하고 사실적인 이미지를 구현했기 때문에 사용자가 잘 이해할 수 있었다. 하지만 다양한 기기에서 일관된 느낌을 주기 어렵고, 콘텐츠에 집중하는 데 효과적이지 않으며, 그래픽 요소의 과다 사용으로 인해 비용적인 측면에서도 효율적이지 않다는 단점이 있었다.

2. 플랫 디자인 Flat Design
플랫 디자인은 입체적이고 복잡한 그래픽 요소를 배제하고 단순한 구성과 컬러를 통해 사용자가 직관적으로 인식할 수 있게 하는 2차원적인 평면 방식 디자인이다. 레이아웃은 그리드를 기반으로 규칙적으로 구성한다. 사각형의 메트로 디자인으로 구성한 마이크로소프트 윈도 8의 시작 화면은 플랫 UI의 대표적인 사례이다. 애플도 iOS 7부터 GUI 디자인을 플랫 디자인으로 전환하기 시작했다. 
플랫 디자인의 장점은 단순한 면 분할, 대비가 높은 컬러, 입체적 요소를 배제한 아이콘, 가독성 높은 타이포그래피, 손쉬운 반응형 디자인 전환, 빠른 로딩 등이다. 기능에 중점을 둔 디자인이라고는 할 수 있다. 반면, 그림자와 깊이감이 부족해 직관적으로 형태를 알아보기 어려울 수 있다는 단점이 있다. 또한, 모든 요소가 평면적이기 때문에 어떤 요소가 중요하며 요소에 어떤 기능이 있는지 알기 어렵고, 클릭이 가능한 영역의 구분도 모호하다. 그리고 지나친 단순화로 인해 사용자가 중요한 기능을 놓치거나 서비스를 이해하지 못하게 될 수 있다.
그리드 기반의 콘텐츠 분할, 산세리프체, 유사한 컬러 등의 원칙은 플랫 디자인을 개성 있고 세련되게 만드는 요인이지만, 시간이 지날수록 익숙해지면서 점차 개성이 사라지고 유사한 디자인 스타일이 양산되었다. 이를 보완하기 위해 그라디언트나 블러 처리를 통해 요소 간의 우선순위를 표현하기 시작했는데, 이를 플랫 2.0 또는 딥 플랫이라고 한다. 하지만 최근의 iOS는 딥 플랫 방식보다는 머티리얼 디자인을 차용하고 있으며, iOS를 위한 머티리얼 디자인 가이드도 제공되고 있다.
- 애플의 휴먼 인터페이스 가이드 https://developer.apple.com/design

3. 머티리얼 디자인 Material Design
안드로이드를 운영체제로 사용하는 제조사가 많고 스마트폰의 종류도 다양하다. 그러므로 각 제조사의 아이덴티티를 유지하면서도 제조사별 커스텀이 가능하도록 하는 것이 중요했다. 이런 상황에 적합한 디자인 기준을 만들기 위해 안드로이드 롤리팝 버전부터 머티리얼 디자인이 등장했다. 머티리얼 디자인이란 물질의 질감이나 광원 효과, 그림자 효과 등을 통해 디자인 중심으로 개편되면서 발표한 것이다. 머티리얼 디자인은 플랫 디자인과 상당히 유사해 보이지만, 평면만 추구하는 플랫 디자인과 달리 종이 두께의 높낮이를 표면에 적용해 그림자를 만들고 질감을 적용한다. 
머티리얼 디자인은 3차원의 Z축을 이용해 표면에 높낮이를 구현한다. 요소 간의 우선순위를 그림자를 통해 나타내므로 정보 구조를 표현하기에 적합하다는 장점이 있다. 그 결과 사용자는 디자이너의 의도대로 서비스를 이용할 수 있게 된다. 머티리얼 디자인은 플랫 디자인의 장점인 단순함을 유지하면서 스큐어모피즘의 시각적 다양성을 추가해 사용성을 더 끌어올린다.
- 안드로이드의 머티리얼 디자인 가이드 https://material.io

iOS와 안드로이드의 차이 

iOS와 안드로이드 플랫폼은 네이티브 앱의 모습뿐 아니라 구조와 흐름에도 차이가 있다. 따라서 최상의 사용자 환경을 제공하려면 이러한 차이점을 염두에 두고 디자인해야 한다. iOS와 안드로이드용 모바일 애플리케이션에는 운영체제별로 특별한 기능이 있다. 각 운영체제의 가이드라인에 따라 페이지 컨트롤, 탭 표시줄, 세그먼트 컨트롤, 표 보기, 컬렉션 보기, 분할 보기 등의 플랫폼 표준 탐색 컨트롤을 가능할 때마다 사용하는 것이 좋다. 사용자는 이러한 컨트롤이 일반적으로 작동하는 방식을 잘 알고 있다. 그러므로 표준 컨트롤을 사용하면 사용자가 앱 사용법을 직관적으로 알 수 있다. 

1. 구조적 차이 

- iOS 앱의 구조
iOS 환경에서 앱을 제작하면, UI 키트에 정의된 UI 요소를 적어도 몇 개 이상은 사용하게 된다. 이런 기본 컴포넌트의 이름, 역할, 기능 등을 알면 앱 UI를 디자인할 때 올바른 결정을 할 수 있다. UI 키트의 UI 요소는 바, 뷰, 컨트롤의 세 가지 카테고리로 분류할 수 있다.
*바 Bar 사용자가 현재 앱의 어느 위치에 있는지 알려주고, 탐색 기능을 제공하며, 다른 화면으로 이동하거나 액션을 수행하는 컨트롤을 넣을 수 있다. 
*뷰 views 텍스트, 그래픽, 애니메이션, 상호작용 요소와 같이 앱에 표시되는 기본 콘텐츠를 보여준다. 또한, 여기에서 아이템을 스크롤 하거나 추가, 삭제, 정렬할 수 있다.
*컨트롤 Controls 버튼, 스위치, 텍스트 필드, 진행과 같은 컨트롤 및 액션을 수행하거나 정보를 표시한다. 

-안드로이드 앱의 구조
안드로이드는 머티리얼 디자인을 바탕으로 플랫폼과 장치에 걸쳐 최상위 뷰와 세부 뷰로 구성된다. 최상위 뷰는 앱이 지원하는 다양한 뷰로 구성되며, 각 뷰의 모양은 같은 데이터를 표현하는 방법과 앱의 기능에 맞게 구현된다. 계층 구조가 복잡해지고 이동 경로가 깊어지면 카테고리 뷰를 이용해 최상위 뷰와 세부 뷰를 연결한다. 카테고리 뷰가 특정 데이터를 최상위 뷰와 세부 뷰로 연결하는 구조이며, 세부 뷰에서는 데이터를 편집해 보여준다.
*최상위 뷰 앱 시작 화면 레이아웃으로, 앱을 시작한 후 사용자가 보는 첫 화면이다. 최상위 뷰에서는 콘텐츠 표시에 집중해야 하며, 이동할 수 있는 화면이 아니라 콘텐츠를 배치하는 것이 좋다.
*카테고리 뷰 정보 계층 구조가 있는 앱에서는 카테고리 뷰를 통해 세부 뷰로 이동하게 된다. 탭을 이용해 카테고리를 선택하고 데이터를 표현할 수 있도록 해야 하며, 카테고리가 유사하거나 개수가 적을 때는 탭을 이용하면 좋다.
*세부 뷰 세부 뷰에서는 사용자가 데이터를 보거나 사용하고 직접 정의할 수 있다. 여러 항목을 차례대로 볼 수 있도록 이동 화면을 제공하고, 특히 뷰 스와이프를 사용하도록 유도하는 것이 좋다.

2. 탐색 패턴의 차이
iOS에는 글로벌 내비게이션이 없으므로 기본 앱 디자인에서 '뒤로 가기' 버튼으로 이동하는 것이 불가능하며, 화면 왼쪽 위에 '뒤로 가기' 버튼이 있는 기본 탐색 모음을 둔다. 이와 달리 안드로이드에는 하드웨어 탐색 바 또는 디지털 탐색 바가 있고, 이를 이용해 '뒤로 가기' 버튼으로 이전 화면이나 이전 단계로 돌아갈 수 있다. 이 방법은 거의 모든 안드로이드 앱에서 사용된다.
iOS와 안드로이드는 앱에서의 탐색 패턴 역시 다르다. 안드로이드 앱에서 자주 사용되는 탐색 패턴 중 하나는 탐색 창과 탭을 결합한 내비게이션 드로어 Navigation Drawer다.
드로어는 햄버거 메뉴 아이콘을 탭 하면 왼쪽이나 오른쪽에서 서랍처럼 열리는 메뉴이다. 탭은 화면 제목 바로 아래에 위치하며, 사용자 보기, 데이터 세트, 앱의 기능적 측면 간에 전환할 수 있도록 상위 수준에서 콘텐츠 구성을 할 수 있다.
안드로이드의 머티리얼 디자인에는 하단 내비게이션이라는 구성 요소가 있는데, 이는 머티리얼 디자인 기본 앱에서도 매우 중요하다. 하단 내비게이션을 사용하면 한 번의 탭으로 '최상위 보기'를 쉽게 탐색하고 전환할 수 있다. 머티리얼 디자인 가이드에서는 혼동을 피하고자 하단 내비게이션과 탭을 동시에 배치하지 않을 것을 권장한다.
iOS의 휴먼 인터페이스 가이드라인에는 드로어와 비슷한 표준 탐색 컨트롤이 없는 대신 탭 바에 글로벌 내비게이션을 사용할 것을 권장한다. 탭 바는 앱 화면 하단에 표시되며, 주요 섹션 간의 신속한 전환 기능을 제공한다. 

3. 표준 컨트롤의 차이
서로 다른 플랫폼에서도 앱의 각 요소가 같이 보이도록 하려면 최상의 모바일 앱 디자인을 위해 좀 더 노력해야 한다. 사실 가장 크게 다른 디자인 요소는 라디오 버튼, 체크 박스, 스위치 등의 기본 컨트롤이라고도 할 수 있다. 따라서 컨트롤은 iOS와 안드로이드에서 유사하게 보이게 하기 위한 맞춤 구현 과정이 필요하다.

4. 버튼 스타일의 차이
안드로이드에서는 버튼 텍스트에 대문자를 사용하고, iOS에서는 대부분 첫 글자만 대문자를 사용한다. 안드로이드에는 일반 버튼과 구분되는 플로팅 액션 버튼이 있는데, 이는 응용프로그램의 기본 동작을 나타낸다.

 

2023.04.09 - [UXUI 디자인] - 모바일 디자인 가이드 요소 1

모바일 디자인 가이드 요소 1

2023.04.08 - [UXUI 디자인] - 프로토타이핑

프로토타이핑