iOS 안드로이드 UI 디자인 패턴의 차이

iOS와 안드로이드의 UI 디자인 패턴의 차이에 대해 알아보겠습니다. 이러한 모바일 UI 디자인 패턴의 차이를 인식하고 포괄할 수 있어야 두 운영체제의 기기에서 모두 사용하기 좋은 UIUX를 디자인할 수 있습니다.

 

0. 모바일 UI 디자인 패턴이란?

 

모바일 UI 디자인은 곧 모바일 UI 패턴 디자인이라고 할 수 있습니다.

 

모바일 UI 디자인 패턴은 모바일 앱이나 시스템을 설계할 때 자주 발생하는 문제에 대한 해결책·가이드·템플릿이라고 할 수 있습니다.

 

이러한 모바일 UI 패턴은 기기의 운영체제에 따라 애플, 구글에서 제공하는 디자인 가이드에 따릅니다.

 

따라서 이번 글에서는 다음과 같은 내용을 다뤄보도록 하겠습니다.

먼저 각 운영체제와는 별도로, 모바일 기기를 사용하는 환경의 특징에 대해서도 잠시 알아보겠습니다.

 

1. 기기 환경에 따른 디자인

 

UI 디자인은 운영 체제의 특징뿐 아니라, 기기 자체의 특징도 고려해야 합니다.

스마트폰의 가장 큰 특징은 이동성입니다. 이동하면서 사용하는 스마트폰은 사용 환경이 수시로 변합니다.

 
따라서 디자인, 색상, 타이포 그래픽을 구성할 때도 이와 같은 기기 사용 환경을 고려해야 합니다.

 

기기에 따라 자체적으로 시간대별 밝기 등을 조절하기도 하지만, 앱이나 서비스 자체에서 제공할 수도 있습니다.

 

넷플릭스 웹이나 앱을 보면, 사용자가 주로 저녁 시간대에 사용하기 때문에 어두운 테마를 사용하는 것을 알 수 있습니다.

 

또한 버튼이나 타이포 그래피도 움직이는 환경에서 잘 누르거나 읽을 수 있도록 제작하여야 합니다. 이 밖에 터치 영역이나 제스처 등 모바일 콘텐츠를 제작할 때 고려해야할 점을 정리한 글도 참고해보세요.

2. 운영체제별 구조의 차이에 따른 디자인

iOS와 안드로이드 운영체제는 그 구조와 흐름에도 차이가 있습니다.

각 운영 체제의 가이드라인에 따라서 페이지 컨트롤, 탭 표시 줄, 세그먼트, 컨트롤, 표보기, 컬렉션 보기, 분할 보기 등 기본으로 제공되는 것들의 규칙이 있습니다.

 

이러한 가이드라인을 참고해야 각 운영체제의 UX에 익숙한 사용자가 위화감 없이 사용할 수 있습니다. 각 운영체제 디자인 가이드의 특징은 iOS와 안드로이드의 디자인 가이드에 대해 설명한 글을 참고하시면 되겠습니다.

 

iOS의 UI 요소들

 

먼저 iOS UI의 요소는 바, 뷰, 컨트롤 3가지로 분류할 수 있습니다.

바는 현재 어느 위치에 있는지 알려주고 탐색을 제공하며, 다른 화면으로 이동하거나 액션을 수행할 수 있습니다. 주로 상단에 위치합니다. 

 

뷰는 텍스트 그래픽 애니메이션 상호작용 요소와 같이 앱에 표시되는 기본 콘텐츠를 보여줍니다. 콘텐츠가 보이는 곳이라고 할 수 있겠습니다. 그리고 아이템을 스크롤 하거나 추가 삭제 정렬 등을 할 수 있습니다. 

 

컨트롤은 버튼 스위치 텍스트 필드 진행 등의 컨트롤이나 액션을 수행하거나 정보를 표시하는 것입니다.

 

안드로이드의 UI 요소들

 

안드로이드 앱은 최상위 뷰, 카테고리 뷰, 세부 뷰 이렇게 3가지로 나뉩니다.

최상의 뷰는 시작 화면입니다. 카테고리 뷰는 최상위 뷰에서 세부 뷰로 연결하는 연결고리라고 이해하면 되겠습니다.

 

콘텐츠의 계층 구조가 복잡해졌을 때, 최상위 뷰와 세부 뷰 사이를 카테고리 뷰를 이용해서 빠르게 이동할 수 있습니다. (카테고리가 적을 때는 탭을 이용할 수 있습니다.)

 

세부 뷰는 사용자가 세부적인 데이터를 보거나 사용하는 곳입니다.

 

이와 같이 두 운영 체제는 구조 자체가 다르고 UI 요소의 명칭이나 가이드 라인도 다릅니다.

iOS가 UI 요소를 바, 뷰, 컨트롤로 구분한다면 안드로이드는 컴포넌트와 패턴으로 구분합니다.

 

※ UI 컴포넌트란, 화면을 구성하는 기본 단위 구성 요소를 말합니다. 컴포넌트 단위로 묶여져 있기 때문에 수정 또는 유지 보수, 기능을 확장할 때도 용이합니다.

3. iOS와 안드로이드 디자인 패턴의 차이

iOS와 안드로이드는 네비게이션 탐색 패턴, 표준 컨트롤도 각각 다릅니다.

 

여담이지만 저는 이 차이가 결정적으로 아이폰을 쓰는 사람은 아이폰만 쓰고, 안드로이드 폰을 쓰는 사람은 안드로이드 폰만 쓰게 된다고 생각합니다.

 

뒤로 가기 방식의 차이

 

iOS는 초창기부터 뒤로 가기 버튼이 따로 없고, 액정 왼쪽면을 책장 넘기듯이 스와이프에해서 뒤로 갈 수 있습니다.

안드로이드는 초창기에 뒤로 가기 버튼이 있었지만, 현재는 iOS와 안드로이드 모두 최신 폰에는 어떠한 버튼도 없도록 변화하면서 현재는 액정 오른쪽 아래부분을 스와이프하는 방식입니다.

 

탐색 바의 차이

 

 iOS는 보통 화면 왼쪽 상단에 뒤로 가기 표시가 있고, 안드로이드는 화면 밑에 세모, 동그라미, 네모가 표시되는 탐색바를 사용합니다.

 

 

안드로이드에만 있는 요소

 

1. 네비게이션 드로어

안드로이드 앱에서는 네비게이션 드로어라는 것을 사용합니다. 햄버거 메뉴 아이콘을 탭하면 서랍처럼 열리는 메뉴입니다.

 

2. 하단 네비게이션

위에서 얘기한 세모, 동그라미, 네모로 구성된 탐색바와는 다른 요소입니다.

하단 내비게이션을 이용해서 한 번에 최상위 보기 홈으로 갈 수 있고, 메뉴 각 카테고리를 전환할 수 있습니다. 머티리얼 디자인 가이드에 따르면, 하단 네비게이션과 탐색바는 동시에 배치하지 않는 것을 권장한다고 합니다. 

iOS는 네비게이션 드로어가 없는 대신, 탭 바에서 글로벌 네비게이션을 권장합니다. 화면 하단에 있고, 주요 섹션을 전환할 수 있습니다.

 

 

표준 컨트롤의 차이

ios와 안드로이드 운영체제의 디자인에서 가장 다른 요소는 라디오 버튼, 체크박스, 스위치 등의 기본 컨트롤 요소입니다.

따라서 이와 같은 차이를 포괄할 수 있는 디자인이 필요합니다.

 

 

기타 차이점

날짜를 선택할 때도 아이폰은 릴 방식으로 돌리는 방식이지만, 안드로이드는 달력과 같은 모양입니다. 

버튼 스타일에도 차이가 있는데, 안드로이드는 대부분의 버튼에 대문자를 쓰고 iOS는 첫 글자만 대문자를 사용합니다.

ios와 안드로이드 앱의 디자인을 통일하려면 이와 같은 차이점을 파악하고 디자인해야 합니다.

그러나 운영 체제별로 디자인하는 것은 시간과 비용이 많이 들어가기 때문에, 최근에는 운영체제와 상관없이 동일하게 디자인하는 경향이 있습니다. 대표적으로 카카오톡과 인스타그램입니다.

 

 

4. 결론

 

정리하다가 생각해보니, 저도 디자인을 할 때 은연 중에 아이폰을 기준으로 디자인하고 있었네요. 아이폰만 쓰기 때문에 치우친 디자인을 생각하게 되었나 봅니다.

 

결론은 두 운영체제의 디자인과 UX를 해치지 않는 포괄적인 디자인이 있어야 되겠고, 그를 위해서 디자인 트렌드와 최신 앱들의 디자인 레퍼런스를 많이 참고하는 것이 좋겠습니다.

 

 

이상으로 모바일 기기의 환경적인 특성, iOS와 안드로이드의 UI 디자인 패턴의 차이에 대해 정리해보았습니다. 읽어주셔서 감사합니다.