ch04_3_모바일운영체제의 이해

학습목표
- UI구조에대하여알아보자
- 모바일운영체제에따른UI 컴포넌트을알아보자.
- 모바일환경에따른UI 디자인특징을알아보자.

---

UI 구조

• 웹사이트구조 : 가로형과세로형
  • 가로구조형: header, contents, footer area
  • 세로구조형: left:header, right_top:contents, right_bottom:footer

웹사이트 레이아웃

• 모바일사이트구조
  • Top : navigation
  • Bottom: tab_bar – 핵심메뉴, 기능 등 표시

---

모바일UI 디자인패턴

• 모바일애플리케이션이나 시스템을 설계하는 과정에서 자주발생하는 공통적인 문제의 해결책이며, 이때 사용 할 수 있는 최상의 가이드 또는 템플릿이다.
• 앱의 구조와명칭, 주의사항과 역할에 대해 운영체제별로 잘 파악하고 있어야한다.

UI Component란?

• 사용자를 위한 온스크린인터페이스On-screen Interface를 구성하는 기본단위,
• ✓즉 앱의 구성요소를 말한다

---

환경에 맞춘 모바일 UI 디자인

외부환경 : 동적 사용성 고려

• 스마트폰은 사용 환경이 수시로 변하므로 디자인, 색상, 타이포그래피 등을 구성할 때 동적 사용성을 고려
• 밝은 환경, 어두운 환경, 움직이는 환경에서도 잘 인식할 수 있도록 컬러 대비를 일정 이상 유지
• 버튼이나 타이포그래피는 움직이는 환경에서도 잘 사용할 수 있는 크기로 설정

예 : 넷플릭스의 다크 테마 : 사용시간대에 맞춘 모바일 기기 화면

---

iOS와 안드로이드의 차이

모바일 앱 개발 시장은 크게 iOS와 안드로이드 두 플랫폼으로 나뉘며, 각각의 플랫폼은 독특한 개발 환경과 언어, 디자인 가이드라인을 가지고 있으며, 이는 개발자가 앱을 개발할 때 고려해야 할 중요한 요소입니다.

iOS와 안드로이드의 UI 디자인은 플랫폼의 철학과 사용자 경험 목표에 따라 많은 차이가 있다.

iOS	안드로이드
Swift와 Objective-C 언어 -Xcode라는 통합 개발 환경(IDE)	Java와 Kotlin 언어를 사용 - Android Studio라는 IDE에서 개발
iOS는 Human Interface Guidelines	Material Design
앱은 일관된 디자인과 직관적인 사용자 경험을 제공	다양한 디바이스 호환성과 유연성을 강조
애플의 앱 스토어를 통해 배포(  엄격한 심사 과정)	구글 플레이 스토어( 다양한 마켓플레이스에 배포할 수 있으며, 심사 과정이 상대적으로 빠름)
	안드로이드는 다양한 디바이스와 호환되어야 하기 때문에, 개발 시 다양한 화면 크기와 해상도를 고려

1. 기본 구조 및 화면 구성

iOS	안드로이드
iOS는 계층적이고 일관된 방식으로 설계되어 있으며, 주로 Bars, Views, Controls로 구성된다.	안드로이드는 계층적 화면 구성을 통해 유연한 구조를 제공하며, 주로 최상위 뷰, 카테고리 뷰, 세부 뷰로 구분된다.
iOS 앱은 화면 상단에 탐색 바를 배치하여 사용자가 앱의 현재 위치를 파악하고 탐색할 수 있게 한다. 또한 탭 바를 사용하여 주요 기능에 빠르게 접근하도록 돕는다.	사용자가 앱을 실행하면 홈 화면이나 콘텐츠가 강조된 최상위 뷰를 먼저 보게 되며, 필요한 경우 카테고리 뷰를 통해 세부 뷰로 이동할 수 있다.

• iOS 앱의 구조 : iOS 앱의 기본 구조는 사용자 경험을 단순하고 직관적으로 제공하기 위해 계층적이고 일관된 방식으로 설계되어 있다. iOS의 UI Component는 크게 세가지로(Bars, Views, Controls) 분류 된다.
  • Bar : 사용자가 현재 앱의 어느 위치에 있는지 알려주고, 탐색 기능을 제공하며, 다른 화면으로 이동하거나 액션을 수행하는 컨트롤을 넣을 수 있다. 
  • Views : 텍스트, 그래픽, 애니메이션, 상호작용 요소와 같이 앱에 표시되는 기본 콘텐츠를 보여준다. 또한 여기에서 아이템을 스크롤하거나 추가, 삭제, 정렬을 할 수 있다.
  • Controls :  사용자가 특정 동작을 수행하도록 돕는 요소로, 버튼, 스위치, 텍스트 필드 등이 있다. 이러한 컨트롤은 사용자가 정보를 입력하거나 설정을 변경할 수 있게 해준다.
    

    

    
    
    
• 안드로이드 앱의 구조
  • 최상위 뷰 : 앱 시작 화면 레이아웃으로, 앱을 시작한 후 사용자가 보는 첫 화면, 콘텐츠 표시에 집중해야 한다.
  • 카테고리 뷰 : 정보계층구조가 있는 앱에서는 카테고리 뷰를 통해 세부 뷰로 이동
  • 세부 뷰 : 세부 뷰에서는 사용자가 데이터를 보거나 사용하고 직접 정의할 수 있다.

2. 탐색과 내비게이션 패턴 : 뒤로가기 버튼의 유무 안드로이드 앱의 구조

iOS	안드로이드
iOS는 고정된 내비게이션 구조를 제공하여 사용자 경험의 일관성을 높인다. 예를 들어, 화면 상단에 내비게이션 바를 배치하고, 하단의 탭 바를 통해 주요 기능에 접근할 수 있다.	안드로이드는 좀 더 자유로운 내비게이션 방식을 제공한다. 사용자는 햄버거 메뉴나 하단 내비게이션 바를 통해 앱 내 다양한 카테고리로 접근할 수 있으며, 안드로이드의 ‘뒤로 가기’ 버튼을 사용하여 쉽게 이전 화면으로 돌아갈 수 있다.
iOS에는 글로벌 내비게이션이 없으므로 화면 왼쪽 상단에 ‘뒤로 가기’ 버튼이 있는 기본 탐색 모음을 둔다.	안드로이드에는 하드웨어 탐색 바 또는 디지털 탐색 바를 이용해 ‘뒤로 가기’ 버튼으로 이전 화면이나 이전 단계로 돌아갈 수 있다
iOS의 휴먼 인터페이스 가이드라인에는 드로어와 비슷한 표준 탐색 컨트롤이 없는 대신 탭 바에 글로벌 내비게이션을 사용할 것을 권장한다	앱에서 자주 사용되는 탐색 패턴 중 하나는 탐색 창과 탭을 결합한 내비게이션 드로어다.
	안드로이드의 머티리얼 디자인에는 하단 내비게이션이라는 구성 요소가 있다.
항상 왼쪽 상단에 뒤로 가기 버튼을 배치하고 중앙에 현재 페이지 위치를 표시하며, 오른쪽에는 편집, 완료 등 제어 옵션 버튼이 배치	왼쪽 상단에 햄버거 메뉴 버튼을 배치하고 현재 페이지 위치를 왼쪽 정렬로 표시하며, 오른쪽에 검색, 즐겨찾기, 더 보기 등 제어 옵션 버튼을 하나 이상 배치

iOS 상단 세그먼트 컨트롤과 하단 탭 바

3. 표준 컨트롤의 차이 : 상호작용의 차이

• 가장 크게 다른 디자인 요소는 라디오 버튼, 체크 박스, 스위치 등의 기본 컨트롤.
• 컨트롤은 iOS와 안드로이드에서 유사하게 보이게 하기 위한 맞춤 구현 과정이 필요.

iOS	안드로이드
사용자가 특정 작업을 수행할 수 있도록 컨트롤(Controls) 요소를 제공하며, 버튼, 스위치, 텍스트 필드 등이 포함된다. 이러한 요소들은 사용자가 쉽게 탐색하고 상호작용할 수 있도록 설계되어 있다.	안드로이드는 다양한 상호작용 요소를 제공하며, 특히 머티리얼 디자인의 Floating Action Button (FAB)을 활용하여 주요 액션을 수행할 수 있도록 한다. 이는 특정 작업을 수행할 때 사용자가 앱의 어디에 있든 접근할 수 있게 해준다

 

• iOS (왼쪽): iOS의 날짜 선택기는 휠(picker) 스타일로 되어 있다. 사용자는 스크롤을 통해 날짜와 시간을 선택할 수 있으며, 시간 설정 시 손가락으로 간단히 스와이프하여 각 항목을 조정할 수 있다. 이 방식은 깔끔하고 직관적인 경험을 제공하며, iOS의 모던하고 간결한 디자인 철학을 반영한다.
• 안드로이드 (오른쪽): 안드로이드의 날짜 선택기는 캘린더 스타일로 되어 있어 한 번에 더 많은 날짜를 볼 수 있도록 한다. 사용자는 원하는 날짜를 탭하여 선택하며, 더 큰 화면에서의 사용이 용이하다. 또한, 연도와 월을 쉽게 전환할 수 있는 드롭다운 메뉴가 포함되어 있어 캘린더 탐색이 더 직관적이다. 이는 안드로이드가 사용자에게 더 많은 시각적 정보와 선택 옵션을 제공하는 데 중점을 두는 특징을 보여준다.

4. 버튼 스타일의 차이

• 안드로이드에서는 버튼 텍스트에 대문자를 사용하고, iOS에서는 대부분 첫 글자만 대문자를 사용한다.
• 안드로이드에는 일반 버튼과 구분되는 플로팅 액션 버튼이 있다