운영체제(OS) 플랫폼 별 UI 패턴 파악

운영체제(OS) 플랫폼 별 UI 패턴 파악

운영체제(OS) 플랫폼 별 UI 패턴을 분석하여 사용자에게 편의성이 높은 내비게이션을 제공할 수 있다.

운영체제(OS)별 UI 요소와 기능 이해

특정한 목적을 가지고 모바일 앱을 이용하는 사용자의 입장에서 화면의 레이아웃 구성은 사용자가 원하는 작업을 수행하기 위해 어떤 기능을 선택하고 결정하게 하는 중요한 부분이다. 사용자는 내비게이션, 탭, 메뉴, 툴 바, 액션 바, 각종 버튼 등의 UI 구성 요소를 통해 앱을 경험하기 때문에 사용자의 작업을 효율적으로 지원할 수 있어야 한다. 따라서 대표적인 운영체제(OS)별 UI 요소와 기능에 대한 이해를 통하여 디자인을 진행하여야 한다.

1. iOS UI 필수 요소와 기능

iOS UI 요소는 크게 상태 바, 내비게이션 바, 툴 바, 탭 바, 스코프 바 등과 같은 바(bars) 종류와 콘텐츠 뷰, 테이블 뷰, 임시 뷰 등의 뷰(views), 그리고 시스템의 동작을 제어할 수 있는 통제 수단인 콘트롤(controls) 요소의 세 가지 종류가 있다.

(1) 바(bar)

iOS에 존재하는 여러 가지 바 종류는 다양하며, 개발하고자 하는 앱에 적용할 경우 그 기능을 사용자가 제대로 이해하고 사용할 수 있도록 제공해야 한다.

• 상태 바(status bars) :
  현재 네트워크 접속 상태, 배터리 잔량 등과 같은 기기의 현재 환경에 대한 중요한 정보를 표시한다.
• 내비게이션 바(navigation bars ):
  iOS에서 내비게이션은 상태 바의 바로 아래에 위치하며 일반적으로 현재 뷰의 제 목과 내용에 관한 액션을 콘트롤하거나 이동하게 하는 역할을 한다.
• 툴 바(toolbars) :
  화면 맨 아래에 위치하며, 사용자가 현재 상황에서 수행할 수 있는 액션 수행 버튼 을 제공한다.
• 탭 바(tab bars) :
  응용 프로그램의 특정 정보를 전달하는 역할을 하며, 앱의 전체 기능과 관계있는 서로 다른 하위 작업을 제공할 때 사용한다. 화면의 하단에 위치하고, 애플리케이 션의 서로 다른 뷰나 모드 사이를 전환할 수 있게 하며 사용자는 애플리케이션의 어떤 위치에서도 이러한 모드에 접근할 수 있어야 한다.
• 검색 바(search bars) :
  내비게이션 아래에 위치하며, 사용자의 텍스트를 사용하거나 북마크와 같은 버튼을 입력할 수 있다. 검색 창 위에 프롬프트(prompt)라고 하는 검색 창에 대한 설명이 나 소개를 입력하는 것도 가능하다.
• 스코프 바(scope bars :
  검색과 함께 사용되며, 사용자가 검색의 범위를 정하는 데 도움이 된다. 또 검색 창 아래에 나타나게 되며 검색 결과를 개선하기 위해 사용된다.

(2) 뷰(views)

텍스트, 그래픽, 애니메이션 및 상호 작용 요소와 같이 앱에 표시되는 기본 콘텐츠를 보여주며, 사용자가 아이템을 스크롤링 하거나 추가, 삭제 및 정렬과 같은 동작을 할 수 있다.

(3) 콘트롤(controls)

콘트롤 요소는 사용자 행동과 정보를 표시하는 기능뿐만 아니라, 정보를 통제할 수 있는 수단을 제공하는 것으로 버튼, 스위치, 텍스트 필드, 진행 상황 표시기 등이 있다.

2. 안드로이드 UI 필수 요소와 기능

(1) 내비게이션(navigation)

UI 요소 중 내비게이션은 iOS와 안드로이드 기기에서 가장 뚜렷하게 차이를 보이는 부분이다. iOS에서는 내비게이션을 화면 상단 상태 바의 바로 아래에 배치하는 반면에, 안드로이드에서는 기기의 맨 하단 내비게이션 바에 이전, 홈, 최근 앱 콘트롤이 고정되어 있다.

(2) 메인 액션 바(main action bars)

메인 액션 바는 앱의 상단에 위치하며, 계층과 뷰를 탐색하고 중요한 작업을 다루는 요소를 담고 있는 부분이다. 중요한 동작을 표시하여 사용자가 수행하고자 하는 작업을 원활하게 할 수 있게 해주며, 일관된 탐색과 뷰 전환을 지원한다.

(3) 콘텐츠 영역(contents area)

사용자가 선택한 앱의 콘텐츠를 보여주는 영역을 말한다.

(4) 분할 액션 바

분할 액션 바는 액션들을 추가 바에 배치하는 방법으로, 메인 액션 바 아래나 화면 하단에 배치된다.

(5) 고정 탭

현재 뷰에서 다른 뷰를 보려면 탭을 터치하거나 화면을 좌우로 스와이프 하면 화면이 변경된다.

OS와 Android의 UX/UI 차이점

1. 내비게이션과 탭 차이

iOS와 안드로이드 앱의 UI 디자인에서 가장 눈에 띄는 차이점은 내비게이션의 위치가 확연히 다르다는 점이다. iOS에서는 내비게이션 영역이 상단에 있지만, 안드로이드의 경우에는 뒤로 가기, 홈, 다중작업 버튼이 있는 하단 바를 내비게이션 바라고 부르며 iOS의 내비게이션 바라는 용어 대신에, 액션 바라는 명칭을 사용한다. 또 안드로이드에서는 액션 바를 위쪽에 배치하는데 그 이유는 안드로이드 화면 하단 내비게이션 바가 항상 고정되어 있기 때문에 탭을 하단에 중복해서 배치할 경우 사용자의 조작 실수가 발생할 수 있기 때문이다. 또 안드로이드 사용자들은 작업 도중 이전 작업으로 되돌아가고자 할 때, 화면 하 단의 뒤로 가기 버튼을 누르면 되기 때문에 하단 영역에 탭을 배치하지 않는다.

2. 검색 바(search bars)

iOS에서는 내비게이션 바 바로 아래에 검색 바를 제공하지만, 안드로이드에서는 검색 버튼을 액션 바 내에 포함해 감색 기능을 제공한다.

3. 목록보기 메뉴(drop down menu)

iOS의 경우, 화면 전체에 드롭다운 목록을 표시하는 UI 디자인을 사용하지만, 안드로이드에서는 드롭다운 목록이 팝업(pop up) 형식으로 화면의 일정 영역에만 표시되는 UI 디자인을 적용한다. 또 iOS 앱에서는 사용자가 목록 표시 메뉴를 가릴 수 있도록 취소 버튼을 제공하지만, 안드로이드 앱에서는 하단 내비게이션의 되돌아가기 버튼을 사용할 수 있으므로 화면에는 취소 버튼을 별도로 제공하지 않는다.

4. 옵션과 폰트 크기

iOS 앱에서는 사용자에게 여러 가지 선택 옵션을 제공하여 사용자의 직접 선택을 유도하는 UI 디자인 방식을 사용한다. 하지만, 안드로이드 앱에서는 드롭다운 목록을 제공하는 UI 디자인 방식을 사용한다. 또 폰트 크기에서도 운영체제별 차이가 나타나는데, iOS에서 제공하는 폰트 크기보다 안드로이드 앱에서의 폰트 크기가 훨씬 큰 것을 알 수 있다.

5. 운영체제별 UI 디자인 지침

(1) iOS 휴먼 인터페이스 지침(human interface guidelines)

iOS가 다른 플랫폼과 차별화하고 있는 디자인의 테마에는 디자인 요소의 명료성, 사용자와의 인터랙션을 증대할 수 있으며 콘텐츠 이용 증대를 위한 밝은 인터페이스, 사용자의 콘텐츠 이용 맥락을 고려하여 깊이감과 실제감을 제공하는 화면전환(transition)방식을 들 수 있다

(2) 안드로이드 머터리얼 디자인(material design)

구글 안드로이드의 ‘머티리얼 디자인(material design)’은 안드로이드 앱 개발사를 위해 구글이 명시해놓은 디자인 가이드라인을 말한다. 안드로이드가 다른 플랫폼과 차별화하는 머터리얼 디자인의 특징은 종이와 잉크의 질감을 느낄 수 있는 새로운 디자인 개념으로, 그 핵심 콘셉트는 대담하고 역동적인 느낌을 통해 콘텐츠 몰입도 향상 및 사용자 참여 확대를 목표로 한다. 이에 따라, 디자인에 입체적 좌표를 적용하여 깊이감을 더하고 이러한 깊이 감을 통해 정보 사이의 계층적 구조와 역동성을 만들어낸다.

6. 운영체제별 UI 패턴 분석

• 운영체제별로 상단과 하단의 바에 고유의 내비게이션을 표현한다.
• 운영체제별로 UI 구조가 다르기 때문에 같은 디자인을 적용해서는 안 된다
• 운영체제별로 세부적이고 구체적인 디자인 지침이 필요하다.
• 공통 요소, 차이 요소 등을 상세히 분석하여 효과적 UI 디자인을 수행하여야 한다.